整理

ES6 数组 map, reduce,filter, forEach, some, every

目录

• ES6 数组 map, reduce,filter, forEach, some, every
  • 1. map（映射）
  • 2. reduce 缩小
  • 3. filter 过滤器
  • 4. forEach 迭代
  • 5. every
  • 6. some

1. map（映射）

返回一个新数组，不会改变原数组。

对应参数：item 每次的值， 当前索引，原来数组arr

eg.

let arr = [22, 55, 67, 33, 99, 70];
let result = arr.map((item, index, arr) => {
  return item > 60 ? "及格" : "不及格";
});
console.log(result);
console.log(arr);

[ '不及格', '不及格', '及格', '不及格', '及格', '及格' ]
[ 22, 55, 67, 33, 99, 70 ]

2. reduce 缩小

一堆对一个，求和或者平均数，累加器。不改变原数组。
temp是每次的临时变量是第n次和第n+1次的临时和，item是每次要往上加的值，index是每次循环的index，index从0开始。

let arr2 = [22, 55, 67, 33, 99, 70];
let result2 = arr2.reduce((temp, item, index) => {
  console.log(temp, item, index);
  return temp + item;
});
console.log(result2);
console.log(arr2)

22 55 1
77 67 2
144 33 3
177 99 4
276 70 5
346
[ 22, 55, 67, 33, 99, 70 ]

3. filter 过滤器

返回符合回调函数中指定条件的数组元素，true保留，false过滤。
不改变原数组大小。

let arr3 = [2, 4, 76, 87, 35, 66];
let result3 = arr3.filter((item) => item % 3 === 0);
console.log(result3);
console.log(arr3);

[ 87, 66 ]
[ 2, 4, 76, 87, 35, 66 ]

4. forEach 迭代

forEach遍历数组，无返回值，不改变原数组，仅仅只是遍历。

let arr4 = [2, 3, 4, 5];
arr4.forEach((item) => console.log(item));

2
3
4
5

5. every

遍历数组每一项，每一项返回 true，则最终结果为 true。当任何一项返回false时，停止遍历返回false。不改变原数组。

let arr5 = [1, 2, 5, 4, 5, 6, 7, 8];
let flag = arr5.every((item, index, arr) => {
  console.log(item);
  return index === 0 ? true : item > arr[index - 1];
});
console.log(flag);
console.log(arr5);

1
2
5
4
false
[ 1, 2, 5, 4, 5, 6, 7, 8 ]

6. some

遍历数组每一项，有一项返回true，就返回true，当任何一项返回true时，则停止遍历，返回true。

let arr6 = [1, 2, 3, 5, 6, 5, 6, 7, 8, 9];
let flag6 = arr6.some((item, index, arr) => {
  console.log(item);
  return index == 0 ? false : item < arr[index - 1];
});
console.log(flag6);
console.log(arr6);

1
2
3
5
6
5
true
[ 1, 2, 3, 5, 6, 5, 6, 7, 8, 9 ]

以上6个方法均为ES6语法，IE9以及上才支持。不过可以通过babel转译支持IE低版本。
以上均不改变原数组。

some、every 返回 true、false。
map、filter 返回一个新数组。
reduce 让数组的前后两项进行某种计算，返回最终操作的结果。
forEach 无返回值。