JavaScript数组删除元素

JavaScript数组删除元素教程

JavaScript数组 中删除元素有七种方法,即:使用 length 属性删除、使用 delete 删除、使用 pop 删除、使用 shift 删除、使用 splice 删除、使用迭代方式删除和使用 prototype 原型方法删除。

JavaScript length删除元素详解

定义

JavaScript 中 Array 的 length 属性非常有特点,因为它不是只读的。因此,可以通过设置这个属性来达到从数组的末尾移除项或添加新项的目的。

语法

arr.length = arr.length - count;

说明

我们可以通过修改数组的 length 属性的值,来达到删除数组元素的目的。

JavaScript delete删除元素详解

定义

JavaScript 中数组元素的删除可以使用 delete 来删除。

语法

delete arr[index];

说明

使用 delete 删除元素之后数组的长度不变,只是被删除元素被置为 undefined 了。

JavaScript pop删除元素详解

定义

JavaScript 中的 Array 对象提供了一个 pop() 栈方法用于弹出并返回数组中的最后一项,某种程度上可以当做删除用。

栈数据结构的访问规则是 FILO(First In Last Out,先进后出),栈操作在栈顶添加项,从栈顶移除项,使用pop() 方法,它能移除数组中的最后一项并返回该项,并且数组的长度减 1。

语法

arr.pop();

返回值

返回被删除的元素。

说明

使用 pop 删除数组元素之后数组的长度会被修改,同时,使用 pop 删除元素只能删除最后一项。

JavaScript shift删除元素详解

定义

JavaScript 中的 Array 对象提供了一个 shift() 队列方法用于弹出并返回数组中的第一项,某种程度上也可以当做删除用。

队列数据结构的访问规则是 FIFO(First In First Out,先进先出),队列在列表的末端添加项,从列表的前端移除项,使用 shift() 方法,它能够移除数组中的第一个项并返回该项,并且数组的长度减 1。

语法

arr.shift();

返回值

返回被删除的元素。

说明

使用 shift 删除数组元素之后数组的长度会被修改,同时,使用 pop 删除元素只能删除第一项。

JavaScript splice删除元素详解

定义

在 JavaScript 的 Array 对象中提供了一个 splice() 方法用于对数组进行特定的操作。splice() 恐怕要算最强大的数组方法了,他的用法有很多种,在此只介绍删除数组元素的方法。

在删除数组元素的时候,它可以删除任意数量的项,只需要指定 2 个参数:要删除的第一项的位置和要删除的项数。

语法

arrayObject.splice(index,howmany,item1,.....,itemX);

返回值

返回一个数组,该数组包含被删除的项目。。

说明

splice() 方法可删除从 index 处开始的零个或多个元素,并且用参数列表中声明的一个或多个值来替换那些被删除的元素。

如果从 arrayObject 中删除了元素,则返回的是含有被删除的元素的数组。

JavaScript迭代删除元素详解

定义

所谓的迭代方法就是用循环迭代数组元素,发现符合要删除的项则删除。用的最多的地方,可能是当数组中的元素为对象的时候,可以根据对象的某个属性(例如ID)来删除数组元素。

语法

使用 forEach 删除

arr.forEach(function(item, index, arr) { if(item === deleteItem) { arr.splice(index, 1); } });

使用 filter 删除

arr = arr.filter(function(item) { return item != deleteItem; });

JavaScript prototype删除元素详解

定义

可以通过在 Array 的原型上添加方法来达到删除的目的。

语法

Array.prototype.remove = function(dx) {   if(isNaN(dx) || dx > this.length){     return false;   }   for(var i = 0, n = 0; i < this.length; i++) {     if(this[i] != this[dx]) {       this[n++] = this[i];     }   }   this.length -= 1; }; arr.remove(1);

案例

length删除数组元素

使用 length 删除数组的元素

<!DOCTYPE html> <html> <head> <title>JavaScript数组删除元素</title> <script type="text/javascript"> console.log("嗨客网(www.haicoder.net)"); var arr = new Array(); arr.push("夏"); arr.push("商"); arr.push("周"); arr.push("秦"); arr.push("汉"); arr.push("三国"); console.log("Arr =", arr); arr.length = arr.length - 1; console.log("Arr =", arr); arr.length = arr.length - 3; console.log("Arr =", arr); </script> </head> </html>

