那些被忽略的 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

結語

我並無把全部的數組方法的拿出來講一下是以爲上述這些例子已經足以告訴你們日常咱們在使用的時候容易忽略的地方，也不是什麼很難理解的東西，因此就說到這裏吧～剩下的方法就靠你們本身去仔細的使用了。