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安全配置
Oct 09 PHP
php Try Catch异常测试
Mar 01 PHP
php 分库分表hash算法
Nov 12 PHP
在PHP中养成7个面向对象的好习惯
Jan 28 PHP
php&amp;mysql 日期操作小记
Feb 27 PHP
PHP中文编码小技巧
Dec 25 PHP
PHP数组操作――获取数组最后一个值的方法
Apr 14 PHP
smarty简单应用实例
Nov 03 PHP
/etc/php-fpm.d/www.conf 配置注意事项
Feb 04 PHP
PHP开发的微信现金红包功能示例
Jun 29 PHP
详解php几行代码实现CSV格式文件输出
Jul 01 PHP
解决laravel 表单提交-POST 异常的问题
Oct 15 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读取CURL模拟登录时生成Cookie文件的方法
2014/11/04 PHP
php生成gif动画的方法
2015/11/05 PHP
PHPStudy下如何为Apache安装SSL证书的方法步骤
2019/01/23 PHP
自己动手制作jquery插件之自动添加删除行的实现
2011/10/13 Javascript
IE下双击checkbox反应延迟问题的解决方法
2014/03/27 Javascript
javascript求日期差的方法
2016/03/02 Javascript
使用jQuery实现Web页面换肤功能的要点解析
2016/05/12 Javascript
基于JS代码实现导航条弹出式悬浮菜单
2016/06/17 Javascript
js中new一个对象的过程
2017/02/20 Javascript
jQuery的三种bind/One/Live/On事件绑定使用方法
2017/02/23 Javascript
AngularJS 最常用的八种功能(基础知识)
2017/06/26 Javascript
iscroll实现下拉刷新功能
2017/07/18 Javascript
小程序点赞收藏功能的实现代码示例
2018/09/07 Javascript
vue实现添加与删除图书功能
2018/10/07 Javascript
详解Vue SSR( Vue2 + Koa2 + Webpack4)配置指南
2018/11/13 Javascript
laydate时间日历插件使用方法详解
2018/11/14 Javascript
关于layui的下拉搜索框异步加载数据的解决方法
2019/09/28 Javascript
vue swipeCell滑动单元格(仿微信)的实现示例
2020/09/14 Javascript
[31:33]2014 DOTA2国际邀请赛中国区预选赛 TongFu VS DT 第一场
2014/05/23 DOTA
python实现计算倒数的方法
2015/07/11 Python
python如何实现excel数据添加到mongodb
2015/07/30 Python
Python爬取当当、京东、亚马逊图书信息代码实例
2017/12/09 Python
Python实现PS滤镜特效之扇形变换效果示例
2018/01/26 Python
对pandas中apply函数的用法详解
2018/04/10 Python
python中类的属性和方法介绍
2018/11/27 Python
Python爬取视频(其实是一篇福利)过程解析
2019/08/01 Python
JD Sports澳洲官网:英国领先的运动鞋和运动时尚零售商
2020/02/15 全球购物
大学生个人总结的自我评价
2013/10/05 职场文书
餐厅经理岗位职责和岗位目标
2014/02/13 职场文书
《桂花雨》教学反思
2014/04/12 职场文书
安全施工责任书
2014/08/25 职场文书
2014乡镇党委副书记对照检查材料思想汇报
2014/10/09 职场文书
酒店辞职书怎么写
2015/02/26 职场文书
上学路上观后感
2015/06/16 职场文书
html+css实现赛博朋克风格按钮
2021/05/26 HTML / CSS
浅谈Python响应式类库RxPy
2021/06/14 Python