JavaScript 陣列

什麼是陣列？

陣列是一種儲存有序元素集合的資料結構。在 JavaScript 中，陣列被歸類為一種特殊類型的對象，可以儲存數字、字串、物件或其他陣列。數組中的元素括在方括號 [ ] 中並使用從零開始的索引。從零開始的索引表示數組的第一個元素的索引為 0，第二個元素的索引為 1，依此類推。

const names = ["David", "Hannah", "William"];
console.log(names[0]); // returns the first element
// returns "David"
console.log(names[1]); // returns the second element
// returns "Hannah"
console.log(names[2]); // returns the third element
// returns "William"

如何修改或操作陣列？

數組中元素的索引

可以透過將值指派給空索引來將新元素新增至陣列。

names[3] = "Eric";
console.log(names);
// returns ["David", "Hannah", "William", "Eric"]

可以透過將新值重新指派給現有索引來修改陣列中的元素。

names[1] = "Juniper";
console.log(names);
// returns ["David", "Juniper", "William", "Eric"]

數組方法

陣列也可以使用陣列方法進行修改或操作，例如「push」、「pop」、「unshift」、「shift」、「slice」和「splice」。

'推（）'

「push」方法接受一個或多個元素作為參數，將元素加到陣列末尾，並傳回修改後的陣列的長度。

names.push("Bob");
// returns 5 
console.log(names);
// returns ["David", "Juniper", "William", "Eric", "Bob"]

'流行音樂（）'

「pop」方法不帶參數，刪除陣列的最後一個元素，並傳回刪除的元素。

names.pop();
// returns "Bob"
console.log(names);
// returns ["David", "Juniper", "William", "Eric"]

'取消移位（）'

「unshift」方法接受一個或多個元素作為參數，將這些元素加到陣列的開頭，並傳回修改後的陣列的長度。

names.unshift("Jack", "Jane");
// returns 6
console.log(names);
// returns ["Jack", "Jane", "David", "Juniper", "William", "Eric"]

'轉移（）'

「shift」方法不帶參數，刪除陣列的第一個元素，並傳回刪除的元素。

names.shift();
// returns "Jack"
console.log(names);
// returns ["Jane", "David", "Juniper", "William", "Eric"]

'片（）'

「slice」方法採用兩個可選參數（startIndex、endIndex），並傳回一個新數組，其中包含從 startIndex 到（但不包含）原始數組的 endIndex 的元素。
如果省略 startIndex，則使用 0。
如果省略 endIndex，則使用陣列長度。負索引號碼可用於從陣列結尾開始倒數。

names.slice(1, 3);
// returns ["David", "Juniper"]
names.slice(3);
// returns ["Juniper", "William", "Eric"]
names.slice(-2, 1);
// returns ["William", "Eric", "Jane"]
names.slice();
// returns ["Jane", "David", "Juniper", "William", "Eric"]

'拼接（）'

「splice」方法接受一個或多個參數（startIndex、deleteCount、element1、element2...）並傳回一個包含所有刪除元素的新陣列。從startIndex 開始，刪除deleteCount 個元素，並將下列元素參數新增到從startIndex 開始的陣列中。如果省略deleteCount，則刪除從startIndex 到陣列末端的所有元素。如果省略元素參數，則不會新增任何元素。

names.splice(0, 1, "Joe", "Alex"); 
// returns ["Jane"]
console.log(names);
// returns ["Joe", "Alex", "David", "Juniper", "William", "Eric"]
names.splice(1, 4);
// returns ["Alex", "David", "Juniper", "William"]
console.log(names);
// returns ["Joe", "Eric"]
names.splice(0, 0, "Bob", "Frank", "Maria")
// returns []
console.log(names);
// returns ["Joe", "Bob", "Frank", "Maria", "Eric"]

由於「push」、「pop」、「unshift」、「shift」和「splice」修改了原始數組，因此它們被歸類為破壞性方法。 「切片」方法使原始數組保持完整，因此它被歸類為非破壞性的。

擴充運算符 '...'

要以非破壞性方式為陣列新增元素或複製數組，可以使用擴充運算子。展開運算子將陣列展開為其元素。

const array = [1, 2, 3];
const newArray = [0, ...array, 4, 5];
// ...array spreads [1, 2, 3] into 1, 2, 3
console.log(newArray);
// returns [1, 2, 3, 4, 5]

如果沒有擴充運算符，原始陣列會嵌套在新陣列中。

const array = [1, 2, 3];
const newArray = [0, array, 4, 5];
console.log(newArray);
// returns [0, [1, 2, 3], 4, 5];

迭代數組方法

迭代數組方法在數組中的每個元素上呼叫提供的函數並傳回一個值或新數組。使用三個參數呼叫提供的函數：當前元素、當前元素的索引以及呼叫該方法的原始陣列。

function callbackFunction (currentElement, currentIndex, originalArray) {
// function body
}

迭代數組方法的一些範例包括：「find」、「filter」、「map」和「reduce」。

'尋找（）'

「find」方法以函數作為參數，並傳回數組中滿足函數條件的第一個元素。

const numbers = [5, 10, 15, 20, 25];
numbers.find(number => number > 15);
// returns 20;

'篩選（）'

「filter」方法與「find」方法類似，但傳回滿足給定函數條件的所有元素的陣列。

const numbers = [5, 10, 15, 20, 25];
numbers.filter(number => number > 15);
// returns [20, 25];

'地圖（）'

「map」方法傳回一個新數組，其中包含對原始數組中每個元素呼叫該函數的結果。

const numbers = [1, 2, 3, 4, 5];
numbers.map(number => number * number);
// returns [1, 4, 9, 16, 25]

'減少（）'

“reduce”方法接受一個函數和一個初始值作為參數。提供的函數接收四個參數：累加器、目前值、目前索引和原始陣列。提供的初始值是陣列第一個元素的累加器的值。每個元素的函數結果用作數組中下一個元素的累加器的值。如果未提供初始值，則將累加器設定為陣列的第一個元素，並從第二個元素開始呼叫回呼函數。

const numbers = [1, 2, 3, 4, 5]
numbers.reduce(((acc, number) => acc + number), 0);
// returns 15

以上是JavaScript 陣列的詳細內容。更多資訊請關注PHP中文網其他相關文章！