let myArray = [2,4,5,7,9,12,14];myArray.push(20);

檢查它是否有效：

console.log(myArray);[2,4,5,7,9,12,14,20]

在 myArray 上運(yùn)行 push() 方法將參數(shù)中給定的值添加到數(shù)組中。在本例中為 20。當(dāng)你在控制臺(tái)中檢查 myArray 時(shí)，你將看到該值現(xiàn)在已添加到數(shù)組的末尾。

2、Array.concat()

它的作用：concat() 可以將兩個(gè)或多個(gè)數(shù)組合并為一個(gè)新數(shù)組。它不會(huì)修改現(xiàn)有數(shù)組，而是創(chuàng)建一個(gè)新數(shù)組。

取 myArray 并將名為 newArray 的數(shù)組合并到其中。

let myArray = [2,4,5,7,9,12,14];let newArray = [1,2,3];let result = myArray.concat(newArray);console.log(result);[2,4,5,7,9,12,14,1,2,3]

在處理需要組合的多個(gè)數(shù)組或值時(shí)，此方法非常有效，在使用變量時(shí)只需一個(gè)非常簡(jiǎn)單的步驟。

3、 Array.join()

它的作用：join() 接受一個(gè)數(shù)組并連接數(shù)組的內(nèi)容，用逗號(hào)分隔。結(jié)果放在一個(gè)字符串中。如果要使用逗號(hào)的替代方法，可以指定分隔符。

看看它是如何使用 myArray 工作的。首先使用沒(méi)有分隔符參數(shù)的默認(rèn)方法，它將使用逗號(hào)。

let myArray = [2,4,5,7,9,12,14];myArray.join();"2,4,5,7,9,12,14"

JavaScript 將輸出一個(gè)字符串，數(shù)組中的每個(gè)值用逗號(hào)分隔。你可以在函數(shù)中使用參數(shù)來(lái)更改分隔符。用兩個(gè)參數(shù)觀察它：一個(gè)空格和一個(gè)字符串。

myArray.join(' ');"2 4 5 7 9 12 14"myArray.join(' and ');"2 and 4 and 5 and 7 and 9 and 12 and 14"

myArray.forEach(function(item){//code});

我們使用的是 myArray，forEach() 使用點(diǎn)符號(hào)。你將希望使用的函數(shù)放在參數(shù)括號(hào)內(nèi)，在示例中為 function(item)。

看看功能（項(xiàng)目）。這是在 forEach() 內(nèi)部執(zhí)行的函數(shù)，它有自己的參數(shù)。我們正在調(diào)用參數(shù)項(xiàng)。關(guān)于這個(gè)論點(diǎn)，有兩件事需要了解：

當(dāng) forEach() 遍歷你的數(shù)組時(shí)，它會(huì)將代碼應(yīng)用于此參數(shù)。將其視為保存當(dāng)前元素的臨時(shí)變量。

你選擇參數(shù)的名稱，它可以命名為你想要的任何名稱。通常，這將命名為更易于理解的名稱，例如“項(xiàng)目”或“元素”。

考慮到這兩件事，請(qǐng)查看這個(gè)簡(jiǎn)單的示例。將每個(gè)值加 15，并讓控制臺(tái)顯示結(jié)果。

myArray.forEach(function(item){    console.log(item + 15);});

我們?cè)谶@個(gè)例子中使用 item 作為變量，所以函數(shù)被編寫為通過(guò) item 為每個(gè)值添加 15。然后控制臺(tái)打印結(jié)果。這就是結(jié)果的樣子。

 16 17 18undefined

結(jié)果是數(shù)組中的每個(gè)數(shù)字，但添加了 15！

5、Array.map()

它的作用：map() 對(duì)數(shù)組中的每個(gè)元素執(zhí)行一個(gè)函數(shù)，并將結(jié)果放入一個(gè)新數(shù)組中。

在每個(gè)元素上運(yùn)行一個(gè)函數(shù)聽起來(lái)像 forEach()。這里的區(qū)別是 map() 在運(yùn)行時(shí)創(chuàng)建一個(gè)新數(shù)組。forEach() 不會(huì)自動(dòng)創(chuàng)建新數(shù)組，你必須編寫特定函數(shù)才能這樣做。

使用 map() 將 myArray 中每個(gè)元素的值加倍，并將它們放入一個(gè)新數(shù)組中。你將看到相同的 function(item) 語(yǔ)法以進(jìn)行更多練習(xí)。

let myArray = [2,4,5,7,9,12,14];let doubleArray = myArray.map(function(item){return item * 2;});

在控制臺(tái)中檢查結(jié)果。

console.log(doubleArray);[4,8,10,14,18,24,28]

myArray 不變：

console.log(myArray);[2,4,5,7,9,12,14]

6、Array.unshift()

它的作用：與 push() 方法的工作方式類似，unshift() 方法接受你的數(shù)組并將一個(gè)或多個(gè)元素添加到數(shù)組的開頭而不是結(jié)尾，并返回?cái)?shù)組的新長(zhǎng)度。此方法將修改你現(xiàn)有的數(shù)組。

