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
php写的简易聊天室代码
Jun 04 PHP
PHP 第一节 php简介
Apr 28 PHP
关于php程序报date()警告的处理(date_default_timezone_set)
Oct 22 PHP
php根据身份证号码计算年龄的实例代码
Jan 18 PHP
zf框架db类的分页示例分享
Mar 14 PHP
Laravel 5框架学习之子视图和表单复用
Apr 09 PHP
php file_get_contents取文件中数组元素的方法
Apr 01 PHP
Django中的cookie与session操作实例代码
Aug 17 PHP
浅谈PHP实现大流量下抢购方案
Dec 15 PHP
PHP操作Redis数据库常用方法示例
Aug 25 PHP
discuz论坛更换域名,详细文件修改步骤
Dec 09 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
PHILIPS D1835/D1875的电路分析与打理
2021/03/02 无线电
探讨如何使用SimpleXML函数来加载和解析XML文档
2013/06/07 PHP
codeigniter使用技巧批量插入数据实例方法分享
2013/12/31 PHP
PHP中的闭包(匿名函数)浅析
2015/02/07 PHP
php用ini_get获取php.ini里变量值的方法
2015/03/04 PHP
js实现一个可以兼容PC端和移动端的div拖动效果实例
2016/12/09 Javascript
js实现二级导航功能
2017/03/03 Javascript
iview通过Dropdown(下拉菜单)实现的右键菜单
2018/10/26 Javascript
javascript异步处理与Jquery deferred对象用法总结
2019/06/04 jQuery
layer.prompt使文本框为空的情况下也能点击确定的方法
2019/09/24 Javascript
layer.alert自定义关闭回调事件的方法
2019/09/27 Javascript
JS typeof fn === 'function' &amp;&amp; fn()详解
2020/08/22 Javascript
使用JavaScript实现贪吃蛇游戏
2020/09/29 Javascript
[03:05]DOTA2英雄基础教程 嗜血狂魔
2013/12/10 DOTA
零基础写python爬虫之抓取百度贴吧并存储到本地txt文件改进版
2014/11/06 Python
使用PDB简单调试Python程序简明指南
2015/04/25 Python
使用Python的Bottle框架写一个简单的服务接口的示例
2015/08/25 Python
Python实现的排列组合计算操作示例
2017/10/13 Python
Python装饰器用法实例分析
2019/01/14 Python
python绘制规则网络图形实例
2019/12/09 Python
利用python对excel中一列的时间数据更改格式操作
2020/07/14 Python
英国女士和男士时尚服装网上购物:Top Labels Online
2018/03/25 全球购物
瑜伽国际:Yoga International
2018/04/18 全球购物
英国曼彻斯特宠物用品品牌:Bunty Pet Products
2019/07/27 全球购物
iKRIX意大利网上商店:男女豪华服装和配件
2019/10/09 全球购物
人力资源经理自我评价
2014/01/04 职场文书
医药学专业大学生职业生涯规划书论文
2014/01/21 职场文书
幼儿园门卫岗位职责
2014/02/14 职场文书
伦敦奥运会口号
2014/06/13 职场文书
公证委托书标准格式
2014/09/11 职场文书
2014年学生会主席工作总结
2014/11/07 职场文书
会计工作总结范文2014
2014/12/23 职场文书
博士生专家推荐信
2015/03/25 职场文书
爱国影片观后感
2015/06/18 职场文书
python 调用js的四种方式
2021/04/11 Python
MySQL创建管理LIST分区
2022/04/13 MySQL