map, filter, reduce

map

map作用是生成一个新数组，遍历原数组，将每个元素拿出来做一些变换然后放入到新的数组中。新数组索引结构和原数组一致，原数组不变。

[1, 2, 3].map(v => v+1)   // -> [2, 3, 4]
复制代码

另外map的回调函数接受三个参数，分别是当前索引元素，索引，原数组

[1, 2, 3].map(parseInt)
复制代码

• 第一轮遍历parseInt('1', 0) -> 1
• 第二轮遍历parseInt('2', 1) -> NaN
• 第三轮遍历parseInt('3', 2) -> NaN

filter

filter的作用也是生成一个新数组，在遍历数组的时候将返回值为true的元素放入新数组，我们可以利用这个函数删除一些不需要的元素

let array = [1, 2, 4, 6];
let newArry = array.filter(item => item != 6);
console.log(newArray);   // [1, 2, 4]
复制代码

和map一样，filter的回调函数也接受三个参数，用处也相同。

最后我们来讲解reduce这块的内容，同时也是最难理解的一块内容。reduce可以将数组中的元素通过回调函数最终转换为一个值。

如果我们想实现一个功能将函数里的元素全部相加得到一个值，可能会这样写代码

const arr = [1, 2, 3]
let total = 0
for (let i = 0; i < arr.length; i++) {
  total += arr[i]
}
console.log(total) //6 
复制代码

reduce

如果我们使用reduce的话就可以将遍历部分的代码优化为一行代码

const arr = [1, 2, 3];
const sum = arr.reduce((acc, current) => acc + current, 0);
console.log(sum)
复制代码

对于reduce来说，它接受两个参数，分别是回调函数和初始值，接下来我们来分解上述代码中reduce的过程

• 首先初始值为0，该值会在执行第一次回调函数时作为第一个参数传入
• 回调函数接受四个参数，分别为累计值、当前元素、当前索引、原数组，后三者想必大家都可以明白作用，这里着重分析第一个参数
• 在一次执行回调函数时，当前值和初始值相加得出结果1，该结果会在第二次执行回调函数时当做第一个参数传入
• 所以在第二次执行回调函数时，相加的值就分别是1和2，以此类推，循环结束后得到结果6

想必通过以上的解析大家应该明白reduce是如何通过回调函数将所有元素最终转换为一个值的，当然reduce还可以实现很多功能，

接下来我们就通过reduce来实现map函数

const arr = [1 ,2, 3];
const mapArray = arr.map(item => item*2);
const reduceArray = arr.reduce((acc, current) => {
    acc.push(current*2);
    return acc
}, []);
console.log(reduceArray);   //[2, 4, 6]
复制代码

数组扁平化（二维数组变一维数组）

const flattened = [[0, 1], [2, 3], [4, 5]].reduce(
    (acc, cur) => acc.concat(cur),
    []
);  // [0, 1, 2, 3, 4, 5, 6]
复制代码

计算数组中每个元素出现的次数

const names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];
const countedNames =  names.reduce((acc, current) => {
    if (current in acc) {
        acc[current]++;
    } else {
        acc[current] = 1;
    }
    return acc;
}, {});    //  {Alice: 2, Bob: 1, Tiff: 1, Bruce: 1}
复制代码

按属性对object分类

var people = [
  { name: 'Alice', age: 21 },
  { name: 'Max', age: 20 },
  { name: 'Jane', age: 20 }
];

function groupBy(objectArray, property) {
  return objectArray.reduce(function (acc, obj) {
    var key = obj[property];
    if (!acc[key]) {
      acc[key] = [];
    }
    acc[key].push(obj);
    return acc;
  }, {});
}

var groupedPeople = groupBy(people, 'age');
// groupedPeople is:
// { 
//   20: [
//     { name: 'Max', age: 20 }, 
//     { name: 'Jane', age: 20 }
//   ], 
//   21: [{ name: 'Alice', age: 21 }] 
// }
复制代码

数组去重

let orderedArray = Array.from(new Set(myArray));
复制代码

const myArray = ['a', 'b', 'a', 'b', 'c', 'e', 'e', 'c', 'd', 'd', 'd', 'd'];
const myOrderedArray = myArray.reduce( (acc, cur) => {
  if (!acc.includes(cur)) {
    acc.push(cur);
  }
  return acc
}, [])

console.log(myOrderedArray);
复制代码