我试图使用动态名称访问对象的属性。这可能吗?

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

当前回答

我问了一个类似于这个主题的问题,经过大量的研究,看到了很多应该在这里丢失的信息,我觉得我有一些有价值的东西可以添加到这篇旧文章中。

首先,我想说明有几种方法来获取属性的值并将其存储在动态变量中。第一个最受欢迎,也是最简单的方法是:

let properyValue = element.style['enter-a-property'];

然而,我很少走这条路,因为它不工作的属性值通过样式表分配。为了给您一个示例,我将使用一些伪代码进行演示。

 let elem = document.getElementById('someDiv');
 let cssProp = elem.style['width'];

Using the code example above; if the width property of the div element that was stored in the 'elem' variable was styled in a CSS style-sheet, and not styled inside of its HTML tag, you are without a doubt going to get a return value of undefined stored inside of the cssProp variable. The undefined value occurs because in-order to get the correct value, the code written inside a CSS Style-Sheet needs to be computed in-order to get the value, therefore; you must use a method that will compute the value of the property who's value lies within the style-sheet.

因此,getComputedStyle()方法!

function getCssProp(){
  let ele = document.getElementById("test");
  let cssProp = window.getComputedStyle(ele,null).getPropertyValue("width");
}

这提供了一个很好的例子,并让您可以使用它,然而,这个链接Mozilla CSS getComputedValue文档详细讨论了getComputedValue函数,任何有抱负的开发人员如果对这个主题不完全清楚,都应该阅读。

顺便说一句,getComputedValue方法只获取,不设置。这显然是一个主要的缺点,但是有一个方法可以从CSS样式表中获取,以及设置值,尽管它不是标准的Javascript。 JQuery方法…

$(selector).css(property,value)

...是get,是set。这就是我所使用的,唯一的缺点是你必须了解JQuery,但这是每个Javascript开发人员都应该学习JQuery的许多很好的理由之一,它只是让生活变得简单,并提供了一些方法,就像这个,这在标准Javascript中是不可用的。 希望这能帮助到一些人!!

其他回答

有两种方法访问对象的属性:

点符号:something.bar 括号符号:something['bar']

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

Var something = { 栏:“foo” }; Var foo = 'bar'; //两者x = something[foo]和something[foo] = x正常工作 console.log ((foo)); console.log (something.bar)

您应该使用JSON。解析,看看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)

ES5 //检查深嵌套变量

这段简单的代码可以检查嵌套深度的变量/值是否存在,而不需要检查每个变量…

var getValue = function( s, context ){
    return Function.call( context || null, 'return ' + s )();
}

Ex. -嵌套很深的对象数组:

a = [ 
    {
      b : [
          {
             a : 1,
             b : [
                 {
                    c : 1,
                    d : 2   // we want to check for this
                 }
             ]
           }
      ]
    } 
]

而不是:

if(a && a[0] && a[0].b && a[0].b[0] && a[0].b[0].b && a[0].b[0].b[0] && a[0].b[0].b[0].d && a[0].b[0].b[0].d == 2 )  // true

我们现在可以:

if( getValue('a[0].b[0].b[0].d') == 2 ) // true

干杯!

你可以通过几种不同的方式来实现这一点。

let foo = {
    bar: 'Hello World'
};

foo.bar;
foo['bar'];

括号符号特别强大,因为它可以让你基于变量访问属性:

let foo = {
    bar: 'Hello World'
};

let prop = 'bar';

foo[prop];

这可以扩展到遍历对象的每个属性。这似乎是多余的,因为更新的JavaScript结构,如for…的……,但有助于说明一个用例:

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;

对象解构

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

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'

在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