摘要：一個(gè)歸并方法第一個(gè)參數(shù)是每一項(xiàng)上調(diào)用的函數(shù)，該函數(shù)有四個(gè)參數(shù)累加回調(diào)返回值他是上一次調(diào)用時(shí)返回的累積值，或數(shù)組中正在處理的元素?cái)?shù)組中正在處理的當(dāng)前元素的索引。統(tǒng)計(jì)數(shù)組中重復(fù)出現(xiàn)項(xiàng)的個(gè)數(shù)，用對(duì)象表示。

在實(shí)際js開發(fā)中對(duì)數(shù)組操作頻率非常高，看過一些小伙伴的一些用法，挺有意思，在這里小記（不全）一下，備忘。

every()：對(duì)數(shù)組中的每一項(xiàng)運(yùn)行給定函數(shù)，如果該函數(shù)每一項(xiàng)都返回true，則返回true；

filter()：對(duì)數(shù)組中的每一項(xiàng)運(yùn)行給定函數(shù)，返回該函數(shù)會(huì)返回true的項(xiàng)組成的數(shù)組；

forEach()：對(duì)數(shù)組中的每一項(xiàng)運(yùn)行給定函數(shù)，這個(gè)方法沒有返回值；

map()：對(duì)數(shù)組中的每一項(xiàng)運(yùn)行給定函數(shù)，返回每次函數(shù)調(diào)用的結(jié)果組成的數(shù)組；

some()：對(duì)數(shù)組中的每一項(xiàng)運(yùn)行給定函數(shù)，如果該函數(shù)任意一項(xiàng)返回true，則返回true；

// every
var numbers = [1, 2, 3, 4, 5, 6, 7];
var everyResult = numbers.every(function (item, index, array) {
  return (item > 2);
});
console.log(everyResult); // false

// some
someResult = numbers.some(function (item, index, array) {
  return (item > 2);
});
console.log(someResult); // true

// filter
var filterResult = numbers.filter(function (item, index, array) {
  return (item > 2);
});
console.log(filterResult); // [3, 4, 5, 6, 7]

// map
var mapResult = numbers.map(function (item, index, array) {
  return item * 2;
});
console.log(mapResult); // [2, 4, 6, 8, 10, 12, 14]

通常情況下， map 方法中的 callback 函數(shù)只接受一個(gè)參數(shù)，就是正在被遍歷數(shù)組元素本身。但不意味著 map 只給 callback 傳一個(gè)參數(shù)，這種慣性思維很可能會(huì)讓我們犯錯(cuò)。下面舉一個(gè)例子：

下面語句返回什么呢：["1", "2", "3"].map(parseInt)

可能你會(huì)覺得是 [1, 2, 3]，但實(shí)際結(jié)果是 [1, NaN, NaN]。

map 回調(diào)方法 callback(currentValue, index, array) 有三個(gè)參數(shù)，第一個(gè)是數(shù)組中正在處理的當(dāng)前元素，第二個(gè)是當(dāng)前元素索引，第三個(gè)是數(shù)組本身。

Number.parseInt(string[, radix])有兩個(gè)參數(shù)，第一個(gè)是待轉(zhuǎn)化字符，第二個(gè)是進(jìn)制數(shù)。parseInt傳入第三個(gè)參數(shù)會(huì)被忽略。

因此，上述執(zhí)行

parseInt("1", 0, ["1", "2", "3"]) // 1
parseInt("2", 1, ["1", "2", "3"]) // NaN
parseInt("3", 2, ["1", "2", "3"]) // NaN

匹配查找某個(gè)目錄下的文件并引入。

context.require 返回一個(gè) require 函數(shù)：

function webpackContext(req) {
  return __webpack_require__(webpackContextResolve(req));
}

該函數(shù)有一個(gè) keys 屬性，是一個(gè)函數(shù)，返回一個(gè)數(shù)組，該數(shù)組是由所有可能被上下文模塊的請(qǐng)求對(duì)象組成。

let requireAll = requireContext => requireContext.keys().map(requireContext)
let req = require.context("./svg", false, /.svg$/)
requireAll(req)

這樣通過 map 遍歷，結(jié)合引入上下文對(duì)象作為回調(diào)函數(shù)，即可獲取引入某個(gè)目錄下的 svg 資源。

array.reduce(callback[, initialValue])第一個(gè)參數(shù)是每一項(xiàng)上調(diào)用的函數(shù)，該函數(shù)有四個(gè)參數(shù)：

