javascript - 分别用react,angular,vue取得json的key。

Question

分别用react\angular\vue如何获取json数据的key名？

var jaa= {
    "a":123,
    "b":[
        {"x1":123,"x2":321},
        {"x1":123,"x2":321}
    ]
}

(￣▽￣|||) 这个。
那啥，我就是想要让rav把比如上面这个json的所有key（a,b,x1,x2）全部输出出来，这个应该是框架的事吧(弱)

Answer 1

• 单个对象

Object.keys({a:1,b:2,c:3}) // ["a","b","c"]

• 复合对象

const target = {a:{x:1,y:2},b:2,c:3};

var getObjectKeys = target =>Object.keys(target)
        .reduce((curr,key)=>curr.concat([key]).concat((typeof target[key]==="object")?
            getObjectKeys(target[key]):[])
            ,[])
        //防止key重复
        .reduce((curr,key)=>curr.concat(curr.indexOf(key)<0?[key]:[]),[])
        
getObjectKeys(target) //["a", "x", "y", "b", "c"]

/** test **/

getObjectKeys({shandenabian:1,haidenabian:2}) 
//["shandenabian","haidenabian"]

getObjectKeys({you:{yi:2,ge:{"da":true,"shuibi":true}}})
//["you", "yi", "ge", "da", "shuibi"]

getObjectKeys({you:{yi:2,ge:{"da":true,"shuibi":true}},"shuibi":1})
//["you", "yi", "ge", "da", "shuibi"]

上述方法在处理循环嵌套对象的时候可能会有陷入死循环,但处理JSON应该是没问题的,因为JSON不会嵌套

• 优化后,复合对象/循环嵌套对象

const circular = {"b":true}
circular.a = {a:circular,"b":1}

var getObjectKeysResolveCircular = (target,ignored) => Object.keys(target)
    .reduce((curr,key)=>{
        "use strict";
        curr.matched.push(target);
        let result = curr.result.concat([key]);
        return {
            result:result
                .concat((typeof target[key]==="object" 
                    //防止key重复
                    && curr.matched.indexOf(target[key])<0)?
                getObjectKeysResolveCircular(target[key],curr.matched)
                .filter(key=>result.indexOf(key)<0):[])
            ,matched:curr.matched.concat([key])
        }}
        ,{result:[],matched:Array.isArray(ignored)?ignored:[]})
        .result
        
getObjectKeysResolveCircular(circular) //["a","b"]

• MDN javascript Object

• MDN javascript Array

跟框架有什么关系???

Answer 2

直接用for in不久可以了吗，这个跟这几个框架有什么关系

Answer 3

Object.keys