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实现的MySQL数据浏览器
Mar 11 PHP
mysql+php分页类(已测)
Mar 31 PHP
PHP中去掉字符串首尾空格的方法
May 19 PHP
基于php在各种web服务器的运行模式详解
Jun 03 PHP
PHP Switch 语句之学习笔记
Sep 21 PHP
ThinkPHP实现事务回滚示例代码
Jun 23 PHP
PHP实现图片旋转效果实例代码
Oct 01 PHP
php简单实现发送带附件的邮件
Jun 10 PHP
CI框架入门之MVC简单示例
Nov 21 PHP
PHP中散列密码的安全性分析
Jul 26 PHP
在 Laravel 中动态隐藏 API 字段的方法
Oct 25 PHP
Laravel框架中队列和工作(Queues、Jobs)操作实例详解
Apr 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堆排序实现原理与应用方法
2015/01/03 PHP
PHP 7.0.2 正式版发布
2016/01/08 PHP
总结的一些PHP开发中的tips(必看篇)
2017/03/24 PHP
表单的一些基本用法与技巧
2006/07/15 Javascript
Javascript操纵Cookie实现购物车程序
2007/02/15 Javascript
js如何获取object类型里的键值
2014/02/18 Javascript
js实现动画特效的文字链接鼠标悬停提示的方法
2015/03/02 Javascript
JavaScript中对DOM节点的访问、创建、修改、删除
2015/11/16 Javascript
详解Bootstrap插件
2016/04/25 Javascript
JavaScript继承学习笔记【新手必看】
2016/05/10 Javascript
第十篇BootStrap轮播插件使用详解
2016/06/21 Javascript
JavaScript导航脚本判断当前导航
2016/07/12 Javascript
KnockoutJS 3.X API 第四章之表单submit、enable、disable绑定
2016/10/10 Javascript
Bootstrap基本插件学习笔记之模态对话框(16)
2016/12/08 Javascript
ECMAScript6 新特性范例大全
2017/03/24 Javascript
详解Vue 事件驱动和依赖追踪
2017/04/22 Javascript
js随机生成一个验证码
2017/06/01 Javascript
Vue子组件向父组件通信与父组件调用子组件中的方法
2018/06/22 Javascript
jQuery实现弹出层效果
2019/12/10 jQuery
js实现简单的轮播图效果
2020/12/13 Javascript
[02:06]2018完美世界全国高校联赛秋季赛开始报名(附彩蛋)
2018/09/03 DOTA
[01:01:43]EG vs VP 2018国际邀请赛淘汰赛BO3 第二场 8.24
2018/08/25 DOTA
Python的函数嵌套的使用方法
2014/01/24 Python
Python机器学习算法之k均值聚类(k-means)
2018/02/23 Python
python实现人脸识别经典算法(一) 特征脸法
2018/03/13 Python
对python制作自己的数据集实例讲解
2018/12/12 Python
pandas DataFrame 行列索引及值的获取的方法
2019/07/02 Python
python3 图片 4通道转成3通道 1通道转成3通道 图片压缩实例
2019/12/03 Python
linux面试题参考答案(2)
2015/12/06 面试题
中医药大学毕业生自荐信
2013/11/08 职场文书
宣传普通话标语
2014/06/27 职场文书
环境保护建议书
2014/08/26 职场文书
乡镇党员干部四风对照检查材料思想汇报
2014/09/27 职场文书
战略性融资合作协议书范本
2014/10/17 职场文书
扬州个园导游词
2015/02/06 职场文书
详解Python自动化之文件自动化处理
2021/06/21 Python