JS数组方法

Last modified: 2023-04-02

1. arr.push()

从后面添加元素，添加一个或多个，返回值为添加完后的数组长度

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

console.log(arr.push(6, 7)) // 7
console.log(arr) // [1,2,3,4,5,6,7]

2. arr.pop()

从后面删除元素，只能是一个，返回值是删除的元素

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

console.log(arr.pop()) // 5
console.log(arr) // [1, 2, 3, 4]

3. arr.shift()

从前面删除元素，只能是一个，返回值是删除的元素

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

console.log(arr.shift()) // 1
console.log(arr) // [2,3,4,5]

4. arr.unshift()

从前面添加元素，添加一个或多个，返回值是添加完后的数组的长度

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

console.log(arr.unshift(6, 7)) // 7
console.log(arr) // [6,7,1,2,3,4,5]

5. arr.splice(index,num)

删除从 index（索引值）开始之后的那 num（默认到数组的结束位置）个元素，返回值是删除的元素数组

参数：index 索引值，num 个数

// 1. 删除数组中的某些项
let arr = [0, 1, 2, 3, 4]

console.log(arr.splice(2, 2)) // [2, 3]
console.log(arr) // [0, 1, 4]

// 2. 将数据添加至数组的特定索引位置index
let arr2 = [1, 2, 3, 4, 5]

arr2.splice(2, 0, '测试值')
console.log(arr2) // [1, 2, "测试值", 3, 4, 5]

5.1 str.toSpliced()

ES2023 删除从 index（索引值）开始之后的那 num（默认到数组的结束位置）个元素，返回值是删除的元素数组。（不对原数组做更改）

参数：index 索引值，num 个数

// 1. 删除数组中的某些项
let arr = [0, 1, 2, 3, 4]

console.log(arr.toSpliced(2, 2)) // [0, 1, 4]
console.log(arr) // [0, 1, 2, 3, 4]

// 2. 将数据添加至数组的特定索引位置index
let arr2 = [1, 2, 3, 4, 5]

console.log(arr2.toSpliced(2, 0, '测试值')) // [1, 2, "测试值", 3, 4, 5]
console.log(arr2) // [1, 2, 3, 4, 5]

5.2 str.split()

将字符串转化为数组

let str = '12345'

console.log(str.split('')) // ["1","2","3","4","5"]

let str1 = '1/2/3/4/5'

console.log(str1.split('/')) // ["1","2","3","4","5"]

6. arr.concat()

连接两个数组，返回值是连接后的新数组

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

console.log(arr.concat([6, 7])) // [1,2,3,4,5,6,7]
console.log(arr) // [1, 2, 3, 4, 5]

7. arr.sort()

将数组进行排序，返回值是排好的数组，默认是按照最左边的数字进行排序（非数字整体大小）

let arr = [40, 8, 10, 5, 79, 3]

console.log(arr.sort()) // [10,3,40,5,79,8]

let arr2 = arr.sort((a, b) => a - b)

console.log(arr2) // [3,5,8,10,40,79]

let arr3 = arr.sort((a, b) => b - a)

console.log(arr3) // [79,40,10,8,5,3]

/**
 * 注：用 `localeCompare` 方法实现对汉字排序
 * String.prototype.localeCompare 在不考虑多音字的前提下，基本可以完美实现按照拼音排序
 * localCompare 是根据我们的中文系统，把汉字先转换成了拼音，再进行了比较；对于同拼音的汉字，js 再根据声调进行比较
 */

let arr = ['北京', '北方', 'beijing', '背影', '背景']
arr.sort((a, b) => a.localeCompare(b)) // ['北方', '北京', '背景', '背影', 'beijing']

7.1 arr.toSorted()

ES2023 将数组进行排序，返回值是排好的数组，默认是按照最左边的数字进行排序（非数字整体大小），返回值是新的数组。（不对原数组做更改）

let arr = [40, 8, 10, 5, 79, 3]

console.log(arr.toSorted()) // [10,3,40,5,79,8]

console.log(arr) // [40, 8, 10, 5, 79, 3]

8. arr.reverse()

将原数组反转，返回值是反转后的数组

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

console.log(arr.reverse()) // [5,4,3,2,1]
console.log(arr) // [5,4,3,2,1]

8.1 str.toReversed()

ES2023 将数组反转，返回值是新的数组。（不对原数组做更改）

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

console.log(arr.toReversed()) // [5,4,3,2,1]
console.log(arr) // [1, 2, 3, 4, 5]

9. arr.slice(start, end)

切去索引值 start 到索引值 end（不包含 end 的值）的数组，返回值是切出去的数组

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

console.log(arr.slice(1, 3)) // [2,3]
console.log(arr) // [1, 2, 3, 4, 5]

10. arr.forEach(callback)

遍历数组，无返回值

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

arr.forEach((value, index, array) => {
  console.log(`value--${value}    index--${index}    array--${array}`)
})

// value--1    index--0    array--1,2,3,4,5
// value--2    index--1    array--1,2,3,4,5
// value--3    index--2    array--1,2,3,4,5
// value--4    index--3    array--1,2,3,4,5
// value--5    index--4    array--1,2,3,4,5

