数组的托架符号属性登录器

Question

typescript中（以及此事项的JavaScript），您可以使用点表示法或括号符号访问对象的属性：

object.property
object['property']

使用后者的具体示例：

const user = {
    firstName: 'John',
    lastName: 'Doe'
}
const prop = 'firstName';
console.log(user[prop]);  //"John"

我的问题是/如何将括号符号用于数组属性，其中括号中的值是到达数组的路径。这是一个示例：

const user = {
    firstName: 'John',
    lastName: 'Doe',
    nicknames: [
        { id: 1, value: 'Johnny'}, 
        { id: 2, value: 'JD'}, 
        { id: 3, value: 'Dude'}
    ]
}
const prop = 'nicknames[2].value';
console.log(user[prop]);

我使用console.log()的目标是打印JD，但是此示例会失败，因为当然没有user的属性称为nicknames[2].value;

如何使用数组属性以这种方式使用括号符号？

Answer 1

如果您不喜欢单个功能的lodash，则可以考虑将功能添加到提供此功能的对象上。

我提供了一个带有一个示例的摘要，该示例能够使用您在问题中指定的prop字符串类型

const user = {
    firstName: 'John',
    lastName: 'Doe',
    nicknames: [
        { id: 1, value: 'Johnny'}, 
        { id: 2, value: 'JD'}, 
        { id: 3, value: 'Dude'}
    ],
    byProp (path) {
      return path.split(/].|][|[|./) // split on [] or .
                 .map( el => el.replace(/]$/,'')) // remove any trailing ']'
                 // loop over split-string to get element
                 // return undefined if the property does not exist
                 .reduce( (obj, el) => obj? obj[el]:undefined, this);
    }
}
console.log(user.byProp('nicknames[2].value'));
console.log(user.byProp('nicknames[1][value]'));
console.log(user.byProp('firstName'));
console.log(user.byProp('firstName.undefined'));

Answer 2

基于 @jans的建议，我能够完成以下使用lodash的get()方法所需的工作：

const prop = 'nicknames[2].value';
console.log(_.get(user, prop));