掌握 JavaScript 数组方法：了解如何操作和优化数组

前端开发工程师（主业）、技术博主（副业）、已过CET6
阿珊和她的猫_CSDN个人主页
牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》
蓝桥云课签约作者、已在蓝桥云课上架的前后端实战课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

JavaScript 中的数组有许多常见的方法，可以对数组进行各种操作。以下是一些常见的数组方法：

1. push()： 在数组末尾添加一个或多个元素，并返回修改后的数组的新长度。

以下是使用 push() 方法向 JavaScript 数组添加元素的简单代码示例：

let array = [1, 2, 3];
console.log("原始数组:", array); // 输出: 原始数组: [1, 2, 3]

array.push(4); // 向数组末尾添加元素 4
console.log("添加元素后的数组:", array); // 输出: 添加元素后的数组: [1, 2, 3, 4]

array.push(5, 6); // 向数组末尾同时添加元素 5 和 6
console.log("再次添加元素后的数组:", array); // 输出: 再次添加元素后的数组: [1, 2, 3, 4, 5, 6]

以上代码示例创建了一个初始数组 [1, 2, 3]。然后使用 push() 方法向数组末尾添加元素。在第一个 push() 调用之后，数组变为 [1, 2, 3, 4]。第二个 push() 调用在数组末尾同时添加了两个元素，使数组变为 [1, 2, 3, 4, 5, 6]。

你可以试着运行这段代码，以查看添加元素后数组的结果。

2. pop()： 删除并返回数组的最后一个元素。

以下是使用 pop() 方法从 JavaScript 数组中移除元素的代码示例：

let array = [1, 2, 3, 4, 5];
console.log("原始数组:", array); // 输出: 原始数组: [1, 2, 3, 4, 5]

let removedElement = array.pop(); // 移除数组末尾的元素并将其存储在变量中
console.log("移除的元素:", removedElement); // 输出: 移除的元素: 5

console.log("移除元素后的数组:", array); // 输出: 移除元素后的数组: [1, 2, 3, 4]

以上代码示例创建了一个初始数组 [1, 2, 3, 4, 5]。然后使用 pop() 方法从数组末尾移除一个元素。将移除的元素存储在变量 removedElement 中，这里是 5。最后，打印出移除元素后的数组，结果为 [1, 2, 3, 4]。

你可以尝试运行这段代码，以查看移除元素后的数组和移除的元素的结果。

3. shift()： 删除并返回数组的第一个元素。

以下是使用 shift() 方法从 JavaScript 数组中移除元素的代码示例：

let array = [1, 2, 3, 4, 5];
console.log("原始数组:", array); // 输出: 原始数组: [1, 2, 3, 4, 5]

let removedElement = array.shift(); // 移除数组开头的元素并将其存储在变量中
console.log("移除的元素:", removedElement); // 输出: 移除的元素: 1

console.log("移除元素后的数组:", array); // 输出: 移除元素后的数组: [2, 3, 4, 5]

以上代码示例创建了一个初始数组 [1, 2, 3, 4, 5]。然后使用 shift() 方法从数组开头移除一个元素。将移除的元素存储在变量 removedElement 中。在这个例子中，被移除的元素是 1。移除元素后，数组变为 [2, 3, 4, 5]。

你可以尝试运行这段代码，以查看移除元素后数组的结果。

4. unshift()： 在数组开头添加一个或多个元素，并返回修改后的数组的新长度。

以下是一个使用unshift方法的代码示例：

let arr = [1, 2, 3, 4, 5];
console.log("原始数组:", arr); // [1, 2, 3, 4, 5]

arr.unshift(0); // 在数组开头添加元素
console.log("使用unshift方法后的数组:", arr); // [0, 1, 2, 3, 4, 5]

arr.unshift(-2, -1); // 在数组开头添加多个元素
console.log("再次使用unshift方法后的数组:", arr); // [-2, -1, 0, 1, 2, 3, 4, 5]

