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

Question

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

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

Answer 1

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

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

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

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

Answer 2

这是我的解决方案:

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

Answer 3

在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

Answer 4

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

var suffix = " name";

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

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

这称为计算属性名称

Answer 5

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

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;

对象解构

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

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'

Answer 6

要动态访问属性，只需使用方括号， []如下所示：

const something = { bar: "Foobar!" };
const userInput = 'bar';
console.log(something[userInput])

问题

该解决方案有一个主要问题！（我很惊讶其他答案还没有提出这个问题）。通常，您只想访问自己放入该对象的属性，而不想获取继承的属性。

这是这个问题的一个例子。这里我们有一个看似无辜的程序，但它有一个微妙的错误 - 你能发现它吗？

const agesOfUsers = { sam: 16, sally: 22 }
const username = prompt('Enter a username:')
if (agesOfUsers[username] !== undefined) {
  console.log(`${username} is ${agesOfUsers[username]} years old`)
} else {
  console.log(`${username} is not found`)
}

当提示输入用户名时，如果您提供“toString”作为用户名，则会显示以下消息：“toString 已存在 function toString() { [native code] } 岁”。问题是它agesOfUsers是一个对象，因此会自动继承某些属性，例如.toString()从 Object 基类继承。您可以在此处查找所有对象继承的属性的完整列表。

解决方案

1. 请改用Map 数据结构。地图的存储内容不会遇到原型问题，因此它们为该问题提供了干净的解决方案。

const agesOfUsers = new Map()
agesOfUsers.set('sam', 16)
agesOfUsers.set('sally', 2)
console.log(agesOfUsers.get('sam')) // 16

  

2. 使用具有空原型的对象，而不是默认原型。您可以使用它Object.create(null)来创建这样的对象。这种类型的对象不会遇到这些原型问题，因为您已经以不继承任何内容的方式显式创建了它。

const agesOfUsers = Object.create(null)
agesOfUsers.sam = 16
agesOfUsers.sally = 22;
console.log(agesOfUsers['sam']) // 16
console.log(agesOfUsers['toString']) // undefined - toString was not inherited

  

3. 您可以Object.hasOwn(yourObj, attrName)首先检查您希望访问的动态密钥是否直接位于对象上而不是继承的（在此处了解更多信息）。这是一个相对较新的功能，因此在将其放入代码之前请检查兼容性表。在Object.hasOwn(yourObj, attrName)出现之前，您可以通过 实现相同的效果Object.prototype.hasOwnProperty.call(yourObj, attrName)。有时，您可能也会看到使用的代码yourObj.hasOwnProperty(attrName)，有时可以工作，但它有一些陷阱，您可以在此处阅读。

// Try entering the property name "toString",
// you'll see it gets handled correctly.
const user = { name: 'sam', age: 16 }
const propName = prompt('Enter a property name:')
if (Object.hasOwn(user, propName)) {
  console.log(`${propName} = ${user[propName]}`)
} else {
  console.log(`${propName} is not found`)
}

4. 如果您知道您尝试使用的密钥永远不会是继承属性的名称（例如，它们可能是数字，或者它们都具有相同的前缀等），您可以选择使用原始解决方案。

Answer 7

您可以使用Lodash get这样进行

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

Answer 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文档的链接

Answer 9

我遇到了一个案例，我想我想将对象属性的“地址”作为数据传递给另一个函数并填充对象（使用 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)); 

Answer 10

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