记录 JSON取值(key是中文或者数字)方式详解

取值：

如果对象key值为数字使用.key（.0）无法取到对应值；
只需稍加修改obj.[‘0’]即可取到对应值。

例如：

先准备一个json对象用于演示

const json = { 1: 2, 2: 3 }

取 key value

    for (var item in json) {
      console.log('11', item, json[item])
    }

打印：

只取 value

  Object.values(json).forEach(item => {
      console.log("只拿value", item)
    })

打印:

只取 key

    Object.keys(json).forEach(item => {
      console.log("只拿key", item)
    })

打印结果

也可以使用JS中with关键字

var json = {‘name’:‘zhangsan’, ‘年龄’:23, 404:‘你可能迷路了’};

with(json) {
     console.log(name);//输出:zhangsan
     console.log(年龄);//输出:23
     console.log(404);//输出:404,用这种方法读取key是数字的属性,有问题
 }

最常见的传统的读取key

 console.log(json.name);//输出:zhangsan
 //key是中文也是支持的
 console.log(json.年龄);//输出:23
 //key是Number类型或者String类型的数字都不能这么读取
 console.log(json.404);//报错

通用万能型:json[‘key’]

 console.log(json['name']);/输出:zhangsan
 console.log(json['年龄']);//输出:23
 console.log(json['404']);//输出:你可能迷路了

json[key]

 console.log(json[name]);/输出:undefinded
 console.log(json[年龄]);//报错
 console.log(json[404]);//输出:你可能迷路了

json处理动态key方式

var jsonArr = [
{“id”: “1”, “name”: “A1”},
{“id”: “2”, “name”: “A2”},
{“id”: “3”, “name”: “A3”},
{“id”: “4”, “name”: “A4”},
{“id”: “5”, “name”: “A5”}
]

如果数据量不大,偶尔查询一次,使用for…in遍历
如果数据量大,经常使用,建立查找表提升性能

//创建一个查找表函数
 function createLookMap(field) {
     var map = {};//创建一个空的json对象
     for (var i = 0; i < jsonArr.length; i++) {
         var value = jsonArr[i];//将数组中的元素作为json对象的值
         var key = value[field];//选取一个属性作为新的json对象的key
         map[key] = value;
     }
     return map;
 }

项目中遇到

接口返回数据格式

需要将 key 为 1，2 的两个数组分别赋值给两个变量 并循环展示在页面上

 for (var item in res) {
          if (item == 1) {
            this.feedMiddleList = res[item];
            console.log("key value 都取", item, res[item]);
          }
          if (item == 2) {
            this.feedbottomList = res[item];
          }
        }

页面展示