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 相关文章推荐
用DBSQL类加快开发MySQL数据库程序的速度
Oct 09 PHP
攻克CakePHP系列一 连接MySQL数据库
Oct 22 PHP
PHP转换IP地址到真实地址的方法详解
Jun 09 PHP
使用php批量删除数据库下所有前缀为prefix_的表
Jun 09 PHP
PHP队列用法实例
Nov 05 PHP
php网站被挂木马后的修复方法总结
Nov 06 PHP
php中常见的sql攻击正则表达式汇总
Nov 06 PHP
PHP 5.6.11中CURL模块问题的解决方法
Aug 08 PHP
php mysql_real_escape_string addslashes及mysql绑定参数防SQL注入攻击
Dec 23 PHP
详解PHP5.6.30与Apache2.4.x配置
Jun 02 PHP
PHP基于socket实现客户端和服务端通讯功能
Jul 13 PHP
PHP7.0连接DB操作实例分析【基于mysqli】
Sep 26 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
在数据量大(超过10万)的情况下
2007/01/15 PHP
PHP环境搭建的详细步骤
2016/06/30 PHP
Alliance vs Liquid BO3 第一场2.13
2021/03/10 DOTA
js实现幻灯片播放图片示例代码
2013/11/07 Javascript
JQuery判断HTML元素是否存在的两种解决方法
2013/12/26 Javascript
JS字符串拼接在ie中都报错的解决方法
2014/03/27 Javascript
jQuery对象的selector属性用法实例
2014/12/27 Javascript
使用window.prompt()实现弹出用户输入的对话框
2015/04/13 Javascript
JavaScript中的函数嵌套使用
2015/06/04 Javascript
nodejs实现获取当前url地址及url各种参数值
2015/06/25 NodeJs
如何用jQuery实现ASP.NET GridView折叠伸展效果
2015/09/26 Javascript
js实现复选框的全选和取消全选效果
2017/01/03 Javascript
Node做中转服务器转发接口
2017/10/18 Javascript
vue使用v-for实现hover点击效果
2018/09/29 Javascript
Angular设置别名alias的方法
2018/11/08 Javascript
基于JavaScript canvas绘制贝塞尔曲线
2018/12/25 Javascript
JavaScript学习笔记之数组基本操作示例
2019/01/09 Javascript
vue离开当前页面触发的函数代码
2020/09/01 Javascript
Python使用matplotlib实现在坐标系中画一个矩形的方法
2015/05/20 Python
Python使用Supervisor来管理进程的方法
2015/05/28 Python
浅谈Tensorflow由于版本问题出现的几种错误及解决方法
2018/06/13 Python
Python 保存矩阵为Excel的实现方法
2019/01/28 Python
实例详解Matlab 与 Python 的区别
2019/04/26 Python
python 爬虫网页登陆的简单实现
2020/11/30 Python
详解FireFox下Canvas使用图像合成绘制SVG的Bug
2019/07/10 HTML / CSS
HTML5是否真的可以取代Flash
2010/02/10 HTML / CSS
深入了解canvas在移动端绘制模糊的问题解决
2019/04/30 HTML / CSS
装潢设计实习自我鉴定
2013/09/19 职场文书
优秀女职工事迹材料
2014/02/06 职场文书
巾帼文明岗申报材料
2014/05/01 职场文书
艾滋病宣传标语
2014/06/25 职场文书
授权委托书格式
2014/07/31 职场文书
公司门卫岗位职责
2015/04/13 职场文书
详解PHP用mb_string处理windows中文字符
2021/05/26 PHP
js 数组 fill() 填充方法
2021/11/02 Javascript
OpenCV实现常见的四种图像几何变换
2022/04/01 Python