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

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

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

/**
 * 每個數(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"每個字符所對應(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() 可以寫成 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ù)，使用三個參數(shù)：

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

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

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

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

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

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

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

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

reduce一個較為常用的場景就是累加或累乘：

/**
 * 輸出數(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ù)組元素的乘積（簡寫形式）：
 */
var product = [1,2,3].reduce((stepProduct, item) => {
    return stepProduct * item;
},1);
console.log(product);


/**
 * 輸出數(shù)組元素的乘積（call形式，營造復(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() 方法用于連接兩個或多個數(shù)組。用法參見：JavaScript concat() 方法

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

回到文章一開始提及的一道題目，題目是這樣的：尋找字符串中出現(xiàn)次數(shù)最少的、并且首次出現(xiàn)位置最前的字符。如cbaacfdeaebb，符合要求的是f。其中一個用reduce來解決方案（姑且不評價是否最優(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]); 

/*
 * 以下是上面方法地球人比較容易看懂的改寫方式(寫完感覺好多余，蜜汁尷尬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; 是兩句代碼的簡寫形式：
p[n] = (p[n] || 0) + 1;
return p;

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

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

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

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

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

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

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

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