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. ValueError: setting an array element with a sequence.

    http://blog.csdn.net/pipisorry/article/details/48031035 From the code you showed us, the only thing ...

  2. Ext JS 5初探(一)

    在开始前,先安装好Sencha Cmd 5.然后输入以下命令创建一个测试用的应用程序: sencha -sdk c:\ext5 generate app TestExt5 C:\TestExt5 想不 ...

  3. Swift基础之UITextField

    //设置全局变量,将下面的替换即可     //var myTextField = UITextField();     //系统生成的viewDidLoad()方法     override fun ...

  4. 使用Gradle发布Android开源项目到JCenter

    喜欢做些开源项目的朋友,相信有不少人都希望能把自己的项目发布到公共的中央仓库,如maven中央仓库,以供别人方便地集成使用.而使用了Android Studio的同学,应该也对gradle和jcent ...

  5. Java-transient总结

    纸上得来终觉浅,绝知此事要躬行  --陆游    问渠那得清如许,为有源头活水来  --朱熹 transient有"临时的","短暂的"含义,我们了解过Seri ...

  6. 【翻译】在Ext JS应用程序中使用自定义图标

    原文:Using Custom Icons in Your Ext JS App 作者:Lee BoonstraLee is a technical trainer at Sencha. She's ...

  7. OpenCV中OpenMP的使用

    vs2010中调用openMP,并添加头文件#include<omp.h> 代码来源: 作者:gnuhpc 出处:http://www.cnblogs.com/gnuhpc/ #inclu ...

  8. DataLoad命令

    Dataload常用命令 Dataload命令符 说明 Tab  或\{tab} 键盘Tab键,下一个单元 *UP  或\{UP} 键盘上 *DN  或\{DOWN} 键盘下 *LT  或\{LEFT ...

  9. 菜鸟玩云计算之十五:在Ubuntu上创建和管理Redhat虚拟机

    菜鸟玩云计算之十五:在Ubuntu上创建和管理Redhat虚拟机 chedou@hgdb.net 虚拟机给工作带来巨大的便利,不仅仅体现在资源的按需使用,而且配置的迁移特别方便.本文将使用Ubuntu ...

  10. Xcode自定义字体不能应用的原因

    想给UILabel换一个自定义的字体,从字体册选择兰亭黑: 然后选择 在Finder中显示,找到字体文件为Lantinghei.ttc: 将其拷贝到项目中,在info.plist里添加字体支持key, ...