【JS】- 数组遍历的几种方法

1、for、forEach、for...of

const list = [1,2,3,4,5]
list.forEach((item, index, list) => {
  console.log(item); // 1 2 3 4 5
  console.log(index); // 0 1 2 3 4
});

forEach 无法跳出循环
for 和 for ..of 可以使用 break 或者 continue 跳过或中断
for 遍历数组索引
for ...of 直接访问的是实际元素

2、some、every

var list = [{name: 'minihu'}, {name: 'minihu1'}, {name: 'minihu2'}]

const isSome = list.some(m => m.name === 'minihu'); // true
// 若某一元素满足条件，返回 true，循环中断；所有元素不满足条件，返回 false

const isEvery = list.every(m => m.name.indexOf("minihu") >= 0); // true
// 若有一个元素不满足条件，返回 false，循环中断；所有元素满足条件，返回 true

 

3、filter、map

const list = [
  {
    id: 1
  }, {
    id: 2
  }
]
const newList = list.map(m => m.id)
// newList: [1,2]
const newList = list.filter(m => m.id === 1)
// newList: [{id: 1}]

二者都是生成一个新数组，都不会改变原数组（不包括遍历对象数组是，在回调函数中操作元素对象）
二者都会跳过空元素
map 会将回调函数的返回值组成一个新数组，数组长度与原数组一致
filter 会将符合回调函数条件的元素组成一个新数组，数组长度与原数组不同
map 生成的新数组元素是可自定义
filter 生成的新数组元素不可自定义，与对应原数组元素一致

4、find、findIndex

const list = [
  {
    id: 1
  }, {
    id: 2
  }
]
const result = list.find(m => m.id === 1)
// result: { id: 1 }
const index = list.findIndex(m => m.id === 1)
// index: 0

二者都是用来查找数组元素
find 方法返回数组中满足 callback 函数的第一个元素的值。如果不存在返回 undefined
findIndex 它返回数组中找到的元素的索引，而不是其值，如果不存在返回 -1

5、reduce、reduceRight

reduce 方法接收两个参数，第一个参数是回调函数（callback） ，第二个参数是初始值（initialValue）
reduceRight 方法除了与reduce执行方向相反外(从右往左)，其他完全与其一致

回调函数接收四个参数：
a) accumulator：MDN 上解释为累计器，但我觉得不恰当，按我的理解它应该是截至当前元素，之前所有的数组元素被回调函数处理累计的结果
b) current：当前被执行的数组元素
c) currentIndex: 当前被执行的数组元素索引
d) sourceArray：原数组，也就是调用 reduce 方法的数组

如果不传入初始值，reduce 方法会从索引 1 开始执行回调函数，如果传入初始值，将从索引 0 开始、并从初始值的基础上累计执行回调。

// 计算对象数组某一属性的总和
const list  = [
  { name: 'left', width: 20 },
  { name: 'center', width: 70 },
  { name: 'right', width: 10 },
];
const total = list.reduce((currentTotal, item) => {
  return currentTotal + item.width;
}, 0);
// total: 100

// 对象数组的去重，并统计每一项重复次数
const list  = [
  { name: 'left', width: 20 },
  { name: 'right', width: 10 },
  { name: 'center', width: 70 },
  { name: 'right', width: 10 },
  { name: 'left', width: 20 },
  { name: 'right', width: 10 },
];
const repeatTime = {};
const result = list.reduce((array, item) => {
  if (repeatTime[item.name]) {
    repeatTime[item.name]++;
    return array;
  }
  repeatTime[item.name] = 1;
  return [...array, item];
}, []);
// repeatTime: { left: 2, right: 3, center: 1 }
// result: [
//   { name: 'left', width: 20 },
//   { name: 'right', width: 10 },
//   { name: 'center', width: 70 },
// ]

// 对象数组最大/最小值获取
const list  = [
  { name: 'left', width: 20 },
  { name: 'right', width: 30 },
  { name: 'center', width: 70 },
  { name: 'top', width: 40 },
  { name: 'bottom', width: 20 },
];
const max = list.reduce((curItem, item) => {
  return curItem.width >= item.width ? curItem : item;
});
const min = list.reduce((curItem, item) => {
  return curItem.width <= item.width ? curItem : item;
});
// max: { name: "center", width: 70 }
// min: { name: "left", width: 20 }

 

转载自：https://juejin.cn/post/6966390357005172773