Question

假设我有两个数组，它们是从REST调用的响应中返回的。为简化起见，在以下示例代码中，我将它们定义为硬编码为keys和subKeys。

从这些数组中，我想创建一个嵌套对象，当以JSON字符串输出时，它看起来像这样：

目标JSON

{
    "key1": {
        "subKey1": "someValue"
    },
    "key2": {
        "subKey2": "someValue"
    },
    "key3": {
        "subKey3": "someValue"
    }
}

代码示例

var keys = ["key1", "key2", "key3"];  // These come from a REST response
var subKeys = ["subKey1", "subKey2", "subKey3"]; // These come from a REST response

var targetObj = {}
for (const key in keys) {      
  targetObj[key] = {}
  for (const subKey in subKeys) {
    targetObj[key][subKey] = "someValue";
  }
}
console.log(JSON.stringify(targetObj, null, 2));

尽管这给了我应用程序正确的行为，但我印象中可能存在更简单的方法来实现相同的结果，无论是“原始” JavaScript还是ES6？这里让我感到困扰的是，我在for循环的每次运行中都定义了一个空对象。

Answer 1

只需使用Array.prototype.reduce method：

const keys = ["key1", "key2", "key3"];
const subKeys = ["subKey1", "subKey2", "subKey3"];

const result = keys.reduce((acc, key, index) =>
   ({ ...acc, [key]: { [subKeys[index]]: 'someValue' } })
, {});

请注意，这仅在keys和subKeys数组同步且它们的索引彼此一致的情况下有效。

Answer 2

您的代码不会产生您想要的示例输出。它将所有3个子键放在每个键下，而不是每个键一个。同样，您最终得到的是数字键，而不是键名。

var keys = ["key1", "key2", "key3"];  // These come from a REST response
var subKeys = ["subKey1", "subKey2", "subKey3"]; // These come from a REST response

var targetObj = {}
for (let i=0; i<keys.length; i++) {    
  const key = keys[i];
  targetObj[key] = { [subKeys[i]]: "someValue" };
}
console.log(JSON.stringify(targetObj, null, 2));

首先，您在for循环中使用“ in”而不是“ of”，其次，您没有使用相同的索引来查找子项。

为避免创建空对象，可以使用以下语法：

{ [variable]: "value" }

这将创建一个以变量值作为键，并以字符串作为值的对象。将变量名称放在方括号中将指示它使用变量值而不是其名称。说{ variable: "value" }是行不通的，因为键是“变量”而不是variable的值。

动态创建带有未知键的嵌套JavaScript对象

2 个答案: