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 相关文章推荐
smarty+adodb+部分自定义类的php开发模式
Dec 31 PHP
php自动获取目录下的模板的代码
Aug 08 PHP
php模板中出现空行解决方法
Mar 08 PHP
php实现快速排序的三种方法分享
Mar 12 PHP
PHP数据库操作之基于Mysqli的数据库操作类库
Apr 19 PHP
php中json_encode不兼容JSON_UNESCAPED_UNICODE的解决方案
May 31 PHP
PHP怎样用正则抓取页面中的网址
Aug 09 PHP
PHP7 新特性详细介绍
Sep 06 PHP
php通过PHPExcel导入Excel表格到MySQL数据库的简单实例
Oct 29 PHP
php自定义时间转换函数示例
Dec 07 PHP
PHP如何搭建百度Ueditor富文本编辑器
Sep 21 PHP
thinkphp5.1框架容器与依赖注入实例分析
Jul 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中array_merge和array相加的区别分析
2013/06/17 PHP
Ajax+PHP快速上手及简单应用说明
2013/07/24 PHP
PHP文件上传主要代码讲解
2013/09/30 PHP
使用php计算排列组合的方法
2013/11/13 PHP
ThinkPHP使用UTFWry地址库进行IP定位实例
2014/04/01 PHP
PHP基于phpqrcode生成带LOGO图像的二维码实例
2015/07/10 PHP
一个简单安全的PHP验证码类、PHP验证码
2016/09/24 PHP
php安装php_rar扩展实现rar文件读取和解压的方法
2016/11/17 PHP
PHP小程序支付功能完整版【基于thinkPHP】
2019/03/26 PHP
你的编程语言可以这样做吗?
2006/09/07 Javascript
JS网络游戏-(模拟城市webgame)提供的一些例子下载
2007/10/14 Javascript
JavaScript 变量作用域分析
2011/07/04 Javascript
JavaScript中使用arguments获得函数传参个数实例
2014/08/27 Javascript
jQuery幻灯片带缩略图轮播效果代码分享
2015/08/17 Javascript
javascript自动恢复文本框点击清除后的默认文本
2016/01/12 Javascript
原生js实现jquery函数animate()动画效果的简单实例
2016/08/21 Javascript
js模式化窗口问题![window.dialogArguments]
2016/10/30 Javascript
原生js实现键盘控制div移动且解决停顿问题
2016/12/05 Javascript
浅谈Webpack核心模块tapable解析
2018/09/11 Javascript
解决vue-cli脚手架打包后vendor文件过大的问题
2018/09/27 Javascript
jQuery+css last-child实现选择最后一个子元素操作示例
2018/12/10 jQuery
jQuery实现动态添加和删除input框实例代码
2019/03/26 jQuery
es6中使用map简化复杂条件判断操作实例详解
2020/02/19 Javascript
在vue中使用回调函数,this调用无效的解决
2020/08/11 Javascript
解决antd 表单设置默认值initialValue后验证失效的问题
2020/11/02 Javascript
[50:28]LGD女子学院第三期 DOTA2复仇之魂教学
2013/12/24 DOTA
简单了解python模块概念
2018/01/11 Python
win7+Python3.5下scrapy的安装方法
2018/07/31 Python
Python3获取拉勾网招聘信息的方法实例
2019/04/03 Python
python的命名规则知识点总结
2019/10/04 Python
解决PyCharm IDE环境下,执行unittest不生成测试报告的问题
2020/09/03 Python
利用python绘制中国地图(含省界、河流等)
2020/09/21 Python
html5实现的便签特效(实战分享)
2013/11/29 HTML / CSS
家乐福巴西网上超市:Carrefour巴西
2016/10/31 全球购物
荷兰和比利时时尚鞋店:Van Dalen
2018/04/23 全球购物
企业家王石演讲稿:坚持与放下
2014/04/27 职场文书