JavaScript数组,JSON对象实现动态添加、修改、删除功能示例

 更新时间:2018年05月26日 12:45:48   作者:不忘初心S  
这篇文章主要介绍了JavaScript数组,JSON对象实现动态添加、修改、删除功能,结合实例形式分析了JavaScript针对json数组的添加、删除、修改操作实现技巧,需要的朋友可以参考下

本文实例讲述了JavaScript数组,JSON对象实现动态添加、修改、删除功能。分享给大家供大家参考,具体如下:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>javascript里面的数组,json对象,动态添加,修改,删除示例</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
var a = JSON.parse("{\"title\":\"\",\"data\":[]}");
var b = JSON.parse("{\"id\":\"2\"}");
var c = JSON.parse("{\"id\":\"3\"}");
var d = JSON.parse("{\"id\":\"4\"}");
var e = JSON.parse("{\"id\":\"5\"}");
var f = JSON.parse("{\"id\":\"6\"}");
function myObjectPush() {
debugger;
/* javascript里面的数组,json对象,动态添加,修改,
删除示例 只要适合Javascript的方法都是可以用在JSON对象的数组中的!
所以还有另外的方法splice( )进行crud操作!
*/
//增加属性
$(a).attr("id", "1");
//增加子对象
a.data.push(b);//数组最后加一条记录
a.data.push(c);
a.data.push(d);
a.data.unshift(d);//数组最前面加一条记录
//修改子对象及属性
a.title = "这是json名字";
//删除子对象
//json的删除有很多种,直接用过 delete json对象方式:
delete a.data[1];
a.data.pop(); //删除最后一项
a.data.shift(); //删除第一项
a.data.splice(0, 1); //删除指定子对象,参数:开始位置,删除个数
//替换不删除
a.data.splice(1, 0, e, f);//开始位置,删除个数,插入对象
//替换并删除 a.data.splice(0, 1, e, f);//开始位置,删除个数,插入对象
console.log(a);
}
</script>
</head>
<body onload="myObjectPush()">
</body>
</html>

运行结果:

PS:关于json操作,这里再为大家推荐几款比较实用的json在线工具供大家参考使用:

在线JSON代码检验、检验、美化、格式化工具:
http://tools.jb51.net/code/json

JSON在线格式化工具:
http://tools.jb51.net/code/jsonformat

在线XML/JSON互相转换工具:
http://tools.jb51.net/code/xmljson

json代码在线格式化/美化/压缩/编辑/转换工具:
http://tools.jb51.net/code/jsoncodeformat

在线json压缩/转义工具:
http://tools.jb51.net/code/json_yasuo_trans

更多关于JavaScript相关内容可查看本站专题:《JavaScript中json操作技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结

希望本文所述对大家JavaScript程序设计有所帮助。

相关文章

  • JS中JSON对象和String之间的互转及处理技巧

    JS中JSON对象和String之间的互转及处理技巧

    JSON:JavaScript 对象表示法(JavaScript Object Notation),其实JSON就是一个JavaScript的对象(Object)而已。接下来通过本文给大家介绍JS中JSON对象和String之间的互转及处理技巧,需要的朋友一起学习吧
    2016-04-04
  • 学习并汇集javascript匿名函数

    学习并汇集javascript匿名函数

    接触jQuery很长时间了,对其的实现有太多疑问,可谓只知道皮毛,对其的精髓一窍不通,可悲啊!所以有必要研究下其中的原理。
    2010-11-11
  • 基于JavaScript Array数组方法(新手必看篇)

    基于JavaScript Array数组方法(新手必看篇)

    下面小编就为大家带来一篇基于JavaScript Array数组方法(新手必看篇)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • Bootstrap 中data-[*] 属性的整理

    Bootstrap 中data-[*] 属性的整理

    本文给大家收藏整理了关于Bootstrap 中data-[*] 属性的相关知识,感兴趣的朋友一起看看吧
    2018-03-03
  • JS实现从对象获取对象中单个键值的方法示例

    JS实现从对象获取对象中单个键值的方法示例

    这篇文章主要介绍了JS实现从对象获取对象中单个键值的方法,涉及javascript数组对象遍历、事件监听、处理等相关操作技巧,需要的朋友可以参考下
    2019-06-06
  • javascript过滤数组重复元素的实现方法

    javascript过滤数组重复元素的实现方法

    这篇文章主要介绍了javascript过滤数组重复元素的实现方法的相关资料,需要的朋友可以参考下
    2017-05-05
  • JavaScript中常用的动画事件使用方法

    JavaScript中常用的动画事件使用方法

    JavaScript在处理动画方面极富灵活性,提供了一系列事件,使得开发者能够更精准地控制动画执行的各个阶段,使用这些事件,可以在动画开始、结束、重复等动作发生时执行特定的行为,本文将详细介绍JavaScript中常用的动画事件,并展示其使用方法
    2023-12-12
  • js 立即调用的函数表达式如何写

    js 立即调用的函数表达式如何写

    如果不需要显示调用函数, 让这个函数在定义的时候就执行的话, 该如何写才可以呢,下面为大家介绍下具体的实现步骤,喜欢的朋友可以了解下
    2014-01-01
  • 一个加载js文件的小脚本

    一个加载js文件的小脚本

    一个加载js文件的小脚本...
    2007-06-06
  • JavaScript数组filter方法

    JavaScript数组filter方法

    filter()创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素,这篇文章主要介绍了JavaScript数组filter方法,需要的朋友可以参考下
    2022-12-12

最新评论