JavaScript數組方法的示例分析

這篇文章將為大家詳細講解有關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

關于“JavaScript數組方法的示例分析”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。