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 相关文章推荐
javascript oop开发滑动(slide)菜单控件
Aug 25 Javascript
jQuery针对各类元素操作基础教程
Aug 29 Javascript
使用canvas实现仿新浪微博头像截取上传功能
Sep 02 Javascript
jquery动画效果学习笔记(8种效果)
Nov 13 Javascript
AngularJS单选框及多选框实现双向动态绑定
Jan 13 Javascript
微信小程序之ES6与事项助手的功能实现
Nov 30 Javascript
js实现手机拍照上传功能
Jan 17 Javascript
Angular中$broadcast和$emit的使用方法详解
May 22 Javascript
详解vue-admin和后端(flask)分离结合的例子
Feb 12 Javascript
vue用Object.defineProperty手写一个简单的双向绑定的示例
Jul 09 Javascript
vue-cli 默认路由再子路由选中下的选中状态问题及解决代码
Sep 06 Javascript
从Node.js事件触发器到Vue自定义事件的深入讲解
Jun 26 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
「OVERLORD」动画重要删减!雅儿贝德的背叛?至尊猎杀队结成
2020/04/09 日漫
4月1日重磅发布!《星际争霸II》6.0.0版本更新
2020/04/09 星际争霸
基于mysql的论坛(3)
2006/10/09 PHP
php与XML、XSLT、Mysql的结合运用实现代码
2009/11/19 PHP
php使用curl实现ftp文件下载功能
2017/05/16 PHP
PHP实现微信对账单处理
2018/10/01 PHP
JQuery为textarea添加maxlength属性的代码
2010/04/07 Javascript
网站导致浏览器崩溃的原因总结(多款浏览器) 推荐
2010/04/15 Javascript
图片无缝滚动代码(向左/向下/向上)
2013/04/10 Javascript
javascript-简单的计算器实现步骤分解(附图)
2013/05/30 Javascript
如何在JavaScript中实现私有属性的写类方式(二)
2013/12/04 Javascript
javascript实现倒计时N秒后网页自动跳转代码
2014/12/11 Javascript
jquery form表单获取内容以及绑定数据
2016/02/24 Javascript
AJAX和jQuery动态加载数据的实现方法
2016/12/05 Javascript
Vue.js使用v-show和v-if的注意事项
2016/12/13 Javascript
javascript数据结构中栈的应用之符号平衡问题
2017/04/11 Javascript
Vue 实用分页paging实例代码
2017/04/12 Javascript
小发现之浅谈location.search与location.hash的问题
2017/06/23 Javascript
JavaScript 用fetch 实现异步下载文件功能
2017/07/21 Javascript
解决vue build打包之后首页白屏的问题
2018/03/06 Javascript
Vue使用JSEncrypt实现rsa加密及挂载方法
2020/02/07 Javascript
[02:38]DOTA2亚洲邀请赛 IG战队巡礼
2015/02/03 DOTA
初学Python函数的笔记整理
2015/04/07 Python
python 3.6 +pyMysql 操作mysql数据库(实例讲解)
2017/12/20 Python
Python多线程原理与用法详解
2018/08/20 Python
Python增强赋值和共享引用注意事项小结
2019/05/28 Python
python绘制双Y轴折线图以及单Y轴双变量柱状图的实例
2019/07/08 Python
.NET方向面试题
2014/11/20 面试题
课改先进个人汇报材料
2014/01/26 职场文书
人力资源管理专业毕业生自荐书
2014/05/25 职场文书
部队反四风对照检查材料
2014/09/26 职场文书
国际残疾人日广播稿范文
2014/10/09 职场文书
2014年信访工作总结
2014/11/17 职场文书
反邪教教育心得体会
2016/01/15 职场文书
linux中nohup和后台运行进程查看及终止
2021/06/24 Python
python处理json数据文件
2022/04/11 Python