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

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

当前回答

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

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'

其他回答

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

var suffix = " name";

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

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

这称为计算属性名

您应该使用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)

你可以像这样使用Lodash get

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

我也遇到了同样的问题,但是lodash模块在处理嵌套属性时受到了限制。我按照递归后代解析器的思想编写了一个更通用的解决方案。该解决方案适用于以下要点:

递归下降对象解引用

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

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

这个问题

这个解决方案有个大问题!(我很惊讶其他答案还没有提到这一点)。通常你只想访问你自己放在对象上的属性,你不想获取继承的属性。

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

const agesOfUsers = {sam: 16, sally: 22} const username = prompt('输入用户名:') if (agesOfUsers[username] !== undefined) { console.log(' ${username}是${agesOfUsers[username]}年') }其他{ Console.log (' ${username}未找到') }

当提示输入用户名时,如果你提供“toString”作为用户名,它会给你以下消息:“toString is function toString(){[原生代码]}years old”。问题是agesOfUsers是一个对象,因此会自动从基object类继承某些属性,如. tostring()。您可以在这里查找所有对象继承的属性的完整列表。

解决方案

请使用Map数据结构。映射的存储内容不会受到原型问题的影响,因此它们为这个问题提供了一个干净的解决方案。

const agesOfUsers = new Map() agesOfUsers。设置(“山姆”,16) agesOfUsers。设置(“莎莉”,2) console.log(agesOfUsers.get('sam')) // 16

使用具有空原型的对象,而不是默认原型。你可以使用object. create(null)来创建这样一个对象。这种类型的对象不会受到这些原型问题的影响,因为您已经显式地创建了它,它不会继承任何东西。

const agesOfUsers = Object.create(null) agesOfUsers。山姆= 16 agesOfUsers。莎莉= 22; console.log(agesOfUsers['sam']) // 16 console.log(agesOfUsers['toString']) // undefined - toString没有被继承

You can use Object.hasOwn(yourObj, attrName) to first check if the dynamic key you wish to access is directly on the object and not inherited (learn more here). This is a relatively newer feature, so check the compatibility tables before dropping it into your code. Before Object.hasOwn(yourObj, attrName) came around, you would achieve this same effect via Object.prototype.hasOwnProperty.call(yourObj, attrName). Sometimes, you might see code using yourObj.hasOwnProperty(attrName) too, which sometimes works but it has some pitfalls that you can read about here.

//尝试输入属性名"toString" //你会看到它被正确处理。 Const user = {name: 'sam',年龄:16} const propName = prompt('输入属性名:') 如果对象。hasOwn(user, propName)) { console.log(' ${propName} = ${user[propName]} ') }其他{ console.log(' ${propName}未找到') }

如果你知道你试图使用的键永远不会是一个继承属性的名称(例如,可能它们是数字,或者它们都有相同的前缀,等等),你可以选择使用原始的解决方案。