Toc
  1. forEach
  2. map
  3. filter
  4. every
  5. some
  6. reduce
Toc
0 results found
FBB
JS迭代函数的使用
2019/03/07 前端 JS

总结一下 JavaScript 中迭代函数(filter,map,reduce 等)的具体使用。

ES5:
forEach、every 、some、 filter、map、reduce、reduceRight、
ES6:
find、findIndex、keys、values、entries

forEach

简述: 让每一项去执行一次函数

实例:

//arr.forEach(callback, [thisObject])   thisObject改变回调函数里面的this指向,不指定默认为window
//forEach的回调函数支持三个参数(value, index, array)
//value数组的值,index数组的索引,array数组本身
let arr = [1, 2, 3, 4, 5];
arr.forEach(console.log);

//1 0 (5) [1, 2, 3, 4, 5]
//2 1 (5) [1, 2, 3, 4, 5]
//3 2 (5) [1, 2, 3, 4, 5]
//4 3 (5) [1, 2, 3, 4, 5]
//5 4 (5) [1, 2, 3, 4, 5]

arr.forEach(item => {
  console.log(item);
});
//然后打印出1,2,3,4,5。只是执行一下函数,并没有返回值。

map

简述: 让数组通过函数操作之后返回一个新的数组

实例:

//arr.map(callback, [thisObject]);
//map的回调函数支持三个参数(value, index, array)
//回调函数中需要有return
let arr = [1, 2, 3, 4, 5];
arr.map(item => {
  return item + 1;
});

//最后返回一个新数组[2, 3, 4, 5, 6]
//所以在react数据遍历使用map,因为拥有返回值,能够将处理之后的数据展示在界面上。

filter

简述: 通过函数筛选出符合条件的项,返回一个新的数组

实例:

//arr.filter(callback, [thisObject])
//filter的回调函数需要返回一个boolean值(==,不用强等于)
let arr = [1, 2, 3, 4, 5];
arr.filter(item => {
  return item > 2;
});

//最后返回函数执行为true的项,组成一个新的数组[3, 4, 5]

every

简述: 通过函数筛选出符合条件的项,返回一个新的数组

实例:

//arr.every(callback, [thisObject])
//some要求每一个值让callback返回true就可以了
let arr = [1, 2, 3, 4, 5];
arr.filter(item => {
  return item > 2;
});

//最后返回函数执行为true的项,组成一个新的数组[3, 4, 5]

some

简述: 检测数组中是否有些项满足要求

实例:

//arr.come(callback, [thisObject])
//some要求至少有1个值让callback返回true就可以了
let arr = [1, 2, 3, 4, 5];
arr.filter(item => {
  return item > 2;
});

//最后返回函数执行为true的项,组成一个新的数组[3, 4, 5]

reduce

简述: 累加器和数组中的每个元素(从左到右)应用一个函数,最终合并为一个值。

实例:

//arr.reduce(callback, [initialValue])
//initialValue: 初始值
//reduce的回调函数支持四个参数(prev, curr, index, array)
//prev: 之前值,curr: 当前值,index: 当前索引,array: 数组本身
//如果制定initialValue,prev的初始值为initialValue;若不指定,数组的第一位为prev,同时curr往后排一位。指定比不指定少一次迭代。
let arr = [1, 2, 3, 4, 5];

arr.reduce((prev, curr, inde, arry) => {
  return prev + curr;
}); //15

arr.reduce((prev, curr, inde, arry) => {
  return prev + curr;
}, 10); //25
打赏
支付宝
微信
本文作者:FBB
版权声明:本文首发于FBB的博客,转载请注明出处!