数组中头尾元素的插入与删除

JS中的方法:

一、向数组头部插入元素的方法

1.unshift()

unshift()向数组的开头添加一个或多个元素,原数组被改变并返回数组的长度。

2.Splice()

删除元素并向数组添加新元素,会改变原数组。

语法:arrayObject.splice(index,howmany,item1,.....,itemX)

Index:必需。整数,规定添加/删除项目的位置,使用负数可从数组结尾处规定位置。

Howmany:必需。要删除的项目数量。如果设置为0,则不会删除项目,而是添加项目。

item1, ..., itemX:可选。向数组添加的新项目。

该函数对数组进行操作后会改变数组,但是返回的结果是被删除的数组元素。

向数组头部添加元素的具体操作:

splice(0,0,element)翻译一下:splice(在索引为0的位置(即数组的开头),不删除元素,并将element元素添加到数组中)

二、向数组尾部插入元素的方法

1.Push()

push()向数组结尾添加一个或者更多的元素,并返回数组长度

三、删除数组中第一个元素的方法

1.shift()

shift()删除并返回数组的第一个元素。删除后原数组改变,并返回删除的内容。

2.Splice()

此处应该注意到,splice既可以向数组添加元素也可以删除。

Splice(0,1):在索引为0的位置(即数组头部)开始,删除一个项目,即删除数组的头部元素。

四、删除数组中尾部元素的方法

pop()删除并返回数组的最后一个元素,删除后原数组改变,并返回删除的内容。


DOM操作元素:

除了以上JS中的方法外,我们还可以通过直接操作DOM,再转换为数组,来实时的添加或删除元素。一般不建议使用,此处不再赘述,仅简单介绍一下。

1.AppendChild()添加节点元素

Document.createElement(‘ ’);

创建一个元素,例如:Document.createElement(‘li’);

parent.appendChild()向父元素的末尾追加子节点,实现的是右侧插入数据。

2.insertBefore() 插入节点元素

node.insertBefore(newnode,existingnode)

在node元素中,将newnode插入到existingnode之前。

node.insertBefore(newnode,node.firstChild)在第一个子元素之前插入newnode,也即向数组的头部插入。

注意:节点之间的空白符,在firefox、chrome、opera、safari浏览器是文本节点。使用.firstChild/.lastChild方法可以获取到。

数组中头尾元素的插入与删除_第1张图片
空白节点示例

解决方法:

1.可以通过检测节点类型,过滤子节点。

2.在代码去除节点之间的空白符。


数组中头尾元素的插入与删除_第2张图片
节点类型
去除节点之间的空白符

3..removeChild()去除节点

删除HTML元素,您必须首先获得该元素的父元素

parent.removeChild(parent.children[0]);


注:本文仅对数组中头部元素与尾部元素的插入与删除进行了总结,并不是唯一方法,总结不到位之处还望各位前辈指出,当然如果你有更好的方法也可以传授与我,不胜感激!希望本文能对新手前端有一定的帮助。

你可能感兴趣的:(数组中头尾元素的插入与删除)