js中forEach、map、reduce、filter函数

╰半橙微兮° 2021-06-22 15:38 547阅读 0赞

**1、forEach函数：**

forEach是ES5扩展的语法，可以使用他遍历数组、对象，但是在forEach中不支持continue、break关键字，forEach中可以使用return来跳出当次循环，相当于continue。

1）forEach的语法：function(currentValue, index, arr)，三个参数：

*  currentValue：当前值；
 *  index：下标，从0开始；【可选】
 *  arr：整个数组；【可选】

2）forEach遍历数组：

var arr0 = [1,2,3];
    arr0.forEach((v,i,arr)=> {
      if (i === 2){
        //break; 编译报错
        //continue; 编译报错
        return;
      }
      console.log(v);
    });
    
    输出：1 2

上面例子使用了箭头函数，是ES6的新语法。等价于下面：

arr0.forEach(function(v,i,arr){
      if (i === 2){
        return;
      }
      console.log(v);
    });

3）遍历数组，并且修改其中元素：

var arr0 = [1,2,3];
    arr0.forEach((v,i,arr) => {
      arr[i] = v+100;
    });
    console.log("origin array:"+arr0);//101 102 103

**注意**：forEach不能直接遍历对象，在编译时会报错。

参考：[https://www.runoob.com/jsref/jsref-foreach.html][https_www.runoob.com_jsref_jsref-foreach.html]

**2、map函数：**

和forEach类似，map函数式ES6新语法。使用上和forEach一样。二者共同点：

*  函数都支持3个参数：v当前值，i当前索引，arr真个数组；
 *  匿名函数中的this都是指Window；
 *  只能遍历数组；
 *  不支持break、continue；

不同点：

*  forEach中return相当于continue，map中的return是将每次迭代遍历时处理后的元素添加到map返回值中；
 *  forEach没有返回值，map有返回值，返回值是一个新数组，新数组中的每个元素为每次map迭代时return的值。

var arr2 = [2,3,4];
    var val = arr2.map((v,i,arr) => {
      arr[i] = v+100;
      return v+1;
    });
    console.log(val);
    console.log(arr2);
    
    //输出：
    [ 3, 4, 5 ]
    [ 102, 103, 104 ]

参考：[https://www.runoob.com/jsref/jsref-map.html][https_www.runoob.com_jsref_jsref-map.html]

[https://juejin.im/post/5c999386e51d456d246deea1][https_juejin.im_post_5c999386e51d456d246deea1]

**3、filter函数：**

和forEach、map类似，filter函数式ES6新语法。使用上和forEach、map一样。共同点：

*  函数都支持3个参数：v当前值，i当前索引，arr真个数组；
 *  匿名函数中的this都是指Window；
 *  只能遍历数组；
 *  不支持break、continue；

不同点：

*  forEach中return相当于continue，map中的return是将每次迭代遍历时处理后的元素添加到map返回值中，filter中的return是用来判断本次迭代是否将元素放到返回之中；
 *  forEach没有返回值，map有返回值，返回值是一个新数组，新数组中的每个元素为每次map迭代时return的值；filter也有返回值，返回值是一个新数组，新数组中的每个元素为每次filter迭代时return为true的值。

参考：[https://juejin.im/post/5cdbb14ef265da036902bb22][https_juejin.im_post_5cdbb14ef265da036902bb22]

[https://www.runoob.com/jsref/jsref-filter.html][https_www.runoob.com_jsref_jsref-filter.html]

**4、reduce函数：**

和forEach、map类似，reduce函数式ES6新语法。使用上和forEach、map一样。共同点：

*  函数都支持4个参数：t初始值或者计算后的返回值【必填】，v当前值，i当前索引，arr真个数组；
 *  匿名函数中的this都是指Window；
 *  只能遍历数组；
 *  不支持break、continue；

var arr4 = [6,7,8];
    var val4 = arr4.reduce((t,v,i,arr) => {
      console.log(v);
      arr[i] = v+100;
      return t*10;
    });
    console.log("----"+val4);
    console.log(arr4);
    //输出
    7
    8
    ----600
    [ 6, 107, 108 ]

参考：[https://m.runoob.com/jsref/jsref-reduce.html][https_m.runoob.com_jsref_jsref-reduce.html]

[https://juejin.im/post/5ec653ae51882543253366b2][https_juejin.im_post_5ec653ae51882543253366b2]

[https_www.runoob.com_jsref_jsref-foreach.html]: https://www.runoob.com/jsref/jsref-foreach.html
[https_www.runoob.com_jsref_jsref-map.html]: https://www.runoob.com/jsref/jsref-map.html
[https_juejin.im_post_5c999386e51d456d246deea1]: https://juejin.im/post/5c999386e51d456d246deea1
[https_juejin.im_post_5cdbb14ef265da036902bb22]: https://juejin.im/post/5cdbb14ef265da036902bb22
[https_www.runoob.com_jsref_jsref-filter.html]: https://www.runoob.com/jsref/jsref-filter.html
[https_m.runoob.com_jsref_jsref-reduce.html]: https://m.runoob.com/jsref/jsref-reduce.html
[https_juejin.im_post_5ec653ae51882543253366b2]: https://juejin.im/post/5ec653ae51882543253366b2