首页 > 代码库 > [码海拾贝 之JS] JS 之删除数组中的元素

[码海拾贝 之JS] JS 之删除数组中的元素

前言

在Java 中要从一个list 中删除一个元素, 直接使用 remove 方法就可以了。

在js 中的array 并没有 remove 方法, 但是在js 中array 有splice 方法可以达成相同的效果, 除此之外, 还可以使用其他方式来实现这个效果。


使用splice 方法实现从数组中删除元素

首先看一下 splice 方法如何使用。

语法

arrayObject.splice(index,howmany,item1,.....,itemX)
参数 描述
index 必需。整数,规定添加/删除项目的位置,使用负数可从数组结尾处规定位置。
howmany 必需。要删除的项目数量。如果设置为 0,则不会删除项目。
item1, ..., itemX 可选。向数组添加的新项目。


需要特别注意的就是,该方法会改变原始数组。

最简单例子: -- 删除数组一个元素

<script>
var array1 = ["name1","name2","name3","name4"];
array1.splice(1,1);
alert(array1);
</script>

输出是: name1,name3,name4

解析:

1. splice(1,1)   -删除第二个元素。 

第一个 1 是位置, 位置从0 开始, 这个不难理解;

第二个1 是个数, 删除一个元素。

2. 并不需要 array1 = XXX; 的方式 数组的值就改变了。 原因上面也说了。


继续, 如果要在删除的位置同时添加一个元素的话:

<script>
var array1 = ["name1","name2","name3","name4"];
array1.splice(1,1,"name5");
alert(array1);
</script>

输出:  name1name5,,name3,name4



删除复杂数组中的元素

以上例子的数组中的元素是一般的字符串。

这里所谓的复杂数组是指数组中的元素是对象而不是简单的字符串。

开始这个之前, 先写一个把js array 转成 str 的方法:

function arrayToString(array)
{
	var str = "";
	if(array!=null&&array.length>0)
    {
	    str += "[";
		for(var i=0;i<array.length;i++)
	    {
		   var objStr = "";
		   objStr += "{";
		   var obj = array[i];
		   for(var key in obj)
		   {
		        objStr += key;
				objStr += ":‘";
				objStr += obj[key];
				objStr += "‘";
				objStr += ",";
		   }
		   if(objStr.length>3)
		   {
			  objStr = objStr.substring(0,objStr.length-1);
		   }		 
		   objStr += "}";
		   str += objStr;
		   if(i<array.length-1)
		   {
			  str += ",";
		   }
		}
		str += "]";
	}
	return str;
}

接下来, 删除一个元素类型为object 的数组元素

<script>
var obj1 = {key:"key1",name:‘name1_1‘};
var obj2 = {key:"key2",name:‘name1_1‘};
var obj3 = {key:"key3",name:‘name2_2‘};
var obj4 = {key:"key4",name:‘name2_2‘};

var array1 = [obj1,obj2,obj3,obj4];

//delete by key
var delKey = "key2";
for(var i=0;i<array1.length;i++)
{
	var keyTemp = array1[i].key;
	if(keyTemp===delKey)
    {
		array1.splice(i,1);
	}
}
alert(arrayToString(array1));
</script>

说明:

1. 这里的key 是唯一, name 值不为已

2. 这里数组循环不是用 forEach是因为 IE不支持

细部参见:

3. 以上是删除唯一key 值的元素。

Javascript 数组循环遍历之forEach


总体来说, 以上一次只删除一个元素, 如果一次删除多个元素的话呢?

类似删除name 值是 “name1_1” 的元素, 对应到的是两个元素, 写法对应到应该是:

<script>
var obj1 = {key:"key1",name:‘name2_2‘};
var obj2 = {key:"key2",name:‘name2_2‘};
var obj3 = {key:"key3",name:‘name1_1‘};
var obj4 = {key:"key4",name:‘name1_1‘};

var array1 = [obj1,obj2,obj3,obj4];

//delete by name
var delName= "name2_2";
for(var i=0;i<array1.length;i++)
{
	var nameTemp = array1[i].name;
	if(nameTemp===delName)
    {
		array1.splice(i,1);
	}
}
alert(arrayToString(array1));
</script>

但是千万注意, 以上的写法是错误的。

应为第一次删除一个元素之后, array1 的长度变化, 对应到各个位置的元素也发生变化。

所以以上的写法:

1. 要么出现错误, 报找不到指定位置的元素

2. 要么执行的结果不对。 上面的例子就是属于这种。


针对这种状况, 可以想到的解法有:

1. 一次删除一个, 多循环几次

2. 另一中方法就是, new 一个 新的array , 把不需要删除的元素放入这个array , 再用这个array 替换旧的array .


[码海拾贝 之JS] JS 之删除数组中的元素