【问题标题】:Access nested object dynamically by using array of string as a path使用字符串数组作为路径动态访问嵌套对象
【发布时间】:2017-11-29 10:44:16
【问题描述】:

我正在尝试实现一个通用方法来动态访问嵌套对象属性。

属性的路径必须在字符串数组中。

所以要获得标签,字符串数组将是['type', 'label']

我有点卡在这个问题上,有什么帮助吗?

**编辑片段:**

演示

var parent = {
  type: {
    id: "2",
    label: "3",
  }
};

function getNestedLabel(ids){
if (ids.length === 1) {
  return parent[ids[0]];
}
var result = parent;
for (let i = 0; i < ids.length; i++) {
  result = result[ids[i]];
}
return result;
  }

console.log(getNestedLabel(["type", "label"]));

【问题讨论】:

  • getNestedObject的输入参数是什么,如何访问parent对象进行遍历?
  • 为什么要重新发明轮子? npmjs.com/package/nested-property
  • Hi id 是一个字符串数组对吗?
  • 你可能想看看这个lodash.com/docs/#get
  • @blueren 我不能使用这种模块,因为我使用的是字符串数组而不是带点的字符串。我们的想法是构建这个:例如 parent['type']['id']

标签: javascript angular typescript


【解决方案1】:

一个简单的方法是迭代keyArray,并使用来自keyArraykeys继续遍历object

function getNestedObject( keyArr ){
    var tmp = parent; //assuming function has access to parent object here
    keyArr.forEach( function(key){
       tmp = tmp[key];
    });
    return tmp;
}

演示

var parent = {
  type: {
    id: "2",
    label: "3",
  }
};

function getNestedObject(keyArr) {
  var tmp = parent; //assuming function has access to parent object here
  keyArr.forEach(function(key) {
    tmp = tmp[key];
  });
  return tmp;
}

console.log( getNestedObject( [ "type", "label" ] ) );

【讨论】:

  • 该方法在父对象中所以没问题。但它必须返回嵌套属性的字符串值,而不是父级本身。调用者给出路径并且应该得到字符串值作为回报。我不知道我的解释是否清楚
  • @An-droid 查看我分享的演示。
  • 我测试过,您的解决方案不起作用 tmp 在返回时未定义
  • @An-droid 你能分享一下你的尝试吗?我分享的演示不适合你吗?
  • “运行代码片段”确实不起作用。我将您的方法整合为仅使用“this”而不是“parent”。当我在 ngfor 中使用它时,它对性能非常不利。我已经用我目前的尝试更新了我的问题
【解决方案2】:

这个呢:

getNestedObject(parent: any, id:string[]): string{

    let child = {...parent};
    let result: string;
    for(let i=0; i<id.length; i++){
        if( i !== id.length-1 ){
            child = child[id[i]]
        }
        else{
            result = child[id[i]]
        }
    }
    return result;
}

【讨论】:

    猜你喜欢
    • 2011-09-23
    • 2017-05-06
    • 1970-01-01
    相关资源
    最近更新 更多