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中的数组Array定义与sort方法使用示例
Aug 29 Javascript
JS画5角星方法介绍
Sep 17 Javascript
jQuery学习笔记之toArray()
Jun 09 Javascript
jquery操作对象数组元素方法详解
Nov 26 Javascript
jQuery实现的简单提示信息插件
Dec 08 Javascript
纯JavaScript代码实现文本比较工具
Feb 17 Javascript
vue mixins组件复用的几种方式(小结)
Sep 06 Javascript
轻松理解vue的双向数据绑定问题
Oct 30 Javascript
vue2.0 子组件改变props值,并向父组件传值的方法
Mar 01 Javascript
swiper在angularjs中使用循环轮播失效的解决方法
Sep 27 Javascript
mpvue性能优化实战技巧(小结)
Apr 17 Javascript
JSON stringify方法原理及实例解析
Oct 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
用PHP的ob_start() 控制您的浏览器cache
2009/08/03 PHP
header中Content-Disposition的作用与使用方法
2012/06/13 PHP
PHP错误Allowed memory size of 67108864 bytes exhausted的3种解决办法
2014/07/28 PHP
thinkphp区间查询、统计查询与SQL直接查询实例分析
2014/11/24 PHP
php的crc32函数使用时需要注意的问题(不然就是坑)
2015/04/21 PHP
在Thinkphp中使用ajax实现无刷新分页的方法
2016/10/25 PHP
JS中style属性
2006/10/11 Javascript
尽可能写&quot;友好&quot;的&quot;Javascript&quot;代码
2007/01/09 Javascript
分享20多个很棒的jQuery 文件上传插件或教程
2011/09/04 Javascript
jquery操作下拉列表、文本框、复选框、单选框集合(收藏)
2014/01/08 Javascript
JavaScript中document.forms[0]与getElementByName区别
2015/01/21 Javascript
nodejs实现HTTPS发起POST请求
2015/04/23 NodeJs
AngularJS入门教程之AngularJS模型
2016/04/18 Javascript
jquery中用jsonp实现搜索框功能
2016/10/18 Javascript
Vue.js tab实现选项卡切换
2017/05/16 Javascript
基于 Vue.js 2.0 酷炫自适应背景视频登录页面实现方式
2018/01/17 Javascript
JS实现的文字间歇循环滚动效果完整示例
2018/02/13 Javascript
Python实现基于权重的随机数2种方法
2015/04/28 Python
安装python3的时候就是输入python3死活没有反应的解决方法
2018/01/24 Python
基于循环神经网络(RNN)的古诗生成器
2018/03/26 Python
Python双向循环链表实现方法分析
2018/07/30 Python
符合语言习惯的 Python 优雅编程技巧【推荐】
2018/09/25 Python
解决python "No module named pip" 的问题
2018/10/13 Python
Python打包模块wheel的使用方法与将python包发布到PyPI的方法详解
2020/02/12 Python
python代码如何注释
2020/06/01 Python
英国体育器材进口商店:UK Sport Imports
2017/03/14 全球购物
迪拜航空官方网站:flydubai
2017/04/20 全球购物
美国环保妈妈、儿童和婴儿用品购物网站:The Tot
2019/11/24 全球购物
编程实现去掉XML的重复结点
2014/05/28 面试题
大学军训自我鉴定
2013/12/15 职场文书
高三家长寄语
2014/04/03 职场文书
计算机科学技术自荐信
2014/06/12 职场文书
党的群众路线教育实践活动实施方案
2014/10/31 职场文书
挂职锻炼工作总结2015
2015/05/28 职场文书
MySQL批量更新不同表中的数据
2022/05/11 MySQL
python数字图像处理:图像简单滤波
2022/06/28 Python