JavaScript：json对象简单操作

灰太狼 2021-11-16 13:58 252阅读 0赞

## js之json对象简单操作 ##

#### 1.声明json对象 ####

var idCard = { "no":"920766616","nation":"汉"};
    var person = { "name":"张三","age":23,"isStu":true,"id":idCard};

#### 2.获取对象属性 ####

//获取对象里的属性
    console.log("获取age属性的值：" + person.age);
    console.log("获取age属性的值：" + person["age"]);

打开浏览器，按f12查看控制台console  
![在这里插入图片描述][20190728153304755.png]

#### 3.循环获取json对象 ####

//循环json对象
    	for(var i in person){ 
    		console.log(i + ":" + person[i]);
    		}//结果是i为键值
    
    //将json放入数组中
    var person2 = [{ "no":"920766616","nation":"汉"},{ "name":"张三","age":23,"isStu":true}];
    		//遍历数组（这里相当于二维数组） 
    		 for(var i in person2){ 
    			 //这里i为下标索引值
    			for(var j in person2[i]){ 
    				console.log(person2[i][j]);
    			}
    		 }

控制台显示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwODk2OTk3_size_16_color_FFFFFF_t_70]

#### 4.字符串转换为json格式 ####

//把字符串转换为json对象
    	var str = '{"no":"920766616","nation":"汉"}';
    	var newStr = JSON.parse(str);
    	console.log(newStr);

控制台显示：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwODk2OTk3_size_16_color_FFFFFF_t_70 1]

#### 5.json对象定义属性和方法 ####

var jsonStr = { 
    			"name" : "fjh",
    			add : function(a,b){ 
    				return a * b;
    			}
    		};
    		console.log(jsonStr.add(1,2));

控制台显示：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwODk2OTk3_size_16_color_FFFFFF_t_70 2]

[20190728153304755.png]: /images/20211116/fbbf2178d3094f7fbf4c624cf9c2d4c2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwODk2OTk3_size_16_color_FFFFFF_t_70]: /images/20211116/3e49e48c2e23439391a0ee741c6f1014.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwODk2OTk3_size_16_color_FFFFFF_t_70 1]: /images/20211116/749b0cd7b69b43a68393077993e9ee71.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwODk2OTk3_size_16_color_FFFFFF_t_70 2]: /images/20211116/909b41d3fa2946ab9cdcc1e3c42451ff.png