JSON是一种轻量级的数据交换格式,同时,JSON是 JavaScript 原生格式,因此我们可以直接处理它不需要依赖任何工具包或者插件。因此,好多后台都会选择返回给前端这种非常友好的数据格式。

引子:

这篇文章是由刚刚开发过程中遇到的一个小问题引发的,先重现一下问题:

	var name=$('.wrap').find('.item-name').html();
ssJson[name]=id+'_'+num+'_'+buyUsdt;
// ssJson.name=id+'_'+num+'_'+buyUsdt;

这段代码,要给ssJson这个json对象,以一个变量name为键名添加一个元素进去,使用第三行代码实现不了原本想要达到的效果。因为‘.’这个操作符,在JavaScript中有着特殊意义,用在这里,它就表示对象中键名为“name”的元素,而不是取变量name的值作为键名。之所以会犯这个错误,完全是因为自己对json操作太陌生。因此,决定总结下json操作,不足之处,请多指教!

目前而言,我只知道json对象在JavaScript中有两种操作方式:

Json[prop]=value;
Json.prop=value;

这两个操作方式有什么区别呢?举个例子先:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
var jsonObj={
'one':'1',
'two':'2',
'three':'3'
};
var key1='one';
console.log(jsonObj.one);
console.log(jsonObj[key1]);
              console.log(jsonObj[one]);
</script>
</body>
</html>

这是输出结果:

由此可见,中括号里面放的应该是变量,而'.'后面,应该直接跟键名。如果键名固定的话,我们使用两种方式都可以操作json,如果键名是变量那么我们就只能乖乖使用中括号形式的方式来操作了。好了,这个小问题就先说到这里。下面来说说其他json操作方法,既然吃一堑,就要长一智。O(∩_∩)O哈哈~

JavaScript中的json形式

JavaScript中的json有两种表现形式,一种是单个的json对象,另一种是json数组,就是多个json对象组成的数组,只要会处理基本的json对象,json数组也能够融会贯通了。

json对象:

var jsonObj={
'one':'1',
'two':'2',
'three':'3'
};

json数组:

var jsonArr = [
{
'one': '1'
},
{
'two': '2'
},
{
'three': '3'
}
];

json的取值

每个json对象都是有键值和键名一一对应的元素组成,无论是键值还是键名都可以操作。

json对象的遍历:

//遍历json对象
for(var key in jsonObj){
console.log(key+':'+jsonObj[key]);
}

json数组的遍历:

//遍历json数组
for(var i in jsonArr){
console.log(jsonArr[i]);
for(var key in jsonObj){
console.log(key+':'+jsonObj[key]);
}
}

结果如下:

json增删改查

查的话无非就是遍历,这里就不在赘述。增加和修改又极为相似,因此这里只说说删除和修改。

删除:

//删除json对象中的元素,初步思路是,找到要删除的元素,然后按照某种规则转化成字符串,删除对应串后再转回去,代码后面再补充
function deleteItem(jsonObj,key) {
for(var key in jsonObj) {
if(jsonObj[key] == key) {
jsonObj[key] = '';
}
}
}

修改:

function updateItem(jsonObj,key,keyVal) {
// jsonObj为要操作的json对象
// key为要操作的元素的键名
// key为要操作的元素的新值
for(var key in jsonObj) {
if(jsonObj[key] == key) {
jsonObj[key] = keyVal;
}
}
}

我理解的json操作,目前大概只有这么多,欢迎大家补充!祝你们周末愉快。(*╹▽╹*)