11. arr.map(callbak)

遍历数组(对原数组的值进行操作)，返回一个新数组

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

let arr2 = arr.map((value, index, array) => {
  return (value = value * 2)
})
console.log(arr2) // [2,4,6,8,10]

12. arr.filter(callback)

过滤数组，返回一个满足要求的数组

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

let arr2 = arr.filter((value, index) => value > 2)
console.log(arr2) // [3,4,5]

13. arr.every(callback)

根据判断条件，遍历数组中的元素，是否都满足，若都满足则返回 true，反之返回 false

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

let arr2 = arr.every((value, index) => index > 2)
console.log(arr2) // false

let arr3 = arr.every((value, index) => index > 0)
console.log(arr3) // true

14. arr.some(callback)

根据判断条件，遍历数组中的元素，是否存在至少有一个满足，若存在则返回 true，反之返回 false

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

let arr2 = arr.some((value, index) => index > 2)
console.log(arr2) // true

let arr3 = arr.some((value, index) => index > 5)
console.log(arr3) // false

15. arr.indexOf(searchvalue, fromindex)

从前往后查找某个元素的索引值，若有重复的，则返回第一个查到的索引值，若不存在，返回 -1

searchvalue 必需。规定需检索的字符串值；

fromindex 可选的整数参数。规定在字符串中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略该参数，则将从字符串的第一个字符处开始检索。

let arr = [1, 2, 3, 4, 5, 4]
let arr2 = arr.indexOf(4)
console.log(arr2) // 3

let arr3 = arr.indexOf(6)
console.log(arr3) // -1

16. arr.lastIndexOf(searchvalue, fromindex)

从后往前查找某个元素的索引值，若有重复的，则返回第一个查到的索引值，若不存在，返回 -1

searchvalue 必需。规定需检索的字符串值；

fromindex 可选的整数参数。规定在字符串中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略该参数，则将从字符串的最后一个字符处开始检索。

let arr = [1, 2, 3, 4, 5, 4]
let arr2 = arr.lastIndexOf(4)
console.log(arr2) // 5

let arr3 = arr.lastIndexOf(6)
console.log(arr3) // -1

17. Array.from()

将伪数组变成数组，只要有 length 的就可以转成数组

let str = '12345'
console.log(Array.from(str)) // ["1", "2", "3", "4", "5"]

let obj = { 0: 'a', 1: 'b', length: 2 }
console.log(Array.from(obj)) // ["a", "b"]

18. Array.of()

将一组值转换成数组，类似于声明数组

let str = '11'
console.log(Array.of(str))   // ['11']

// 等价于
console.log(new Array('11'))   // ['11]

// ps:
new Array()有缺点，就是参数问题引起的重载
console.log(new Array(2)) // [empty × 2] 是个空数组
console.log(Array.of(2)) // [2]

19. arr.find(callback)

正向查询找到第一个符合条件的数组成员

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

let arr2 = arr.find((value, index, array) => value > 2)
console.log(arr2) // 3

20. arr.findIndex(callback)

正向查询找到第一个符合条件的数组成员的索引值

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

let arr1 = arr.findIndex((value, index, array) => value > 2)
console.log(arr1) // 2

21. arr.findLast(callback)

ES2022 逆向查询找到第一个符合条件的数组成员

let arr = [
	{ label: '1-1', value: 1 },
	{ label: '2-1', value: 2 },
	{ label: '3-1', value: 1 },
]

let arr2 = arr.findLast((item, index, array) => item.value === 1)
console.log(arr2) // { label: '3-1', value: 1 }

22. arr.findLastIndex(callback)

ES2022 逆向查询找到第一个符合条件的数组成员的索引值

let arr = [
	{ label: '1-1', value: 1 },
	{ label: '2-1', value: 2 },
	{ label: '3-1', value: 1 },
]

let arr2 = arr.findLastIndex((item, index, array) => item.value === 1)
console.log(arr2) // 2

23. arr.includes()

判断数组中是否包含特定的值

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

let arr2 = arr.includes(2)
console.log(arr2) // true

let arr3 = arr.includes(9)
console.log(arr3) // false

let arr4 = [1, 2, 3, NaN].includes(NaN)
console.log(arr5) // true

24. arr.fill(target, start, end)

使用给定的值，填充一个数组（改变原数组）

参数： target – 待填充的元素； start – 开始填充的位置 - 索引； end – 终止填充的位置 - 索引（不包括该位置)

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

let arr2 = arr.fill(5)
console.log(arr2) // [5, 5, 5, 5, 5]
console.log(arr) // [5, 5, 5, 5, 5]

let arr3 = arr.fill(5, 2)
console.log(arr3) // [1,2,5,5,5]

let arr4 = arr.fill(5, 1, 3)
console.log(arr4) // [1,5,5,4,5]

25. arr.keys()

遍历数组的键名

let arr = [1, 2, 3, 4, 5]
let arr2 = arr.keys()

