物件陣列上的Javascriptreduce()，條目也是簡單的變數和陣列

我正在嘗試使用reduce函式來遍歷物件陣列并獲得輸出物件陣列中顯示的資料的總和（實際上是一種重復洗掉器）。

關于資料，例如：

mainData = [
   {data : {name: "item1", color: "red", type: ["metal", "wood"]}, id: 1},
   {data : {name: "item2", color: "green", type: ["wood"]}, id: 2},
   {data : {name: "item3", color: "green", type: ["wood", "stone", "marble"]}, id: 3},
   {data : {name: "item4", color: "red", type: ["stone"]}, id: 4}
]

使用功能時：

const getValues = (data, key) => {
    return data.reduce((acc, item) => {
        if(acc.indexOf(item.data[key]) > -1) {
            return [...acc]
        } else {
            return [...acc, item.data[key]]
        }
    }, [data[0].data[key]]) //initial value
}

如果我為鍵呼叫此getValues函式，它會很好地分叉，并給出以下輸出 : ，這是預期的。getValues(mainData, "color")color["red", "green"]

但是如果我用 呼叫該函式getValues(mainData, "type")，該函式將忽略來自鍵的陣列型別值的大部分值type。

我試圖通過使用一個限制在reduce函式條件之前的for回圈來解決它，如下所示：data["type"].lengthif...else

const getValues = (data, key) => {
    return data.reduce((acc, item) => {
        for(let i = 0; i < item.data[key].length; i  ) {
            if(acc.indexOf(item.data[key][i]) > -1) {
                return [...acc]
            } else {
                return [...acc, item.data[key][i]]
            }
        }
    }, [data[0].data[key][0]])
}

但它也不起作用。

任何人都知道如何解決這個問題？

uj5u.com熱心網友回復：

你可以用flatMap它

像這樣

const mainData = [
   {data : {name: "item1", color: "red", type: ["metal", "wood"]}, id: 1},
   {data : {name: "item2", color: "green", type: ["wood"]}, id: 2},
   {data : {name: "item3", color: "green", type: ["wood", "stone", "marble"]}, id: 3},
   {data : {name: "item4", color: "red", type: ["stone"]}, id: 4}
]

const getValue = (data, key) => [...new Set(data.flatMap(({data}) => Array.isArray(data[key])?data[key]: [data[key]]))]

console.log(getValue(mainData, 'name'))
console.log(getValue(mainData, 'type'))

uj5u.com熱心網友回復：

使用Set對值進行重復資料洗掉可能更容易。

const mainData=[{data:{name:"item1",color:"red",type:["metal","wood"]},id:1},{data:{name:"item2",color:"green",type:["wood"]},id:2},{data:{name:"item3",color:"green",type:["wood","stone","marble"]},id:3},{data:{name:"item4",color:"red",type:["stone"]},id:4}];

// Pass in the data, and the prop you want to look at
function finder(arr, prop) {

  // Create a new set
  const set = new Set();
  
  // Iterate over the array of objects
  for (const obj of arr) {

    const value = obj.data[prop];

    // If `value` is an array add each value to the set
    if (Array.isArray(value)) {
      value.forEach(v => set.add(v));
    } else {

      // Otherwise just add the value
      set.add(obj.data[prop]);
    }
  }

  // Return an array from the set
  return [...set];

}

console.log(finder(mainData, 'color'));
console.log(finder(mainData, 'type'));
console.log(finder(mainData, 'name'));

uj5u.com熱心網友回復：

• .flatMap()第一層搜索keyA（“資料”）。每個data:{...}物件都被轉換成對陣列：

  [["name","item1"],["color","red"],["type",["metal","wood"]],...];
  

• 另一個.flatMap()遍歷對陣列，并在與 匹配時回傳一個值keyB。其他所有內容都作為一個空陣列回傳，因為.flatMap()它的回傳是扁平的，所以不會產生任何結果。

  ([k, v]) => k === keyB ? v :[])
  

• 最后，兩個flatMap()s 的回傳都被制成 aSet()然后Set作為一個陣列回傳，沒有重復。

  return [...new Set(output)];
  

const mainData = [
   {data : {name: "item1", color: "red", type: ["metal", "wood"]}, id: 1},
   {data : {name: "item2", color: "green", type: ["wood"]}, id: 2},
   {data : {name: "item3", color: "green", type: ["wood", "stone", "marble"]}, id: 3},
   {data : {name: "item4", color: "red", type: ["stone"]}, id: 4}
];

function compact(objArray, keyA, keyB) {
  const output = objArray.flatMap(
    obj => Object.entries(obj[keyA]).flatMap(
      ([k, v]) => k === keyB ? v :[]
    )
  );
  return [...new Set(output)];
}
console.log(compact(mainData, 'data', 'type'));
console.log(compact(mainData, 'data', 'color'));
console.log(compact(mainData, 'data', 'name'));

標籤：javascript 数组 目的 减少

上一篇：JS-將物件中的多個值組合成同一物件中的新鍵

下一篇：如何將來自另一個類的物件存盤在另一個類的ArrayList中？