ES6 常见的数组遍历方法

forEach

map

filter

some

every

reduce 累加

• 举个例子：
  定义一个数组 arr，每一个元素都是一个对象

const arr = [
  { count: 10, status: 0, statusName: "全部" },
  { count: 2, status: 20, statusName: "待使用" },
  { count: 5, status: 30, statusName: "已使用" },
  { count: 3, status: 40, statusName: "已失效" },
];
// length: 4

forEach

此方法替代了 for 循环，可逐一遍历每个元素。无返回。不能使用 break 与 continue 语句。

• 遍历 arr 数组，打印所有索引号及其元素内容：

arr.forEach((item, i) => {
  console.log(i, item); // 0 { count: 10, status: 0, statusName: "全部" } ...
});

item 指的是每一个元素，i 指的是索引号

map

遍历原始数组，对其每个元素处理，可返回新数组。

• 遍历 arr 数组，对其每个元素的 count 乘以 2，并返回新数组

const list = arr.map(item => {
  return {
    ...item,
    count: item.count * 10,
  };
});
console.log(arr); // [{count: 10, status: 0, statusName: '全部'}, ...]  length: 4
console.log(list); // [{count: 100, status: 0, statusName: '全部'}, ...]  length: 4

当想要将函数用于数组的所有元素时，map 方法很有用。

• 遍历 arr 数组，为其中的每个对象添加一个 id，id 取其索引，并返回新数组

const list = arr.map((item, i) => {
  return {
    id: i,
    ...item,
  };
});
console.log(arr); // [{count: 10, status: 0, statusName: '全部'}, ...]  length: 4
console.log(list); // [{id: 0, count: 10, status: 0, statusName: '全部'}, ...]  length: 4

以上是深拷贝，list 与 arr 互不影响。

浅拷贝是指 a 把值 给了 b 当 b 的值改变 a b 的值同时改变。
深拷贝是指 a b 的值无论哪个值改变 内存地址不同 互不干扰。

// 深拷贝 方法一：
const list = arr.map((item, i) => {
  const temp = item.count * 10; // 深拷贝的话，需要重新定义变量来接收改变的数据
  return {
    ...item,
    count: temp,
  };
});
console.log(arr); // [{count: 10, status: 0, statusName: '全部'}, ...]  length: 4
console.log(list); // [{count: 100, status: 0, statusName: '全部'}, ...]  length: 4

// 深拷贝 方法二（简单粗暴）：
const newArr = JSON.parse(JSON.stringify(arr)); // 深拷贝：将对象转为新字符串，新字符串再转为新对象
const list2 = newArr.map((item,i)=> {
  item.count *=10;
  return {
    ...item
  };
})
console.log(arr); // [{count: 10, status: 0, statusName: '全部'}, ...]  length: 4
console.log(list2); // [{count: 100, status: 0, statusName: '全部'}, ...]  length: 4

filter

过滤筛选出一数组中符合条件的元素，可返回新数组。

• 筛选出 count < 3 的记录，返回新数组

const list = arr.filter(item => {
  return item.count < 3;
});
console.log(list); // [{count: 2, status: 20, statusName: '待使用'}]  length: 1
console.log(arr); // [{count: 10, status: 0, statusName: '全部'}, ...]  length: 4

（要了解箭头函数）以上箭头函数使用return返回值，其实也可以写成：

const list = arr.filter(item => item.count < 3); // 这样list也可以接收到返回值

some

找到一数组中符合条件的元素，并返回结果 true/false。

• 查找是否存在 count < 3 的记录，返回 true/false

let findIndex;
const bool = arr.some((item,i) => {
  findIndex = i; // 索引
  return item.count < 3;
});
console.log(bool, findIndex); // true 1

当结果返回 true 时，findIndex 即符合条件的元素的索引。
当结果放回 false 时，findIndex 是最后一个元素的索引。

every

当数组中的每一元素都符合条件时，返回 true,否则返回 false，类似或运算，一假全假。

every 与 some 有所不同：every 返回结果为 true 要求数组中的所有元素全符合条件，some 返回结果针对的是数组中的某一个元素。

• 判断数组中每个对象是否都存在 count < 20，返回 true/false

let findIndex;
const bool = arr.every((item,i) => {
  findIndex = i; // 索引
  return item.count < 20;
});
console.log(bool, findIndex); // true 3

当结果返回 true 时，findIndex 即最后一个元素的索引。
当结果放回 false 时，findIndex 是第一个不符合条件的元素的索引。

reduce

将数组中的每个元素进行累加，可返回累加值。

• 计算结果： 1+2+3+4+5

const arr = [1, 2, 3, 4, 5];
// reduce()的第一个参数为总和
const sum = arr.reduce((sum, val, i) => {
  console.log("sum", sum, "val", val, "i", i); // sum=1 val=2 i=1, sum=3 val=3 i=2, ... , sum=10 val=5 i=4
  return sum + val;
});
console.log("sum", sum); // sum 15

sum 是总和，val 是元素的值，i 是索引。

reduce的高级用法

1. 二维数组转为一维数组

let array = [[1, 2], [3, 4], [5, 6]].reduce((acc, cur) => {
    return acc.concat(cur);
}, []);

console.log(array);  // [1, 2, 3, 4, 5, 6]

1. 计算数组中每个元素出现的次数

// 1. 方法一
let arr = ['tom', 'jim', 'jack', 'tom', 'jack'];

const countArr = arr.reduce((newArr, item) => {
  console.log("newArr",newArr);
  /**
   * newArr {}
     newArr {tom: 1}
     newArr {tom: 1, jim: 1}
     newArr {tom: 1, jim: 1, jack: 1}
     newArr {tom: 2, jim: 1, jack: 1}
  */
  if (item in newArr) {
    newArr[item] ++;
  }
  else {
    newArr[item] = 1;
  }
  return newArr;
}, {});

console.log(countArr);  // { tom: 2, jim: 1, jack: 2 }

// 2. 方法二
// 定义一个函数用于计算一数组中指定元素出现的次数
const arraySum = (arr, val) => arr.reduce((acc, cur) => {
    console.log("acc",acc);// 0 1 1 1 2 2 3 3
    return cur == val ? acc + 1 : acc + 0;
}, 0);
// 定义数组
let arr = [ 0, 1, 3, 0, 2, 0, 2, 3 ];
// 调用arraySum()方法计算数组arr中 0 出现的次数
console.log(arraySum(arr, 0)); // 数组arr中 0 元素出现的次数为3

原文地址：https://www.cnblogs.com/deng3/p/15393273.html