更改沿路径的嵌套对象

huangapple
go评论92阅读模式
英文:

js / change nested object along path

问题

以下是代码部分的翻译，不包含问题和其他内容：

  1. // 通过将路径存储在变量中来更改对象的内容
  2. let path = ['props', 'children', 'props'];
  3. children[path].children = 'test';

希望这对你有所帮助。

英文:

I have an object with a large nesting.
I can change its content like this:

  1. children.props.children.props.children = 'test'

I can do this:

  1. children['props']['children']['props'].children = 'test'

I want to do this by having the path in a variable

  1. let path = ['props','children','props']

I tried like this:

  1. let path = ['props','children','props']
  2. children[path].children = 'test'
  4. let path = [['props'],['children'],['props']]
  5. children[path].children = 'test'

But it doesn't work. Please tell me how can I use the "path" variable

答案1

得分: 2

你可以尝试使用迭代方法“展开”对象：

  1. const children = {
  2.   props: {
  3.     children: {
  4.       props: {
  5.         children: 'change me'
  6.       }
  7.     }
  8.   }
  9. };
  11. const expandObject = (component, path) => {
  12.   let ref = component;
  13.   for (let i = 0; i < path.length; i++) {
  14.     ref = ref[path[i]];
  15.   }
  16.   return ref;
  17. };
  19. let path = ['props', 'children', 'props'];
  21. expandObject(children, path).children = 'test';
  23. console.log(children);

这是一个使用深度的递归版本：

  1. const children = {
  2.   props: {
  3.     children: {
  4.       props: {
  5.         children: {
  6.           props: {
  7.             children: 'change me'
  8.           }
  9.         }
  10.       }
  11.     }
  12.   }
  13. };
  15. const deepAccess = (component, depth) =>
  16.   (depth === 0)
  17.     ? component
  18.     : deepAccess(component.props.children, depth - 1);
  20. const ref = deepAccess(children, 2);
  22. ref.props.children = 'test';
  24. console.log(children);

正如其他人所示，你可以减少路径：

  1. const children = {
  2.   props: {
  3.     children: {
  4.       props: {
  5.         children: 'change me'
  6.       }
  7.     }
  8.   }
  9. };
  11. const expandObject = (component, path) =>
  12.   path.reduce((acc, path) => acc[path], component);
  14. let path = ['props', 'children', 'props'];
  16. expandObject(children, path).children = 'test';
  18. console.log(children);
英文:

You can try to "expand" the object by using an iterative approach:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. const children = {
  2.   props: {
  3.     children: {
  4.       props: {
  5.         children: &#39;change me&#39;
  6.       }
  7.     }
  8.   }
  9. };
  11. const expandObject = (component, path) =&gt; {
  12.   let ref = component;
  13.   for (let i = 0; i &lt; path.length; i++) {
  14.     ref = ref[path[i]];
  15.   }
  16.   return ref;
  17. };
  19. let path = [&#39;props&#39;, &#39;children&#39;, &#39;props&#39;];
  21. expandObject(children, path).children = &#39;test&#39;;
  23. console.log(children);

<!-- language: lang-css -->

  1. .as-console-wrapper { top: 0; max-height: 100% !important; }

<!-- end snippet -->

Here is a recursive version that uses a depth:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. const children = {
  2.   props: {
  3.     children: {
  4.       props: {
  5.         children: {
  6.           props: {
  7.             children: &#39;change me&#39;
  8.           }
  9.         }
  10.       }
  11.     }
  12.   }
  13. };
  15. const deepAccess = (component, depth) =&gt;
  16.   (depth === 0)
  17.     ? component
  18.     : deepAccess(component.props.children, depth - 1);
  20. const ref = deepAccess(children, 2);
  22. ref.props.children = &#39;test&#39;;
  24. console.log(children);

<!-- language: lang-css -->

  1. .as-console-wrapper { top: 0; max-height: 100% !important; }

<!-- end snippet -->

As others have shown, you can reduce the path:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. const children = {
  2.   props: {
  3.     children: {
  4.       props: {
  5.         children: &#39;change me&#39;
  6.       }
  7.     }
  8.   }
  9. };
  11. const expandObject = (component, path) =&gt;
  12.   path.reduce((acc, path) =&gt; acc[path], component);
  14. let path = [&#39;props&#39;, &#39;children&#39;, &#39;props&#39;];
  16. expandObject(children, path).children = &#39;test&#39;;
  18. console.log(children);

<!-- language: lang-css -->

  1. .as-console-wrapper { top: 0; max-height: 100% !important; }

<!-- end snippet -->

答案2

得分: 1

这应该适用于你。

  1. 让路径 = ['props'，'children'，'props'];
  3. const obj = { props：{ children：{ props：{ children：null } } } };
  5. 让上下文= obj;
  7. 对于路径中的每个名称，请上下文=上下文[名称];
  8. }
  10. 上下文.children=“测试”;
  12. 控制台.log（obj）
英文:

This should work for you.

  1. let path = [&#39;props&#39;,&#39;children&#39;,&#39;props&#39;];
  3. const obj = { props: { children: { props: { children: null } } } };
  5. let context = obj;
  7. for (const name of path) {
  8.   context = context[name];
  9. }
  11. context.children = &quot;test&quot;;
  13. console.log(obj)

答案3

得分: 0

这种方法会在路径上创建对象，如果它们尚不存在：

  1. const obj = { a: { b: 'existing' } };
  3. ['a', 'c', 'd'].reduce((x, y) => x[y] ??= {}, obj).children = 'test';
  5. console.log(obj)
英文:

This approach will create objects along the path if they don't already exist:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. const obj = {a: { b: &#39;existing&#39; }};
  3. [&#39;a&#39;,&#39;c&#39;,&#39;d&#39;].reduce((x,y)=&gt;x[y]??={},obj).children = &#39;test&#39;
  5. console.log(obj)

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年3月10日 01:51:37
  • 转载请务必保留本文链接：https://go.coder-hub.com/75688327.html
  • javascript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定