reduce和map

复习一下reduce和map

reduce

定义

reduce()方法接受一个函数作为累加器，数组中的每个值（从左向右）开始缩减，最后累加为一个值。

语法

arr.reduce(callback[, initialValue]

callback接受四个参数，分别为：

1. accumulator：累加器累加回调的返回值；它是上一次调用回调返回的累加值，或者是initialValue
2. currentValue: 数组中正在处理的元素
3. currentIndex(可选): 数组中正在处理的当前元素的索引。如果提供了initialValue，则为0，否则为1
4. array: 调用reduce方法的数组
   reduce接受的另外一个参数是initialValue。该参数作为第一次调用callback第一个参数的值。如果未提供，则将使用数组的第一个元素

示例

let arr = [0,1,2,3,4];
function callbackFun(accumulator, currentValue, currentIndex, array) {
    return accumulator + currentValue;
}
arr.reduce(callbackFun); // 10

执行过程如下图：

reduce执行过程（图片来自网络）.png

如果给reduce方法设置了第二个参数：

let arr = [1,2,3,4];
function callbackFun(accumulator, currentValue, currentIndex, array) {
    return accumulator + currentValue;
}
arr.reduce(callbackFun, 10); // 给reduce设置了第二个参数，初始值为10，则结果为20

更多例子

二维数组转为一维数组

let arr1 = [[1,2],[2,3],[3,4]];
let arr2 = arr1.reduce(function(accumulator, currentValue) {
    return accumulator.concat(currentValue)
})
console.log(arr2) // [1, 2, 2, 3, 3, 4]

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

// 计算每个字母出现的次数
let arr = ['a', 'b', 'c', 'a', 'c', 'a', 'a', 'd'];
let countChar = arr.reduce(function(allChar, currentChar) {
    if (currentChar in allChar) {
        allChar[currentChar]++;
    }
    else {
        allChar[currentChar] = 1;
    }
    return allChar;
}, {});
console.log(countChar) // {a: 4, b: 1, c: 2, d: 1}

数组去重

let arr = [1,2,3,6,2,1,4,9,3,2,4];
let resultArr = arr.sort().reduce(function(init, current) {
    if (init.length === 0 || init[init.length-1] !== current) {
        init.push(current);
    }
    return init;
}, []);
console.log(resultArr); // [1, 2, 3, 4, 6, 9]

map

定义

map()方法返回一个新的数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。

描述

let newArr = arr.map(function callback(currentValue, index, arr) {
    // 返回新数组的元素
})

map方法会将原数组中的每个元素按照顺序执行一遍callback函数，并将返回值组合成一个新数组。

示例：

let arr = [1,2,3,4];
let newArr = arr.map((item) => item*2)
console.log(newArr) // [2, 4, 6, 8]

---

完。