JavaScript對json操做小記

時間 2019-11-12

原文原文鏈接

JSON是一種輕量級的數據交換格式，同時，JSON是 JavaScript 原生格式，所以咱們能夠直接處理它不須要依賴任何工具包或者插件。所以，好多後臺都會選擇返回給前端這種很是友好的數據格式。javascript

引子：

這篇文章是由剛剛開發過程當中遇到的一個小問題引起的，先重現一下問題：html

	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中有兩種操做方式：java

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

這兩個操做方式有什麼區別呢？舉個例子先：json

<!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對象：3d

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

json數組：htm

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操做，目前大概只有這麼多，歡迎你們補充！祝大家週末愉快。(*╹▽╹*)

相關標籤/搜索

html+css+javascript+json

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。