使用变量动态访问对象属性

loading...


532

我正在尝试使用动态名称访问对象的属性 . 这可能吗?

const something = { bar: "Foobar!" };
const foo = 'bar';
something.foo; // The idea is to access something.bar, getting "Foobar!"

loading...

11回答

  • 16

    您可以通过几种不同的方式实现这一目标 .

    let foo = {
        bar: 'Hello World'
    };
    
    foo.bar;
    foo['bar'];
    

    括号表示法特别强大,因为它允许您根据变量访问属性:

    let foo = {
        bar: 'Hello World'
    };
    
    let prop = 'bar';
    
    foo[prop];
    

    这可以扩展为循环对象的每个属性 . 由于更新的JavaScript结构,例如......的......,这似乎是多余的,但有助于说明一个用例:

    let foo = {
        bar: 'Hello World',
        baz: 'How are you doing?',
        last: 'Quite alright'
    };
    
    for (let prop in foo.getOwnPropertyNames()) {
        console.log(foo[prop]);
    }
    

    点和括号表示法也可以像嵌套对象一样工作:

    let foo = {
        bar: {
            baz: 'Hello World'
        }
    };
    
    foo.bar.baz;
    foo['bar']['baz'];
    foo.bar['baz'];
    foo['bar'].baz;
    

    Object destructuring

    我们还可以将对象解构视为访问对象中属性的一种方法,但如下所示:

    let foo = {
        bar: 'Hello World',
        baz: 'How are you doing?',
        last: 'Quite alright'
    };
    
    let prop = 'last';
    let { bar, baz, [prop]: customName } = foo;
    
    // bar = 'Hello World'
    // baz = 'How are you doing?'
    // customName = 'Quite alright'
    

  • -3
    const something = { bar: "Foobar!" };
    const foo = 'bar';
    
    something[\`${foo}\`];
    

  • 26

    这是我的解决方案:

    function resolve(path, obj) {
        return path.split('.').reduce(function(prev, curr) {
            return prev ? prev[curr] : null
        }, obj || self)
    }
    

    用法示例:

    resolve("document.body.style.width")
    // or
    resolve("style.width", document.body)
    // or even use array indexes
    // (someObject has been defined in the question)
    resolve("part.0.size", someObject) 
    // returns null when intermediate properties are not defined:
    resolve('properties.that.do.not.exist', {hello:'world'})
    

  • 4

    在javascript中我们可以访问:

    • 点符号 - foo.bar

    • 方括号 - foo[someVar]foo["string"]

    但只有第二种情况允许动态访问属性:

    var foo = { pName1 : 1, pName2 : [1, {foo : bar }, 3] , ...}
    
    var name = "pName"
    var num  = 1;
    
    foo[name + num]; // 1
    
    // -- 
    
    var a = 2;
    var b = 1;
    var c = "foo";
    
    foo[name + a][b][c]; // bar
    

  • 1

    更新

    我已在下面考虑并商定了意见 . Eval应该避免 .

    使用 obj[variable] 可以轻松地访问对象中的根属性,但是获取嵌套会使事情变得复杂 . 不写我已经编写的代码我建议使用 lodash.get .

    // Accessing root property
    var rootProp = 'rootPropert';
    _.get(object, rootProp, defaultValue);
    
    // Accessing nested property
    var listOfNestedProperties = [var1, var2];
    _.get(object, listOfNestedProperties);
    

    Lodash get可以用不同的方式,这里是文档的链接lodash.get


  • -4

    每当您需要动态访问属性时,您必须使用方括号来访问属性而不是"."运算符
    Syntax: object[propery}

    const something = { bar: "Foobar!" };
    const foo = 'bar';
    // something.foo; -- not correct way at it is expecting foo as proprty in  something={ foo: "value"};
    // correct way is  something[foo]
    alert( something[foo])
    

  • 46

    你应该使用 JSON.parse ,看看https://www.w3schools.com/js/js_json_parse.asp

    const obj = JSON.parse('{ "name":"John", "age":30, "city":"New York"}')
    console.log(obj.name)
    console.log(obj.age)
    

  • 2

    你可以使用Lodash get这样做

    _.get(object, 'a[0].b.c');
    

  • 2

    two ways to access properties的对象:

    • 点符号: something.bar

    • 括号表示法: something['bar']

    括号之间的值可以是任何表达式 . 因此,如果属性名称存储在变量中,则必须使用括号表示法:

    var foo = 'bar';
    something[foo];
    // both x = something[foo] and something[foo] = x work as expected
    

  • 12

    下面是一个ES6示例,说明如何使用通过连接两个字符串动态生成的属性名来访问对象的属性 .

    var suffix = " name";
    
    var person = {
        ["first" + suffix]: "Nicholas",
        ["last" + suffix]: "Zakas"
    };
    
    console.log(person["first name"]);      // "Nicholas"
    console.log(person["last name"]);       // "Zakas"
    

    这称为computed property names


  • 705

    当你必须将参数传递给这个函数时,它会变得很有趣 .

    Code jsfiddle

    var obj = {method:function(p1,p2,p3){console.log("method:",arguments)}}
    
    var str = "method('p1', 'p2', 'p3');"
    
    var match = str.match(/^\s*(\S+)\((.*)\);\s*$/);
    
    var func = match[1]
    var parameters = match[2].split(',');
    for(var i = 0; i < parameters.length; ++i) {
      // clean up param begninning
        parameters[i] = parameters[i].replace(/^\s*['"]?/,'');
      // clean up param end
      parameters[i] = parameters[i].replace(/['"]?\s*$/,'');
    }
    
    obj[func](parameters); // sends parameters as array
    obj[func].apply(this, parameters); // sends parameters as individual values
    
评论

暂时没有评论!