那些被忽略的 JavaScript 陣列方法細節

青湛發表於2019-02-27
JavaScript陣列

青湛(GitHub/mintsweet) 原文連結

前言

自以為還算一個比較高產的人吧～但是感覺好久都沒有寫點什麼沒有營養的東西了，這一篇本來是打算去年年底都要拿出來說一說的，但是年底事情太多了，加上我真的變懶了拖到現在才要把這個準備了好久的標題完善一下。

之所以會突然想講一講JavaScript中的陣列，是因為我經歷了好多次事後發現很傻的問題，所以就想說還是總結一下，這篇相當於總結一樣的文章我也不想講陣列的方法是怎麼用的，畢竟不管是在哪，陣列方法的使用都有很多教程了，單純的就來說一說那些我們可能忽略的細節。

拋磚引玉

在開始正式講被我們忽略的一些陣列方法之前，我還是想先舉一個例子來說說我在其中躺過的一丟丟小坑～

現在我們隨便來有一個小小的需求，寫一個方法，有兩個引數，一個是陣列，另一個是需要新增到陣列裡面的元素。

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

var arr_1 = [1, 2, 3];

console.log(arrPush(arr_1, 4));
複製程式碼

上面的程式碼對你來說應該是很簡單的吧，我們的需求就是把[1, 2, 3]變成[1, 2, 3, 4]，看起來好像沒有錯誒～大膽的推測一下最後的console.log()結果是什麼呢，你可以自己試一下看看。

好了，不賣關子了，最後的結果是4，誒？你可能已經清楚了這個點，你也可能完全不知道是怎麼回事，沒關係，清楚了你就當在複習一次，沒清楚的話那你真的應該把這篇應該不長的總結看一下下。

意想不到陣列方法

上面拋磚引玉之後你可能大概加估計應該也知道了我為什麼想要做這樣一個總結，尤其是對JavaScript掌握的不是那麼好的同學來說，更是特別容易忽略的地方了。

我希望當你看到下面方法名字的時候，應該馬上出現那個方法的用法，而且應該知道你可能沒有經常用到的它剩下的引數還有它的返回值。

其實很多時候在MDN上面對一個方法的描述已經非常清楚了，但是我們還是會忽略到，所以結合例子來看，可能對你的記憶會更加有幫助。

array.push

上面拋磚引玉的原因，先來說說這個方法，解釋一下出現上面情況的原因。

push() 方法將一個或多個元素新增到陣列的末尾，並返回該陣列的新長度

這一句話其實已經把上面的答案解釋了，我們在return arr.push(target)的時候，返回的是arr.push()函式的返回值，這個值是這個陣列新的長度，所以結果是4，來正確的使用一下這個方法。

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

var arr_1 = [1, 2, 3];

console.log(arrPush(arr_1, 4));
複製程式碼

這個時候結果才是我們最後想要的[1, 2, 3, 4]，順便就說說push方法可以同時接收多個引數，像這樣arr.push(1, 2, 3, 4)，返回結果當然還是陣列的新長度啦。

array.concat

接著來說說concat合併多個陣列的方法，因為想要跟上面的push做一下對比，所以選擇接著說這個方法，來看一下小例子。

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，這樣的結果是什麼呢，還是建議大家動手試一試，會發現得到的是[1, 2]，哇哦～怎麼和push表現不一致呢，為什麼又返回了[1, 2]。

concat() 方法用於合併兩個或多個陣列。此方法不會更改現有陣列，而是返回一個新陣列

當你理解了這個方法的時候，你就會發現MDN上面的表述真的很棒～忍不住想要誇一下它，很清楚了吧，concat方法不會改變原來的陣列，也就是當我們return arr的時候，arr並沒有發生改變，所以還是[1, 2]，改寫一下我們的方法。

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));
複製程式碼

這時候在看就會得到預期的結果了～這個方法其實還有一個神奇的地方，就是它可以直接連線一個值，並且它也能同時連線多個值或者多個陣列，或者多個值和多個陣列的組合，像這樣。

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

arrary.map 和 array.forEach

因為這兩個方法有丟丟類似，所以同時說一下，順便講講它們的區別吧，先來看看它們的基本解釋。

map() 方法建立一個新陣列，其結果是該陣列中的每個元素都呼叫一個提供的函式後返回的結果

forEach() 方法對陣列的每個元素執行一次提供的函式

從這兩句解釋來看，它們都是迭代陣列的每一個元素，區別是map方法會返回新的陣列，而forEach方法不會，那它有返回值嗎？答案是有的...

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
複製程式碼

答案我已經寫在上面了，map方法必須顯示的返回值，而forEach只是對陣列的每一個元素執行內部內容。這兩個方法的引數是一致的，回撥函式和執行回撥函式時使用的this值，回撥函式中的引數也是一致的，分別是陣列當前元素、當前元素索引和陣列本身。

一般來說我們用的比較多的也就是回撥函式和它的兩個引數，很多人忽略了回撥函式的第三個引數，其實還蠻好用的，先不表。最後就是改變this值的引數，因為真的很少用，也沒有實際案例來說，所以就不多說了，大家知道還有這麼個東西就行，如果有實際用到的情況，也可以給我分享一下，學習一下～

arrary.filter

在es5之後的新的陣列迭代方法，引數幾乎都與上述一致。

- 回撥函式(陣列當前值，當前值索引，陣列本身)
- 執行回撥函式的this值
複製程式碼

filter() 方法建立一個新陣列, 其包含通過所提供函式實現的測試的所有元素

本身這個陣列過濾的方法使用很簡單，我就說一丟丟在使用的時候的小技巧，比如陣列去重就很好用。

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]
複製程式碼

arrary.pop 和 arrary.shift

上面說了很多了～大家估計也大概知道我們容易忽略的一個是方法的返回值，還有就是沒有經常使用的引數，所以我這兩個方法就直接上說明了。

pop()方法從陣列中刪除最後一個元素，並返回該元素的值。此方法更改陣列的長度

shift() 方法從陣列中刪除第一個元素，並返回該元素的值。此方法更改陣列的長度

這兩個方法用法完全相同，區別就是一個彈出的是陣列最後的元素，一個彈出的是陣列最前面的元素，彈出這個大家看了上面方法的解釋也應該知道我想表達的是方法返回值元素～

var arr = [1, 2, 3];

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

console.log(arr.length); // 1
複製程式碼

結語

我並沒有把所有的陣列方法的拿出來說一下是覺得上述這些例子已經足以告訴大家平常我們在使用的時候容易忽略的地方，也不是什麼很難理解的東西，所以就說到這裡吧～剩下的方法就靠大家自己去仔細的使用了。

相關文章