let myArray = [2,4,5,7,9,12,14];myArray.unshift(0);

在將數(shù)組記錄到控制臺(tái)時(shí)，你應(yīng)該會(huì)在數(shù)組的開頭看到數(shù)字 0。

console.log(myArray);[0, 2,4,5,7,9,12,14]

7、Array.sort()

它的作用：排序是對(duì)數(shù)組執(zhí)行的最常見操作之一，非常有用。JavaScript 的 sort() 數(shù)組方法可用于僅用一行代碼對(duì)數(shù)字，甚至字符串?dāng)?shù)組進(jìn)行排序。這個(gè)操作到位，通過(guò)修改初始數(shù)組返回排序后的數(shù)組。這次為 myArray 取一組不同的數(shù)字。

let myArray = [12, 55, 34, 65, 10];myArray.sort((a,b) => a - b);

由于排序是就地完成的，因此，你不必為排序數(shù)組聲明單獨(dú)的變量。

console.log(myArray);[10, 12, 34, 55, 65]

默認(rèn)情況下，數(shù)組按升序排序，但你可以選擇將自定義函數(shù)傳遞給 sort() 方法，以按所需方式對(duì)數(shù)組進(jìn)行排序。在這種情況下，我傳遞了一個(gè)自定義箭頭函數(shù)來(lái)按數(shù)字升序?qū)?shù)組進(jìn)行排序。

8、Array.reverse()

它的作用：顧名思義，reverse() 方法用于反轉(zhuǎn)數(shù)組中元素的順序。請(qǐng)注意，這不會(huì)反轉(zhuǎn)數(shù)組的內(nèi)容，而只會(huì)反轉(zhuǎn)順序本身。這是一個(gè)可以更好地理解此方法的示例：

let myArray = [2,4,5,7,9,12,14];myArray.reverse()

將輸出記錄到控制臺(tái)以驗(yàn)證操作。

console.log(myArray);[14, 12, 9, 7, 5, 4, 2]

如你所見，元素的順序已顛倒。以前，最后一個(gè)索引處的元素（索引 6 處的元素 14）現(xiàn)在是第0個(gè)索引處的元素，依此類推。

9、 Array.slice()

它的作用：slice() 用于檢索數(shù)組一部分的淺拷貝。簡(jiǎn)單來(lái)說(shuō)，此方法允許你通過(guò)索引從數(shù)組中選擇特定元素。你可以傳遞要從中檢索的元素的起始索引和元素以及可選的結(jié)束索引。

如果不提供結(jié)束索引，則將檢索從開始索引到數(shù)組末尾的所有元素。此方法返回一個(gè)新數(shù)組并且不會(huì)修改現(xiàn)有數(shù)組。

let myArray = [2,4,5,7,9,12,14];let slicedArray = myArray.slice(2);

在上面的代碼中，由于沒(méi)有傳遞結(jié)束索引參數(shù)，因此檢索了從第二個(gè)索引到最后一個(gè)索引的所有元素。將兩個(gè)陣列都記錄到控制臺(tái)。

console.log(myArray);console.log(slicedArray);[2, 4, 5, 7, 9, 12, 14][5, 7, 9, 12, 14]

顯然，slice() 方法沒(méi)有修改初始數(shù)組，而是返回一個(gè)存儲(chǔ)在 slicedArray 變量中的新數(shù)組。這是一個(gè)示例，其中結(jié)束索引參數(shù)也傳遞給 slice() 方法。

let myArray = [2,4,5,7,9,12,14];let slicedArray = myArray.slice(1, 3);console.log(slicedArray);[4, 5]

10、Array.splice()

它的作用：splice() 是一種有用的數(shù)組方法，用于刪除或替換數(shù)組中的元素。通過(guò)指定要?jiǎng)h除的元素的索引和數(shù)量，它修改了數(shù)組。

let myArray = [2,4,5,7,9,12,14];myArray.splice(2, 3);console.log(myArray);

在上面的例子中，myArray 數(shù)組是從索引 2 拼接而成的，并且從中刪除了 3 個(gè)元素。該數(shù)組現(xiàn)在包括：

[2, 4, 12, 14]

要替換元素而不是僅僅刪除它們，你可以使用要替換的元素傳遞任意數(shù)量的可選參數(shù)，如下所示：

let myArray = [2,4,5,7,9,12,14];myArray.splice(2, 3, 1, 2, 3);console.log(myArray);[2, 4, 1, 2, 3, 12, 14]

11、 Array.filter()

它的作用：filter() 方法是一個(gè)有用的數(shù)組方法，它接受一個(gè)包含測(cè)試的函數(shù)并返回一個(gè)包含所有通過(guò)該測(cè)試的元素的新數(shù)組。

