黄继良

Appearance

On this page

28个JavaScript数组方法汇总整理 ​

01.Array.map() * ​

返回一个新数组，其中包含对该数组中每个元素调用提供的函数的结果

javascript
const list = [1,2,3,4]
const newList = list.map((el) => el * 2)
console.info(newList) // [2, 4, 6, 8]

02.Array.filter() * ​

返回一个新数组，其中包含通过所提供函数实现的测试的所有元素

javascript
const list = [1,2,3,4]
const newList = list.filter((el) => el % 2 === 0)
console.info(newList) // [2, 4]

03.Array.reduce() ​

将数组减少为单个值，函数返回的值存储在累加其中（结果/总计）

javascript
const list = [1,2,3,4]
// reduce第一个参数是逻辑函数，第二参数是初始值
const total = list.reduce((total, item) => total + item, 0)
console.info(total) // 10

04.Array.reduceRight() ​

对数组的每个元素执行一个你提供的reduce函数，从而产生一个输出值（从右到左）

javascript
const list = [1,2,3,4]
// reduce第一个参数是逻辑函数，第二参数是初始值
const total = list.reduceRight((total, item) => total + item, 0)
console.info(total) // 10

05.Array.fill() ​

用静态值填充数组的元素，改变原数组值

javascript
const list = [1,2,3,4]
const newList = list.fill(0)
console.info(newList) // [0,0,0,0]
console.info(list) // [0,0,0,0]

06.Aray.find() * ​

返回数组中满足提供的测试函数的第一个元素的值，否则返回未定义

javascript
const list = [1,2,3,4]
const value = list.find((el) => el % 2 === 0)
console.info(value) // 2

07.Array.indexOf() * ​

返回可以在数组中找到给定元素的第一个索引，如果不存在则返回-1

javascript
const list = [1,2,3,4]
const value1 = list.indexOf(2)
console.info(value1) // 1
const value2 = list.indexOf(8)
console.info(value2) // -1

08.Array.lastIndexOf() ​

返回可以在数组中找到给定元素的最后一个索引，如果不存在则返回-1。从fromIndex开始向后搜索数组

javascript
const list = [1,2,3,4,1]
const value = list.lastIndexOf(1)
console.info(value) // 4

const list = [1,2,3,4,1]
// 第一个参数【规定需检索的字符串值。】
// 第二个参数【可选的整数参数。规定在字符串中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略该参数，则将从字符串的最后一个字符处开始检索。】
// 注意：检索方式是从后往前检索
const value = list.lastIndexOf(3, 2)
console.info(value) // 2

09.Array.findIndex() ​

返回数组中满足提供的测试函数的第一个元素的索引，否则返回-1

javascript
const list = [1,2,3,4,1]
const value = list.findIndex((el) => el > 3)
console.info(value) // 3

10.Array.includes() * ​

如果给定元素存在于数组中，则返回true

javascript
const list = [1,2,3,4]
const flag1 = list.includes(3)
console.info(flag1) // true
const flag2 = list.includes(6)
console.info(flag2) // false

11.Array.pop() * ​

从数组中删除最后一个元素并返回该元素

javascript
const list = [1,2,3,4]
const value = list.pop()
console.info(value) // 4

12.Array.push() * ​

将新元素追加到数组的末尾，并返回数组的长度

javascript
const list = [1,2,3,4]
const length = list.push(5)
console.info(length) // 5
console.info(list) // [1,2,3,4,5]

13.Array.shift() * ​

从数组中删除第一个元素并返回该元素

javascript
const list = [1,2,3,4]
const value = list.shift()
console.info(value) // 1

14.Array.unshift() * ​

将新元素添加到数组的开头，并返回数组的长度

javascript
const list = [1,2,3,4]
const length = list.unshift(5)
console.info(length) // 5
console.info(list) // [5,1,2,3,4]

15.Array.splice() ​

通过删除或替换现有元素和/或在适当位置添加新元素来更改数组的内容【原边原数组】

语法：

array.splice(index, howmany, item1, ....., itemX)
index: 必选。证书，指定在什么位置添加/删除元素，使用负值指定从数组从末尾开始的位置
howmany：可选。要删除的项目数，如果设置为0，则不会删除任何项目
item1,...,itemX：可选。要添加到数组中的新元素
javascript
// 添加
const list = [1,2,3,4]
// 索引2开始添加
list.splice(2, 0, 100, 101)
console.info(list) // [1,2,100,101,3,4]

