JavaScript 数组方法总结

405 阅读2分钟
graph TD
数组方法 --> 转字符串
转字符串 --> 自动toString
自动toString --> join

数组方法 --> 弹入弹出
弹入弹出 --> pop
pop --> push
弹入弹出 --> shift
shift --> unshift

数组方法 --> 更改删除
更改删除 --> 索引号
索引号 --> delete

数组方法 --> 拼接合并
拼接合并 --> splice
splice --> concat

数组方法 --> 裁剪数组
裁剪数组 --> slice

1、把数组转换为字符串

toString()

toString()方法 把数组转换为数组值(逗号分隔)的字符串。

const arr = [1, 2, 3, 'abc']
console.log(arr.toString()) // 1,2,3,abc

自动 toString()

如果需要原始值,则 JavaScript 会自动把数组转换为字符串。

document.getElementById("demo").innerHTML = arr; 
//所有 JavaScript 对象都拥有 toString() 方法,上式等价于
document.getElementById("demo").innerHTML = arr.toString(); 

join()

join() 方法也可将所有数组元素结合为一个字符串。它的行为类似 toString(),但是还可以规定分隔符

console.log(arr.join('*')) // 1*2*3*abc

2、弹入弹出方法

pop()、push()

pop() 方法从数组中删除最后一个元素,返回“被删除”的值

push() 方法(在数组结尾处)向数组添加一个新的元素,返回新数组的长度

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

console.log(arr.push('abc')) // 4
console.log(arr) // [1,2,3,"abc"]

shift()、unshift()

shift() 方法会删除首个数组元素,并把所有其他元素“位移”到更低的索引,返回被“位移出”的字符串

unshift() 方法(在开头)向数组添加新元素,并“反向位移”旧元素,返回新数组的长度

console.log(arr.shift()) // 1
console.log(arr) // [2,3,"abc"]

console.log(arr.unshift(1)) // 4
console.log(arr) // [1,2,3,"abc"]

3、更改删除

通过使用它们的索引号来访问数组元素,length 属性提供了向数组追加新元素的简易方法

arr[arr.length] = 5
console.log(arr) // [1,2,3,"abc",5]

数组属于对象,其中的元素就可以使用 JavaScript delete 运算符来删除,使用 delete 会在数组留下未定义的空洞,不建议使用

delete arr[4]
console.log(arr[4]) // undefined

4、拼接合并

splice()

splice() 方法可用于向数组添加新项或删除元素,其中第一个参数定义了应添加新元素的位置(拼接),第二个参数定义应删除多少元素,其余参数(“”,“”)定义要添加的新元素,最后返回一个包含已删除项的数组

arr.splice(2,0,'edf')
console.log(arr) // [1,2,"edf",3,"abc",5]

//可以使用 splice() 在数组中不留“空洞”的情况下移除元素
arr.splice(2,1)
console.log(arr) // [1,2,3,"abc",5]

concat()

concat() 方法通过合并(连接)现有数组来创建一个新数组,不改变现有数组

arr1 = [6,7,8]
console.log(arr.concat(arr1)) // [1,2,3,"abc",5,6,7,8]

//concat() 方法可以使用任意数量的数组参数
arr2 = ['a','x']
console.log(arr.concat(arr1, arr2)) // [1,2,3,"abc",5,6,7,8,"a","x"]

5、裁剪数组

slice() 方法用数组的某个片段切出新数组,可接受两个参数,比如 (1, 3),该方法会从开始参数选取元素,直到结束参数(不包括)为止。

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

//如果结束参数被省略,比如第一个例子,则 slice() 会切出数组的剩余部分
console.log(arr.slice(1)) // [2,3,"abc",5]

参考:JavaScript 数组方法 (w3school.com.cn)