摘要：簡(jiǎn)單例子一個(gè)較為常用的場(chǎng)景就是累加或累乘輸出數(shù)組元素的乘積輸出數(shù)組元素的乘積簡(jiǎn)寫(xiě)形式輸出數(shù)組元素的乘積形式，營(yíng)造復(fù)雜的逼格用在數(shù)組降維扁平化處理的例子中注方法用于連接兩個(gè)或多個(gè)數(shù)組。

看到一個(gè)提問(wèn)的回答巧妙地使用了map/reduce操作，很優(yōu)雅，所以來(lái)學(xué)習(xí)和總結(jié)一下javascript自帶的map/reduce的使用技巧，文章不會(huì)講的很深，純當(dāng)科普一下知識(shí)點(diǎn)，如有解釋的不正確的地方，歡迎指正。

map() 方法通過(guò)對(duì)原數(shù)組中的每個(gè)元素進(jìn)行一定的操作（共同調(diào)用一個(gè)方法），返回一個(gè)新的數(shù)組。

/**
 * 每個(gè)數(shù)組元素乘以2輸出
 */
var arr1 = [1,2,3,4];
var arr2 = arr1.map(x => {
    return x * 2;
});
console.log(arr2);    // [2,4,6,8]


/**
 * 輸出"Hello World"每個(gè)字符所對(duì)應(yīng)的 ASCII 碼組成的數(shù)組：
 */
var a = [].map.call("Hello World", x => {
    return x.charCodeAt(0); 
})
console.log(a);   //[72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100]

*注：

[ ].map.call() 可以寫(xiě)成 Array.prototype.map.call(); 不懂的可以參看之前的一篇文章：nodejs中call和apply的學(xué)習(xí)

map函數(shù)不改變數(shù)組本身：

var arr = [1,2,3,4];
arr.map(x => { return Math.sqrt(x) });
console.log(arr); //[1,2,3,4] 而不是[1, 1.414..., 1.732..., 2]

var new_array = old_array.map(callback, [thisArg]);
其中callback是生成新數(shù)組元素的函數(shù)，使用三個(gè)參數(shù)：

currentValue: callback 的第一個(gè)參數(shù)，數(shù)組中正在處理的當(dāng)前元素。

index: callback 的第二個(gè)參數(shù)，數(shù)組中正在處理的當(dāng)前元素的索引。

array: callback 的第三個(gè)參數(shù)，map 方法被調(diào)用的數(shù)組。

thisArg是可選的。執(zhí)行 callback 函數(shù)時(shí) 使用的this 值。
返回值new_array ：一個(gè)新數(shù)組，每個(gè)元素都是回調(diào)函數(shù)的結(jié)果。

對(duì)于["1", "2", "3"].map(parseInt)語(yǔ)句會(huì)輸出什么呢？你可能覺(jué)的會(huì)是[1, 2, 3]，但實(shí)際的結(jié)果是 [1, NaN, NaN]，通常使用parseInt時(shí),只需要傳遞一個(gè)參數(shù)，但實(shí)際上,parseInt可以有兩個(gè)參數(shù)，第二個(gè)參數(shù)是進(jìn)制數(shù)，可以通過(guò)語(yǔ)句"alert(parseInt.length)===2"來(lái)驗(yàn)證。map方法在調(diào)用callback函數(shù)時(shí),會(huì)給它傳遞三個(gè)參數(shù):當(dāng)前正在遍歷的元素, 元素索引, 原數(shù)組本身。第三個(gè)參數(shù)parseInt會(huì)忽視, 但第二個(gè)參數(shù)不會(huì),也就是說(shuō),parseInt把傳過(guò)來(lái)的索引值當(dāng)成進(jìn)制數(shù)來(lái)使用.從而返回了NaN.

function returnInt(element){
    return parseInt(element,10);
}

["1", "2", "3"].map(returnInt);   // 返回[1,2,3]

reduce() 方法對(duì)累加器和數(shù)組的每個(gè)值 (從左到右)應(yīng)用一個(gè)函數(shù)，以將其減少為單個(gè)值。內(nèi)部實(shí)現(xiàn)應(yīng)該是遍歷元素，理論上可以通過(guò)forEach方法實(shí)現(xiàn)其功能。

