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


Posted in Javascript onMay 26, 2018

本文实例讲述了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>

运行结果:

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

Javascript 相关文章推荐
fancybox1.3.1 基于Jquery的插件在IE中图片显示问题
Oct 01 Javascript
JQuery模板插件 jquery.tmpl 动态ajax扩展
Nov 10 Javascript
深入理解JavaScript系列(37):设计模式之享元模式详解
Mar 04 Javascript
快速学习jQuery插件 jquery.validate.js表单验证插件使用方法
Dec 01 Javascript
jQuery实现图片文字淡入淡出效果
Dec 21 Javascript
jQuery使用each方法与for语句遍历数组示例
Jun 16 Javascript
利用jquery实现实时更新歌词的方法
Jan 06 Javascript
详解在React中跨组件分发状态的三种方法
Aug 09 Javascript
代码分析vue中如何配置less
Sep 28 Javascript
基于Webpack4和React hooks搭建项目的方法
Feb 05 Javascript
layui 富文本赋值,取值,取纯文本值的实例
Sep 18 Javascript
JavaScript设计模式--简单工厂模式实例分析【XHR工厂案例】
May 23 Javascript
angularJS开发注意事项
May 26 #Javascript
JavaScript继承与多继承实例分析
May 26 #Javascript
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】
May 26 #jQuery
Vue仿支付宝支付功能
May 25 #Javascript
微信小程序实现人脸检测功能
May 25 #Javascript
微信小程序实现人脸识别
May 25 #Javascript
微信小程序实现刷脸登录
May 25 #Javascript
You might like
重新封装zend_soap实现http连接安全认证的php代码
2011/01/12 PHP
PHP CURL模拟登录新浪微博抓取页面内容 基于EaglePHP框架开发
2012/01/16 PHP
PHP数组array类常见操作示例
2020/05/15 PHP
科讯商业版中用到的ajax空间与分页函数
2007/09/02 Javascript
基于jQuery的的一个隔行变色,鼠标移动变色的小插件
2010/07/06 Javascript
基于Jquery的仿Windows Aero弹出窗(漂亮的关闭按钮)
2010/09/28 Javascript
JavaScript 的继承
2011/10/01 Javascript
ASP.NET jQuery 实例4(复制TextBox的文本到本地剪贴板上)
2012/01/13 Javascript
jQuery中size()方法用法实例
2014/12/27 Javascript
javascript操作符&quot;!~&quot;详解
2015/02/10 Javascript
js文字横向滚动特效
2015/11/11 Javascript
jquery制作属于自己的select自定义样式
2015/11/23 Javascript
基于JS快速实现导航下拉菜单动画效果附源码下载
2016/10/27 Javascript
Angular4表单验证代码详解
2017/09/03 Javascript
解决option标签selected=&quot;selected&quot;属性失效的问题
2017/11/06 Javascript
JavaScript实现的贝塞尔曲线算法简单示例
2018/01/30 Javascript
Vue项目全局配置微信分享思路详解
2018/05/04 Javascript
layui动态渲染生成select的option值方法
2019/09/23 Javascript
微信小程序自定义modal弹窗组件的方法详解
2020/12/20 Javascript
[55:32]2018DOTA2亚洲邀请赛 4.4 淘汰赛 EG vs LGD 第二场
2018/04/05 DOTA
[37:50]VP vs TNC Supermajor小组赛B组 BO3 第一场 6.2
2018/06/03 DOTA
跟老齐学Python之做一个小游戏
2014/09/28 Python
Python 3中的yield from语法详解
2017/01/18 Python
Python中标准模块importlib详解
2017/04/16 Python
Django rest framework实现分页的示例
2018/05/24 Python
python中的print()输出
2019/04/12 Python
python调用并链接MATLAB脚本详解
2019/07/05 Python
pytorch载入预训练模型后,实现训练指定层
2020/01/06 Python
pytorch 实现在一个优化器中设置多个网络参数的例子
2020/02/20 Python
通过HTML5 Canvas API绘制弧线和圆形的教程
2016/03/14 HTML / CSS
TALLY WEiJL法国网上商店:服装、时装及配饰
2019/08/31 全球购物
美国知名的隐形眼镜电商:Contacts America
2019/11/19 全球购物
Tomcat中怎么使用log4j输出所有的log
2016/07/07 面试题
机关节能减排实施方案
2014/03/17 职场文书
护理自荐信
2019/05/14 职场文书
MySQL时间盲注的五种延时方法实现
2021/05/18 MySQL