JavaScript对JSON操作笔记

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]);<br>　　　　　　　　　　　　　　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操作笔记

猜你喜欢