將對象的鍵和值轉換為對象數組

Question

所以我有一個看起來像這樣的數據結構：

data = {
  a: [1, 2, 3, 4, 5],
  b: ["a", "b", "c", "d", "e"],
  c: ["123", "235423", "12312", "1231", "12312"],
  d: ["aa", "bb", "cc", "dd", "ee"],
  ...
}

我需要將其轉換為以下結構：

[
   { a: 1, b: "a", c: "123", d: "aa", ... },
   { a: 2, b: "b", c: "235423", d: "bb", ... },
   { a: 3, b: "c", c: "12312", d: "cc", ... },
   { a: 4, b: "d", c: "1231", d: "dd", ... },
   { a: 5, b: "a", c: "12312", d: "ee", ... },
]

data中鍵的數量可能會有所不同，但值的長度在所有數組中始終相同，即data[a].length === data[z].length將始終為真。

我的解決方案：

const doStuff = () => {
    const result = [];
    const keys = Object.keys(data);

    if (!keys) return result;

    const valuesLength = keys[0].length
    const result = [];

    for (let i = 0; i < valuesLength ; i++) {
        const obj = {};
        for (const key in data) {
            obj[key] = data[key][i];
        }

        result.push(obj);
    }
    return result;
};

使用兩個 for 循環並不是最有效的，因為鍵的數量可能很大，所以我正在尋找最佳解決方案

Answer 1

你可以遍歷源對象鍵（ Object.keys()與Array.prototype.reduce()循環內陣列與Array.prototype.forEach()和分配對應所得對象的屬性：

 const src = {a:[1,2,3,4,5],b:["a","b","c","d","e"],c:["123","235423","12312","1231","12312"],d:["aa","bb","cc","dd","ee"]}, result = Object .keys(src) .reduce((acc, key, i, keys) => { src[key].forEach((v, j) => { acc[j] = acc[j] || {} acc[j][key] = v }) return acc }, []) console.log(result)

 .as-console-wrapper{min-height:100%;}

Answer 2

通過假設相同長度的數組，您可以通過將所有值與位於相同索引和新屬性的對象一起映射來獲取條目並減少數組。

 const data = { a: [1, 2, 3, 4, 5], b: ["a", "b", "c", "d", "e"], c: ["123", "235423", "12312", "1231", "12312"], d: ["aa", "bb", "cc", "dd", "ee"] }, result = Object .entries(data) .reduce((r, [k, a]) => a.map((v, i) => ({ ...r[i], [k]: v })), []); console.log(result);

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

Answer 3

解決方案將需要兩個循環。 一個遍歷對象中的屬性，另一個遍歷值數組。

我個人會為兩個循環使用 reduce 和 forEach

 const data = { a: [1, 2, 3, 4, 5], b: ["a", "b", "c", "d", "e"], c: ["123", "235423", "12312", "1231", "12312"], d: ["aa", "bb", "cc", "dd", "ee"] } const result = Object.entries(data).reduce((arr, [key, values]) => ( values.forEach((value, index) => { arr[index] = { ...arr[index], [key]: value }; }), arr), []); console.log(result);

沒有粗箭頭和解構

 var data = { a: [1, 2, 3, 4, 5], b: ["a", "b", "c", "d", "e"], c: ["123", "235423", "12312", "1231", "12312"], d: ["aa", "bb", "cc", "dd", "ee"] }; var result = Object.entries(data).reduce(function(result, entry) { var key = entry[0]; var arr = entry[1]; arr.forEach(function(value, index) { result[index] = result[index] || {}; result[index][key] = value; }); return result; }, []); console.log(result);

Answer 4

請檢查以下代碼：

var data = {
  a: [1, 2, 3, 4, 5],
  b: ["a", "b", "c", "d", "e"],
  c: ["123", "235423", "12312", "1231", "12312"],
  d: ["aa", "bb", "cc", "dd", "ee"]
}
  
var anotherObjArray = [];

  for(var i=0;i<data[Object.keys(data)[0]].length;i++){
    let tempObj = {};
    for(var j=0;j<Object.keys(data).length;j++){
        tempObj[Object.keys(data)[j]] = data[Object.keys(data)[j]][i];    
    }
    anotherObjArray.push(tempObj);
  }

anotherObjArray 是滿足您要求的最終數組。