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. 从Linux启动过程到android启动过程

    Linux启动过程: 1.首先开机给系统供电,此时硬件电路会产生一个确定的复位时序,保证cpu是最后一个被复位的器件.为什么cpu要最后被复位呢?因为 如果cpu第一个被复位,则当cpu复位后开始运行 ...

  2. 《java入门第一季》之LinkList模拟桟结构案例

    需求:请用LinkedList模拟栈数据结构的集合,并测试 题目的意思是: 你自己的定义一个集合类,在这个集合类内部可以使用LinkedList模拟. 定义一个类叫MyStack代码如下: packa ...

  3. 如何实现一个malloc(转)

    本文转自博文如何实现一个malloc.就如作者本人所说,该博文大量参考了A malloc Tutorial,所以对照着阅读这两篇文章更能加深理解. 任何一个用过或学过C的人对malloc都不会陌生.大 ...

  4. some phrase for oral english

    依我看,在我看来 I suppose that, ... As far as i'm concerned, ... As i see it, ... It seems to me that ... 1 ...

  5. lvs与haproxy

    最近一直在看一些高可用性的负载均衡方案,当然那些f5之类的硬件设备是玩不起也接触不到了.只能看这些for free的开源方案. 目前使用比较多的就是标题中提到的这两者,其实lvs和haproxy都是实 ...

  6. android动画介绍之 自定义Animation动画实现qq抖一抖效果

    昨天我们介绍了Animation的基本用法.小伙伴们了解的怎么样了?如果还没有了解过Animation的小伙伴可以看看这篇博客 android动画介绍--Animation 实现loading动画效果 ...

  7. LeetCode之“链表”:Reverse Linked List && Reverse Linked List II

    1. Reverse Linked List 题目链接 题目要求: Reverse a singly linked list. Hint: A linked list can be reversed ...

  8. 未能加载文件或程序集“file:///C:\Program Files (x86)\SAP BusinessObjects\Crystal Reports for .NET Framework 4.0

    未能加载文件或程序集"file:///C:\Program Files (x86)\SAP BusinessObjects\Crystal Reports for .NET Framewor ...

  9. C语言之linux内核--BCD码转二进制与二进制转BCD码(笔试经典)

    在分析代码之前,我们先来了解一下,BCD码和二进制到底区别在哪? 学习过计算机原理的和数字电子技术这两门课的都会知道这两个到底是什么含义,也有的同学学过了,考过了,过了一段时间又忘记了,今天,我们通过 ...

  10. linux 常见命令及说明杂记

    systemctl 命令: systemctl 是管制服务的主要工具, 它整合了chkconfig 与 service功能于一体.示例:systemctl is-enabled iptables.se ...