JavaScript -- 数组常用方法及示例代码总结

数组的方法

Array参考文档：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array

1 Array.isArray()

- 用来检查一个对象是否是数组    
1

// 下面的都返回true
Array.isArray([]);
Array.isArray([1]);
Array.isArray(new Array());
Array.isArray(new Array("a", "b", "c", "d"));
Array.isArray(new Array(3));
//Array.prototype 本身也是一个array
Array.isArray(Array.prototype);

// 下面的都返回false
Array.isArray();
Array.isArray({});
Array.isArray(null);
Array.isArray(undefined);
Array.isArray(17);
Array.isArray("Array");
Array.isArray(true);
Array.isArray(false);
Array.isArray(new Uint8Array(32));
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

2 at()

• 可以根据索引获取数组中的指定元素
• at()可以接收负索引作为参数

3 concat()

用来连接两个或多个数组

非破坏性方法，不会影响原数组，而是返回一个新的数组

const arr = ["孙悟空", "猪八戒", "沙和尚", "唐僧"]
const arr2 = ["白骨精", "蜘蛛精", "玉兔精"]
let result1 = arr.concat(arr2) // 连接一个数组
let result2 = arr.concat(arr2, ["牛魔王","铁扇公主"]) // 连接两个数组

console.log(result1)
console.log(result2)
console.log(arr)
console.log(arr2)
1
2
3
4
5
6
7
8
9

看结果可以发现原素组并未被改变，并且按照传入的顺序拼接到一起

4 indexOf()

• 获取元素在数组中第一次出现的索引
• 参数：
  1. 要查询的元素
  2. 查询的起始位置
• 返回值：
  • 找到了则返回元素的索引，
  • 没有找到返回-1

let arr = ["孙悟空", "猪八戒", "沙和尚", "唐僧", "沙和尚"]
console.log(arr.indexOf("沙和尚"))
console.log(arr.indexOf("沙和尚", 3))
1
2
3

5 lastIndexOf()

• 获取元素在数组中最后一次出现的位置

• 返回值：

  • 找到了则返回元素的索引，
  • 没有找到返回-1

let arr = ["孙悟空", "猪八戒", "沙和尚", "唐僧", "沙和尚"]
console.log(arr.lastIndexOf("沙和尚"))
1
2

6 join()

• 将一个数组中的元素连接为一个字符串
• 参数：
  • 指定一个字符串作为连接符

arr = ["孙悟空", "猪八戒", "沙和尚", "唐僧", "沙和尚"]
console.log(arr.join())// 默认使用 , 分割
console.log(arr.join("@-@"))
console.log(arr.join(" "))
1
2
3
4

7 slice()

• 用来截取数组（非破坏性方法）

• 参数（前开后闭）：

  1. 截取的起始位置（包括该位置）
  2. 截取的结束位置（不包括该位置）
  • 第二个参数可以省略不写，如果省略则会一直截取到最后
  • 索引可以是负值

• 如果将两个参数全都省略，则可以对数组进行浅拷贝（浅复制）

arr = ["孙悟空", "猪八戒", "沙和尚", "唐僧", "沙和尚"]
console.log(arr.slice(0, 2))
console.log(arr.slice(1, 3))
console.log(arr.slice(1, -1))
console.log(arr.slice())
1
2
3
4
5

8 push()

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

arr = ["孙悟空", "猪八戒", "沙和尚"]
console.log(arr.push("bb"))
console.log(arr)
1
2
3

9 pop()

删除并返回数组的最后一个元素

arr = ["孙悟空", "猪八戒", "沙和尚"]
console.log(arr.pop())
console.log(arr)
1
2
3

10 unshift()

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

arr = ["孙悟空", "猪八戒", "沙和尚"]
console.log(arr.unshift("bb"))
console.log(arr)
1
2
3

11 shift()

删除并返回数组的第一个元素

arr = ["孙悟空", "猪八戒", "沙和尚"]
console.log(arr.shift())
console.log(arr)
1
2
3

12 splice()

• 可以删除、插入、替换数组中的元素

• 参数：

  1. 删除的起始位置
  2. 删除的数量
  3. 要插入的元素

• 返回值：

  • 返回被删除的元素

删除

arr = ["孙悟空", "猪八戒", "沙和尚"]
console.log(arr.splice(1, 2))
console.log(arr)
1
2
3

插入

插入的话就是删除0个，然后第一个参数指定开始位置，后面的参数指定要插入的元素

arr = ["孙悟空", "猪八戒", "沙和尚"]
console.log(arr.splice(1, 0, "猪", "猴"))
console.log(arr)
1
2
3

修改

修改的话需要将第二个参数设置成和要插入的参数一样长即可

arr = ["孙悟空", "猪八戒", "沙和尚"]
console.log(arr.splice(1, 2, "猪", "猴"))
console.log(arr)
1
2
3

13 reverse()

反转数组，返回翻转后的数组

arr = ["孙悟空", "猪八戒", "沙和尚"]
console.log(arr.reverse())
console.log(arr)
1
2
3

14 sort()

• sort用来对数组进行排序（会对改变原数组）

• sort默认会将数组升序排列

  • 注意：sort默认会按照Unicode编码进行排序，所以如果直接通过sort对数字进行排序可能会得到一个不正确的结果

    let arr = [2, 3, 1, 9, 0, 4, 5, 7, 8, 6, 10]
    arr.sort()
    1
    2

    

• 参数：

  • 可以传递一个回调函数作为参数，通过回调函数来指定排序规则
    • (a, b) => a - b 升序排列
    • (a, b) => b - a 降序排列

let arr = [2, 3, 1, 9, 0, 4, 5, 7, 8, 6, 10] 
arr.sort((a, b) => a - b)
arr.sort((a, b) => b - a)
1
2
3

升序排列

降序排列

15 forEach()

• 用来遍历数组
• 它需要一个回调函数作为参数，这个回调函数会被调用多次
  • 数组中有几个元素，回调函数就会调用几次
  • 每次调用，都会将数组中的数据作为参数传递
• 回调函数中有三个参数：
  • element 当前的元素
  • index 当前元素的索引
  • array 被遍历的数组

arr = ["孙悟空", "猪八戒", "沙和尚", "唐僧"]

arr.forEach((element, index, array) => {
    console.log(element, index, array)
})
1
2
3
4
5

16 filter()

• 将数组中符合条件的元素保存到一个新数组中返回
• 需要一个回调函数作为参数，会为每一个元素去调用回调函数，并根据返回值来决定是否将元素添加到新数组中
• 非破坏性方法，不会影响原数组

arr = [1, 2, 3, 4, 5, 6, 7, 8]
arr.filter((ele) => ele > 5)
1
2

不做任何过滤

arr = [1, 2, 3, 4, 5, 6, 7, 8]
arr.filter((ele) => true)
1
2

17 map()

https://www.bilibili.com/video/BV1mG411h7aD?t=1349.8&p=111

• 根据当前数组生成一个新数组
• 需要一个回调函数作为参数，回调函数的返回值会成为新数组中的元素
• 非破坏性方法不会影响原数组

arr = [1, 2, 3, 4, 5, 6, 7, 8]
arr.map((ele) => ele * 2)
1
2

18 reduce()

https://www.bilibili.com/video/BV1mG411h7aD?t=1750.5&p=111

• 可以用来将一个数组中的所有元素整合为一个值
• 参数：
  1. 回调函数，通过回调函数来指定合并的规则
  2. 可选参数，初始值

arr = [1, 2, 3, 4, 5, 6, 7, 8]
result = arr.reduce((a, b) => {
    console.log(a, b)
    return a + b
})
1
2
3
4
5