在这个例子中，我们创建了一个包含数字1到5的数组arr。然后，我们使用unshift方法在数组开头添加了元素。首先使用unshift(0)将0添加到数组的开头，然后再次使用unshift(-2, -1)将-2和-1添加到数组的开头。最终的输出结果分别是[0, 1, 2, 3, 4, 5]和[-2, -1, 0, 1, 2, 3, 4, 5]。

5. concat()： 将多个数组或值合并为一个新数组，并返回新数组。

以下是使用 concat() 方法将两个数组合并的 JavaScript 代码示例：

let array1 = [1, 2, 3];
let array2 = [4, 5, 6];

let concatenatedArray = array1.concat(array2);

console.log("合并后的数组:", concatenatedArray);
// 输出: 合并后的数组: [1, 2, 3, 4, 5, 6]

以上代码示例创建了两个数组 array1 和 array2，分别包含 [1, 2, 3] 和 [4, 5, 6]。通过调用 concat() 方法，并传递另一个数组作为参数，将两个数组合并为一个新的数组 concatenatedArray。最后，打印输出合并后的数组 concatenatedArray，结果是 [1, 2, 3, 4, 5, 6]。

你可以尝试运行以上代码，观察合并后的数组结果。

6. slice()： 返回选定数组的一部分，不会改变原数组。

以下是一个使用slice方法的代码示例：

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

// 使用slice方法复制数组
let copyArr = arr.slice();
console.log("复制的数组:", copyArr); // [1, 2, 3, 4, 5]

// 使用slice方法截取部分数组
let sliceArr = arr.slice(1, 4);
console.log("截取的数组:", sliceArr); // [2, 3, 4]

// 使用负数索引截取数组
let negativeSliceArr = arr.slice(-3);
console.log("负数索引截取的数组:", negativeSliceArr); // [3, 4, 5]

在这个例子中，我们创建了一个包含数字1到5的数组arr。然后，我们使用slice方法进行不同的操作。

首先，使用slice()复制整个数组，并将结果存储在copyArr变量中。通过这个操作，我们创建了一个与原始数组相同的新数组。

接着，使用slice(1, 4)截取了原始数组的索引1到索引3之间的部分，也就是数字2、3和4，并将结果存储在sliceArr变量中。

最后，使用slice(-3)使用负数索引截取了原始数组的最后三个数字，并将结果存储在negativeSliceArr变量中。

输出结果分别是[1, 2, 3, 4, 5]、[2, 3, 4]和[3, 4, 5]。

7. splice()： 从数组中添加/删除元素，可以在指定位置添加或删除元素，并返回被删除的元素组成的新数组。

以下是使用 splice() 方法对 JavaScript 数组进行插入、删除和替换操作的代码示例：

let array = [1, 2, 3, 4, 5];

// 插入元素
array.splice(2, 0, 6); // 从索引 2 开始插入元素 6
console.log("插入元素后的数组:", array);
// 输出: 插入元素后的数组: [1, 2, 6, 3, 4, 5]

// 删除元素
array.splice(3, 1); // 从索引 3 开始删除 1 个元素
console.log("删除元素后的数组:", array);
// 输出: 删除元素后的数组: [1, 2, 6, 4, 5]

// 替换元素
array.splice(1, 2, 7, 8); // 从索引 1 开始删除 2 个元素，并插入元素 7 和 8
console.log("替换元素后的数组:", array);
// 输出: 替换元素后的数组: [1, 7, 8, 4, 5]

在以上代码示例中，我们创建了一个初始数组 [1, 2, 3, 4, 5]。然后使用 splice() 方法进行插入、删除和替换操作。

• 插入元素：使用 array.splice(2, 0, 6) 表示从索引 2 处开始插入元素 6。结果是数组变为 [1, 2, 6, 3, 4, 5]。
• 删除元素：使用 array.splice(3, 1) 表示从索引 3 处删除 1 个元素。结果是数组变为 [1, 2, 6, 4, 5]。
• 替换元素：使用 array.splice(1, 2, 7, 8) 表示从索引 1 处开始删除 2 个元素，并在此位置插入元素 7 和 8。结果是数组变为 [1, 7, 8, 4, 5]。

