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


Answers:


957

两种方法可以访问对象的属性

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

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

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

34
请谨慎:javascript编译器将在这里出错,因为它们未重命名字符串,但确实重命名了对象属性
chacham15 2011年

6
有关为何可行的更多信息:JS对象是关联数组,这就是原因。延伸阅读:quirksmode.org/js/associative.html stackoverflow.com/questions/14031368/...
Sudhanshu米什拉

@dotnetguy不,他们不是。数组是从普通JS对象原型继承的对象,因此您可以像其他普通对象一样随意添加属性。“关联”行为更像是对象而不是数组。您不能通过简单的索引来迭代“关联”版本,因此它不会显示类似数组的行为。您可以将“关联”数组定义为{}或[],并在涉及随机属性访问的任何情况下都将其视为相同。
战胜了袋熊,

3
@VanquishedWombat不确定您的异议是什么?我不是说JS对象是数组吗?
Sudhanshu Mishra

1
这个答案
太过

104

这是我的解决方案:

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'})


2
您启发我创建了一个增强版本,该版本允许带有空格的方括号符号和属性名称以及对输入进行验证:it.knightnet.org.uk/kb/node-js/get-properties
朱利安·奈特

我喜欢这个解决方案。但是,我试图修改原始对象中的值,看来您的函数返回了该对象的子副本。是否可以更改它,以便修改返回的对象可以修改原始对象?
Eagle1

40

在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

4
我盯着2000行的if语句,因为以前的开发人员没有使用方括号,而是通过点表示法来静态访问对象属性。它适用于具有7个不同批准者的批准流程应用程序,步骤均相同。/ rip
乍得'18

26

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

var suffix = " name";

var person = {
    ["first" + suffix]: "Nicholas",
    ["last" + suffix]: "Zakas"
};

console.log(person["first name"]);      // "Nicholas"
console.log(person["last name"]);       // "Zakas"

这称为计算属性名称


16

您可以通过许多不同的方式来实现这一目标。

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

foo.bar;
foo['bar'];

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

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

let prop = 'bar';

foo[prop];

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

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'

11

您可以使用Lodash get这样进行

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

在很多情况下,例如深度嵌套对象查找,这是唯一的选择。
乔纳森·肯普夫

8

更新

我考虑了以下意见并表示同意。避免评估。

使用可以很容易地访问对象的根属性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文档的链接



8
使用eval诸如访问属性之类的琐碎东西显然是过大的,在任何情况下都不太可取。什么是“麻烦”?obj['nested']['test']效果很好,不需要您将代码嵌入字符串中。
凯尔(Kyll)

3
评估速度要慢三倍甚至更多,我不建议新手使用它,因为它可能会教给他们坏习惯。我用obj['nested']['value']-记住孩子们,评估是邪恶的!
jaggedsoft

1
@Luke他现在是唯一将Lodash _.get带到桌子上的人。我认为这个答案现在应该投票而不是投票。这可能是多余的,但是很高兴知道它的存在。
Emile Bergeron

1
感谢您为此介绍lodash。我是由google来到这里,寻找一种在对象深处设置值的方法,并使用了它们的_.set方法(与上面的方法相同,但需要额外设置值)。
TPHughes

5

每当需要动态访问属性时,都必须使用方括号而不是“”来访问属性。运算符
语法: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])


4

我遇到一个我以为的案例我想将对象属性的“地址”作为数据传递给另一个函数,并填充该对象(使用AJAX),从地址数组中查找,并在该另一个函数中显示。我不能在不进行字符串杂技的情况下使用点表示法,所以我认为数组可能更适合传递。我最终还是做了一些不同的事情,但似乎与这篇文章有关。

这是一个语言文件对象的示例,例如我想要从中获取数据的对象:

const locs = {
  "audioPlayer": {
    "controls": {
      "start": "start",
      "stop": "stop"
    },
    "heading": "Use controls to start and stop audio."
  }
}

我希望能够传递一个数组,例如:[“ audioPlayer”,“ controls”,“ stop”]以访问语言文本,在这种情况下为“ stop”。

我创建了这个小函数,用于查找“最不特定”(第一个)地址参数,并将返回的对象重新分配给它自己。然后准备查找下一个最特定的地址参数(如果存在)。

function getText(selectionArray, obj) {
  selectionArray.forEach(key => {
    obj = obj[key];
  });
  return obj;
}

用法:

/* returns 'stop' */
console.log(getText(["audioPlayer", "controls", "stop"], locs)); 

/* returns 'use controls to start and stop audio.' */
console.log(getText(["audioPlayer", "heading"], locs)); 

2

当您还必须将参数传递给此函数时,它会变得很有趣。

代码 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

1

ES5 //检查深度嵌套变量

这段简单的代码可以检查深度嵌套的变量/值的存在,而不必一路检查每个变量。

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

例如 -深度嵌套的对象数组:

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

干杯!


1
如果解决方案是使用eval,那么您刚刚创建了100万个其他问题。
罗德里戈·莱特

@RodrigoLeite好了,所以它不会给至少一个问题...


1
@RodrigoLeite我已阅读它,并更新了解决方案中使用Function,而不是

0

我问了一个问题,该问题在不久前已经重复了此主题,经过大量研究,发现这里缺少许多信息,我觉得我可以在此较旧的帖子中添加一些有价值的东西。

  • 首先,我想解决的是,有几种方法可以获取属性的值并将其存储在动态变量中。恕我直言,第一种最受欢迎​​,最简单的方法是:
let properyValue = element.style['enter-a-property'];

但是我很少走这条路线,因为它不适用于通过样式表分配的属性值。举个例子,我将用一些伪代码进行演示。

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

使用上面的代码示例;如果存储在'elem'变量中的div元素的width属性是在CSS样式表中设置样式的,而不是在其HTML标记中设置样式的,则毫无疑问,您将获得内部存储的undefined的返回值cssProp变量的值。出现未定义的值是因为为了获得正确的值,需要按顺序计算在CSS样式表中编写的代码以获取值。您必须使用一种方法来计算属性值,该属性的值位于样式表之内。

  • 从此以后,getComputedStyle()方法就可以了!
function getCssProp(){
  let ele = document.getElementById("test");
  let cssProp = window.getComputedStyle(ele,null).getPropertyValue("width");
}

W3Schools getComputedValue Doc这是一个很好的示例,并且可以让您使用它。但是,此链接Mozilla CSS getComputedValue doc详细讨论了getComputedValue函数,并且任何对此主题不太清楚的有抱负的开发人员都应阅读该链接。

  • 附带说明一下,getComputedValue方法只能获取,而不会设置。这显然是主要的缺点,但是尽管它不是标准的Javascript,但是有一种方法可以从CSS样式表中获取并设置值。jQuery方法...
$(selector).css(property,value)

...得到,并且确实凝固。这就是我所使用的,唯一的缺点是您必须了解JQuery,但是老实说,这是每个Javascript开发人员都应该学习JQuery的很多很好的原因之一,它使生活变得轻松,并提供了像这样的方法,不适用于标准Javascript。希望这对某人有帮助!!!




-4
const something = { bar: "Foobar!" };
const foo = 'bar';

something[\`${foo}\`];

7
你到底为什么要这样做?您foo已经是一个字符串,因此`${foo}`与完全相同foo。(此外,您的代码似乎还有一些不属于此的反斜杠。但是即使您修复了该语法错误,它也仍然毫无意义。)
Ilmari Karonen
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.