对Json的各种遍历方法

慎用for in函数(有可能由于原型链的问题导致遍历问题);

如果要是用for in  一定要使用if (obj1.hasOwnProperty(key)) {}先做判断

 

解决方法 :1.eval(),也不推荐

    2.for of (es6)

 

对JSON对象的key值处理方法

Javascript代码   收藏代码
  1. var json = '{"a":"1", "b":"2"}';    
  2. var data = eval('('+ json +')');    
  3. alert(data.a);    
  4. alert(data['a']);    


       这样两种方式都可以取到json中的值。 

        但是当key的值为数字时,只能使用类似数组下表的访问方式取值。 

Javascript代码   收藏代码
  1. var json = '{"0":"a", "1":"b", "length":2}';    
  2. var data = eval('(' + json + ')');    
  3. //alert(data.0);    //报错,此方式不可用    
  4. alert(data['0']);    
  5. alert(data[0]);    //注意此写法与数组用下标访问是相同的    
  6. alert(data.length)  //貌似数组的长度   


        1.使用json时,通常都使用第一种方式,且key一般应使用合法的变量名(字母或下划线开头的包括字母、下划线和数字的字符串) 

        2.对象的两种访问方式:data.key和data[’key’]各自有自己的应用场景,一般情况使用data.key即可,也比较直观(它符合其它高级语言中访问对象中属性的方式); 

        当key为一个变量时,并且使用在循环中,用data['key']这种方式。 

Javascript代码   收藏代码
  1. for(var i=0; i < 10; i++) {    
  2.   s += data['key' + i];  //循环调用,可简化代码    
  3. }  


        3.第三种采用数字做key的方式,虽然不推荐,但也是有其应用价值的; 

        如当建立一个与数据库中id一一对应的map对象的时候, 

        可直接用id的数值做key,虽然你可以给它加上一个字母前缀来让它符合合法的变量名的标准, 

        并让它的数据能通过data.key的方式访问, 

        但如果数据量非常大的话, 

        为每个id都加一个前缀,+字符连接运算也是要消耗性能的, 

        特别是在很少需要采用data.key方式去访问属性的情况下, 

        那么可以抛弃此调用方式,直接用数字做key也未尝不可, 

        除了key名称不符合合法变量名的标准之外,似乎并没有其它损失; 

 

实例运用

使用obj[]来取值

var obj1 = { '2': '2b', '1': '1a', 4: '4d', 3: '3c' };
var arr = ['1', '2'];
for (var i = 0; i < arr.length; i++) {
    console.log(obj1[arr[i]]);
}
 
 

json常用遍历方法

-----------------------------------------------------------------------------------------------------------------------------------------------

在JSON中,有两种结构:对象和数组。

1.对象

一个对象以“{”开始,“}”结束。每个“key”后跟一“:”,“‘key/value' 对”之间运用 “,”分隔。

1
packJson = { "name" : "caibaojian.com" , "password" : "111" }

2.数组

?
1
packJson = [{ "name" : "caibaojian.com" , "password" : "111" }, { "name" : "tony" , "password" : "111" }];

数组是值的有序集合。一个数组以“[”开始,“]”结束。值之间运用 “,”分隔。

JSON对象和JSON字符串的转换

在数据传输流程中,json是以文本,即字符串的形式传递的,而JS操作的是JSON对象,所以,JSON对象和JSON字符串之间的相互转换是关键。例如:

JSON字符串:

?
1
var jsonStr = '{"name":"caibaojian", "password":"1111"}' ;

JSON对象:

?
1
var jsonObj = { "name" : "caibaojian.com" , "password" : "1111" };

1、String转换为Json对象

?
1
var jsonObj = eval( '(' + jsonStr + ')' );

2.Json对象转换为String字符串

?
1
var jsonStr = jsonObj.toJSONString();

jQuery遍历json对象

grep

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script type= 'text/javascript' src= "/jquery.js" ></script>
<script type= "text/javascript" >
$().ready(
function (){
var array = [1,2,3,4,5,6,7,8,9];
var filterarray = $.grep(array, function (value){
return value > 5; //筛选出大于5的
});
for ( var i=0;i<filterarray.length;i++){
alert(filterarray[i]);
}
for (key in filterarray){
alert(filterarray[key]);
}
}
);
</script>

each

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script type= 'text/javascript' src= "/jquery.js" ></script>
<script type= "text/javascript" >
$().ready(
function (){
var anObject = {one:1,two:2,three:3}; //对json数组each
$.each(anObject, function (name,value) {
alert(name);
alert(value);
});
var anArray = [ 'one' , 'two' , 'three' ];
$.each(anArray, function (n,value){
alert(n);
alert(value);
}
);
}
);
</script>

inArray

?
1
2
3
4
5
6
7
8
9
10
11
<script type= 'text/javascript' src= "/jquery.js" ></script>
<script type= "text/javascript" >
$().ready(
function (){
var anArray = [ 'one' , 'two' , 'three' ];
var index = $.inArray( 'two' ,anArray);
alert(index); //返回该值在数组中的键值,返回1
alert(anArray[index]); //value is two
}
);
</script>

map

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script type= 'text/javascript' src= "/jquery.js" ></script>
<script type= "text/javascript" >
$().ready(
function (){
var strings = [ '0' , '1' , '2' , '3' , '4' , 'S' , '6' ];
var values = $.map(strings, function (value){
var result = new Number(value);
return isNaN(result) ? null :result; //isNaN:is Not a Number的缩写
}
);
for (key in values) {
alert(values[key]);
}
}
);
</script>

原生js遍历json对象

遍历json对象:

 

无规律:

?
1
2
3
4
5
6
7
8
<script>
var json = [{dd: 'SB' ,AA: '东东' ,re1:123},{cccc: 'dd' ,lk: '1qw' }];
for ( var i=0,l=json.length;i<l;i++){
for ( var key in json[i]){
alert(key+ ':' +json[i][key]);
}
}
</script>

有规律:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
packJson = [
 
{ "name" : "nikita" , "password" : "1111" },
 
{ "name" : "tony" , "password" : "2222" }
 
];
 
for ( var p in packJson){ //遍历json数组时,这么写p为索引,0,1
 
   alert(packJson[p].name + " " + packJson[p].password);
 
}

也可以用这个:

?
1
2
3
4
5
for ( var i = 0; i < packJson.length; i++){
 
   alert(packJson[i].name + " " + packJson[i].password);
 
}

遍历json对象

?
1
2
3
4
5
6
7
myJson = { "name" : "caibaojian" , "password" : "1111" };
 
for ( var p in myJson){ //遍历json对象的每个key/value对,p为key
 
   alert(p + " " + myJson[p]);
 
}

有如下 json对象:

?
1
2
3
4
5
6
var obj ={ "name" : "冯娟" , "password" : "123456" , "department" : "技术部" , "sex" : "女" , "old" :30};
遍历方法:
for ( var p in obj){
str = str+obj[p]+ ',' ;
return str;
}

 

 

转载于:https://www.cnblogs.com/brainworld/p/6530041.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值