你可以尝试运行以上代码，观察插入、删除和替换元素后的数组结果。

8. join()： 将数组中的所有元素转化为一个字符串，并使用指定的分隔符连接。

以下是使用 join() 方法将数组元素连接成字符串的 JavaScript 代码示例：

let array = ["Hello", "World", "!"];

let joinedString = array.join(" ");
console.log("连接后的字符串:", joinedString);
// 输出: 连接后的字符串: Hello World !

在以上代码示例中，我们创建了一个包含三个元素的数组 array，其中包含字符串 “Hello”、“World” 和 “!”。然后使用 join() 方法将数组元素连接成一个字符串。

join() 方法接受一个可选的分隔符作为参数，用于在连接数组元素时分隔它们。在示例中，我们使用空格 " " 作为分隔符，通过 array.join(" ") 将数组元素连接成字符串，结果存储在 joinedString 变量中。

最后，通过打印输出 joinedString 可以看到连接后的字符串为 “Hello World !”。

你可以尝试修改分隔符或数组元素，然后运行以上代码，观察连接后的字符串结果。

9. indexOf()： 返回数组中第一个与指定值相等的元素的索引位置，如果找不到，则返回 -1。

以下是一个使用indexOf方法的代码示例：

let arr = ['apple', 'banana', 'orange', 'grape'];

// 使用indexOf方法查找元素的索引
console.log("apple的索引:", arr.indexOf('apple')); // 0
console.log("orange的索引:", arr.indexOf('orange')); // 2
console.log("watermelon的索引:", arr.indexOf('watermelon')); // -1

// 使用indexOf方法查找元素的索引，指定起始位置
console.log("banana的索引，从索引2开始查找:", arr.indexOf('banana', 2)); // -1
console.log("grape的索引，从索引1开始查找:", arr.indexOf('grape', 1)); // 3

在这个例子中，我们创建了一个字符串数组arr，包含了一些水果名称。

首先，我们使用indexOf方法来查找指定元素在数组中的索引。通过arr.indexOf('apple')查找'apple'在数组中的索引，输出结果为0，表示'apple'在数组中的第一个位置。

接着，我们使用arr.indexOf('orange')查找'orange'在数组中的索引，输出结果为2，表示'orange'在数组中的第三个位置。

然后，我们使用arr.indexOf('watermelon')查找'watermelon'在数组中的索引，输出结果为-1。由于数组中不存在'watermelon'，因此返回-1表示未找到。

最后，我们使用indexOf方法可以选择传递第二个参数，来指定从哪个索引位置开始查找。通过arr.indexOf('banana', 2)从索引2开始查找'banana'的索引，输出结果为-1。由于从索引2开始之后的位置没有出现'banana'，因此返回-1表示未找到。

再次使用arr.indexOf('grape', 1)从索引1开始查找'grape'的索引，输出结果为3，表示在索引3的位置找到了'grape'。

请注意，indexOf方法返回首个匹配结果的索引值。如果要查找所有匹配结果的索引，可以使用循环遍历整个数组来实现。

10. lastIndexOf()： 返回数组中最后一个与指定值相等的元素的索引位置，如果找不到，则返回 -1。

以下是使用 lastIndexOf() 方法查找数组中最后一个匹配元素的索引的 JavaScript 代码示例：

let array = [1, 2, 3, 4, 2, 5];

let lastIndex = array.lastIndexOf(2);
console.log("最后一个匹配元素的索引:", lastIndex);
// 输出: 最后一个匹配元素的索引: 4

在以上代码示例中，我们创建了一个数组 array，其中包含多个数字元素，包括数字 2 出现了多次。然后使用 lastIndexOf() 方法查找数组中最后一个匹配元素的索引。

