zoukankan      html  css  js  c++  java
  • 关于遍历javascript 中的json串浏览器输出的结果不统一的情况

    我们在做项目的时候经常会用到javascript的json。

    首先说一下javascript的json串是什么,json串属于javascript的一个对象,有键和值对应的对象。

    一般的格式是:

    1 a = {
    2     a1: 1,
    3     a2: 'abc',
    4     a3: 'abc',
    5     a4: [1, 2, 3],
    6     a5: function () { console.log(12) }
    7 };

    我们读取这个json 的方法是通过for in 循环来遍历;

    使用json串的好处是可以事先把数据库中的数据一次性的读取出来存成json的形式,然后通过javascript来读取里边的属于,这样可以大大减少对服务器的请求次数,增加了前台页面的加载效率 。

    我们在遍历json的时候会遇到许多问题,我今天遇到的问题是在我们把json串的键值写成数字的情况下,在主流浏览器遍历的时候不会按照我们输出的json的结构先后输出,而是按照数字的从小到大顺序输出。但是ie8以下浏览器会按照我们输出的顺序输出。

    例如:

     
    1 a = { 
    2     '1' : 1,
    3     '5' : function(){console.log(12)},
    4     '2' : 'abc',
    5     '4' : [1,2,3],
    6     '3' : {'5' : 'abc', '6' : 'bcd'},
    7 };
    8  

    通过for in循环 

    for(var i in a){
    console.log(a[i]);
    }

     chrome,firefox等浏览器输出:1,abc,<span "="">Object { 5="abc", 6="bcd"<span "="">},<a "="">[1, 2, 3<a "="">],function();

     ie8以及以下浏览器:1,function(),abc<span "="">,<a "="">[123<a "="">],<span "="">Object { 5="abc"6="bcd"<span "="">};

    解决这样的问题有两种:

    第一:就是把数字的键值改成字符串形式的包括字母或者下划线;

    第二 :就是解决ie的兼容性,通过先遍历json然后把键值存入一个数组中,然后再通过数组排序来循环数组取json中的数据。

    具体代码:

     1 var arr = [], sortNumber = function (a, b) {
     2 
     3     return a - b;
     4 };
     5 for (var i in a) {
     6     arr[arr.length] = a[i];
     7 }
     8 arr.sort(sortNumber);
     9 
    10 for (var x = 0; x < arr.length; x++) {
    11 
    12     console.log(a[arr[x]]);
    13 
    14 }

    这样浏览器读取的数据就会保持一致了,有个缺点就是这个也不会按照我们输出的json格式输出,只是解决了浏览器的兼容问题。 

  • 相关阅读:
    Leetcode 538. Convert BST to Greater Tree
    Leetcode 530. Minimum Absolute Difference in BST
    Leetcode 501. Find Mode in Binary Search Tree
    Leetcode 437. Path Sum III
    Leetcode 404. Sum of Left Leaves
    Leetcode 257. Binary Tree Paths
    Leetcode 235. Lowest Common Ancestor of a Binary Search Tree
    Leetcode 226. Invert Binary Tree
    Leetcode 112. Path Sum
    Leetcode 111. Minimum Depth of Binary Tree
  • 原文地址:https://www.cnblogs.com/qwguo/p/6024912.html
Copyright © 2011-2022 走看看