使用未知鍵動態創建嵌套 JavaScript object

Question

假設我有兩個 arrays 在 REST 調用的響應中返回。 為簡化subKeys ，我在以下示例代碼中將它們硬編碼為keys和子鍵。

從這些 arrays 我想創建一個嵌套的 object ，當輸出為 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));

雖然這給了我在我的應用程序中的正確行為，但我的印象是可能有更簡單的方法來實現相同的結果，無論是在“vanilla”JavaScript 還是 ES6 中？ 這里困擾我的是，我在for循環的每次運行中都定義了一個空的 object。

Answer 1

只需使用Array.prototype.reduce 方法：

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

您的代碼不會生成您說想要的示例 output。 它將把所有 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”，其次您沒有使用相同的索引來查找子鍵。

為避免創建空 object，您可以使用以下語法：

{ [variable]: "value" }

這將創建 object 變量值作為鍵，字符串作為值。 將變量名放在方括號中告訴它使用變量值而不是它的名稱。 說{ variable: "value" }是行不通的，因為鍵是 "variable" 而不是variable的值。