JavaScript 数组常用方法详细教程

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

push()

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

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

复制代码

参数: 要添加到数组末端的一个或多个元素。
返回值: 新数组的长度。
pop()

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

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

复制代码

参数: 无。
返回值: 被删除的元素。
2. shift() 和 unshift()

shift()

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

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

复制代码

参数: 无。
返回值: 被删除的元素。
unshift()

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

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

复制代码

参数: 要添加到数组开头的一个或多个元素。
返回值: 新数组的长度。
3. slice() 和 splice()

slice()

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

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

复制代码

参数:
begin（可选）: 从该索引（包括该索引）开始提取。
end（可选）: 在该索引（不包括该索引）之前竣事提取。
返回值:
一个新数组，包罗从 begin 到 end（不包括 end）的元素。
splice()

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

1. let arr = [1, 2, 3, 4, 5];
2. 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() 方法用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。

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

复制代码

参数: 要合并到当前数组中的数组或值。
返回值: 一个新数组。
5. forEach()

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

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

复制代码

参数: 一个函数，该函数接受当前元素、元素索引及数组本身作为参数。
返回值: 无。
6. map()

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

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

复制代码

参数: 一个函数，该函数接受当前元素、元素索引及数组本身作为参数。
返回值: 一个新数组。
7. filter()

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

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

复制代码

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

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

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

复制代码

参数:reducer 函数，该函数接受累加器和当前值作为参数。
initialValue（可选）: 作为第一次调用 callback 函数时第一个参数的值。
返回值: 累加的结果。
9. find()

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

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

复制代码

参数: 一个函数，该函数接受当前元素、元素索引及数组本身作为参数，并返回一个布尔值。
返回值: 第一个通过测试的元素值。
10. includes()

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

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

复制代码

参数:
valueToFind: 需要查找的元素值。
fromIndex（可选）: 从此索引处开始查找。
返回值: 布尔值。
通过学习这些常用的 JavaScript 数组方法，我们可以更加高效地处理后端通报的数据并编写更简便、易读的代码。希望本文对您有所帮助！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。