JavaScript对json操作小记的更多相关文章

  1. Json数组操作小记 及 JSON对象和字符串之间的相互转换

    [{"productid":"1","sortindex":"2"},{"productid":&q ...

  2. Json操作(DynamicJson)

    Json的简介 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.它基于ECMAScript的一个子集. JSON采用完全独立于语言的文本格式,但是也使用了 ...

  3. 第一百二十七节,JavaScript,JSON数据类型转换,数据转换成字符串,字符串转换成数据

    第一百二十七节,JavaScript,JSON数据类型转换,数据转换成字符串,字符串转换成数据 学习要点: 1.JSON语法 2.解析和序列化 前两章我们探讨了XML的结构化数据,但开发人员还是觉得这 ...

  4. 【转】python 历险记(四)— python 中常用的 json 操作

    [转]python 历险记(四)— python 中常用的 json 操作 目录 引言 基础知识 什么是 JSON? JSON 的语法 JSON 对象有哪些特点? JSON 数组有哪些特点? 什么是编 ...

  5. javaScript系列 [05]-javaScript和JSON

    本文输出和JSON有关的以下内容❐ JSON和javaScript❐ JSON的语法介绍❐ JSON的数据类型❐ JSON和XMLHTTPRequest❐ JSON的序列化和反序列化处理 1.1 JS ...

  6. python 历险记(四)— python 中常用的 json 操作

    目录 引言 基础知识 什么是 JSON? JSON 的语法 JSON 对象有哪些特点? JSON 数组有哪些特点? 什么是编码和解码? 常用的 json 操作有哪些? json 操作需要什么库? 如何 ...

  7. Python之路day13 web 前端(JavaScript,DOM操作)

    参考链接:http://www.cnblogs.com/wupeiqi/articles/5433893.html day13 1. CSS示例 2. JavaScript 3. DOM操作 上节内容 ...

  8. javascript删除JSON元素

    首先要搞清JSON的数据格式,我这里所说的JSON都是指javascript中的. JSON数据是由对象和数组数据结构组成,我们只要学会javascript中对对象和数组的删除方法即可对JSON项进行 ...

  9. (转载)JavaScript递归查询 json 树 父子节点

    在Json中知道某个属性名,想要确定该属性在Json树具体的节点,然后进行操作还是很麻烦的 可以用以下方法找到该属性所在的节点,和父节点 <!DOCTYPE html> <html ...

随机推荐

  1. Dynamics CRM2013 定制你的系统登录后的首页面

    在2013中个性设置中又多了一个新的,更好的增强了用户体验,对于特定的用户而言只需要使用系统的一小块功能,所以很多用户进入 系统只需要显示跟自己业务相关的功能页面即可. 点右上角的齿轮进入选项,在常规 ...

  2. hadoop队列管理(指定queue跑程序)

    hadoop 升级到cdh5后,队列管理被取消,而是统一用资源池分配. hadoop2.0版本,Hadoop采用了平级队列组织方式,,管理员可将用户分到若干个扁平队列中,在每个队列中,可指定一个或几个 ...

  3. 【Android 应用开发】Android 图表绘制 achartengine 示例解析

    作者 : 韩曙亮 转载请注明出处 : http://blog.csdn.net/shulianghan/article/details/38420197 一. AChartEngine 简介 1. 项 ...

  4. 【Android 应用开发】Android 上实现非root的 Traceroute -- 非Root权限下移植可执行二进制文件 脚本文件

    作者 : 万境绝尘 转载请著名出处 : http://blog.csdn.net/shulianghan/article/details/36438365 示例代码下载 : -- CSDN : htt ...

  5. OJ题:奇偶归一猜想——求归一过程中的最大值

    题目: 题目内容: 奇偶归一猜想--对于每一个正整数,如果它是奇数,则对它乘3再加1,如果它是偶数,则对它除以2,如此循环,最终都能够得到1. 如n = 11,得序列:11, 34, 17, 52, ...

  6. RecyclerView 实现横向滚动效果

    我相信很久以前,大家在谈横向图片轮播是时候,优先会选择具有HorizontalScrollView效果和ViewPager来做,不过自从Google大会之后,系统为我们提供了另一个控件Recycler ...

  7. 基于Qt的手机程序----口袋理财

    主页面 记账模块 制定目标 备忘录

  8. (NO.00001)iOS游戏SpeedBoy Lite成形记(二十六)

    到目前为止,选手跑到终点时仿佛没什么激动人心的事情发生呢?貌似需要添加一些胜利的特效啊! 前面说好的不添加特效,只完成游戏功能的诺言呢? T T 我们主要想实现这样一个特效效果: 1.胜利的玩家突出显 ...

  9. "《算法导论》之‘线性表’":基于数组实现的单链表

    对于单链表,我们大多时候会用指针来实现(可参考基于指针实现的单链表).现在我们就来看看怎么用数组来实现单链表. 1. 定义单链表中结点的数据结构 typedef int ElementType; cl ...

  10. Android Camera开发系列(上)——Camera的基本调用与实现拍照功能以及获取拍照图片加载大图片

    Android Camera开发系列(上)--Camera的基本调用与实现拍照功能以及获取拍照图片加载大图片 最近也是在搞个破相机,兼容性那叫一个不忍直视啊,于是自己翻阅了一些基本的资料,自己实现了一 ...