摘要：這兩個(gè)方法的參數(shù)是一致的，回調(diào)函數(shù)和執(zhí)行回調(diào)函數(shù)時(shí)使用的值，回調(diào)函數(shù)中的參數(shù)也是一致的，分別是數(shù)組當(dāng)前元素當(dāng)前元素索引和數(shù)組本身。

青湛(GitHub/mintsweet) 原文鏈接

自以為還算一個(gè)比較高產(chǎn)的人吧～但是感覺(jué)好久都沒(méi)有寫(xiě)點(diǎn)什么沒(méi)有營(yíng)養(yǎng)的東西了，這一篇本來(lái)是打算去年年底都要拿出來(lái)說(shuō)一說(shuō)的，但是年底事情太多了，加上我真的變懶了拖到現(xiàn)在才要把這個(gè)準(zhǔn)備了好久的標(biāo)題完善一下。

之所以會(huì)突然想講一講JavaScript中的數(shù)組，是因?yàn)槲医?jīng)歷了好多次事后發(fā)現(xiàn)很傻的問(wèn)題，所以就想說(shuō)還是總結(jié)一下，這篇相當(dāng)于總結(jié)一樣的文章我也不想講數(shù)組的方法是怎么用的，畢竟不管是在哪，數(shù)組方法的使用都有很多教程了，單純的就來(lái)說(shuō)一說(shuō)那些我們可能忽略的細(xì)節(jié)。

在開(kāi)始正式講被我們忽略的一些數(shù)組方法之前，我還是想先舉一個(gè)例子來(lái)說(shuō)說(shuō)我在其中躺過(guò)的一丟丟小坑～

現(xiàn)在我們隨便來(lái)有一個(gè)小小的需求，寫(xiě)一個(gè)方法，有兩個(gè)參數(shù)，一個(gè)是數(shù)組，另一個(gè)是需要添加到數(shù)組里面的元素。

function arrPush(arr, target) {
    return arr.push(target);
}

var arr_1 = [1, 2, 3];

console.log(arrPush(arr_1, 4));

上面的代碼對(duì)你來(lái)說(shuō)應(yīng)該是很簡(jiǎn)單的吧，我們的需求就是把[1, 2, 3]變成[1, 2, 3, 4]，看起來(lái)好像沒(méi)有錯(cuò)誒～大膽的推測(cè)一下最后的console.log()結(jié)果是什么呢，你可以自己試一下看看。

好了，不賣關(guān)子了，最后的結(jié)果是4，誒？你可能已經(jīng)清楚了這個(gè)點(diǎn)，你也可能完全不知道是怎么回事，沒(méi)關(guān)系，清楚了你就當(dāng)在復(fù)習(xí)一次，沒(méi)清楚的話那你真的應(yīng)該把這篇應(yīng)該不長(zhǎng)的總結(jié)看一下下。

上面拋磚引玉之后你可能大概加估計(jì)應(yīng)該也知道了我為什么想要做這樣一個(gè)總結(jié)，尤其是對(duì)JavaScript掌握的不是那么好的同學(xué)來(lái)說(shuō)，更是特別容易忽略的地方了。

我希望當(dāng)你看到下面方法名字的時(shí)候，應(yīng)該馬上出現(xiàn)那個(gè)方法的用法，而且應(yīng)該知道你可能沒(méi)有經(jīng)常用到的它剩下的參數(shù)還有它的返回值。

其實(shí)很多時(shí)候在MDN上面對(duì)一個(gè)方法的描述已經(jīng)非常清楚了，但是我們還是會(huì)忽略到，所以結(jié)合例子來(lái)看，可能對(duì)你的記憶會(huì)更加有幫助。

上面拋磚引玉的原因，先來(lái)說(shuō)說(shuō)這個(gè)方法，解釋一下出現(xiàn)上面情況的原因。

push() 方法將一個(gè)或多個(gè)元素添加到數(shù)組的末尾，并返回該數(shù)組的新長(zhǎng)度

這一句話其實(shí)已經(jīng)把上面的答案解釋了，我們?cè)?b>return arr.push(target)的時(shí)候，返回的是arr.push()函數(shù)的返回值，這個(gè)值是這個(gè)數(shù)組新的長(zhǎng)度，所以結(jié)果是4，來(lái)正確的使用一下這個(gè)方法。

function arrPush(arr, target) {
    arr.push(target)
    return arr;
}

var arr_1 = [1, 2, 3];

console.log(arrPush(arr_1, 4));

這個(gè)時(shí)候結(jié)果才是我們最后想要的[1, 2, 3, 4]，順便就說(shuō)說(shuō)push方法可以同時(shí)接收多個(gè)參數(shù)，像這樣arr.push(1, 2, 3, 4)，返回結(jié)果當(dāng)然還是數(shù)組的新長(zhǎng)度啦。

接著來(lái)說(shuō)說(shuō)concat合并多個(gè)數(shù)組的方法，因?yàn)橄胍厦娴?b>push做一下對(duì)比，所以選擇接著說(shuō)這個(gè)方法，來(lái)看一下小例子。

function arrConcat(arr, arr2) {
    arr.concat(arr2);
    return arr;
}

var arr_1 = [1, 2];
var arr_2 = [3, 4];

console.log(arrConcat(arr_1, arr_2));

由于上面push方法的原因，我們依然選擇return arr，這樣的結(jié)果是什么呢，還是建議大家動(dòng)手試一試，會(huì)發(fā)現(xiàn)得到的是[1, 2]，哇哦～怎么和push表現(xiàn)不一致呢，為什么又返回了[1, 2]。

concat() 方法用于合并兩個(gè)或多個(gè)數(shù)組。此方法不會(huì)更改現(xiàn)有數(shù)組，而是返回一個(gè)新數(shù)組

