JS中彻底删除JSON对象组成的数组中的元素


Posted in PHP onSeptember 22, 2020

在 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() 方法用于添加或删除数组中的元素。

注意:这种方法会改变原始数组。

返回值

如果仅删除一个元素,则返回一个元素的数组。 如果未删除任何元素,则返回空数组。

JS中彻底删除JSON对象组成的数组中的元素

语法

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元素内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

PHP 相关文章推荐
获得Google PR值的PHP代码
Jan 28 PHP
php zend解密软件绿色版测试可用
Apr 14 PHP
一道关于php变量引用的面试题
Aug 08 PHP
php数据库密码的找回的步骤
Jan 12 PHP
PHP数组循环操作详细介绍 附实例代码
Feb 03 PHP
php算法实例分享
Jul 14 PHP
详解php比较操作符的安全问题
Dec 03 PHP
linux下为php添加iconv模块的方法
Feb 28 PHP
Yii2前后台分离及migrate使用(七)
May 04 PHP
PHP isset()与empty()的使用区别详解
Feb 10 PHP
PHP开发APP端微信支付功能
Feb 17 PHP
PHP实现的激活用户注册验证邮箱功能示例
Jun 06 PHP
phpstudy隐藏index.php的方法
Sep 21 #PHP
如何在Laravel之外使用illuminate组件详解
Sep 20 #PHP
PHP编程一定要改掉的5个不良习惯
Sep 18 #PHP
搭建PhpStorm+PhpStudy开发环境的超详细教程
Sep 17 #PHP
深入浅析安装PhpStorm并激活的步骤详解
Sep 17 #PHP
linux mint下安装phpstorm2020包括JDK部分的教程详解
Sep 17 #PHP
PHPstorm启用自动换行的方法详解(IDE)
Sep 17 #PHP
You might like
php的SimpleXML方法读写XML接口文件实例解析
2014/06/16 PHP
ThinkPHP基本的增删查改操作实例教程
2014/08/22 PHP
php实现TCP端口检测的方法
2015/04/01 PHP
浅谈PHP中new self()和new static()的区别
2017/08/11 PHP
Laravel框架在本地虚拟机快速安装的方法详解
2018/06/11 PHP
快速排序 php与javascript的不同之处
2011/02/22 Javascript
JS判断页面加载状态以及添加遮罩和缓冲动画的代码
2012/10/11 Javascript
基于jquery DOM写的类似微博发布的效果
2012/10/20 Javascript
javascript使用数组的push方法完成快速排序
2014/09/15 Javascript
nodejs中实现阻塞实例
2015/03/24 NodeJs
JavaScript使用push方法添加一个元素到数组末尾用法实例
2015/04/06 Javascript
js判断数组key是否存在(不用循环)的简单实例
2016/08/03 Javascript
整理一下常见的IE错误
2016/11/18 Javascript
BootStrap框架个人总结(bootstrap框架、导航条、下拉菜单、轮播广告carousel、栅格系统布局、标签页tabs、模态框、菜单定位)
2016/12/01 Javascript
jquery——九宫格大转盘抽奖实例
2017/01/16 Javascript
js放到head中失效的原因与解决方法
2017/03/07 Javascript
vue的token刷新处理的方法
2018/07/17 Javascript
详解JSON和JSONP劫持以及解决方法
2019/03/08 Javascript
Preload基础使用方法详解
2020/02/03 Javascript
[01:43]倾听DOTA2英雄之声 魅惑魔女国服配音鉴赏
2013/06/06 DOTA
[05:08]顺网杯ISS-DOTA2赛歌 少女偶像Lunar青春演绎
2013/12/05 DOTA
[48:39]Ti4主赛事胜者组第一天 EG vs NEWBEE 2
2014/07/19 DOTA
Python解析网页源代码中的115网盘链接实例
2014/09/30 Python
设计模式中的原型模式在Python程序中的应用示例
2016/03/02 Python
Python中字典和集合学习小结
2017/07/07 Python
python字符串与url编码的转换实例
2018/05/10 Python
pip命令无法使用的解决方法
2018/06/12 Python
详解Numpy数组转置的三种方法T、transpose、swapaxes
2019/05/27 Python
python中的协程深入理解
2019/06/10 Python
Python 实现黑客帝国中的字符雨的示例代码
2020/02/20 Python
使用CSS实现阅读进度条
2017/02/27 HTML / CSS
大型会议接待方案
2014/03/01 职场文书
2014年五四青年节活动策划书
2014/04/22 职场文书
文明之星事迹材料
2014/05/09 职场文书
2015年仓库管理工作总结
2015/05/25 职场文书
安全生产隐患排查制度
2015/08/05 职场文书