通过调用 array.lastIndexOf(2)，我们查找元素 2 在数组中最后一次出现的位置。结果赋值给 lastIndex 变量。

最后，通过打印输出 lastIndex，可以看到最后一个匹配元素 2 的索引为 4。

你可以尝试修改数组中的元素，并使用 lastIndexOf() 方法查找数组中最后一个匹配元素的索引，并观察结果。

11. forEach()： 对数组中的每个元素执行提供的函数。

以下是一个使用forEach方法的代码示例：

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

// 使用forEach方法遍历数组并输出每个元素
arr.forEach(function(element) {
  console.log(element);
});

// 使用forEach方法遍历数组并修改每个元素
arr.forEach(function(element, index, array) {
  array[index] = element * 2;
});

console.log("修改后的数组:", arr); // [2, 4, 6, 8, 10]

在这个例子中，我们创建了一个包含数字1到5的数组arr。

首先，使用forEach方法遍历数组并输出每个元素。通过arr.forEach(function(element) { ... })，我们定义了一个匿名函数作为forEach方法的参数，这个函数接收一个参数element，表示当前正在遍历的元素。在这个匿名函数内部，我们简单地通过console.log(element)输出每个元素。

接着，我们使用forEach方法遍历数组并修改每个元素。通过arr.forEach(function(element, index, array) { ... })，我们定义了一个匿名函数作为forEach方法的参数，这个函数接收三个参数。element表示当前正在遍历的元素，index表示当前元素的索引，array表示正在遍历的数组。在这个匿名函数内部，我们将每个元素乘以2，并将结果重新赋值给原来的数组元素array[index]。

最后，我们通过console.log("修改后的数组:", arr)打印输出修改后的数组。输出结果为[2, 4, 6, 8, 10]，表示每个元素都被修改成原来的两倍。请注意，forEach方法是原地修改数组的，不需要通过返回值来获取修改后的数组。

12. map()： 创建一个新数组，其中包含对原数组中的每个元素应用提供的函数的结果。

以下是使用 map() 方法对数组进行映射转换的 JavaScript 代码示例：

let numbers = [1, 2, 3, 4, 5];

let doubledNumbers = numbers.map((num) => num * 2);
console.log("数组映射后的结果:", doubledNumbers);
// 输出: 数组映射后的结果: [2, 4, 6, 8, 10]

在以上代码示例中，我们创建了一个包含多个数字的数组 numbers。然后使用 map() 方法对数组中的每个元素进行映射转换。

通过调用 numbers.map((num) => num * 2)，我们将数组中的每个元素都乘以 2 进行映射转换。结果赋值给 doubledNumbers 变量。

最后，通过打印输出 doubledNumbers，可以看到数组经过映射转换后的结果为 [2, 4, 6, 8, 10]，即每个元素都乘以了 2。

你可以尝试修改映射转换的逻辑或数组中的元素，并使用 map() 方法对数组进行自定义操作，并观察结果。

13. filter()： 使用提供的函数对数组中的每个元素进行测试，然后返回一个新数组，其中包含测试为真的元素。

以下是一个使用filter方法的代码示例：

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

// 使用filter方法筛选出大于2的元素
let filteredArr = arr.filter(function(element) {
  return element > 2;
});

console.log("筛选后的数组:", filteredArr); // [3, 4, 5]

在这个例子中，我们创建了一个包含数字1到5的数组arr。

通过arr.filter(function(element) { ... })使用filter方法筛选数组元素。我们定义了一个匿名函数作为filter方法的参数，并传入当前正在遍历的元素作为参数element。在这个匿名函数内部，我们返回一个布尔值，表示是否保留当前元素。在本例中，我们返回element > 2，即保留大于2的元素。

将筛选后的结果保存在filteredArr变量中。

最后，我们通过console.log("筛选后的数组:", filteredArr)打印输出筛选后的数组。输出结果为[3, 4, 5]，表示原数组中大于2的元素被筛选出来形成了新的数组。请注意，filter方法并不会修改原始数组，而是返回一个新的数组，该数组包含满足条件的元素。

