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 相关文章推荐
Mysql和网页显示乱码解决方法集锦
Mar 27 PHP
用PHP进行MySQL删除记录操作代码
Jun 07 PHP
PHP垃圾回收机制简单说明
Jul 22 PHP
PHP+Memcache实现wordpress访问总数统计(非插件)
Jul 04 PHP
PHP调用C#开发的dll类库方法
Jul 28 PHP
是 WordPress 让 PHP 更流行了 而不是框架
Feb 03 PHP
全面解读PHP的Yii框架中的日志功能
Mar 17 PHP
thinkPHP中配置的读取与C方法详解
Dec 05 PHP
详解PHP数据压缩、加解密(pack, unpack)
Dec 17 PHP
学习thinkphp5.0验证类使用方法
Nov 16 PHP
PHP ajax+jQuery 实现批量删除功能实例代码小结
Dec 06 PHP
PHP基于cookie实现统计在线人数功能示例
Jan 16 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实现读取和编写XML DOM代码
2010/04/07 PHP
php正则取img标记中任意属性(正则替换去掉或改变图片img标记中的任意属性)
2013/08/13 PHP
JQuery将文本转化成JSON对象需要注意的问题
2011/05/09 Javascript
读jQuery之七 判断点击了鼠标哪个键的代码
2011/06/21 Javascript
你知道setTimeout是如何运行的吗?
2016/08/16 Javascript
微信开发 JS-SDK 6.0.2 经常遇到问题总结
2016/12/08 Javascript
JS三目运算(三元运算)方法详解
2017/03/01 Javascript
快速使用node.js进行web开发详解
2017/04/26 Javascript
react-router实现跳转传值的方法示例
2017/05/27 Javascript
详解javascript replace高级用法
2019/02/17 Javascript
a标签调用js的方法总结
2019/09/05 Javascript
微信小程序实现录音功能
2019/11/22 Javascript
Vue 嵌套路由使用总结(推荐)
2020/01/13 Javascript
Python中的super()方法使用简介
2015/08/14 Python
Python多维/嵌套字典数据无限遍历的实现
2016/11/04 Python
python实现超简单的视频对象提取功能
2018/06/04 Python
Pyqt5如何让QMessageBox按钮显示中文示例代码
2019/04/11 Python
梅尔倒谱系数(MFCC)实现
2019/06/19 Python
python网络爬虫 CrawlSpider使用详解
2019/09/27 Python
基于Python脚本实现邮件报警功能
2020/05/20 Python
Pyinstaller打包Scrapy项目的实现步骤
2020/09/22 Python
CSS3轻松实现圆角效果
2017/11/09 HTML / CSS
使用CSS3来匹配横屏竖屏的简单方法
2015/08/04 HTML / CSS
Html5 canvas画图白板踩坑
2020/06/01 HTML / CSS
Ratchet 模态框的实现
2020/08/19 HTML / CSS
Dyson加拿大官方网站:购买戴森吸尘器,风扇,冷热器及配件
2016/10/26 全球购物
亚洲最大的眼镜批发商和零售商之一:Glasseslit
2018/10/08 全球购物
瑞典在互联网上最大的宠物商店:Animail
2020/10/31 全球购物
这段代码难道不该打印出56吗
2013/02/27 面试题
艺术应用与设计个人的自我评价
2013/11/23 职场文书
幼儿园庆六一活动方案
2014/03/06 职场文书
国家税务局干部作风整顿整改措施
2014/09/18 职场文书
2019年大学推荐信
2019/06/24 职场文书
nginx简单配置多个server的方法
2021/03/31 Servers
PostgreSQL存储过程实用脚本(二):创建函数入门
2021/04/05 PostgreSQL
Mysql - 常用函数 每天积极向上
2021/04/05 MySQL