• 对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;
    }
  • 相关阅读:
    Angular6在自定义指令中使用@HostBingDing() 和@HostListener()
    升级到Angular6后对老版本的RXJS代码做相应的调整
    关于Angular6版本升级和RXJS6新特性的讲解
    ANGULAR 使用 ng build --prod 编译报内存错误的解决办法
    在js内生成PDF文件并下载的功能实现(不调用后端),以及生成pdf时换行的格式不被渲染,word-break:break-all
    在js中获取页面元素的属性值时,弱类型导致的诡异事件踩坑记录,
    前端使用mobx时,变量已经修改了,为什么组件还是没变化,map类型变量,对象类型变量的值获取问题(主要矛盾发生在组件使用时)
    在Java中发送http的post请求,设置请求参数等等
    spring定时任务注解@Scheduled的记录
    js获取dom元素的子元素,父元素,兄弟元素小记
  • 原文地址:https://www.cnblogs.com/brainworld/p/6530041.html
Copyright © 2020-2023  润新知