前言

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

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

拋磚引玉

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

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

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

var arr_1 = [1, 2, 3];

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

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

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

意想不到數(shù)組方法

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

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

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

array.push

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

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

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

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

var arr_1 = [1, 2, 3];

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

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

array.concat

接著來說說concat合并多個數(shù)組的方法，因為想要跟上面的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，這樣的結(jié)果是什么呢，還是建議大家動手試一試，會發(fā)現(xiàn)得到的是[1, 2]，哇哦～怎么和push表現(xiàn)不一致呢，為什么又返回了[1, 2]。

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

當(dāng)你理解了這個方法的時候，你就會發(fā)現(xiàn)MDN上面的表述真的很棒～忍不住想要夸一下它，很清楚了吧，concat方法不會改變原來的數(shù)組，也就是當(dāng)我們return arr的時候，arr并沒有發(fā)生改變，所以還是[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));

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

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

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

map() 方法創(chuàng)建一個新數(shù)組，其結(jié)果是該數(shù)組中的每個元素都調(diào)用一個提供的函數(shù)后返回的結(jié)果

forEach() 方法對數(shù)組的每個元素執(zhí)行一次提供的函數(shù)

從這兩句解釋來看，它們都是迭代數(shù)組的每一個元素，區(qū)別是map方法會返回新的數(shù)組，而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

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

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

arrary.filter

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

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

- 執(zhí)行回調(diào)函數(shù)的this值

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

本身這個數(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]

arrary.pop 和 arrary.shift

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

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

shift() 方法從數(shù)組中刪除第一個元素，并返回該元素的值。此方法更改數(shù)組的長度

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

var arr = [1, 2, 3];

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

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

結(jié)語

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

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。

最新評論