掌握 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中文网其他相关文章！