掌握 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 之前结束的新数组。

如果省略 `end` 参数，`slice()` 将复制从 `start` 索引到数组末尾的所有内容：

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()` 在一次操作中**删除和添加元素**：

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

// Remove 2 elements at index 1 and add 6 and 7
arr.splice(1, 2, 6, 7);

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

3. forEach() 方法

`forEach()` 方法用于**迭代数组的元素**并将函数应用于每个元素。与 `map()` 或 `filter()` 不同，`forEach()` 不会返回新数组；它只是对每个元素执行给定的函数。

句法：

array.forEach(callback(currentValue, index, array));

callback：在每个元素上执行的函数。currentValue：数组中当前正在处理的元素。index：当前元素的索引。array：正在调用 forEach 的数组。

例子：

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

// Print each element of the array
arr.forEach(function(element) {
  console.log(element);
});

// Output:
// 1
// 2
// 3
// 4
// 5

使用箭头函数：

你也可以使用箭头函数来使代码更简洁：

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

arr.forEach((element, index) => {
  console.log(`Index ${index}: ${element}`);
});

// Output:
// Index 0: 1
// Index 1: 2
// Index 2: 3
// Index 3: 4
// Index 4: 5

修改数组元素：

请记住，“forEach()”用于执行副作用（例如，记录或更新值），而不是用于返回或修改数组。如果您需要基于现有数组创建新数组，请考虑使用“map()”。

const arr = [1, 2, 3];

// Double each element (but doesn't return a new array)
arr.forEach((element, index, array) => {
  array[index] = element * 2;
});

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

切片、拼接和 forEach 的比较

结论

slice() 非常适合提取数组的一部分而不修改原始数组。

splice() 允许您删除、替换或添加数组中的元素，并且它会修改原始数组。

forEach() 非常适合迭代数组元素并执行副作用，但它不会返回新数组。

这些方法是使用 JavaScript 中的数组时必不可少的工具，可以使您的代码更高效、更易读。

**嗨，我是 Abhay Singh Kathayat！**

我是一名全栈开发人员，精通前端和后端技术。我使用多种编程语言和框架来构建高效、可扩展且用户友好的应用程序。

请随时通过我的商务电子邮件联系我：kaashshorts28@gmail.com。

CLIS.CC