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 相关文章推荐
php执行sql语句的写法
Mar 10 PHP
不重新编译PHP为php增加openssl模块的方法
Jun 14 PHP
php中用于检测一个地理IP地址是否可用的代码
Feb 19 PHP
php微信公众开发之获取周边酒店信息的方法
Dec 22 PHP
编写PHP脚本清除WordPress头部冗余代码的方法讲解
Mar 01 PHP
php mailer类调用远程SMTP服务器发送邮件实现方法
Mar 04 PHP
php实现URL加密解密的方法
Nov 17 PHP
PHP实现双链表删除与插入节点的方法示例
Nov 11 PHP
Yii2 中实现单点登录的方法
Mar 09 PHP
yii2 上传图片的示例代码
Nov 02 PHP
laravel5实现微信第三方登录功能
Dec 06 PHP
PHP单文件上传原理及上传函数的封装操作示例
Sep 02 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 cc攻击代码与防范方法
2012/10/18 PHP
php生成随机密码自定义函数代码(简单快速)
2014/05/10 PHP
php通过记录IP来防止表单重复提交方法分析
2014/12/16 PHP
PHP中危险的file_put_contents函数详解
2017/11/04 PHP
Smarty模板变量与调节器实例详解
2019/07/20 PHP
php解决crontab定时任务不能写入文件问题的方法分析
2019/09/16 PHP
php+websocket 实现的聊天室功能详解
2020/05/27 PHP
在UpdatePanel内jquery easyui效果失效的解决方法
2010/04/11 Javascript
artDialog双击会关闭对话框的修改过程分享
2013/08/05 Javascript
jquery cookie实现的简单换肤功能适合小网站
2013/08/25 Javascript
使用js写的一个简易的投票
2013/11/27 Javascript
JavaScript中number转换成string介绍
2014/12/31 Javascript
jQuery实现菜单感应鼠标滑动动画效果的方法
2015/02/28 Javascript
JS实现简洁、全兼容的拖动层实例
2015/05/13 Javascript
jQuery表单事件实例代码分享
2016/08/18 Javascript
jQuery插件FusionCharts实现的3D柱状图效果实例【附demo源码下载】
2017/03/03 Javascript
js和jquery中获取非行间样式
2017/05/05 jQuery
利用nginx + node在阿里云部署https的步骤详解
2017/12/19 Javascript
微信小程序自定义toast的实现代码
2018/11/16 Javascript
新版小程序登录授权的方法
2018/12/12 Javascript
jQuery实现开关灯效果
2020/08/02 jQuery
js+h5 canvas实现图片验证码
2020/10/11 Javascript
python 文件和路径操作函数小结
2009/11/23 Python
使用C#配合ArcGIS Engine进行地理信息系统开发
2016/02/19 Python
Django 缓存配置Redis使用详解
2019/07/23 Python
pyinstaller打包opencv和numpy程序运行错误解决
2019/08/16 Python
keras实现VGG16 CIFAR10数据集方式
2020/07/07 Python
Django框架请求生命周期实现原理
2020/11/13 Python
Giglio美国站:意大利奢侈品购物网
2018/02/10 全球购物
学校综治宣传月活动总结
2014/07/02 职场文书
大专学生求职信
2014/07/04 职场文书
党的群众路线教育实践活动对照检查剖析材料
2014/10/09 职场文书
四风批评与自我批评发言稿
2014/10/14 职场文书
用JS写一个发布订阅模式
2021/11/07 Javascript
【DOTA2】半决赛强强对话~ PSG LGD vs EHOME - DPC 2022 CN REGIONAL FINALS WINTER
2022/04/02 DOTA
golang语言指针操作
2022/04/14 Golang