新增数组方法(详解)

 新增数组方法

indexOf方法

查找某个元素在数组中第一次出现的位置

arr.indexOf(元素,[开始查找的起始下标]);
// 参数1：将要查找的元素
// 参数2：可选项。从哪个下标开始往后查找
// 返回值：如果找到了，就返回这个元素在数组中的下标，如果没有找到，就返回-1
var arr = [1,2,3,4,5,1,2,3];
var brr=arr.indexOf(3)//需定义变量接受数据
console.log(brr)//2 这个2就是3第一次出现的下标位置
​
var arr = [1,2,3,4,5,1,2,3];
console.log(arr.indexOf(2，5))//6    
//因为后面定义了从下标5之后查找2出现的下标，所以会忽略前面出现的2，查找下标5之后2第一次出现的下标

 

forEach方法

用于遍历数组

arr.forEach(function(值, 下标, 当前数组){
    // 代码段
});
// 在这个方法中需要传入一个函数参数，这个函数的参数说明如下：
    // 参数1：数组遍历出来的每个值
    // 参数2：可选项。数组遍历出来的每个值对应的下标
    // 参数3：可选项。被遍历的当前数组
var arr = [1, 2, 3, 4, 5];
arr.forEach(function(v, i, a){
//v代表value(数值)  i代表index(下标)    a代表array(数组)
console.log(v + '|' + i + '|' + (a === arr));
});
// 输出为：
// 1|0|true
// 2|1|true
// 3|2|true
// 4|3|true
// 5|4|true

注意：这个方法没有返回值，返回值为undefined，不会改变原来数组的值。

 

map方法

遍历数组，并将每个元素传入回掉函数中处理后，组成新的数组并返回

arr.map(function(值，下标，当前数组){
    // 对v进行处理并返回处理后的每个v组成的数组
    //需定义变量接受数据
});
//例1
var arr = [1, 2, 3, 4, 5];
var arr2 = arr.map(fvunctvion(v){
    return v*10//遍历数组，将每一个值*10，并返回
});
console.log(arr2); //[10, 20, 30, 40, 50]
​
//例2
var arr = [1, 2, 3, 4];
var brr = arr.map(function(v){
    if (v == 4) {//遍历数组，判断数值是否等于4
        return v * 2;//不等于就返回underfind，有则将4*2再返回
    }
})
console.log(brr)//[undefined, undefined, undefined, 8]

注意：这个方法主要用于以同样的规则处理数组中的每个值，并组成新的数组返回

与forEach不同，注意区分

 

filter方法

遍历数组，根据过滤条件，筛选出数组中满足条件的元素，组成新数组并返回

arr.filter(function(值, 下标, 当前数组){
    // 筛选条件
    //需定义变量接受数据
});
​
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var brr = arr.filter(function(v, i){//遍历数组
    return i % 3 === 0 || v >= 8;//判断下标i取余3是否等于0或者是数值i大于等于8的数值，有则返回
}); 
console.log(brr); //[1, 4, 7, 8, 9, 10]

注意：使用方法和功能跟map方法很像，只是运行规则不一样。map方法中的函数，用于返回新的元素，而filter方法中的函数，根据返回true或false来筛选元素

 

reduce方法

归并，其中调用回掉函数，回掉函数中有两个参数，第一个参数是上一次操作的返回值，第二个参数是从第二个元素开始到最后一个元素，该回调函数的返回值为累积结果，并且此返回值在下一次调用该回调函数时作为参数提供

arr.reduce(function(prev,next){
    //需定义变量接受数据
    // 逻辑代码
});
//array: 必传，一个数组对象 
//callback: 必传，对于数组中的每个元素，reduce方法都会调用一次callback(回调)函数 
//value: 可选，如果指定value，它将作为初始值来启动积累。第一次调用callback函数会将此值作为参数
​
//例1
var arr = [1, 2, 3, 4, 5, 6, 7]
var sum = arr.reduce(function(prev, next){
        // prev 表示上一次操作返回的结果，第一次是第一个数
        // next 表示是下一个数，第一次是第二个数
        return prev + next;
})
console.log(sum);//28
​
//例2
var arr = [1,2,3,4,5,6];
document.write("prev------next<br>");
var res = arr.reduce(function(prev,next){
    document.write(prev + "------" + next + "<br>");
    
    return prev + next; // 将每一次操作的结果返回给下一次的prev（数组求和）
});
console.log(res)//输出结果
//prev------next
//1------2
//3------3
//6------4
//10------5
//15------6