js的foreach()、filter()、map()、reduce()

JS中数组和对象的基本用法

foreach()

foreach()方法用于调用数组的每个元素，并将元素传递给回调函数

let arr = [1, 2, 3, 4, 5, 6]
arr.forEach((item,index,array) => {
  console.log(item,index,array);
  // item表示遍历的当前值，index表示当前索引，array表示被遍历的数组
})

filter()

filter()方法创建一个新的数组，新数组是经过某种判断或者是检测后得到符合条件的所有元素，filter()方法不会对空数组进行检测，不会改变原数组

如下获取数组中所有值大于5的数组

let arr1 = [1,2,3,4,5,6,7,8,9,10]
let newArr1 = arr1.filter((item, index, array) => {
  console.log(item,index,array);
  return item > 5
})

map()

map()方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值，map()方法按照原始数组元素顺序依次处理元素，不会对空数组进行检测，不会改变原始数组

如下将数组中的元素乘以2

let arr2 = [1,2,3,4,5,6,7,8,9,10]
let newArr2 = arr2.map((item) => {
  return item*2
})
console.log(newArr2);

reduce()

reduce()方法中的元素依次执行回调函数

array.reduce(function(total,currentVal,currentIndex,arr),initValue)

totle为必须参数，表示初始值，或者是计算结果返回的返回值

currentValue为必须参数，表示当前元素

currentIndex为可选参数，表示当前元素的索引

arr为可选参数，表示当前元素所属的数组，也就是array数组

initValue为可选参数，表示传递给函数的初始值

reduce()方法在许多场景都可以使用

如下，计算数组中所有元素的和

let arr = [1, 2, 3, 4, 5]
let sum = arr.reduce((total, currentVal) => {
  return total + currentVal
})
let sum2 = arr.reduce((total,currentVal)=>total+currentVal)
console.log(sum2);   // 15

当然也可以给函数设定一个初始值，如下，

let sum3 = arr.reduce((total, currentVal) => {
  console.log(total,currentVal);
  return total+currentVal
}, 3)
console.log(sum3);   // 18

如下，对数组去重

let arr1 = [1, 1, 3, 2, 4, 5, 6, 1, 7, 4, 3]
let newArr1 = arr1.reduce((total, currentVal) => {
  if (total.indexOf(currentVal) == -1) {
    total.push(currentVal)
  }
  return total
}, [])
console.log(newArr1);   // [1,3,2,4,5,6,7]

let newArr2 = arr1.reduce((total, currentVal) => {
  if (!total.includes(currentVal)) {
    total.push(currentVal)
  }
  return total
}, [])
console.log(newArr2);   // [1,3,2,4,5,6,7]

如下，计算数组中元素出现次数

let names = ['a', 'b', 'c', 'a', 'a', 'd', 'e', 'c']
let countObj = names.reduce((pre, cur) => {
  if (cur in pre) {
    pre[cur]++
  } else {
    pre[cur] = 1
  }
  return pre
}, {})
console.log(countObj); // { a: 3, b: 1, c: 2, d: 1, e: 1 }