数组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)
复制代码

2. 适用场景

• 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
复制代码