0
点赞
收藏
分享

微信扫一扫

js中forEach、map、reduce、filter函数

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​​

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​​ 

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的值。
var arr3 = [5,6,7];
var val3 = arr3.filter((v,i,arr) => {
arr[i] = v+100;
if (v === 6) {
return false;
} else {
return true;
}
});
console.log(val3);
console.log(arr3);
//输出
[ 5, 7 ]
[ 105, 106, 107 ]

​​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​​

 


举报

相关推荐

0 条评论