数组的括号表示法属性访问器[重复]答案

【问题标题】：Bracket notation property accessor for arrays [duplicate]数组的括号表示法属性访问器[重复]
【发布时间】：2018-05-21 19:59:21
【问题描述】：

在 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；

如何以这种方式对数组属性使用括号表示法？

【问题讨论】：

看看lodash的get函数：lodash.com/docs/4.17.4#get
您可以使用eval 例如：console.log(eval("user." + prop)); 或创建一个解析字符串以提取属性名称和索引的函数。
如果您期待 JD，那么您还建议昵称 [2] 实际上是对象 id = 2 的元素。昵称 [2] 实际上指向 { id: 3, value: 'Dude '}。
@JanS get() FTW！谢谢

标签： javascript typescript

【解决方案1】：

如果您不想为单个函数包含 lodash，那么您可以考虑在对象上添加一个函数来提供此功能。

我提供了一个带有示例的 sn-p，它能够使用您在问题中指定的 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'));

【讨论】：

【解决方案2】：

根据@JanS 的建议，我能够通过以下使用 lodash 的get() 方法来完成我需要的工作：

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

【讨论】：