js删除数组中元素的方法

项目中有一块要求:要在固定的位置根据宽高比例放图片。返回的数据中有宽高比的值,然后与页面上固定的位置的宽高比做比较,来放对应的图片。
问题是:返回数据的顺序和宽高比不固定,所以只是单纯的写两个循环来放海报的位置根本行不通。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
//比如说页面上有13个icon,其中有10个要放海报;所有icon的数组为icons
//数据返回data有10个,就是要放海报的数据(数据的顺序不固定),数据的数组就是data。
//说明,该文章中的海报用文字替换来说明问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin: 0;padding: 0;}
ul,li{list-style: none;}
#wrap li{float: left;margin-left:20px;margin-top:20px;border:2px solid #de34af;}
#wrap li p{width:100%;height: 70%;background:pink;}
#item1,#item9{width:30px;height:100px;}
#item2,#item4,#item8,#item10{width:56px;height:100px;}
#item3,#item5{width:133px;height:100px;}
#item6,#item7{width:123px;height:100px;}
</style>
</head>
<body>
<ul id="wrap">
<li id="item_2" ratio="1.45">1.45<p></p></li>
<li id="item_1" ratio="1.45">1.45<p></p></li>
<li id="item0" ratio="1.45">1.45<p></p></li>
<li id="item1" ratio="0.30">0.30<p></p></li>
<li id="item2" ratio="0.56">0.56<p></p></li>
<li id="item3" ratio="1.33">1.33<p></p></li>
<li id="item4" ratio="0.56">0.56<p></p></li>
<li id="item5" ratio="1.33">1.33<p></p></li>
<li id="item6" ratio="1.23">1.23<p></p></li>
<li id="item7" ratio="1.23">1.23<p></p></li>
<li id="item8" ratio="0.56">0.56<p></p></li>
<li id="item9" ratio="0.30">0.30<p></p></li>
<li id="item10" ratio="0.56">0.56<p></p></li>
</ul>
<script>
var jsonList = [
{resolution:"0.56",text:"我是0.56——1"},
{resolution:"1.23",text:"我是1.23——1"},
{resolution:"0.56",text:"我是0.56——2"},
{resolution:"1.33",text:"我是1.33——1"},
{resolution:"0.33",text:"我是1.33——2"},
{resolution:"1.23",text:"我是1.23——2"},
{resolution:"0.56",text:"我是0.56——3"},
{resolution:"0.56",text:"我是0.56——4"},
{resolution:"0.30",text:"我是0.30——1"},
{resolution:"0.30",text:"我是0.30——2"}
];
window.onload = function(){
//获取页面上有多少个li的icon
var icons = document.getElementById("wrap").children;
var arr = jsonList;
for(var i=0;i<icons.length;i++)
{
for(var j=0;j<arr.length;j++)
{
var ratio = icons[i].getAttribute("ratio"),
resolution = arr[j].resolution;
if(ratio == resolution)
{
//console.log(icons[i].lastChild);
icons[i].lastChild.innerHTML = arr[j].text;
break;
}
}
}
}
</script>
</body>
</html>

以上是这个demo的代码,上面代码执行后的结果如下图:
"eg1"

由图中可知,所有的数据都只是—1,并没有显示出—2,—3等。这是因为循环时,到—1的时候,就进入了判断中,接着就break跳出循环。这样就会每次只能取出数据中在前的—1的值。这样就不能达到我们的目的:要让所有的对应数据展示在p标签内。此时我们就会想到每次放完一个数据后,把这个数据删除了,那么下一次再循环的时候就不存在这条已经显示过的数据,也就不会每次只显示—1的值了。
这个思路也就是要把for循环那里的代码改一下。此处,就要想怎样删除一个数组中的一个值。

方法一:

1
2
3
4
5
6
//给Array的原型上添加一个remove的方法,index是要删除的索引值
Array.prototype.remove = function(index)
{
if(isNaN(index)||index>this.length){return false;}
this.splice(index,1);
}

上面这句话加入到代码中,然后在for循环中break的前面加一句arr.remove(j);就可以达到目的。重新执行代码后的结果如下:

"eg2"

此时就是我们想要的效果了。

方法二:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//假如我们不想用索引值来删除数组中的某个值,或是在某些情况下,我们不能具体的知道索引值是多少,只能通过数组中要删除的元素的内容来删除,那就下面的方法。
Array.prototype.indexOf = function(val)
{
for (var i = 0; i < this.length; i++) {
if (this[i] == val) return i;
}
return -1;
};
Array.prototype.remove = function(val)
{
var index = this.indexOf(val);
if (index > -1) {
this.splice(index, 1);
}
};

中,然后在for循环中break的前面加一句arr.remove(arr[j]);同样可以达到目的。

方法三:

1
2
3
//splice(index,len,[item]);index:数组开始下标; len: 替换/删除的长度; item:替换的值,删除操作的话 item为空
//该方法会改变原始数组
//在此例中,只要把break之前的那句话换成arr.splice(j,1);即可。

针对于splice(index,len,[item]);的方法,还有替换和增加数组中元素的使用方式。
替换:

1
2
3
4
//假如我有一个arr的数组,想要把数组中的第二个元素替换成y,其他元素不变。
var arr = ["q","w","e","r"];
arr.splice(1,1,"y");
console.log(arr);//浏览器控制台打印结果:["q", "y", "e", "r"]

添加:

1
2
3
4
5
//将len的值设为0,就是要在某个索引的位置添加某个元素了
//假如我有一个arr的数组,想要把数组中第二个位置添加一个y,其他元素不变。
var arr = ["q","w","e","r"];
arr.splice(1,0,"y");
console.log(arr);//浏览器控制台打印结果:["q", "y", "w", "e", "r"]

扩展:
delete方法
delete删除掉数组中的元素后,会把该下标出的值置为undefined,数组的长度不会变
var arr1 = [“q”,”w”,”e”,”r”];
delete arr1[1]
console.log(arr1);
console.log(arr1.length);//4