首页 > 编程笔记

JS删除数组元素(3种方法)

JS 删除数组中的元素有3种方式,分别是:

1. JS delete 运算符

使用 delete 运算符删除数组中的元素,可以在数组访问的语法基础上,在前边加上 delete 关键字。

例如删除数组中第2个元素,代码如下:
let arr=[1,2,3];
delete arr[1];  //返回值为true,arr变为[1,empty,3]
arr.length;  //3
可以看到使用 delete 运算符删除元素之后,对应索引的元素空位会保留下来,后边的元素并不会向前移动,数组的长度也不会发生变化。

另外判断对应索引的元素是否存在于数组中,可以使用 in 运算符。在 in 运算符前边写上索引,后边写上进行判断的数组,如果存在则会返回 true,如果不存在则返回 false。

例如,判断上例中索引为1的元素是否还存在于 arr 数组中,代码如下:
1 in arr;  //false
arr[i];  //undefined
可以看到索引为1的元素不存在了,访问它的值会返回 undefined。

需要要注意的是,虽然 arr[1] 返回了 undefined,但是因为使用 delete 运算符删除了它而导致它不存在,如果直接把该位置的元素设置为 undefined,则它还会存在于数组中,只不过值为 undefined,代码如下:
let arr=[1,2,3];
arr[1]=undefined;
1 in arr;  //true
arr[1];  //undefined
可以看到 arr[1] 的值仍为 undefined,但是使用 in 判断时,1 这个索引位置的元素还是存在于数组中的。

2. JS splice() 方法

如果要删除元素并使后续元素向前移动,则可以使用 splice(),可以给它的第1个参数传递要删除的元素的起始索引,第2参数传递要删除的数量。

例如使用 splice() 实现删除数组中的第2个元素,代码如下:
let arr=[1,2,3];
arr.splice(1,1);  //[2]
arr;  //[1,3]
arr 变成了 [1,3],splice() 会返回被删除的元素,因为它支持删除多个元素,所以返回的结果是包含被删除元素的数组,如果只删除了一个元素,则也会把它放到结果数组中,例如上例中 splice() 的返回值为 [2]。

在调用 splice() 方法之后,原数组则变成了除掉被删除的元素外所剩下的元素。这种改变原数组的操作,称为原地(In-Place)操作,不过数组对象提供的大部分操作都是返回新的数组,并不会改变原数组。

splice() 的第1个参数也可以是负数,这样就会从最后一个元素索引开始向前计算起始索引,其他操作与传递正数时一样。

如果传递给 splice() 的第2个参数大于数组的长度,或者没有传递,则会从起始索引开始,删除它后面所有的元素,例如删除一个数组中索引为3的元素及后面所有的元素的代码如下:
let arr=[1,2,3,4,5];
arr.splice(3);  //[4,5]
arr;  //[1,2,3]
splice() 还可接收第3个参数,它是一个变长的参数,用于指定要添加的元素,即在删除元素之后,从第1个参数指定的位置再添加新的元素,后面的元素会顺序后移,因此 splice() 还支持添加和替换元素。

如果要添加新元素,则只需把第2个参数,即要删除的数量,设置为 0,然后后边的参数传递要添加的元素。

例如,从索引为2的位置插入3个新的元素,代码如下:
let arr=[1,3,5,7];
arr.splice(2,0,2,4);  //[]
arr;  //[1,3,2,4,5,7]
这时,因为要删除的元素的数量为 0,所以 splice() 会返回一个空的数组,原数组则原地新增了3个元素,上方代码把2和4放到了索引为 2、3 的位置,然后5和7分别向后移动了1位。

如果要替换一些元素,则只需让删除的数量等于新添加的元素的数量,代码如下:
let arr=[1,3,5,7];
arr.splice(2,2,2,4);  //[5,7]
arr;  //[1,3,2,4]
这里从索引为2的位置删除了2个元素,即5和7,之后在索引为2的位置添加了2个新的元素2和4,最后结果就是 [1,3,2,4]。

最后,如果给 splice() 的参数设置了大于或等于数组长度的数值,则 splice() 会直接从数组末尾开始添加元素,无论第2个参数(要删除的数量)设置为多少,都不会删除元素,代码如下:
let arr=["a","b","c"];
arr.splice(3,10,"d","e","f");  //[]
arr;  //["a","b","c","d","e","f"]

3. 修改 length 属性

JS 删除数组元素还有一种不常用的方式,使用 length 属性。

数组在创建之后,它自己会维护 length 属性的值,当有元素添加进来时,会自动增加 length 的值,而当有元素被删除时,则会自动减少,而反过来也可以通过修改 length 属性的值来删除超过 length 数量的元素,这种只适合删除末尾的元素,代码如下:
let arr=[1,2,3,4];
arr.length;  //4
arr.length=2;
arr;  //[1,2]
arr.length=0;
arr;  //[]
把 arr.length 设置为2之后,超过2个的元素直接被舍弃了。当把数组的 length 设置为0时,数组就变成了空数组。

推荐阅读

副业交流群 关注微信公众号,加入副业交流群,学习变现经验,交流各种打法。