Javascript - 從兩個 Arrays 創建嵌套對象數組

Question

嘗試從兩個 arrays 創建一個對象組合數組：

let versions = [
          {
            version: "1609936394",
          },
          {
            version: "1609936409",
          }
]

和

let devices = [
  {
    download_device: "Box 1",
  },
  {
    download_device: "Box 2",
  },
  {
    download_device: "Box 3",
  },
  {
    download_device: "Box 4",
  }
]

盡管沒有成功，但我試圖達到的結果是每個 download_device 和版本號組合都有一個單獨的條目，即。

[
    {
        download_device: "Box 1",
        version: "1609936394"
    },
    {
        download_device: "Box 2",
        version: "1609936394"
    },
    {
        download_device: "Box 3",
        version: "1609936394"
    },
    {
        download_device: "Box 4",
        version: "1609936394"
    },
    {
        download_device: "Box 1",
        version: "1609936409"
    }...

任何幫助將不勝感激！

我當前的解決方案（只輸出第一個版本號）：

let data = devices.map((d, index) => {
                       versions.map((v, i) => {
                         v.device = devices[index].download_device,
                         d.version = versions[index].version
                         return v;
                       })
                     return d;
                })

Answer 1

您的方法的主要問題是您試圖訪問無效索引。 由於您的devices數組比您的versions數組長，您將到達versions數組中不存在的索引，當您嘗試訪問不存在的索引上的屬性時會導致問題。

相反，您可以 map 在您的versions陣列上，並為每個版本 map 在您的設備陣列上（因為您想將版本添加到所有設備）。 當您在設備上進行 map 時，您可以從每個設備中獲取屬性，並使用擴展語法將它們傳播到新的 object ( ...obj ) 中。 在這個新的 object 中，您還可以添加當前version屬性。 由於內部.map()將返回一個數組，您可以將外部.map()方法更改為.flatMap() ，這會將回調返回的每個數組展平為一個更大的數組結果：

 const versions = [ { version: "1609936394", }, { version: "1609936409", } ]; const devices = [ { download_device: "Box 1", }, { download_device: "Box 2", }, { download_device: "Box 3", }, { download_device: "Box 4", } ]; const res = versions.flatMap(({version}) => devices.map(obj => ({...obj, version}))); console.log(res);

Answer 2

通過首先迭代版本和內部版本在每個條目上迭代您的設備來構建所有組合。

構建一個新的 Object 文字並將 Object 文字推送到結果數組。

 let versions = [{ version: "1609936394", }, { version: "1609936409", } ] let devices = [{ download_device: "Box 1", }, { download_device: "Box 2", }, { download_device: "Box 3", }, { download_device: "Box 4", } ] let res = []; versions.forEach((x) => { devices.forEach((y) => { let obj = { "version": x.version, "download_device": y.download_device }; res.push(obj); }); }) console.log(res);

Answer 3

您有兩個 arrays 對象。 創建一個數組，其中一個元素的每個元素與另一個元素中的每個元素相結合。

一個不關心屬性名稱的通用解決方案迭代一個數組並創建另一個數組的副本並組合屬性，例如：

 let versions = [ {version: "1609936394"}, {version: "1609936409"} ]; let devices = [ {download_device: "Box 1"}, {download_device: "Box 2"}, {download_device: "Box 3"}, {download_device: "Box 4"} ] // Step by step version let result1 = versions.reduce((acc, ver) => { devices.forEach(device => { // Shallow copy device let o = {...device}; // Shallow copy ver onto o Object.assign(o, ver); // Add to accumulator acc.push(o); }); return acc; }, []); console.log(result1); // Concise version let result2 = versions.reduce((acc, ver) => ( devices.forEach(device => acc.push({...device, ...ver}) ), acc), []); console.log(result2);

請注意，這些是淺拷貝，不會處理正在組合的對象之間的重復屬性。