「JavaScript」map、foreach、for、reduce、filter的基本使用

1. map

• 不会改变原数组
• 返回处理后的结果

const arr1 = [2, 4, 5, 7, 12]
const mapArr = arr1.map((item, index, arr1) => {
  // console.log(item, index, arr2);
  return item * 2
})
console.log(arr1);  // [2, 4, 5, 7, 12]
console.log(mapArr);  // [4, 8, 10, 14, 24]

2. foreach

• 不会改变原数组
• 无返回值(undefined)
• 在不确定长度或者计算长度有损性能的时候用
• 会跳过空项

const arr2 = [2, 4, 5, 7, 12]
const forEachArr = arr2.forEach((item, index, arr2) => {
  // console.log(item, index, arr2);
  return item * 2
})
console.log(arr2);  // [2, 4, 5, 7, 12]
console.log(forEachArr);  // undefined

3. for

• 在固定长度或者长度不需要计算的时候for循环效率
• 较复杂的循环中效率更高
• 在迭代过程中跳过特定元素或从数组中删除元素

const arr3 = [2, 4, 5, 7, 12]
for (let i = 0; i < arr3.length; i++) {
  // console.log(i, arr3[i]);
  arr3[i] *= 2
}
console.log(arr3);  // [4, 8, 10, 14, 24]

4. reduce

• 不会改变原数组
• 进行数组求和、数组去重，遍历最大值最小值的操作
• 第二个参数为初始值

const arr4 = [2, 4, 5, 7, 12]
const reduceArr = arr4.reduce((total, item, index, arr4) => {
  // console.log(total, item, index, arr4);
  return total + item
},10)
console.log(arr4);  // [2, 4, 5, 7, 12]
console.log(reduceArr);  // 40

5. filter

• 不会改变原数组
• 用于筛选数组
• 返回筛选后的结果数组

const arr5 = [2, 4, 5, 7, 12]
const filterArr = arr5.filter((item, index, arr5) => {
  // console.log(item, index, arr5);
  return item > 5
})
console.log(arr5);  // [2, 4, 5, 7, 12]
console.log(filterArr);  // [7, 12]