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 相关文章推荐
简约JS日历控件 实例代码
Jul 12 Javascript
防止jQuery ajax Load使用缓存的方法小结
Feb 22 Javascript
js获取上传文件大小示例代码
Apr 10 Javascript
Node.js程序中的本地文件操作用法小结
Mar 06 Javascript
JavaScript编写一个简易购物车功能
Sep 17 Javascript
JavaScript中for循环的几种写法与效率总结
Feb 03 Javascript
BootStrap selectpicker后台动态绑定数据
Jun 01 Javascript
vue实现长图垂直居上 vue实现短图垂直居中
Oct 18 Javascript
javascript+css3开发打气球小游戏完整代码
Nov 28 Javascript
浅谈Layui的eleTree树式选择器使用方法
Sep 25 Javascript
基于form-data请求格式详解
Oct 29 Javascript
vue3引入highlight.js进行代码高亮的方法实例
Apr 08 Vue.js
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
linux系统下php安装mbstring扩展的二种方法
2014/01/20 PHP
PHP中使用BigMap实例
2015/03/30 PHP
将PHP从5.3.28升级到5.3.29时Nginx出现502错误
2015/05/09 PHP
Laravel框架中VerifyCsrfToken报错问题的解决
2017/08/30 PHP
PHP PDO数据库操作预处理与注意事项
2019/03/16 PHP
nodejs入门详解(多篇文章结合)
2012/03/07 NodeJs
从面试题学习Javascript 面向对象(创建对象)
2012/03/30 Javascript
js 获取和设置css3 属性值的实现方法
2013/05/06 Javascript
JQuery+CSS提示框实现思路及代码(纯手工打造)
2013/05/07 Javascript
js实现索引图片切换效果
2015/11/21 Javascript
JS日程管理插件FullCalendar中文说明文档
2017/02/06 Javascript
JS区分Object与Aarry的六种方法总结
2017/02/27 Javascript
微信小程序 数据遍历的实现
2017/04/05 Javascript
bootstrap下拉框动态赋值方法
2018/08/10 Javascript
基于axios 解决跨域cookie丢失的问题
2018/09/26 Javascript
js实现web调用摄像头 js截取视频画面
2019/04/21 Javascript
Smartour 让网页导览变得更简单(推荐)
2019/07/19 Javascript
[03:22]DSPL第一期精彩集锦:酷炫到底!
2014/11/07 DOTA
NumPy.npy与pandas DataFrame的实例讲解
2018/07/09 Python
详解PyTorch手写数字识别(MNIST数据集)
2019/08/16 Python
解决python有时候import不了当前的包问题
2019/08/28 Python
python实现扫雷游戏
2020/03/03 Python
通过python调用adb命令对App进行性能测试方式
2020/04/23 Python
树莓派4B安装Tensorflow的方法步骤
2020/07/16 Python
Pythonic版二分查找实现过程原理解析
2020/08/11 Python
VSCode中autopep8无法运行问题解决方案(提示Error: Command failed,usage)
2021/03/02 Python
C语言笔试题回忆
2015/04/02 面试题
外贸采购员求职的自我评价
2013/11/26 职场文书
幼儿园教师获奖感言
2014/03/11 职场文书
市级文明单位申报材料
2014/05/07 职场文书
关于奉献的演讲稿
2014/05/21 职场文书
党员群众路线自我剖析材料
2014/10/06 职场文书
党员检讨书范文
2014/12/27 职场文书
2015新生加入学生会自荐书
2015/03/24 职场文书
欧也妮葛朗台读书笔记
2015/06/30 职场文书
Win10本地连接不见了怎么恢复? win10系统电脑本地连接不见了解决方法
2023/01/09 数码科技