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 相关文章推荐
超级简单的发送邮件程序
Oct 09 PHP
如何跨站抓取别的站点的页面的补充
Oct 09 PHP
php FPDF类库应用实现代码
Mar 20 PHP
基于Snoopy的PHP近似完美获取网站编码的代码
Oct 23 PHP
PHP性能优化工具篇Benchmark类调试执行时间
Dec 06 PHP
PDO版本问题 Invalid parameter number: no parameters were bound
Jan 06 PHP
解析MySql与Java的时间类型
Jun 22 PHP
CI使用Tank Auth转移数据库导致密码用户错误的解决办法
Jun 12 PHP
使用Appcan客户端自动更新PHP版本号(全)
Jul 31 PHP
phpmailer简单发送邮件的方法(附phpmailer源码下载)
Jun 13 PHP
PHP实现简易blog的制作
Oct 24 PHP
laravel实现批量更新多条记录的方法示例
Oct 22 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也可以?成Shell Script
2006/10/09 PHP
PHP+DBM的同学录程序(5)
2006/10/09 PHP
PHP pathinfo()获得文件的路径、名称等信息说明
2011/09/13 PHP
PHP类与对象中的private访问控制的疑问
2012/11/01 PHP
PHP获取数组中指定的一列实例
2017/12/27 PHP
jQuery操作checkbox选择(list/table)
2013/04/07 Javascript
JS将表单导出成EXCEL的实例代码
2013/11/11 Javascript
javascript的函数作用域
2014/11/12 Javascript
javascript进行四舍五入方法汇总
2014/12/16 Javascript
JavaScript获取当前网页最后修改时间的方法
2015/04/03 Javascript
BootStrap 动态添加验证项和取消验证项的实现方法
2016/09/28 Javascript
微信小程序 扎金花简单实例
2017/02/21 Javascript
微信小程序progress组件使用详解
2018/01/31 Javascript
使用JavaScript中的lodash编写双色球效果
2018/06/24 Javascript
element vue Array数组和Map对象的添加与删除操作
2018/11/14 Javascript
详解基于vue-cli3快速发布一个fullpage组件
2019/03/08 Javascript
element-ui tooltip修改背景颜色和箭头颜色的实现
2019/12/16 Javascript
vue-cli设置publicPath小记
2020/04/14 Javascript
Python中itertools模块用法详解
2014/09/25 Python
使用Python脚本将绝对url替换为相对url的教程
2015/04/24 Python
python中logging库的使用总结
2017/10/18 Python
flask + pymysql操作Mysql数据库的实例
2017/11/13 Python
基于python的列表list和集合set操作
2019/11/24 Python
python实现b站直播自动发送弹幕功能
2021/02/20 Python
python元组拆包实现方法
2021/02/28 Python
施工安全协议书
2013/12/11 职场文书
捐款倡议书范文
2014/02/02 职场文书
学校联谊活动方案
2014/02/15 职场文书
黄金酒广告词
2014/03/21 职场文书
新学期教师寄语
2014/04/02 职场文书
《少年王冕》教学反思
2014/04/11 职场文书
就业意向协议书
2015/01/29 职场文书
2015年教师节活动总结
2015/03/20 职场文书
工厂仓库管理员岗位职责
2015/04/09 职场文书
校运会通讯稿
2015/07/18 职场文书
《坐井观天》教学反思
2016/02/18 职场文书