js数组的forEach与map方法

数组对象的作用是：使用单独的变量名来存储一系列的值。

 

我们今天来说一下数组的forEach与map方法

• forEach 用于调用数组的每个元素
• map 返回一个与原数组长度相等的新数组 

1、forEach() 

 

forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。

注意: forEach() 对于空数组是不会执行回调函数的

参数：function(currentValue, index, arr)

• currentValue 　　必需。当前元素
• index　　　　　　可选。当前元素的索引值。
• arr　　　　　　　可选。当前元素所属的数组对象。 

 

1）使用forEach遍历数组

var arr=[1,2,3,4,5,6,7];
arr.forEach(function(a,b,c){
     console.log(a,b,c);
})

打印结果：如下

 

 2）使用forEach可以跳过空元素

var arr = [1, 2, 3, 5, , 6, 7, 8, 9];
arr.forEach(function(item, index) {
    console.log(item, index);
})

打印结果，如下

3）使用forEach复制数组的方法 (全部复制，不跳过空元素，)

var arr = [2, 4, 6, , 8, 3, 2];
var arr1 = [];
arr.forEach(function(item, index) {
    arr1[index] = item;
})
console.log(arr1);

打印结果：如下

 

2、map()

 

map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。

map() 方法按照原始数组元素顺序依次处理元素。

注意： map() 不会对空数组进行检测。

注意： map() 不会改变原始数组。

 

参数：function(currentValue, index, arr)

• currentValue 　　必需。当前元素
• index　　　　     可选。当前元素的索引值。
• arr　　　　         可选。当前元素所属的数组对象。 

1）遍历数组 ----- map会返回一个与原数组长度相等的新数组

var arr = [3, 5, 7, 9, , 1, 2, 4];
var arr2 = arr.map(function(item, index, arr) {
    console.log(item, index, arr);
});

打印结果：如下

2）在map中使用return 就是在对应的下标中添加对应的数据

例1：

var arr = [3, 5, 7, 9, , 1, 2, 4];
var arr2 = arr.map(function(item, index, arr) {
    // 在map中使用return 就是在对应的下标中添加对应的数据
    return "a";
});
console.log(arr2);

打印结果：如下

例2：

var arr = [3, 5, 7, 9, , 1, 2, 4];
var arr3 = arr.map(function(item, index, arr) {
    // 在map中使用return 就是在对应的下标中添加对应的数据
    return item + 10;
});
console.log(arr3);

打印结果：如下

3、forEach() 和 map() 两者区别 

 

 1) forEach()返回值是undefined，不可以链式调用。

var arr = [1, 2, 3, 4, 5, , 7, 8, 9];
var arr1 = arr.forEach(function(item, index, arr) {
    // 使用return无效
    return arr1; //undefined
});
console.log(arr1);

打印结果：如下

 

2) map()返回一个新数组，原数组不会改变。

var arr = [1, 3, 5, 7, 2, 4, 6, 8];
var arr1 = arr.map(function(item) {
    if (item > 4) {
        return item;
    }
});
console.log(arr);
console.log(arr1);

打印结果：如下