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 一个比较完善的简单文件上传
Mar 25 PHP
php中强制下载文件的代码(解决了IE下中文文件名乱码问题)
May 09 PHP
php长字符串定义方法
Jul 12 PHP
PHP Switch 语句之学习笔记
Sep 21 PHP
PHP实现图片旋转效果实例代码
Oct 01 PHP
ThinkPHP写数组插入与获取最新插入数据ID实例
Nov 03 PHP
php在线解压ZIP文件的方法
Dec 30 PHP
摘自织梦CMS的HTTP文件下载类
Aug 08 PHP
Zend Framework入门知识点小结
Mar 19 PHP
PHP基于DateTime类解决Unix时间戳与日期互转问题【针对1970年前及2038年后时间戳】
Jun 13 PHP
PHP的mysqli_stat()函数讲解
Jan 23 PHP
解决Laravel使用验证时跳转到首页的问题
Nov 17 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数组函数
2008/08/18 PHP
PHP定时自动生成静态HTML的实现代码
2010/06/20 PHP
PHP 事件机制(2)
2011/03/23 PHP
PHP实现的封装验证码类详解
2013/06/18 PHP
详解PHP执行定时任务的实现思路
2015/12/21 PHP
Windows上php5.6操作mongodb数据库示例【配置、连接、获取实例】
2019/02/13 PHP
jQuery设置与获取HTML,文本和值的简单实例
2014/02/26 Javascript
javascript下拉列表菜单的实现方法
2015/11/18 Javascript
js简单判断移动端系统的方法
2016/02/25 Javascript
原生JS封装Ajax插件(同域、jsonp跨域)
2016/05/03 Javascript
jQuery插件AjaxFileUpload实现ajax文件上传
2016/05/05 Javascript
Angular设置title信息解决SEO方面存在问题
2016/08/19 Javascript
详解angularjs实现echart图表效果最简洁教程
2017/11/29 Javascript
Webpack优化配置缩小文件搜索范围
2017/12/25 Javascript
JavaScript创建对象方法实例小结
2018/09/03 Javascript
深入理解Puppeteer的入门教程和实践
2019/03/05 Javascript
vue中的inject学习教程
2019/04/24 Javascript
用js限制网页只在微信浏览器中打开(或者只能手机端访问)
2020/12/24 Javascript
[01:02:25]2014 DOTA2华西杯精英邀请赛 5 24 iG VS DK
2014/05/26 DOTA
使用Python中PDB模块中的命令来调试Python代码的教程
2015/03/30 Python
Python搭建APNS苹果推送通知推送服务的相关模块使用指南
2016/06/02 Python
Python tornado队列示例-一个并发web爬虫代码分享
2018/01/09 Python
python实现时间o(1)的最小栈的实例代码
2018/07/23 Python
python设置环境变量的作用和实例
2019/07/09 Python
浅谈keras中的Merge层(实现层的相加、相减、相乘实例)
2020/05/23 Python
解决Tensorflow2.0 tf.keras.Model.load_weights() 报错处理问题
2020/06/12 Python
matplotlib源码解析标题实现(窗口标题,标题,子图标题不同之间的差异)
2021/02/22 Python
AVIS安飞士奥地利租车官网:提供奥地利、欧洲和全世界汽车租赁
2016/11/29 全球购物
红色连衣裙精品店:Red Dress Boutique
2018/08/11 全球购物
Notino法国:购买香水和化妆品
2019/04/15 全球购物
巴西最大的巴士票务门户:Quero Passagem
2020/11/21 全球购物
医院实习介绍信
2014/01/12 职场文书
平安家庭事迹材料
2014/12/20 职场文书
迟到检讨书范文
2015/01/27 职场文书
暑假安全保证书
2015/02/28 职场文书
分析JVM源码之Thread.interrupt系统级别线程打断
2021/06/29 Java/Android