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面向对象全攻略 (五) 封装性
Sep 30 PHP
php 需要掌握的东西 不做浮躁的人
Dec 28 PHP
php 广告调用类代码(支持Flash调用)
Aug 11 PHP
修改PHP的memory_limit限制的方法分享
Feb 21 PHP
php笔记之:文章中图片处理的使用
Apr 26 PHP
深入理解:单一入口、MVC、ORM、CURD、ActiveRecord概念
Jun 06 PHP
THINKPHP2.0到3.0有哪些改进之处
Jan 04 PHP
PHP实现的下载远程图片自定义函数分享
Jan 28 PHP
PHP yii实现model添加默认值的方法(两种方法)
Nov 10 PHP
PHP基于接口技术实现简单的多态应用完整实例
Apr 26 PHP
PHP清除缓存的几种方法总结
Sep 12 PHP
PHP基于自定义函数生成笛卡尔积的方法示例
Sep 30 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学习笔记之 函数声明
2011/06/09 PHP
YII Framework框架教程之日志用法详解
2016/03/14 PHP
PHP通过引用传递参数用法分析
2016/12/01 PHP
PHP实现权限管理功能示例
2017/09/22 PHP
在javascript中对于DOM的加强
2013/04/11 Javascript
邮箱下拉自动填充选择示例代码附图
2014/04/03 Javascript
JS实现清除指定cookies的方法
2014/09/20 Javascript
jQuery实现类似标签风格的导航菜单效果代码
2015/08/25 Javascript
基于angularjs实现图片放大镜效果
2016/08/31 Javascript
jQuery.uploadify文件上传组件实例讲解
2016/09/23 Javascript
js内置对象处理_打印学生成绩单的简单实现
2016/09/24 Javascript
JavaScript队列、优先队列与循环队列
2016/11/14 Javascript
使用jQuery监听扫码枪输入并禁止手动输入的实现方法(推荐)
2017/03/21 jQuery
vue2.0 自定义日期时间过滤器
2017/06/07 Javascript
详解vue渲染从后台获取的json数据
2017/07/06 Javascript
js判断文件类型大小并给出提示的实现方法
2018/01/03 Javascript
Vue中多个元素、组件的过渡及列表过渡的方法示例
2019/02/13 Javascript
Node.js中package.json中库的版本号(~和^)
2019/04/02 Javascript
node获取客户端ip功能简单示例
2019/08/24 Javascript
python定时检查某个进程是否已经关闭的方法
2015/05/20 Python
Python可变参数函数用法实例
2015/07/07 Python
Python计算字符宽度的方法
2016/06/14 Python
python安装numpy&amp;安装matplotlib&amp; scipy的教程
2017/11/02 Python
python样条插值的实现代码
2018/12/17 Python
python爬虫selenium和phantomJs使用方法解析
2019/08/08 Python
基于Python中的yield表达式介绍
2019/11/19 Python
Python 支持向量机分类器的实现
2020/01/15 Python
python语言是免费还是收费的?
2020/06/15 Python
HTML5页面直接调用百度地图API获取当前位置直接导航目的地的实现代码
2018/03/02 HTML / CSS
外企C语言笔试题
2013/11/10 面试题
秋季运动会表扬稿
2014/01/16 职场文书
学校门卫岗位职责
2014/03/16 职场文书
公司总经理助理岗位职责
2014/07/09 职场文书
小学安全工作汇报材料
2014/08/19 职场文书
领导干部失职检讨书
2015/05/05 职场文书
迎新生欢迎词2015
2015/07/16 职场文书