如何在其他物件陣列的每個值上創建多個陣列？

所以目前我有這個陣列結構：

const object = {
  object1: ["01", "02"],
  object2: ["item1", "item2", "item3"],
  object3: ["product1", "product2"]
}

我需要將其轉換為：

const array = [
  {
    object1: "01",
    object2: "item1",
    object3: "product1",
  }, {
    object1: "02",
    object2: "item1",
    object3: "product1",
  }, {
    object1: "01",
    object2: "item2",
    object3: "product1",
  }, {
    object1: "01",
    object2: "item3",
    object3: "product1",
  }, {
    object1: "02",
    object2: "item2",
    object3: "product1",
  }, {
    object1: "02",
    object2: "item3",
    object3: "product1",
  }, {
    object1: "01",
    object2: "item1",
    object3: "product2",
  }, {
    object1: "02",
    object2: "item1",
    object3: "product2",
  }, {
    object1: "02",
    object2: "item2",
    object3: "product2",
  }, {
    object1: "03",
    object2: "item2",
    object3: "product2",
  },
]

所以基本上我需要根據陣列的初始物件上的每個組合創建一個新陣列，并且初始陣列是數千個專案。

這是我到目前為止所擁有的，但沒有運氣得到我需要的結構。

const object = {
  object1: ["01", "02"],
  object2: ["item1", "item2", "item3"],
  object3: ["product1", "product2"]
}
const arr = []
Object.entries(object).forEach((element, i) => {
  element.forEach((innerElement, j) => {
    let _element = {[`${element[0]}`]:element[1][j]}
    arr.push(_element)
  })
});

console.log("map", arr)

有什么方法可以將資料轉換為我需要的結構嗎？提前致謝！

uj5u.com熱心網友回復：

我建議創建一個通用解決方案，該解決方案將迭代模板的可能屬性和值，object并創建一個包含所有可能結果的陣列。

我們將創建一個addPossibleValues()函式，然后為模板物件中的每個鍵擴展物件陣列。每一輪將通過相關屬性陣列的連續長度增加物件的數量。

const object = {
  object1: ["01", "02"],
  object2: ["item1", "item2", "item3"],
  object3: ["product1", "product2"]
}

function addPossibleValues(arr, property, possibleValues) {
    return possibleValues.flatMap(v => { 
        return (arr.length ? arr: [{}]).map(x => { 
            return { ...x, [property]: v};
        })
    });
}

let result = [];
for(let key in object) {
    result = addPossibleValues(result, key, object[key]);
}

console.log('Result:', result)

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

您也可以使用Array.reduce()呼叫來執行此操作：

const object = {
  object1: ["01", "02"],
  object2: ["item1", "item2", "item3"],
  object3: ["product1", "product2"]
}

function addPossibleValues(arr, property, possibleValues) {
    return possibleValues.flatMap(v => { 
        return (arr.length ? arr: [{}]).map(x => { 
            return { ...x, [property]: v};
        })
    });
}

let result = Object.keys(object).reduce((acc, key) => {
    return addPossibleValues(acc, key, object[key]);
}, []);
console.log('Result:', result)

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

uj5u.com熱心網友回復：

主意

逐步生成原始物件中陣列的叉積：

• 遍歷所有原始物件屬性。

• 考慮一些迭代。

• 假設我們在之前的迭代中填充了一個臨時陣列

• 對于存盤為原始物件中cv當前迭代屬性的陣列的每個值...cp

  • 從中間結果陣列中取出每個物件
  • 克隆它
  • 向克隆物件添加一個屬性cp并用 value 填充它cv。
  • 將克隆添加到結果陣列

• 通過從結果陣列中洗掉錐體操作的原件來結束迭代（這些現在已過時，因為它們是少一維的叉積）。

• 使用具有單個空物件的陣列初始化 while 程序

代碼

const object = {
  object1: ["01", "02"],
  object2: ["item1", "item2", "item3"],
  object3: ["product1", "product2"]
}


let a_res = [{}];
for (s_key in object) {
    let n_currentCount = a_res.length
      ;
          
    object[s_key].forEach ( ps_item => {
        for (let i = 0; i < n_currentCount; i  ) {
            let o_new = Object.assign({ [s_key]: ps_item }, a_res[i])
              ;
              
            a_res.push(o_new);
        }
    });

    a_res.splice(0, n_currentCount); // in situ
}
console.log(a_res);

uj5u.com熱心網友回復：

首先，我必須為我的英語道歉。您可以使用 3 個嵌套的 forEach。

const object = {
  object1: ["01", "02"],
  object2: ["item1", "item2", "item3"],
  object3: ["product1", "product2"]
}

var arr = []

object.object3.forEach(o3 => 
  object.object2.forEach(o2 =>
    object.object1.forEach(o1 => 
      arr.push({object1: o1, object2: o2, object3: o3}))));
      
console.log(arr);

如果您希望更改組合的順序，請更改 forEach 的順序

標籤：javascript 数组 目的 javascript 对象

上一篇：JS在自己的檔案中時出現HTTP錯誤405，但在HTML中則沒有

下一篇：如何在回應onclick中更改單擊組件的背景顏色