程序运行后,控制台输出如下:

12_Javascript数组删除元素.png

我们使用 new 创建了一个数组 arr,接着,我们可以直接通过修改数组的 length 属性来达到删除数组元素的目的。

首先,我们将数组的 length 减去 1,从而达到删除最后一个元素的目的,接着,我们再次将数组的长度减去 3,从而达到删除数组最后三个元素的目的。

delete 删除数组元素

使用 delete 删除数组的元素

<!DOCTYPE html> <html> <head> <title>JavaScript数组删除元素</title> <script type="text/javascript"> console.log("嗨客网(www.haicoder.net)"); var arr = new Array(); arr.push("夏"); arr.push("商"); arr.push("周"); arr.push("秦"); arr.push("汉"); arr.push("三国"); console.log("Arr =", arr); delete arr[0]; console.log("Arr =", arr); delete arr[3]; console.log("Arr =", arr); </script> </head> </html>

程序运行后,控制台输出如下:

13_Javascript数组删除元素.png

我们使用 new 创建了一个数组 arr,接着,我们可以直接使用 delete 来删除数组的元素,首先,我们删除了数组的第一个元素,接着,我们删除了数组的下标为 3 的元素。

我们可以看到,使用 delete 删除数组元素,并没有改变数组的长度,只是将我们删除的元素变成了 undefined。

pop 删除数组元素

使用 pop 删除数组的元素

<!DOCTYPE html> <html> <head> <title>JavaScript数组删除元素</title> <script type="text/javascript"> console.log("嗨客网(www.haicoder.net)"); var arr = new Array(); arr.push("夏"); arr.push("商"); arr.push("周"); arr.push("秦"); arr.push("汉"); arr.push("三国"); console.log("Arr =", arr); var item = arr.pop(); console.log("Item =", item, "Arr =", arr); var item = arr.pop(); console.log("Item =", item, "Arr =", arr); </script> </head> </html>

程序运行后,控制台输出如下:

14_Javascript数组删除元素.png

我们使用 pop 删除了数组的最后一个元素,我们可以看到,使用 pop 删除数组的元素之后,数组的长度会减少,并且 pop 函数会返回被删除的元素。

shift 删除数组元素

使用 shift 删除数组的元素

<!DOCTYPE html> <html> <head> <title>JavaScript数组删除元素</title> <script type="text/javascript"> console.log("嗨客网(www.haicoder.net)"); var arr = new Array(); arr.push("夏"); arr.push("商"); arr.push("周"); arr.push("秦"); arr.push("汉"); arr.push("三国"); console.log("Arr =", arr); var item = arr.shift(); console.log("Item =", item, "Arr =", arr); var item = arr.shift(); console.log("Item =", item, "Arr =", arr); </script> </head> </html>

程序运行后,控制台输出如下:

15_Javascript数组删除元素.png

我们使用 shift 删除了数组的第一个元素,我们可以看到,使用 shift 删除数组的元素之后,数组的长度会减少,并且 shift 函数会返回被删除的元素。

splice删除数组元素

使用 splice 删除数组的元素

<!DOCTYPE html> <html> <head> <title>JavaScript数组删除元素</title> <script type="text/javascript"> console.log("嗨客网(www.haicoder.net)"); var arr = new Array(); arr.push("夏"); arr.push("商"); arr.push("周"); arr.push("秦"); arr.push("汉"); arr.push("三国"); console.log("Arr =", arr); var item = arr.splice(0, 1); console.log("Item =", item, "Arr =", arr); var item = arr.splice(3, 2); console.log("Item =", item, "Arr =", arr); </script> </head> </html>

程序运行后,控制台输出如下:

16_Javascript数组删除元素.png

splice 函数的第一个参数表示数组的索引,第二个参数表示需要删除的数组元素的个数,因此,我们第一次删除了索引为 0 的一个元素。

最后,我们删除了索引为 3 开始的 两个元素,并且 splice 函数会以数组的形式返回被删除的元素。

JavaScript数组删除元素总结

从 JavaScript 的数组中删除元素有七种方法,即:使用 length 属性删除、使用 delete 删除、使用 pop 删除、使用 shift 删除、使用 splice 删除、使用迭代方式删除和使用 prototype 原型方法删除。