// 删除
const list = [1,2,3,4]
// 索引2开始删除，删除一个元素
list.splice(2, 1)
console.info(list) // [1,2,4]

16.Array.slice() * ​

选择数组的一部分，并返回新数组。【索引：包头不包尾】，不影响原来数组

语法：

array.slice(start, end)
start: 可选。整数，指定从哪里开始选择（第一个元素的索引为 0）。使用负数从数组的末尾进行选择。如果省略，则类似于 "0"。
end：可选。整数，指定结束选择的位置。如果省略，将选择从开始位置到数组末尾的所有元素。使用负数从数组末尾进行选择。
javascript
const list = [1,2,3,4]
const newList = list.slice(2, 3)
console.info(newList) // [3]

17.Array.join() * ​

将数组的所有元素连接成一个字符串，参数为连接符

javascript
const list = [1,2,3,4]
const newList = list.join(',')
console.info(newList) // 1,2,3,4

18.Array.reverse() ​

反转数组中元素的顺序

javascript
const list = [1,2,3,4]
const newList = list.reverse()
console.info(newList) // [4, 3, 2, 1]

19.Array.sort() * ​

对数组的元素进行排序，并返回该数组。默认排序顺序是根据字符串Unicode代码点

javascript
// 升序
const list = [10,2,9,6]
const newList = list.sort((a, b) => a -b )
console.info(newList) // [2, 6, 9, 10]

// 降序
const list = [10,2,9,6]
const newList = list.sort((a, b) => b -a )
console.info(newList) // [10, 9, 6, 2]

20.Array.some() ​

如果数组中至少有一个元素通过了提供的函数的测试，则返回true

javascript
const list = [10,2,9,6]
const flag = list.some((el) => el < 3)
console.info(flag) // true

21.Array.every() * ​

如果数组中的所有元素****都通过了提供的函数实现的测试，则返回true

javascript
const list = [10,2,9,6]
const flag = list.every((el) => el > 1)
console.info(flag) // true

const list = [10,2,9,6]
const flag = list.every((el) => el % 2 === 0)
console.info(flag) // false

22.Array.from() ​

从类数组中或可迭代对象创建Array.from(object, mapFunction, thisValue)组

语法：

Array.from(object, mapFunction, thisValue)
object: 必需。需转换为数组的对象。
mapFunction: 可选。对数组的每个项目调用的map函数
thisValue: 可选。执行 mapFunction 时用作this的值。
javascript
const myArr = Array.from("ABCDEFG");
console.info(myArr) // ['A', 'B', 'C', 'D', 'E', 'F', 'G']

const range = (n) => Array.from({ length: n }, (_, i) => i + 1);
console.log(range(10)); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

23.Array.of() ​

利用可变数量的参数创建一个新数组，而不管参数的数量或类型

javascript
const newList = Array.of(1,2,3,4,'aa');
console.log(newList); // [1, 2, 3, 4, 'aa']

24.Array.isArray() * ​

判断是否是一个数组类型

javascript
const list = [1,2,3,4]
const flag1 = Array.isArray(list)
console.info(flag1) // true

const flag2 = Array.isArray('aa')
console.info(flag2) // false

25.Array.at() ​

返回指定索引处的值

javascript
const list = [1,2,3,4]
const value = list.at(2)
console.info(value) // 3

26.Array.copyWithin() ​

复制数组中的数组元素，返回修改后的数组

语法：

array.copyWithin(target, start, end)
target: 开始复制元素的目标。
start: 开始复制元素的索引。
end: 停止复制元素的索引。
javascript
const list = [1,2,3,4,5]
const newList = list.copyWithin(0,3,4)
console.info(newList) // [4, 2, 3, 4, 5]

27.Array.flat() ​

返回一个新数组，其中所有子数组元素递归连接到指定深度

javascript
const list = [1, 2, [3, 4, [5, 6]]];
const newList = list.flat(Infinity);
console.info(newList) // [1, 2, 3, 4, 5, 6]

28.Array.flatMap() ​

返回通过将给定的回调函数应用于数组的每个元素而形成的新数组，

javascript
const list = [1, 2, 3];
const newList = list.flatMap((el) => [el, el * el]);
console.info(newList) // [1, 1, 2, 4, 3, 9]