掌握 JavaScript 中的陣列函數：slice、splice 和 forEach

JavaScript 中的陣列函數：slice、splice 和 forEach

JavaScript 陣列附帶了一組內建方法，可協助您操作陣列元素並與之互動。三種常用的陣列方法是 slice、splice 和 forEach。這些方法可以大大增強您以乾淨且有效率的方式使用陣列的能力。

1. slice() 方法

slice() 方法用於提取數組的一部分而不修改原始數組。它會建立數組一部分的淺拷貝並傳回一個新數組。

文法：

array.slice(start, end);

• start：開始擷取的索引。包含該索引處的元素。
• end：結束擷取的索引（不包含）。如果省略，它將切片直到數組末尾。

範例：

const arr = [1, 2, 3, 4, 5];

// Slice from index 1 to index 3 (excluding index 3)
const newArr = arr.slice(1, 3);

console.log(newArr);  // Output: [2, 3]

• 在此範例中，arr.slice(1, 3) 傳回一個從索引 1 開始並在索引 3 之前結束的新陣列。

如果省略結束參數，slice() 會將所有內容從起始索引複製到陣列結尾：

const arr = [1, 2, 3, 4, 5];

// Slice from index 2 to the end
const newArr = arr.slice(2);

console.log(newArr);  // Output: [3, 4, 5]

負指數：

您也可以使用負索引從陣列結尾開始切片：

const arr = [1, 2, 3, 4, 5];

// Slice from index -3 to the end
const newArr = arr.slice(-3);

console.log(newArr);  // Output: [3, 4, 5]

2. splice() 方法

splice() 方法用於透過新增或刪除元素來修改陣列。它會變更原始數組，並可用於在特定索引處插入或刪除項目。

文法：

array.splice(start, deleteCount, item1, item2, ..., itemN);

• start：開始更改陣列的索引。
• deleteCount：從起始索引開始刪除的元素數量。
• item1, item2, ..., itemN：從起始索引開始加入到陣列的元素。

範例：

const arr = [1, 2, 3, 4, 5];

// Remove 2 elements from index 2
const removedElements = arr.splice(2, 2);

console.log(arr);  // Output: [1, 2, 5]
console.log(removedElements);  // Output: [3, 4]

• 在此範例中，arr.splice(2, 2) 刪除從索引 2 開始的 2 個元素（3 和 4）。

您也可以使用 splice() 將元素加入陣列：

const arr = [1, 2, 3, 4, 5];

// Insert 6 and 7 at index 2
arr.splice(2, 0, 6, 7);

console.log(arr);  // Output: [1, 2, 6, 7, 3, 4, 5]

• 此處，arr.splice(2, 0, 6, 7) 在索引 2 處插入 6 和 7，而不刪除任何元素（deleteCount 為 0）。

一起刪除並新增：

您也可以使用 splice() 在一次操作中刪除和新增元素：

array.slice(start, end);

3. forEach() 方法

forEach() 方法用於迭代數組的元素並對每個元素應用一個函數。與map()或filter()不同，forEach()不傳回新數組；它只是在每個元素上執行給定的函數。

文法：

const arr = [1, 2, 3, 4, 5];

// Slice from index 1 to index 3 (excluding index 3)
const newArr = arr.slice(1, 3);

console.log(newArr);  // Output: [2, 3]

• callback：要在每個元素上執行的函數。
  • currentValue：陣列中目前正在處理的元素。
  • index：當前元素的索引。
  • array：正在呼叫 forEach 的陣列。

範例：

const arr = [1, 2, 3, 4, 5];

// Slice from index 2 to the end
const newArr = arr.slice(2);

console.log(newArr);  // Output: [3, 4, 5]

使用箭頭函數：

也可以使用箭頭函數讓程式碼更簡潔：

const arr = [1, 2, 3, 4, 5];

// Slice from index -3 to the end
const newArr = arr.slice(-3);

console.log(newArr);  // Output: [3, 4, 5]

修改陣列元素：

請記住，forEach() 用於執行副作用（例如，記錄或更新值），而不是用於傳回或修改陣列。如果您需要基於現有數組的新數組，請考慮使用map()。

array.splice(start, deleteCount, item1, item2, ..., itemN);

slice、splice 和 forEach 的比較

Method	Purpose	Mutates Original Array	Returns Value
slice	Extracts a portion of an array without modifying it	No	A new array (shallow copy)
splice	Adds/removes elements at specific positions in array	Yes	The removed elements (array)
forEach	Executes a function on each array element	No	undefined

結論

• slice() 非常適合提取數組的一部分而不修改原始數組。
• splice() 允許您刪除、取代或為陣列新增元素，並且它會修改原始陣列。
• forEach() 非常適合迭代數組元素並執行副作用，但它不會傳回新數組。

這些方法是在 JavaScript 中處理陣列時必不可少的工具，可以使您的程式碼更有效率和可讀。

---

嗨，我是 Abhay Singh Kathayat！
我是一名全端開發人員，擁有前端和後端技術的專業知識。我使用各種程式語言和框架來建立高效、可擴展且用戶友好的應用程式。
請隨時透過我的商務電子郵件與我聯繫：kaashshorts28@gmail.com。

以上是掌握 JavaScript 中的陣列函數：slice、splice 和 forEach的詳細內容。更多資訊請關注PHP中文網其他相關文章！