14. reduce()： 使用提供的函数对数组中的所有元素进行累积计算，并将结果返回。

以下是使用 reduce() 方法对数组进行累积计算的 JavaScript 代码示例：

let numbers = [1, 2, 3, 4, 5];

let sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log("数组累加的结果:", sum);
// 输出: 数组累加的结果: 15

在以上代码示例中，我们创建了一个包含多个数字的数组 numbers。然后使用 reduce() 方法对数组进行累积计算。

通过调用 numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0)，我们对数组中的每个元素进行累加计算。初始累加值通过参数 0 设置为 0。在回调函数中，accumulator 表示累加器（当前累加的结果），currentValue 表示当前遍历的数组元素。回调函数的返回值将作为下一次累加的结果。

最后，通过打印输出 sum，可以看到数组经过累加计算后的结果为 15，即数组中所有元素的和。

你可以尝试修改累加的初始值或累加计算的逻辑，并使用 reduce() 方法对数组进行自定义的累积计算，并观察结果。

15. sort()： 对数组进行原地排序，默认按照字符串的 Unicode 码点进行排序。

以下是使用 sort() 方法对数组进行排序的 JavaScript 代码示例：

let fruits = ['apple', 'banana', 'cherry', 'date'];

// 默认按照 Unicode 顺序排序
let sortedFruits = fruits.sort();
console.log("默认排序结果:", sortedFruits);
// 输出: 默认排序结果: [ 'apple', 'banana', 'cherry', 'date' ]

// 自定义排序函数，按照字符串长度进行升序排序
let sortedFruitsByLength = fruits.sort((a, b) => a.length - b.length);
console.log("按照长度排序结果:", sortedFruitsByLength);
// 输出: 按照长度排序结果: [ 'date', 'apple', 'banana', 'cherry' ]

在以上代码示例中，我们创建了一个包含多个水果名称的数组 fruits。然后使用 sort() 方法对数组进行排序。

默认情况下，调用 fruits.sort() 将以 Unicode 顺序对元素进行排序。结果存储在 sortedFruits 变量中。在示例中，我们可以看到默认排序结果为 ['apple', 'banana', 'cherry', 'date']。

另外，我们也可以传递一个自定义的排序函数作为参数，以便根据特定条件进行排序。在示例中，我们定义了一个排序函数 (a, b) => a.length - b.length，它比较水果名称的长度并返回比较结果。通过 fruits.sort((a, b) => a.length - b.length) 我们可以按照字符串长度进行升序排序。结果存储在 sortedFruitsByLength 变量中，可以看到按照长度排序后的结果为 ['date', 'apple', 'banana', 'cherry']。

你可以尝试修改排序函数的逻辑或数组中的元素，并使用 sort() 方法对数组进行自定义排序，并观察结果。

16. reverse()： 颠倒数组中元素的顺序，第一个元素变为最后一个，最后一个变为第一个。

以下是使用 reverse() 方法对数组进行反转的 JavaScript 代码示例：

let numbers = [1, 2, 3, 4, 5];

numbers.reverse();
console.log("反转后的数组:", numbers);
// 输出: 反转后的数组: [5, 4, 3, 2, 1]

在以上代码示例中，我们创建了一个包含多个数字的数组 numbers。然后使用 reverse() 方法对数组进行反转。

通过调用 numbers.reverse()，我们可以将数组元素的顺序反转。在示例中，使用 reverse() 方法对数组 numbers 进行反转。最终打印输出 numbers，可以看到数组经过反转后的结果为 [5, 4, 3, 2, 1]。

你可以尝试修改数组中的元素，并使用 reverse() 方法对数组进行反转，并观察结果。注意，reverse() 方法会直接修改原始数组，而不会创建新的数组。

这只是一些常用的数组方法，JavaScript 还提供了很多其他强大的方法来操作数组。你可以参考 JavaScript 的文档或教程来了解更多数组方法及其用法。