reduce一個(gè)較為常用的場(chǎng)景就是累加或累乘：

/**
 * 輸出數(shù)組元素的乘積：
 */
var arr = [1,2,3];

var reducer = function add(stepProduct, item) { 
    return stepProduct * item; 
};

var product = arr.reduce(reducer, 1);

console.log(product);     //6


/**
 * 輸出數(shù)組元素的乘積（簡(jiǎn)寫(xiě)形式）：
 */
var product = [1,2,3].reduce((stepProduct, item) => {
    return stepProduct * item;
},1);
console.log(product);


/**
 * 輸出數(shù)組元素的乘積（call形式，營(yíng)造復(fù)雜的逼格）：
 */
var product = [].reduce.call([1,2,3], (stepProduct, item) => {
    return stepProduct * item;
},1);
console.log(product);

reduce用在數(shù)組降維（扁平化處理）的例子中：

var list1 = [[0, 1], [2, 3], [4, 5]];
var list2 = [0, [1, [2, [3, [4, [5, [6]]]]]]];

function flatten(arr){
    return arr.reduce((acc, val) => {
        return acc.concat(Array.isArray(val) ? flatten(val) : val)
    }, []);
};

console.log(flatten(list1));  // [0, 1, 2, 3, 4, 5]
console.log(flatten(list2));  // [0, 1, 2, 3, 4, 5, 6]

*注：

concat() 方法用于連接兩個(gè)或多個(gè)數(shù)組。用法參見(jiàn)：JavaScript concat() 方法

flatten用于數(shù)組降維。用法參見(jiàn)：JavaScript Array Flatten 與遞歸使用介紹_javascript技巧

回到文章一開(kāi)始提及的一道題目，題目是這樣的：尋找字符串中出現(xiàn)次數(shù)最少的、并且首次出現(xiàn)位置最前的字符。如cbaacfdeaebb，符合要求的是f。其中一個(gè)用reduce來(lái)解決方案（姑且不評(píng)價(jià)是否最優(yōu)方案）：

var str = [].reduce.call("cbaacfdeaebb", (p, n) => {
    return p[n] = (p[n] || 0) + 1,p;
},{});   // {c: 2, b: 3, a: 3, f: 1, d: 1, e: 2}

var s = Object.keys(str).reduce(function(p,n){
    return str[p] <= str[n] ? p : n;
});   //1

console.log(s,str[s]); 

/*
 * 以下是上面方法地球人比較容易看懂的改寫(xiě)方式(寫(xiě)完感覺(jué)好多余，蜜汁尷尬T_T)：
 */
var str = "cbaacfdeaebb".split("").reduce((allItems, item) => {
    allItems[item] = (allItems[item] || 0) + 1;
    return allItems;
},{});   // {c: 2, b: 3, a: 3, f: 1, d: 1, e: 2}

*注:

return p[n] = (p[n] || 0) + 1,p; 是兩句代碼的簡(jiǎn)寫(xiě)形式：
p[n] = (p[n] || 0) + 1;
return p;

arr.reduce(callback, [initialValue])
其中callback是執(zhí)行數(shù)組中每個(gè)值的函數(shù)，包含四個(gè)參數(shù)

accumulator: 上一次調(diào)用回調(diào)返回的值，或者是提供的初始值（initialValue）

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

currentIndex: 數(shù)據(jù)中正在處理的元素索引，如果提供了 initialValue ，從0開(kāi)始；否則從1開(kāi)始

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

函數(shù)返回函數(shù)累計(jì)處理的結(jié)果。

initialValue為可選項(xiàng)，其值用于第一次調(diào)用 callback 的第一個(gè)參數(shù)。

map/reduce是ECMAScript5規(guī)范中出現(xiàn)的數(shù)組方法，在處理數(shù)組的時(shí)候巧妙地應(yīng)用可以達(dá)到意想不到的效果，推薦mozilla的技術(shù)文檔，系統(tǒng)介紹了各種函數(shù)的使用方法，其中map/reduce在Array目下。
文中如有錯(cuò)誤，歡迎批評(píng)指出。(?ω?)