當(dāng)你理解了這個(gè)方法的時(shí)候，你就會(huì)發(fā)現(xiàn)MDN上面的表述真的很棒～忍不住想要夸一下它，很清楚了吧，concat方法不會(huì)改變?cè)瓉?lái)的數(shù)組，也就是當(dāng)我們return arr的時(shí)候，arr并沒(méi)有發(fā)生改變，所以還是[1, 2]，改寫(xiě)一下我們的方法。

function arrConcat(arr, arr2) {
    return arr.concat(arr2);
}

var arr_1 = [1, 2];
var arr_2 = [3, 4];

console.log(arrConcat(arr_1, arr_2));

這時(shí)候在看就會(huì)得到預(yù)期的結(jié)果了～這個(gè)方法其實(shí)還有一個(gè)神奇的地方，就是它可以直接連接一個(gè)值，并且它也能同時(shí)連接多個(gè)值或者多個(gè)數(shù)組，或者多個(gè)值和多個(gè)數(shù)組的組合，像這樣。

var arr = [1, 2];
arr.concat(3, 4, [5, 6], 7, [8, 9]); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

因?yàn)檫@兩個(gè)方法有丟丟類似，所以同時(shí)說(shuō)一下，順便講講它們的區(qū)別吧，先來(lái)看看它們的基本解釋。

map() 方法創(chuàng)建一個(gè)新數(shù)組，其結(jié)果是該數(shù)組中的每個(gè)元素都調(diào)用一個(gè)提供的函數(shù)后返回的結(jié)果
forEach() 方法對(duì)數(shù)組的每個(gè)元素執(zhí)行一次提供的函數(shù)

從這兩句解釋來(lái)看，它們都是迭代數(shù)組的每一個(gè)元素，區(qū)別是map方法會(huì)返回新的數(shù)組，而forEach方法不會(huì)，那它有返回值嗎？答案是有的...

var arr = [1, 2, 3];

var newArr = arr.map(item => {
    return item + 1; 
}); // [2, 3, 4];

var newArr2 = arr.forEach(item => {
   return item + 1; 
}); // undefined

var newArr3 = arr.map(item => {
    console.log(item + 1);
}); // [undefined, undefined, undefined]

// 2
// 3
// 4

var newArr4 = arr.forEach(item => {
    console.log(item + 1); 
}); // undefined

// 2
// 3
// 4

答案我已經(jīng)寫(xiě)在上面了，map方法必須顯示的返回值，而forEach只是對(duì)數(shù)組的每一個(gè)元素執(zhí)行內(nèi)部?jī)?nèi)容。這兩個(gè)方法的參數(shù)是一致的，回調(diào)函數(shù)和執(zhí)行回調(diào)函數(shù)時(shí)使用的this值，回調(diào)函數(shù)中的參數(shù)也是一致的，分別是數(shù)組當(dāng)前元素、當(dāng)前元素索引和數(shù)組本身。

一般來(lái)說(shuō)我們用的比較多的也就是回調(diào)函數(shù)和它的兩個(gè)參數(shù)，很多人忽略了回調(diào)函數(shù)的第三個(gè)參數(shù)，其實(shí)還蠻好用的，先不表。最后就是改變this值的參數(shù)，因?yàn)檎娴暮苌儆?，也沒(méi)有實(shí)際案例來(lái)說(shuō)，所以就不多說(shuō)了，大家知道還有這么個(gè)東西就行，如果有實(shí)際用到的情況，也可以給我分享一下，學(xué)習(xí)一下～

在es5之后的新的數(shù)組迭代方法，參數(shù)幾乎都與上述一致。

- 回調(diào)函數(shù)(數(shù)組當(dāng)前值，當(dāng)前值索引，數(shù)組本身)
- 執(zhí)行回調(diào)函數(shù)的this值

filter() 方法創(chuàng)建一個(gè)新數(shù)組, 其包含通過(guò)所提供函數(shù)實(shí)現(xiàn)的測(cè)試的所有元素

本身這個(gè)數(shù)組過(guò)濾的方法使用很簡(jiǎn)單，我就說(shuō)一丟丟在使用的時(shí)候的小技巧，比如數(shù)組去重就很好用。

var arr = [1, 2, 3, 4, 4, 5, 6, 6, 7, 8, 9];
var result = arr.filter((item, index, arr) => {
    return arr.indexOf(item) === index; 
});
console.log(result); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

上面說(shuō)了很多了～大家估計(jì)也大概知道我們?nèi)菀缀雎缘囊粋€(gè)是方法的返回值，還有就是沒(méi)有經(jīng)常使用的參數(shù)，所以我這兩個(gè)方法就直接上說(shuō)明了。

pop()方法從數(shù)組中刪除最后一個(gè)元素，并返回該元素的值。此方法更改數(shù)組的長(zhǎng)度
shift() 方法從數(shù)組中刪除第一個(gè)元素，并返回該元素的值。此方法更改數(shù)組的長(zhǎng)度

這兩個(gè)方法用法完全相同，區(qū)別就是一個(gè)彈出的是數(shù)組最后的元素，一個(gè)彈出的是數(shù)組最前面的元素，彈出這個(gè)大家看了上面方法的解釋也應(yīng)該知道我想表達(dá)的是方法返回值元素～

var arr = [1, 2, 3];

console.log(arr.pop()); // 3
console.log(arr.shift()); // 1

console.log(arr.length); // 1

我并沒(méi)有把所有的數(shù)組方法的拿出來(lái)說(shuō)一下是覺(jué)得上述這些例子已經(jīng)足以告訴大家平常我們?cè)谑褂玫臅r(shí)候容易忽略的地方，也不是什么很難理解的東西，所以就說(shuō)到這里吧～剩下的方法就靠大家自己去仔細(xì)的使用了。