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下图片文字混合水印与缩略图实现代码
Dec 11 PHP
php中时间轴开发(刚刚、5分钟前、昨天10:23等)
Oct 03 PHP
提升PHP性能的21种方法介绍
Jun 25 PHP
遭遇php的in_array低性能问题
Sep 17 PHP
PHP中文编码小技巧
Dec 25 PHP
php parse_str() 函数的定义和用法
May 23 PHP
微信公众号开发之语音消息识别php代码
Aug 08 PHP
CakePHP框架Model关联对象用法分析
Aug 04 PHP
三个思路解决laravel上传文件报错:413 Request Entity Too Large问题
Nov 13 PHP
PHP中in_array的隐式转换的解决方法
Mar 06 PHP
Linux下 php7安装redis的方法
Nov 01 PHP
PHP Trait功能与用法实例分析
Jun 03 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中对数组的一些常用的增、删、插操作函数总结
2015/11/27 PHP
php实现图片上传时添加文字和图片水印技巧
2020/04/18 PHP
浅谈PHP的$_SERVER[SERVER_NAME]
2017/02/04 PHP
Thinkphp通过一个入口文件如何区分移动端和PC端
2017/04/18 PHP
JS 用6N±1法求素数 实例教程
2009/10/20 Javascript
JavaScript 对Cookie 操作的封装小结
2009/12/31 Javascript
jQuery 快速结束当前正在执行的动画
2013/11/20 Javascript
Jquery设置attr的disabled属性控制某行显示或者隐藏
2014/09/25 Javascript
JavaScript中对象property的删除方法介绍
2014/12/30 Javascript
JavaScript获取表格(table)当前行的值、删除行、增加行
2015/07/03 Javascript
把多个JavaScript函数绑定到onload事件处理函数上的方法
2016/09/04 Javascript
jQuery插入节点和移动节点用法示例(insertAfter、insertBefore方法)
2016/09/08 Javascript
JavaScript 详解预编译原理
2017/01/22 Javascript
JS 组件系列之Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案
2017/06/30 Javascript
详解vue 模版组件的三种用法
2017/07/21 Javascript
详解React Native网络请求fetch简单封装
2017/08/10 Javascript
利用vue组件自定义v-model实现一个Tab组件方法示例
2017/12/06 Javascript
vue-router配合ElementUI实现导航的实例
2018/02/11 Javascript
微信小程序时间选择插件使用详解
2018/12/28 Javascript
基于ts的动态接口数据配置的详解
2019/12/18 Javascript
详解Django通用视图中的函数包装
2015/07/21 Python
Python3之简单搭建自带服务器的实例讲解
2018/06/04 Python
Python从Excel中读取日期一列的方法
2018/11/28 Python
python numpy之np.random的随机数函数使用介绍
2019/10/06 Python
tensorflow模型的save与restore,及checkpoint中读取变量方式
2020/05/26 Python
浅谈keras中的batch_dot,dot方法和TensorFlow的matmul
2020/06/18 Python
HTML5本地存储之Database Storage应用介绍
2013/01/06 HTML / CSS
html5画布旋转效果示例
2014/01/27 HTML / CSS
对于没有初始化的变量的初始值可以作怎样的假定
2014/10/12 面试题
物流专业求职计划书
2014/01/10 职场文书
入党积极分子评语
2014/05/04 职场文书
安全责任书模板
2014/07/22 职场文书
2014年学生管理工作总结
2014/12/20 职场文书
法定代表人资格证明书
2015/06/18 职场文书
环保建议书作文300字
2015/09/14 职场文书
pytorch损失反向传播后梯度为none的问题
2021/05/12 Python