accumulator：累加回調(diào)返回值；他是上一次調(diào)用時(shí)返回的累積值，或initValue；

currentValue：數(shù)組中正在處理的元素；

currentIndex：數(shù)組中正在處理的當(dāng)前元素的索引。如果提供了initialValue，這索引號(hào)為0，否則索引為1；

array：調(diào)用reduce()的數(shù)組。

當(dāng)?shù)诙€(gè)參數(shù)省略時(shí)，遍歷從數(shù)組第二項(xiàng)開始，數(shù)組第一項(xiàng)被當(dāng)作前一個(gè)值accumulator。

數(shù)組求和

const numbers = [10, 20, 30, 40];
numbers.reduce((acc, cur, index, arr) => {
  console.log("acc: " + acc + "; " + "cur: " + cur + ";");
  return acc + cur;
})

結(jié)果為：

acc: 10; cur: 20;
acc: 30; cur: 30;
acc: 60; cur: 40;

這第二個(gè)參數(shù)就是設(shè)置accumulator的初始類型和初始值，比如為0，就表示accumulator的初始值為Number類型，值為0，因此，reduce的最終結(jié)果也會(huì)是Number類型。

const numbers = [10, 20, 30, 40];
numbers.reduce((acc, cur, index, arr) => {
  console.log("acc: " + acc + "; " + "cur: " + cur + ";");
  return acc + cur;
}, 0)

結(jié)果為：

acc: 0; cur: 10;
acc: 10; cur: 20;
acc: 30; cur: 30;
acc: 60; cur: 40;

reduce作為歸并方法，在有些情形可以替代其它數(shù)組操作方法，強(qiáng)大之處，還得要落實(shí)在具體的案例上。

假設(shè)現(xiàn)在有一個(gè)數(shù)列[10, 20, 30, 40, 50]，每一項(xiàng)乘以2，然后篩選出大于60的項(xiàng)。

在這里更新數(shù)組每一項(xiàng)（map的功能）然后篩選出一部分（filter的功能），如果是先使用map然后filter的話，你需要遍歷這個(gè)數(shù)組兩次。在這里用reduce更高效。

var numbers = [10, 20, 30, 40, 50];
var result = numbers.reduce(function (acc, cur) {
  cur = cur * 2;
  if (cur > 60) {
    acc.push(cur);
  }
  return acc;
}, []);
console.log(result); // [80, 100]

從這個(gè)例子可以看出reduce完成了map和filter的使命。

統(tǒng)計(jì)數(shù)組中重復(fù)出現(xiàn)項(xiàng)的個(gè)數(shù)，用對(duì)象表示。

var letters = ["A", "B", "C", "C", "B", "C", "C"];
var letterObj = letters.reduce(function (acc, cur) {
  acc[cur] = acc[cur] ? ++acc[cur] : 1;
  return acc;
}, {});
console.log(letterObj); // {A: 1, B: 2, C: 4}

數(shù)組去重

var letters = ["A", "B", "C", "C", "B", "C", "C"];
var letterArr = letters.reduce(function (acc, cur) {
  if (acc.indexOf(cur) === -1) {
    acc.push(cur);
  }
  return acc;
}, []);
console.log(letterArr); // ?["A", "B", "C"]

ps：了解更多數(shù)組去重方法，點(diǎn)這里。

與ES6結(jié)合使用也會(huì)擦出不少火花。

刪除目標(biāo)對(duì)象某個(gè)屬性。

const person = {
  name: "jazz",
  gender: "male",
  age: 24
};
const personUnknowAge = Object.keys(person).filter((key) => {
  return key !== "age";
})
.map((key) => {
  return {
    [key]: person[key]
  }
})
.reduce((acc, cur) => {
  return {...acc, ...cur};
}, {});
console.log(personUnknowAge); // {name: "jazz", gender: "male"}

更簡(jiǎn)潔的方案，利用ES6中函數(shù)參數(shù)解構(gòu)：

const personUnknowAge = (({name, gender}) => ({name, gender}))(person);
console.log(personUnknowAge); // {name: "jazz", gender: "male"}

當(dāng)然還有更簡(jiǎn)單的方案，利用ES6中對(duì)象解構(gòu)：

const person = {
  name: "jazz",
  gender: "male",
  age: 24
};
let { age, ...personUnknowAge } = person;
console.log(personUnknowAge); // {name: "jazz", gender: "male"}

數(shù)組操作的“妙用”遠(yuǎn)不止這些，后面有空再研究補(bǔ)充吧，完~