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 相关文章推荐
实时抓取YAHOO股票报价的代码
Oct 09 PHP
用PHPdig打造属于你自己的Google[图文教程]
Feb 14 PHP
Ajax+PHP 边学边练 之二 实例
Nov 24 PHP
php遍历目录viewDir函数
Dec 15 PHP
PHP随机数生成代码与使用实例分析
Apr 08 PHP
PHP中PDO的错误处理
Sep 04 PHP
PHP实现上传多图即时显示与即时删除的方法
May 09 PHP
PHP给源代码加密的几种方法汇总(推荐)
Feb 06 PHP
PHP的mysqli_ssl_set()函数讲解
Jan 23 PHP
thinkPHP框架通过Redis实现增删改查操作的方法详解
May 13 PHP
PHP常见过waf webshell以及最简单的检测方法
May 21 PHP
phpstorm激活码2020附使用详细教程
Sep 25 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
全国FM电台频率大全 - 20 广西省
2020/03/11 无线电
《OVERLORD》手游英文版即将上线 手机上也能扮演骨王
2020/04/09 日漫
生成静态页面的PHP类
2006/11/25 PHP
Yii框架关联查询with用法分析
2014/12/02 PHP
老生常谈PHP数组函数array_merge(必看篇)
2017/05/25 PHP
php使用gearman进行任务分发操作实例详解
2020/02/26 PHP
Gambit vs CL BO3 第一场 2.13
2021/03/10 DOTA
jquery删除提示框弹出是否删除对话框
2014/01/07 Javascript
一个CSS+jQuery实现的放大缩小动画效果
2014/02/19 Javascript
JavaScript中跨域调用Flash的方法
2014/08/11 Javascript
JavaScript+CSS实现仿Mootools竖排弹性动画菜单效果
2015/10/14 Javascript
JS代码随机生成姓名、手机号、身份证号、银行卡号
2016/04/27 Javascript
深入理解vue.js中的v-if和v-show
2017/06/22 Javascript
vue.js项目nginx部署教程
2018/04/05 Javascript
小程序自定义组件实现城市选择功能
2018/07/18 Javascript
利用jsonp解决js读取本地json跨域的问题
2018/12/11 Javascript
微信小程序常见页面跳转操作简单示例
2019/05/01 Javascript
JavaScript 扩展运算符用法实例小结【基于ES6】
2019/06/17 Javascript
vue双向绑定数据限制长度的方法
2019/11/04 Javascript
在vue中动态添加class类进行显示隐藏实例
2019/11/09 Javascript
Python NumPy库安装使用笔记
2015/05/18 Python
Python实现截屏的函数
2015/07/25 Python
深入浅析ImageMagick命令执行漏洞
2016/10/11 Python
如何利用Fabric自动化你的任务
2016/10/20 Python
python生成excel的实例代码
2017/11/08 Python
Python实现定时监测网站运行状态的示例代码
2020/09/30 Python
绘画设计学生的个人自我评价
2013/09/20 职场文书
土木工程毕业生自荐信
2013/09/21 职场文书
个人委托书格式
2014/04/04 职场文书
颂军魂爱军营演讲稿
2014/09/13 职场文书
六五普法宣传标语
2014/10/06 职场文书
元宵节寄语大全
2015/02/27 职场文书
仙境之桥观后感
2015/06/16 职场文书
人生感悟经典句子
2019/08/20 职场文书
CSS3 天气图标动画效果
2021/04/06 HTML / CSS
JAVA API 实用类 String详解
2021/10/05 Java/Android