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 相关文章推荐
用Socket发送电子邮件(利用需要验证的SMTP服务器)
Oct 09 PHP
PHP面向对象的使用教程 简单数据库连接
Nov 25 PHP
PHP 最大运行时间 max_execution_time修改方法
Mar 08 PHP
php实现无限级分类实现代码(递归方法)
Jan 01 PHP
destoon会员注册提示“数据校验失败(2)”解决方法
Jun 21 PHP
学习php中的正则表达式
Aug 17 PHP
php实现QQ空间获取当前用户的用户名并生成图片
Jul 25 PHP
php多线程实现方法及用法实例详解
Oct 26 PHP
详解WordPress中添加和执行动作的函数使用方法
Dec 29 PHP
浅谈PHP安全防护之Web攻击
Jan 03 PHP
PHP对称加密算法(DES/AES)类的实现代码
Nov 14 PHP
Laravel如何使用Redis共享Session
Feb 23 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利用APC模块实现大文件上传进度条的方法
2015/10/29 PHP
php实现在线通讯录功能(附源码)
2016/05/13 PHP
iOS+PHP注册登录系统 PHP部分(上)
2016/12/26 PHP
php在windows环境下获得cpu内存实时使用率(推荐)
2018/02/08 PHP
如何书写高质量jQuery代码(使用jquery性能问题)
2014/06/30 Javascript
Javascript遍历table中的元素示例代码
2014/07/08 Javascript
JavaScript中提前声明变量或函数例子
2014/11/12 Javascript
JS树形菜单组件Bootstrap TreeView使用方法详解
2016/12/21 Javascript
超全面的javascript中变量命名规则
2017/02/09 Javascript
用Vue.extend构建消息提示组件的方法实例
2017/08/08 Javascript
Vue子组件向父组件通信与父组件调用子组件中的方法
2018/06/22 Javascript
vue通过滚动行为实现从列表到详情,返回列表原位置的方法
2018/08/31 Javascript
详解react内联样式使用webpack将px转rem
2018/09/13 Javascript
vue服务端渲染添加缓存的方法
2018/09/18 Javascript
java实现单链表增删改查的实例代码详解
2019/08/30 Javascript
[01:08]2014DOTA2展望TI 剑指西雅图LGD战队专访
2014/06/30 DOTA
基于python 处理中文路径的终极解决方法
2018/04/12 Python
Python定时任务sched模块用法示例
2018/07/16 Python
Python修改文件往指定行插入内容的实例
2019/01/30 Python
Python利用matplotlib做图中图及次坐标轴的实例
2019/07/08 Python
python pandas移动窗口函数rolling的用法
2020/02/29 Python
Python函数默认参数常见问题及解决方案
2020/03/26 Python
jupyter notebook 使用过程中python莫名崩溃的原因及解决方式
2020/04/10 Python
pandas数据处理之绘图的实现
2020/06/15 Python
用于ETL的Python数据转换工具详解
2020/07/21 Python
法国发饰品牌:Alexandre De Paris
2018/12/04 全球购物
意大利独特而优质的家居用品:Fazzini
2018/12/05 全球购物
建筑行业的大学生自我评价
2013/12/08 职场文书
会计与审计毕业生自荐信范文
2013/12/30 职场文书
消防工作实施方案
2014/06/09 职场文书
我是一名护士演讲稿
2014/08/28 职场文书
机关作风整顿个人剖析材料
2014/10/06 职场文书
2014年乡镇安全生产工作总结
2014/12/02 职场文书
解决MySQL存储时间出现不一致的问题
2021/04/28 MySQL
Python机器学习三大件之一numpy
2021/05/10 Python
阿里云服务器Ubuntu 20.04上安装Odoo 15
2022/05/20 Servers