JS中彻底删除JSON对象组成的数组中的元素
在 JS 中，对于某个由 JSON 对象组成的数组，例如：
var test = [{ "a": "1", "b": "2" }, { "a": "3", "b": "4" }, { "a": "5", "b": "6" }];
如果我们想要删除其中的第二个json对象，应该怎么做呢？其实方法和操作数组完全相同。
在最开始的时候尝试使用了 delete 运算符，但在查询数组长度的时候发现其实这种方法并不是彻底删除元素，而是删除它的值，但仍会保留空间。
var test = [{ "a": "1", "b": "2" }, { "a": "3", "b": "4" }, { "a": "5", "b": "6" }];
test.length //输出为 3
delete test[1];
test.length //输出仍为 3
查询运算符 delete 我们知道它只是将该值置为 undefined，而不会影响数组长度，即将其变为稀疏数组（《JS权威指南》7.5节）。
了解及此，也许想着可以将删除点之后的元素各往前移动1个单位，实现彻底剔除该元素，但在JS方法中我们可以查到一种更加简便的方式：splice() 方法
var test = [{ "a": "1", "b": "2" }, { "a": "3", "b": "4" }, { "a": "5", "b": "6" }];
test.length //输出为 3
test.splice(1, 1);
test.length //输出为 2
删除后 test.length 变为 2，这正是我们想要的结果。
JavaScript splice() 方法
数组中添加新元素：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js数组添加元素_脚本之家</title>
</head>
<body>
<p id="demo">点击按钮向数组添加元素。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2,0,"Lemon","Kiwi");
var x=document.getElementById("demo");
x.innerHTML=fruits;
}
</script>
</body>
</html>
splice定义和用法
splice() 方法用于添加或删除数组中的元素。
注意：这种方法会改变原始数组。
返回值
如果仅删除一个元素，则返回一个元素的数组。 如果未删除任何元素，则返回空数组。
语法
array.splice(index,howmany,item1,.....,itemX)
参数 Values
| 参数 | 描述 |
|---|---|
| index | 必需。规定从何处添加/删除元素。 该参数是开始插入和（或）删除的数组元素的下标，必须是数字。 |
| howmany | 可选。规定应该删除多少元素。必须是数字，但可以是 "0"。 如果未规定此参数，则删除从 index 开始到原数组结尾的所有元素。 |
| item1, ..., itemX | 可选。要添加到数组的新元素 |
返回值
| Type | 描述 |
|---|---|
| Array | 如果从 arrayObject 中删除了元素，则返回的是含有被删除的元素的数组。 |
更多实例
实例
移除数组的第三个元素，并在数组第三个位置添加新元素:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>脚本之家</title>
</head>
<body>
<p id="demo">点击按钮添加和删除元素。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2,1,"Lemon","Kiwi");
var x=document.getElementById("demo");
x.innerHTML=fruits;
}
</script>
</body>
</html>
实例
从第三个位置开始删除数组后的两个元素：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>脚本之家</title>
</head>
<body>
<p id="demo">点击按钮删除数组中的两个元素。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2,2);
var x=document.getElementById("demo");
x.innerHTML=fruits;
}
</script>
</body>
</html>
到此这篇关于JS中彻底删除JSON对象组成的数组中的元素的文章就介绍到这了,更多相关JS删除JSON元素内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
使用Smarty的相关注意事项及访问变量的几种方式分享，需要的朋友可以参考下。2011-12-12
一键删除顽固的空文件夹 软件下载...2007-01-01
在PHP模板引擎smarty生成随机数的方法和math函数详解
如果要在smarty模板中生成随机数，该如何办呢？在php文件中生成然后赋值到模板中。2014-04-04
2008-01-01
Smarty模板的特性决定了它的优越性，更是PHPer追捧的原因之所在（更多的是招聘的大部分都要求），今天大致看了Smarty的基本使用方法，不过光看也没用，中午没事随便试了试，结果就一个小问题却导致我中午没了睡觉的时间了2011-08-08
需要使用php模板的朋友必看的很多个顶级PHP模板引擎比较分析
最近学习php模板技术，找到一篇不错的关于php模板的分析为了找到一个好的模板引擎，我在互联网上进行搜索，目前已经整理出了以下名单2008-05-05
这篇文章主要介绍了Smarty中的注释和截断功能介绍,这两个功能都是Smarty中不太常用的功能,但非常实用,需要的朋友可以参考下2015-04-04
添加个缓存机制就完美了！也不知道这样写比那些都是正则的模板引擎性能会不会更高点，可以用于自己写的程序中，方便调用2012-04-04
扩展函数放到 */Smarty/libs/plugins目录下，文件命名格式 modifier.xxxx.php,函数名格式function smarty_modifier_xxxx2010-03-03
在PHP世界中选择最合适的模板与使用方法...2007-03-03
最新评论