將陣列中未知數量的物件合并為單個js物件

我有一個物件如下

[
    {
        "config": {
            "holes": 18
        }
    },
    {
        "config": {
            "single_cart": false
        }
    },
    {
        "config": {
            "shared_cart": false
        }
    },
    {
        "config": {
            "caddie": false
        }
    },
    {
        "config": {
            "transfers": false
        }
    },
    {
        "config": {
            "meals": false
        }
    },
    {
        "config": {
            "all_inclusive": false
        }
    }
]

我試圖轉換成

{
   "config":{
      "holes":18,
      "single_cart":false,
      "shared_cart":false,
      "caddie":false,
      "transfers":false,
      "meals":false,
      "all_inclusive":false
   }
}

這是一個“合并”示例，因為它們可以是任何名稱和值鍵。我嘗試過使用reduce、map、foreach，但都失敗了，并且永遠無法將它們連接在一起。

如果有人可以幫助我指出正確的方向，那就太棒了。我看到的所有示例都參考了專門命名的鍵來使用 object.assign 等進行合并。

uj5u.com熱心網友回復：

您可以使用reduce()來合并陣列中的所有物件。您可以使用...展開語法來組合物件。

const data = [{
    "config": {
      "holes": 18
    }
  },
  {
    "config": {
      "single_cart": false
    }
  },
  {
    "config": {
      "shared_cart": false
    }
  },
  {
    "config": {
      "caddie": false
    }
  },
  {
    "config": {
      "transfers": false
    }
  },
  {
    "config": {
      "meals": false
    }
  },
  {
    "config": {
      "all_inclusive": false
    }
  }
];

const result = {
  config: data.reduce((acc, obj) => ({...acc, ...obj.config}), {})
};

console.log(result);

uj5u.com熱心網友回復：

那應該是一個單行：

let data = [ 
    {
        "config": {
            "holes": 18
        }
    },
    {
        "config": {
            "single_cart": false
        }
    },
    /* more of your data.... */ 
]

const result = data.reduce((prev, {config}) => ({config: {...prev.config, ...config}}), {config: {}})

您可以縮減為展平陣列或創建物件。您甚至不需要宣告一個單獨的變數來分配您的資料。

如果你有一個默認配置或以前的資料，你想覆寫，你可以改變 reduce 函式的第二個引數：

const defaultConfig = {
    config: {
      "holes": 0,
      "single_cart": true,
    }
}

const newConfig = data.reduce((prev, {config}) => ({config: {...prev.config, ...config}}), defaultConfig)

在https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce中查看更多資訊

uj5u.com熱心網友回復：

您可以使用Array.prototype.reduce()。試試這樣：

const input = [ { "config": { "holes": 18 } }, { "config": { "single_cart": false } }, { "config": { "shared_cart": false } }, { "config": { "caddie": false } }, { "config": { "transfers": false } }, { "config": { "meals": false } }, { "config": { "all_inclusive": false } } ]

const output = input.reduce((prev, curr) => {
    Object.entries(curr.config).forEach(([key, value]) => {prev.config[key] = value})
    return prev
}, {config: {}})

console.log(output);

uj5u.com熱心網友回復：

我將假設您的串列稱為configList. 這應該有效：

const result = { config: {} }

configList.forEach(element => {
   let key = Object.keys(element.config)
   let value = element.config[key]
   
   result.config[key] = value
})

console.log(result)
   

uj5u.com熱心網友回復：

我在這里創建了一個codepen

它以一種相當簡單的方式完成了您正在尋找的事情。

const data = [
    {
        "config": {
            "holes": 18
        }
    },
    {
        "config": {
            "single_cart": false
        }
    },
    {
        "config": {
            "shared_cart": false
        }
    },
    {
        "config": {
            "caddie": false
        }
    },
    {
        "config": {
            "transfers": false
        }
    },
    {
        "config": {
            "meals": false
        }
    },
    {
        "config": {
            "all_inclusive": false
        }
    }
]

const obj = { 
  config: {} 
}

data.forEach((row) => {
  obj.config[Object.keys(row.config)[0]] = row.config[Object.keys(row.config)[0]];
})

console.log(obj);

標籤：javascript数组合并

上一篇：如何在react中讀取useEffect之外的函式單擊按鈕不起作用

下一篇：檢查反應中<input>元素的活動