你一定会用到的JavaScript中数组的方法 | 豆包 MarsCode AI刷题

20 阅读4分钟

在 JavaScript 中,数组提供了许多内置方法,这些方法在编写算法和处理数据时非常有用。以下是一些常用的数组方法及其示例:

1. push()

向数组末尾添加一个或多个元素,并返回新的长度。

let arr = [1, 2, 3];
arr.push(4, 5);
console.log(arr); // 输出 [1, 2, 3, 4, 5]
console.log(arr.length); // 输出 5

2. pop()

删除数组末尾的一个元素,并返回被删除的元素。

let arr = [1, 2, 3];
let lastElement = arr.pop();
console.log(arr); // 输出 [1, 2]
console.log(lastElement); // 输出 3

3. shift()

删除数组开头的一个元素,并返回被删除的元素。

let arr = [1, 2, 3];
let firstElement = arr.shift();
console.log(arr); // 输出 [2, 3]
console.log(firstElement); // 输出 1

4. unshift()

向数组开头添加一个或多个元素,并返回新的长度。

let arr = [1, 2, 3];
arr.unshift(0, -1);
console.log(arr); // 输出 [-1, 0, 1, 2, 3]
console.log(arr.length); // 输出 5

5. splice(star,deleCount,item1,item2...)

在数组的指定位置添加或删除元素,第一个参数是起始索引,第二个参数是要删除的元素个数。

  • start:必需。开始修改的位置(从 0 开始的索引)。
  • deleteCount:可选。要删除的元素数量。如果 deleteCount 大于 start 之后的元素数量,则从 start 位置开始的所有元素都会被删除。如果 deleteCount 为 0,则不删除任何元素。
  • item1, item2, ...:可选。要添加到数组中的新元素。

删除元素

let arr = [1, 2, 3, 4, 5];
// 从索引为2的元素开始,删除一个
let removedElements = arr.splice(2, 1);
console.log(arr); // 输出 [1, 2, 4, 5]
console.log(removedElements); // 输出 [3]

添加元素

let arr = [1, 2, 3, 4, 5];
// 在索引为 2 的位置插入 6 和 7
arr.splice(2, 0, 6, 7);
console.log(arr); // 输出 [1, 2, 6, 7, 3, 4, 5]

删除并添加元素

let arr = [1, 2, 3, 4, 5];
// 从索引为 2 的位置删除 1 个元素,并插入 6 和 7
let removedElements = arr.splice(2, 1, 6, 7);
console.log(arr); // 输出 [1, 2, 6, 7, 4, 5]
console.log(removedElements); // 输出 [3]

删除多个元素

let arr = [1, 2, 3, 4, 5];
// 从索引为 1 的位置删除 3 个元素
let removedElements = arr.splice(1, 3);
console.log(arr); // 输出 [1, 5]
console.log(removedElements); // 输出 [2, 3, 4]

6. slice()

提取数组的一部分并返回一个新的数组。

let arr = [1, 2, 3, 4, 5];
let subArray = arr.slice(1, 4);
console.log(subArray); // 输出 [2, 3, 4]
console.log(arr); // 输出 [1, 2, 3, 4, 5] (原数组不变)

7. concat()

合并两个或多个数组,并返回一个新的数组。第一个参数是起始索引(包含),第二个参数是结束索引(不包含)。如果省略第二个参数,则会截取从起始索引到数组末尾的所有元素。

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let newArr = arr1.concat(arr2);
console.log(newArr); // 输出 [1, 2, 3, 4, 5, 6]

8. forEach()

遍历数组中的每个元素,并对每个元素执行提供的函数。这个函数接受三个参数:当前元素、当前元素的索引和原始数组。

遍历数组
let numbers = [1, 2, 3, 4, 5];

numbers.forEach(function(number) {
    console.log(number);
});
// 输出
// 1
// 2
// 3
// 4
// 5
使用索引和数组
let arr = [1, 2, 3, 4, 5];
arr.forEach(function(number, index, array) {
    console.log((`Element at index ${index} in array ${array} is ${number}`);
});
/ 输出
// Element at index 0 in array [1, 2, 3, 4, 5] is 1
// Element at index 1 in array [1, 2, 3, 4, 5] is 2
// Element at index 2 in array [1, 2, 3, 4, 5] is 3
// Element at index 3 in array [1, 2, 3, 4, 5] is 4
// Element at index 4 in array [1, 2, 3, 4, 5] is 5

9. map()

创建一个新数组,其结果是调用提供的函数对每个元素的结果。

let arr = [1, 2, 3, 4, 5];
let squared = arr.map(function(element) {
    return element * element;
});
console.log(squared); // 输出 [1, 4, 9, 16, 25]

10. filter()

创建一个新数组,包含所有通过测试的元素。

let arr = [1, 2, 3, 4, 5];
let evenNumbers = arr.filter(function(element) {
    return element % 2 === 0;
});
console.log(evenNumbers); // 输出 [2, 4]

11. reduce()

对数组中的每个元素执行一个提供的函数,将其结果汇总为一个单一的输出值。

let arr = [1, 2, 3, 4, 5];
let sum = arr.reduce(function(accumulator, currentValue) {
    return accumulator + currentValue;
}, 0);
console.log(sum); // 输出 15

12. find()

返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined

let arr = [1, 2, 3, 4, 5];
let found = arr.find(function(element) {
    return element > 3;
});
console.log(found); // 输出 4

13. includes()

判断数组是否包含某个值,返回布尔值。

let arr = [1, 2, 3, 4, 5];
let includesThree = arr.includes(3);
console.log(includesThree); // 输出 true

14. indexOf()

返回数组中第一个匹配指定值的索引,如果没有找到则返回 -1

let arr = [1, 2, 3, 4, 5];
let index = arr.indexOf(3);
console.log(index); // 输出 2

总结

这些数组方法在处理数据和编写算法时非常有用。每种方法都有其特定的用途和应用场景,熟练掌握这些方法可以帮助你更高效地编写 JavaScript 代码,如果这篇文章对你有用的话请浅浅点个赞吧。