JavaScript 数组常用方法详细教程

2024-07-12

在 JavaScript 中，数组是一种非常重要的数据结构，用于存储多个值。JS 提供了许多内置方法来操作数组，使得数据处理变得更加简单和高效。本文将详细介绍一些常用的 JavaScript 数组方法，这些不但是平时开发常用的方法，也是面试的重点，现在带着大家一起复习复习~

1. push() 和 pop()

push()

push() 方法用于在数组末尾添加一个或多个元素，并返回新数组的长度。


let arr = [1, 2, 3];
 let newLength = arr.push(4, 5); // newLength is 5, arr is [1, 2, 3, 4, 5]

参数: 要添加到数组末尾的一个或多个元素。

返回值: 新数组的长度。

pop()

pop() 方法用于删除数组末尾的一个元素，并返回该元素。


let arr = [1, 2, 3, 4];
let removedElement = arr.pop(); // removedElement is 4, arr is [1, 2, 3]

参数: 无。

返回值: 被删除的元素。

2. shift() 和 unshift()

shift()

shift() 方法用于删除数组开头的一个元素，并返回该元素。


let arr = [1, 2, 3, 4];
 
let removedElement = arr.shift(); // removedElement is 1, arr is [2, 3, 4]

参数: 无。

返回值: 被删除的元素。

unshift()

unshift() 方法用于在数组开头添加一个或多个元素，并返回新数组的长度。


let arr = [2, 3, 4];
let newLength = arr.unshift(0, 1); // newLength is 5, arr is [0, 1, 2, 3, 4]

参数: 要添加到数组开头的一个或多个元素。

返回值: 新数组的长度。

3. slice() 和 splice()

slice()

slice() 方法用于返回一个从开始到结束（不包括结束）选择的新数组。原数组不会被修改。


let arr = [1, 2, 3, 4, 5];
let newArr = arr.slice(1, 3); // newArr is [2, 3], arr is [1, 2, 3, 4, 5]

参数:

begin（可选）: 从该索引（包括该索引）开始提取。

end（可选）: 在该索引（不包括该索引）之前结束提取。

返回值:

一个新数组，包含从 begin 到 end（不包括 end）的元素。

splice()

splice() 方法用于通过删除或替换现有元素或者添加新元素来修改数组的内容。返回值是被删除的元素。


let arr = [1, 2, 3, 4, 5];
let removedElements = arr.splice(2, 2, 6, 7); // removedElements is [3, 4], arr is [1, 2, 6, 7, 5]

参数:

start: 指定修改的开始位置。

deleteCount（可选）: 整数，表示要删除的元素数量。

item1, item2, ...（可选）: 要添加到数组的新元素。

返回值: 一个包含被删除元素的数组。

4. concat()

concat() 方法用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。


let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let newArr = arr1.concat(arr2, [7, 8]); // newArr is [1, 2, 3, 4, 5, 6, 7, 8]

参数: 要合并到当前数组中的数组或值。

返回值: 一个新数组。

5. forEach()

forEach() 方法对数组的每个元素执行一次提供的函数。


let arr = [1, 2, 3, 4];
arr.forEach((element, index) => {
  console.log(`Element at index ${index} is ${element}`);
});
// Output:
// Element at index 0 is 1
// Element at index 1 is 2
// Element at index 2 is 3
// Element at index 3 is 4

参数: 一个函数，该函数接受当前元素、元素索引及数组本身作为参数。

返回值: 无。

6. map()

map() 方法创建一个新数组，其结果是该数组中的每个元素是调用一次提供的函数后的返回值。


let arr = [1, 2, 3, 4];
let newArr = arr.map(element => element * 2); // newArr is [2, 4, 6, 8]

参数: 一个函数，该函数接受当前元素、元素索引及数组本身作为参数。

返回值: 一个新数组。

7. filter()

filter() 方法创建一个新数组，其包含通过所提供函数实现的测试的所有元素。


let arr = [1, 2, 3, 4, 5];
let newArr = arr.filter(element => element > 2); // newArr is [3, 4, 5]

参数: 一个函数，该函数接受当前元素、元素索引及数组本身作为参数，并返回一个布尔值。

返回值: 一个新数组。

8. reduce()

reduce() 方法对数组中的每个元素执行一个由您提供的 reducer 函数（升序执行），将其结果汇总为单个返回值。


let arr = [1, 2, 3, 4];
let sum = arr.reduce((accumulator, currentValue) => accumulator + currentValue, 0); // sum is 10

参数:reducer 函数，该函数接受累加器和当前值作为参数。

initialValue（可选）: 作为第一次调用 callback 函数时第一个参数的值。

返回值: 累加的结果。

9. find()

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


let arr = [1, 2, 3, 4];
let foundElement = arr.find(element => element > 2); // foundElement is 3

参数: 一个函数，该函数接受当前元素、元素索引及数组本身作为参数，并返回一个布尔值。

返回值: 第一个通过测试的元素值。

10. includes()

includes() 方法用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回 false。


let arr = [1, 2, 3, 4];
let hasElement = arr.includes(3); // hasElement is true
let notIncluded = arr.includes(5); // notIncluded is false

参数:

valueToFind: 需要查找的元素值。

fromIndex（可选）: 从此索引处开始查找。

返回值: 布尔值。

通过学习这些常用的 JavaScript 数组方法，我们可以更加高效地处理后端传递的数据并编写更简洁、易读的代码。希望本文对您有所帮助！

技术共享