如何在 JavaScript 中使用數組方法：Mutator 方法
本文最初是為 DigitalOcean 編寫的 .
JavaScript 中的數組由元素列表組成。 JavaScript 有許多有用的內置方法，我們將在本文中進行回顧。
為了充分利用本教程，您應該對數組的創建、索引、修改和循環有一定的了解，您可以在教程中了解 JavaScript 中的數組。
數組類似於字符串，因為它們都由一系列可以通過索引號訪問的元素組成。但是，重要的是要記住字符串是不可變的數據類型，這意味著它們不能更改。另一方面，數組是可變的，這意味著許多數組方法會影響原始數組，而不是數組的副本。
修改原始數組的方法稱為 mutator 方法和返回新值或表示的方法稱為 訪問器 方法。
在本文中，我們將學習添加和刪除元素、反轉、替換、合併和以其他方式修改數組中的元素。
訪問器方法
concat()
concat() 方法將兩個或多個數組合併在一起形成一個新數組。它不會改變或影響任何原始數組。
在下面的示例中，我們將創建兩個貝類類型的數組，並將它們組合成一個新數組。
// Create arrays of monovalves and bivalves
let monovalves = ['abalone', 'conch']
let bivalves = ['oyster', 'mussel', 'clam']
// Concatenate them together into shellfish variable
let shellfish = monovalves.concat(bivalves)[ 'abalone', 'conch', 'oyster', 'mussel', 'clam' ]
concat() 方法可以接受多個參數，有效地允許您使用單個方法將多個數組連接在一起。
join()
join() 方法將數組的所有元素轉換為一個新的字符串。
let fish = ['piranha', 'barracuda', 'koi', 'eel']
如果沒有給出參數，join() 的輸出 將是一個逗號分隔的字符串，沒有多餘的空格。
// Join the elements of an array into a string
let fishString = fish.join()'piranha,barracuda,koi,eel'
join()的參數 函數將包含每個數組元素之間的分隔符。
// Join the elements of an array into a string
let fishString = fish.join(', ')'piranha, barracuda, koi, eel'
在上面的例子中，寫 ', ' 用空格以更易讀的方式分隔數組項。作為參數提供的空字符串將完全刪除默認逗號。
slice()
slice() 方法將數組的一部分複製到一個新數組中。
let fish = ['piranha', 'barracuda', 'koi', 'eel']
假設我們想將數組中的最後兩項複製到一個新數組中。我們將從我們想要的第一個元素的索引號開始，即 2 對於 koi .我們將以索引號結束以下 我們想要的最後一個元素。 eel 是 4 ，所以我們把 5 .
// Slice a new array from 2 to 5
let fishWithShortNames = fish.slice(2, 5)[ 'koi', 'eel' ]
在這種特殊情況下，由於 eel 是數組中的最後一項，第二個參數實際上是不必要的。 slice() 如果沒有提供第二個參數，將從第一個索引開始並在數組末尾停止。
// Slice a new array from 2 to the end of the array
let fishWithShortNames = fish.slice(2)[ 'koi', 'eel' ]
slice() 是訪問器方法，不會修改原始數組。 slice() 不要與 splice() 混淆 ，可以在原始數組中添加或刪除項目。
indexOf()
indexOf() 方法返回元素第一個實例的索引號。
在下面的示例中，我們有一個字符串，其中 barracuda 被列出兩次。
let fish = ['piranha', 'barracuda', 'koi', 'barracuda']
我們將使用 indexOf() 找到第一個實例。
// Find the first instance of an element
fish.indexOf('barracuda')1
如果給定的參數是數組中不存在的值，控制台將返回 -1 .
lastIndexOf()
lastIndexOf() 方法返回元素最後一個實例的索引號。
我們可以對 indexOf() 中的相同示例進行測試 ，其中包括 barracuda 兩次。
let fish = ['piranha', 'barracuda', 'koi', 'barracuda']
// Find the last instance of an element
fish.lastIndexOf('barracuda')3
lastIndexOf() 將從數組末尾開始搜索並返回找到的第一個索引號。
迭代方法
forEach()
forEach() 方法為數組中的每個元素調用一個函數。
我們可以使用 forEach() 打印 fish 中的每個項目 數組到控制台。
let fish = ['piranha', 'barracuda', 'koi', 'eel']
// Print out each item in the array
fish.forEach((individualFish) => {
console.log(individualFish)
})piranha
barracuda
koi
eel
另一種方法是使用 for loop 關鍵字並針對數組的長度屬性對其進行測試。
// Loop through the length of the array
for (let i = 0; i < fish.length; i++) {
console.log(fish[i])
}
上面的代碼將具有與使用 forEach() 相同的輸出 方法。 forEach() 對於這個特定的任務來說更加簡潔和直接。 forEach() 是一種迭代方法。
map()
map() 方法創建一個新數組，其中包含對數組中每個元素的函數調用結果。
就像 forEach() , map() 是一種迭代方法，作為示例，我們可以將循環的每次迭代打印到控制台。 map() 不會改變原始數組，它會返回一個新的數組值。 map() 必須放入一個新變量中，不像 forEach() .
let fish = ['piranha', 'barracuda', 'koi', 'eel']
// Print out each item in the array
let printFish = fish.map((individualFish) => {
console.log(individualFish)
})piranha
barracuda
koi
eel
我們可以使用 map() 更改數組中每個項目的值。例如，我們將添加一個 s 到 fish 中每個項目的末尾 數組以復數形式。
// Pluralize all items in the fish array
let pluralFish = fish.map((individualFish) => {
return `${individualFish}s`
})[ 'piranhas', 'barracudas', 'kois', 'eels' ]
原fish 變量不變，但 pluralFish 現在包含原始變量的修改版本。
filter()
filter() 方法創建一個新數組，其中包含通過給定測試結果的元素。
我們可以使用 filter() 返回一個新數組，該數組僅包含列表中以特定字母開頭的項目。
let seaCreatures = ['shark', 'whale', 'squid', 'starfish', 'narwhal']
// Filter all creatures that start with "s" into a new list
let filteredList = seaCreatures.filter((creature) => {
return creature[0] === 's'
})[ 'shark', 'squid', 'starfish' ]
我們測試了數組中的哪些項目具有 s 在 0 索引，並將結果賦值給一個新的變量。
filter() 是一種迭代方式，不會對原數組進行變異。
reduce()
reduce() 方法會將數組縮減為單個值。
這在數字中很常見，例如求數組中所有數字的總和。
let numbers = [42, 23, 16, 15, 4, 8]
// Get the sum of all numerical values
let sum = numbers.reduce((a, b) => {
return a + b
})108
reduce() 也可以與字符串和其他數據類型一起使用。 reduce() 返回的值 可以是數字、字符串、數組或其他數據類型。 reduce() 是一種不改變原始數組的迭代方法。
find()
find() 方法返回數組中通過給定測試的第一個值。
例如，我們將創建一個海洋生物數組。
let seaCreatures = ['whale', 'octopus', 'shark', 'cuttlefish', 'flounder']
然後我們將使用 find() 方法來測試數組中的任何生物是否是頭足類動物。
// Check if a given value is a cephalopod
const isCephalopod = (cephalopod) => {
return ['cuttlefish', 'octopus'].includes(cephalopod)
}
seaCreatures.find(isCephalopod)octopus
自 octopus 是數組中滿足 isCephalopod() 中測試的第一個條目 函數，它是第一個返回的值。
findIndex()
find() 方法返回數組中通過給定測試的第一個索引。
我們可以使用相同的seaCreatures find() 中的示例 方法。
let seaCreatures = ['whale', 'octopus', 'shark', 'cuttlefish', 'flounder']
使用 isCephalopod 測試，我們會找到索引號而不是第一個匹配的值。
// Check if a given value is a cephalopod
const isCephalopod = (cephalopod) => {
return ['cuttlefish', 'octopus'].includes(cephalopod)
}
seaCreatures.findIndex(isCephalopod)1
octopus 是第一個匹配測試的項目，索引為 1 ，因此它是返回的索引號。如果測試不滿足，findIndex() 將返回 -1 .
結論
在本課中，我們回顧了 JavaScript 中主要的內置訪問器和迭代數組方法。數組方法非常多樣化和有用，允許您對數組進行添加、刪除、插入、變異、修改和循環。
要查看數組的基礎知識，請閱讀了解 JavaScript 中的數組。要查看所有數組方法的完整列表，請查看 Mozilla 開發者網絡上的數組參考。