顧名思義，此方法用于從其他元素中過(guò)濾你需要的元素。過(guò)濾是使用返回布爾值的函數(shù)完成的。

下面是一個(gè) filter() 方法的示例，該方法用于僅從數(shù)組中獲取可被 2 整除的元素。

let myArray = [2,4,5,7,9,12,14];let divisibleByTwo = myArray.filter((number) => number % 2 === 0);console.log(divisibleByTwo);

在上面的例子中，一個(gè)箭頭函數(shù)作為參數(shù)傳遞，它從原始數(shù)組中獲取每個(gè)數(shù)字，并使用除 (%) 和相等 (===) 運(yùn)算符檢查它是否可以被 2 整除。輸出如下所示：

[2, 4, 12, 14]

12、Array.reduce()

它的作用：reduce() 是一個(gè)數(shù)組方法，它接受一個(gè) reducer 函數(shù)并在每個(gè)數(shù)組元素上執(zhí)行它以在返回時(shí)輸出單個(gè)值。

它需要一個(gè)帶有累加器變量和當(dāng)前元素變量的 reducer 函數(shù)作為必需的參數(shù)。累加器的值在所有迭代中都會(huì)被記住，并最終在最后一次迭代后返回。

此方法的一個(gè)流行用例是計(jì)算數(shù)組中所有元素的總和。該功能的實(shí)現(xiàn)如下：

let myArray = [2,4,5,7,9,12,14];let sumOfNums = myArray.reduce((sum, currentNum) => sum + currentNum, 0);

0 作為上面例子中的第二個(gè)參數(shù)傳遞，用作累加器變量的初始值。sumOfNums 變量將包含 reduce() 方法的返回值，該值預(yù)計(jì)是數(shù)組中所有元素的總和。

console.log(sumOfNums);53

13、Array.includes()

它的作用：在數(shù)組中搜索一個(gè)元素以檢查它是否存在是一個(gè)經(jīng)常使用的操作，因此，JavaScript 有一個(gè)內(nèi)置的方法，以 contains() 數(shù)組方法的形式。使用方法如下：

let myArray = [2,4,5,7,9,12,14];console.log(myArray.includes(4));console.log(myArray.includes(2, 1));console.log(myArray.includes(12, 2));console.log(myArray.includes(18));

此方法接受一個(gè)必需參數(shù)（要搜索的元素）和一個(gè)可選參數(shù)（從其開始搜索的數(shù)組索引）。

根據(jù)該元素是否存在，它將分別返回 true 或 false。因此，輸出將是：

truefalsetruefalse

14、 Array.indexOf()

它的作用：indexOf() 方法用于找出可以在數(shù)組中找到第一次出現(xiàn)指定元素的索引。盡管它類似于includes() 方法，但如果元素不存在于數(shù)組中，則此方法返回?cái)?shù)字索引或-1。

let myArray = [2,4,5,7,9,12,14];console.log(myArray.indexOf(4));console.log(myArray.indexOf("4"));console.log(myArray.indexOf(9, 2));

indexOf() 方法使用嚴(yán)格相等來(lái)檢查元素是否存在，這意味著值以及數(shù)據(jù)類型應(yīng)該相同。可選的第二個(gè)參數(shù)采用索引開始搜索。根據(jù)這些標(biāo)準(zhǔn)，輸出將如下所示：

1-14

15、 Array.fill()

它的作用：通常，你可能需要將數(shù)組中的所有值設(shè)置為靜態(tài)值，例如 0。你可以嘗試使用 fill() 方法來(lái)代替循環(huán)，以達(dá)到相同目的。

你可以在具有 1 個(gè)必需參數(shù)的數(shù)組上調(diào)用此方法：用于填充數(shù)組的值和 2 個(gè)可選參數(shù)：要填充的開始和結(jié)束索引。此方法修改現(xiàn)有數(shù)組。

let myArray = [2,4,5,7,9,12,14];let array1 = myArray.fill(0);myArray = [2,4,5,7,9,12,14];let array2 = myArray.fill(0, 2);myArray = [2,4,5,7,9,12,14];let array3 = myArray.fill(0, 1, 3);

在將輸出記錄到控制臺(tái)時(shí)，你將看到：

console.log(array1);console.log(array2);console.log(array3);[0, 0, 0, 0, 0, 0, 0][2, 4, 0, 0, 0, 0, 0][2, 0, 0, 7, 9, 12, 14]

JavaScript 之旅的后續(xù)步驟

數(shù)組是 JavaScript 語(yǔ)言的一個(gè)強(qiáng)大部分，這就是為什么有這么多內(nèi)置方法可以讓你作為開發(fā)人員的生活更輕松。掌握這15種方法最好的方法就是練習(xí)。

如果你喜歡這篇文章，請(qǐng)給我我點(diǎn)個(gè)贊。

感謝你的時(shí)間，謝謝閱讀，祝編程快樂(lè)！

學(xué)習(xí)更多技能

請(qǐng)點(diǎn)擊下方公眾號(hào)