数组map vs foreach，及map、fliter、reduce的链式调用-白红宇

1、map和foreach都是用来遍历数组用的，两者之间有什么区别呢？

map：遍历数组返回一个新的相同长度的数组

foreach：遍历数组返回undefined

在遍历效率方面map要比foreach快

const arr = [2, 4, 6, 8, 10]arr.forEach((num, index) => {    return arr[index] = num * 2;});console.log(arr)const arr1 = [2, 4, 6, 8, 10]let doubled = arr1.map(num => {    return num * 2;});console.log(arr1)console.log(doubled)复制代码

适用场景

foreach：适用于遍历不改变数组值得情况

map：适用于数组的数据改变，并因为返回新的数组，可以同fliter、reduce链式操作如：

let arr = [1, 2, 3, 4, 5];let arr2 = arr.map(num => num * 2).filter(num => num > 5);// arr2 = [6, 8, 10]复制代码

map、fliter、reduce的联合使用，以获取dog的年龄为示例，常规写法

const data = [  {    name: 'Butters',    age: 3,    type: 'dog'  },  {    name: 'Lizzy',    age: 6,    type: 'dog'  },  {    name: 'Red',    age: 1,    type: 'cat'  },  {    name: 'Joey',    age: 3,    type: 'dog'  },];function getAges(data) {  let sum = 0;  for (var i = 0; i < data.length; i++){    if (data[i].type === 'dog'){      let tempAge = data[i].age;      sum += (tempAge * 7);    }  }  return sum;}// getAges(data) = 84复制代码

改进1：

let ages = data  .filter((animal) => {    return animal.type === 'dog';}).map((animal) => {    return animal.age * 7}).reduce((sum, animal) => {    return sum + animal.age;});// ages = 84复制代码

改进2：纯函数对于同一个输入终会有同样的输出，易于理解、可读、测试

let dogYears = (animal) => {  return animal.age * 7;}let dogYears = (animal) => {  return animal.age * 7;}let sum = (sum, animal) => {  return sum + animal;}let ages = data  .filter(isDog)  .map(dogYears)  .reduce(sum);// ages = 84复制代码