for (let key of arr2) {
  console.log(key) // 0,1,2,3,4
}

26. arr.values()

遍历数组键值

let arr = [1, 2, 3, 4, 5]
let arr1 = arr.values()

for (let val of arr1) {
  console.log(val) // 1,2,3,4,5
}

27. arr.entries()

遍历数组的键名和键值

entries() 方法返回迭代数组。
迭代数组中每个值前一个是索引值作为 key，数组后一个值作为 value。

let arr = [1, 2, 3, 4, 5]
let arr2 = arr.entries()

for (let e of arr2) {
  console.log(e) // [0,1] [1,2] [2,3] [3,4] [4,5]
}

28.arr.copyWithin()

在当前数组内部，将制定位置的数组复制到其他位置，会覆盖原数组项，返回当前数组

参数:　　 target --必选索引从该位置开始替换数组项
　　　　 start --可选索引从该位置开始读取数组项，默认为 0.如果为负值，则从右往左读。
　　　　 end --可选索引到该位置停止读取的数组项，默认是 Array.length,如果是负值，表示倒数

let arr = [1, 2, 3, 4, 5, 6, 7]

let arr2 = arr.copyWithin(1)
console.log(arr2) // [1, 1, 2, 3, 4, 5, 6]

let arr3 = arr.copyWithin(1, 2)
console.log(arr3) // [1, 3, 4, 5, 6, 7, 7]

let arr4 = arr.copyWithin(1, 2, 4)
console.log(arr4) // [1, 3, 4, 4, 5, 6, 7]

29. Array.isArray(value)

判断一个值是否为数组的方法，若为数组，返回 true，反之返回 false

let a = 1234
let b = 'fsaufh'
let c = { a: 1, b: 2 }
let d = [1, 2]

let mark1 = Array.isArray(a)
console.log(mark1) // false

let mark2 = Array.isArray(b)
console.log(mark2) // false

let mark3 = Array.isArray(c)
console.log(mark3) // false

let mark4 = Array.isArray(d)
console.log(mark4) // true

30. arr.join(separate)

把数组中的所有元素放入一个字符串，separate 表示分隔符，可省略，默认是逗号

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

console.log(arr.join()) // 1,2,3,4,5
console.log(arr.join('')) // 12345
console.log(arr.join('-')) // 1-2-3-4-5

31. arr.flat(pliy)

对数组内嵌套的数组“拉平”，就是把数组中的数组的元素挨个拿出来，放数组元素所在位置，返回一个新的数组，不会影响到原来的数组

参数：pliy 表示拉平的层数，默认是 1 层，想无限拉平可以传入 Infinity 关键字

let arr = [1, 2, [3, [4, 5]]]
console.log(arr.flat(2)) // [1, 2, 3, 4, 5]

let arr2 = [1, [2, [3, [4, 5]]]]
console.log(arr2.flat(Infinity)) // [1, 2, 3, 4, 5]

32. arr.flatMap()

对原数组的每个成员执行一个函数，相当于执行 Array.prototype.map(),然后对返回值组成的数组执行 flat()方法。该方法返回一个新数组，不改变原数组。只能展开一层数组。

// 相当于 [[2, 4], [3, 6], [4, 8]].flat()

let arr = [2, 3, 4]

arr.flatMap((x) => [x, x * 2]) 3 // [2, 4, 3, 6, 4, 8]

33. arr.toString()

将数组转换为字符串并返回。数组中的元素之间用逗号分隔。

let arr = ['Banana', 'Orange', 'Apple', 'Mango']

console.log(arr.toString()) // Banana,Orange,Apple,Mango

34. arr.reduce()

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

接收 4 个参数：

Accumulator (acc) (累计器)
Current Value (cur) (当前值)
Current Index (idx) (当前索引)
Source Array (src) (源数组)

const array1 = [1, 2, 3, 4]

const reducer = (accumulator, currentValue) => accumulator + currentValue // 1 + 2 + 3 + 4
console.log(array1.reduce(reducer)) // expected output: 10

// 5 + 1 + 2 + 3 + 4
console.log(array1.reduce(reducer, 5)) // expected output: 15

35. arr.at(index)

ES2022 接收一个整数值（默认为0）并返回该索引对应的元素，允许正数和负数。负整数从数组中的最后一个元素开始倒数。

let arr = [
	{ label: '1-1', value: 1 },
	{ label: '2-1', value: 2 },
	{ label: '3-1', value: 1 },
]

arr.at() === arr.at(0) // true { label: '1-1', value: 1 }
arr.at(-1) // { label: '3-1', value: 1 }
arr.at(-5) // undefined

36. arr.group(callback)

🛑 此方法暂处于 Stage 3 阶段，未正式上线

ES2023 按任意条件对数组元素进行分组，返回一个对象

// 按偶数/奇数键分组
const arr = [1, 2, 3, 4, 5]

arr.group((num, index, array) => {
  return num % 2 === 0 ? 'even': 'odd'
}) //  { odd: [1, 3, 5], even: [2, 4] }

37. arr.groupToMap(callback)