如何使用动态路径字符串或数组在 JavaScript 对象中设置值，并支持将值推入数组并指定索引？

Question

我需要在 JavaScript 中创建一个函数，允许我使用动态路径字符串或数组在嵌套对象中设置值。路径字符串可以包括索引来指定应设置值的确切位置。此外，路径字符串可以包含“[]”符号以将值推入数组。

例如，给定一个像这样的对象：

const obj = { foo: { bar: [] } };

我想在路径

"foo.bar[][2]"

或

"foo.bar[2][]".

处设置一个值

该函数应该能够处理路径的字符串和数组表示。

这是我正在寻找的示例：

setValue(obj, 'foo.bar[][2]', 'value');
console.log(obj); // Output: { foo: { bar: [[ <2 empty items>, 'value' ] ] } }

setValue(obj, 'foo.bar[2][]', 'value');
console.log(obj); // Output: { foo: { bar: [ , , [ 'value' ] ] } }

如何在 JavaScript 中高效地实现这样的功能？

Answer 1

您必须创建自己的 mixin 来分割路径、检索现有值并推送新值。

我不确定你为什么想要

foo.bar[][2]

？这甚至显得无效。您应该在问题中显示出期望的结果。

const state = { foo: { bar: [[], [], []] } }

_.mixin({
  myPush: function(obj, path, val) {
    const [subPath] = path.split(/\[\]/);
    _.get(obj, subPath, []).push(val);
  }
});

_.myPush(state, 'foo.bar[][2]', 1); // Push 1 on end of `bar`...
_.myPush(state, 'foo.bar[2][]', 2); // Push 2 on end of `bar[2]`

console.log(state);

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>