时间戳

首页 > 解决方案 > 打字稿。在嵌套对象中动态添加属性

javascript - 打字稿。在嵌套对象中动态添加属性

问题描述

是否可以在 Typescript 中为嵌套对象动态添加属性？因为我的对象是动态的。在一种情况下，我有 obj。

[
  {someObject},
  {
    prop1:1,
    columns: [
      components: [
        columns: [
          components:[
            {
              type: number,
              key: 'key1'
            },
            {
              type: textfield,
              key: 'key2'
            }
          ]
        ]
      ]
    ]
  }
]

例如，对于带有键 key2 的对象，我需要添加一些标志。在另一种情况下，我得到的对象嵌套更少。是否存在用于此操作的任何例如 lodash 函数，或者我必须通过递归迭代此对象？

标签： javascripttypescriptlodash

解决方案

您将不得不递归搜索。值得庆幸的是，这并不难实现：

const findAndUpdate = ($obj, $key, $val) => {
  Object.keys($obj).includes($key) ? 
    $obj[$key] = $val
    : Object.values($obj).forEach($nestedObj => findAndUpdate($nestedObj, $key, $val));
  
  return $obj;
}

我使用Object.<method>而不是 lodash 方法，以便可以在整个环境中轻松复制。此函数将接收一个初始对象、要更新的键和要更新的值。

用法：

const foo = {
   b: {
      c: {
        d: 5
      }
   }
}

findAndUpdate(foo, "d", 56);
console.log(foo) // -> { b: { c: { d: 56 } } } }

它检查密钥是否存在于对象的当前层中。如果不是，那么我们为当前层中的每个对象再次调用该函数 - 传入原始对象作为参考。如果它确实在当前层中找到了一个键，那么它将更新引用指向的对象。最终在堆栈被清除之后，我们返回我们原来的更新对象。显然，如果没有找到与最初传入的目标键匹配的键，则对象将保持不变。

如果您想要更多的自定义，您可以更改 $val 以采用函数 $func 代替：

const findAndUpdate = ($obj, $key, $func) => {
  Object.keys($obj).includes($key) ? 
    $obj[$key] = $func($obj[$key])
    : Object.values($obj).forEach($nestedObj => findAndUpdate($nestedObj, $key, $val));
  
  return $obj;
}

然后你现在可以做这样的事情：

findAndUpdate(foo, "d", old => old+1 );
console.log(foo) // -> { b: { c: { d: 6 } } } }

推荐阅读