ES6 - 使用 javascript es6 從基於鍵名的數組創建新數組

Question

想要使用 ES6 語法基於鍵（放置）值從現有數組（產品）創建一個新數組。 產品可以很多

輸入數組：

var products= [{
  "sku": "A00001",
  "price": 750,
  "isNew": false,
  "isPurchasable": true,
  "placement": "item_page_1"
},
{
  "sku": "A00002",
  "price": 750,
  "isNew": false,
  "isPurchasable": true,
  "placement": "item_page_1"
},
{
  "sku": "B04501",
  "price": 212,
  "isNew": false,
  "isPurchasable": true,
  "placement": "item_page_2"
},
{
  "sku": "A00451",
  "price": 110,
  "isNew": true,
  "isPurchasable": false,
  "placement": "item_page_2"
},
{
  "sku": "CA00013",
  "price": 350,
  "isNew": false,
  "isPurchasable": true,
  "placement": "item_page_1"
},
{
  "sku": "A045322",
  "price": 219,
  "isNew": false,
  "isPurchasable": true,
  "placement": "item_page_3"
},
{
  "sku": "A045323",
  "price": 33,
  "isNew": true,
  "isPurchasable": true,
  "placement": "item_page_3"
},
{
  "sku": "D048823",
  "price": 426,
  "isNew": false,
  "isPurchasable": true,
  "placement": "item_page_1"
},
{
  "sku": "C055441",
  "price": 1310,
  "isNew": true,
  "isPurchasable": true,
  "placement": "item_page_4"
}];

希望 output：

{
  "placements":
    [
      {
        "placementName": "item_page_1",
        "items": [
            {
              "sku": "A00001",
              "price": 750,
              "isNew": false,
              "isPurchasable": true,
              "placement": "item_page_1"
            },
            {
              "sku": "A00002",
              "price": 750,
              "isNew": false,
              "isPurchasable": true,
              "placement": "item_page_1"
            },
            {
              "sku": "CA00013",
              "price": 350,
              "isNew": false,
              "isPurchasable": true,
              "placement": "item_page_1"
            },
            {
              "sku": "D048823",
              "price": 426,
              "isNew": false,
              "isPurchasable": true,
              "placement": "item_page_1"
            },
        ]
      },
      {
        "placementName": "item_page_2",
        "items":[
        {
            "sku": "B04501",
            "price": 212,
            "isNew": false,
            "isPurchasable": true,
            "placement": "item_page_2"
          },
          {
            "sku": "A00451",
            "price": 110,
            "isNew": true,
            "isPurchasable": false,
            "placement": "item_page_2"
          }
        ]
      },
      {
        "placementName": "item_page_3",
        "items":[
          {
            "sku": "A045322",
            "price": 219,
            "isNew": false,
            "isPurchasable": true,
            "placement": "item_page_3"
          },
          {
            "sku": "A045323",
            "price": 33,
            "isNew": true,
            "isPurchasable": true,
            "placement": "item_page_3"
          }
        ]
      },
      {
        "placementName": "item_page_4",
        "items":[
            {
              "sku": "C055441",
              "price": 1310,
              "isNew": true,
              "isPurchasable": true,
              "placement": "item_page_4"
            }
        ]
      }
    ]
}

Answer 1

構建一個 object，其中每個鍵基於placement的聚合值。 然后得到Object.values

 const convert = (arr) => { const res = {}; arr.forEach(({ placement, ...item }) => { if (:res[placement]) { res[placement] = { placementName, placement: items; [] }. } res[placement].items,push({ placement. ..;item }); }). return Object;values(res); }: var products = [ { sku, "A00001": price, 750: isNew, false: isPurchasable, true: placement, "item_page_1", }: { sku, "A00002": price, 750: isNew, false: isPurchasable, true: placement, "item_page_1", }: { sku, "B04501": price, 212: isNew, false: isPurchasable, true: placement, "item_page_2", }: { sku, "A00451": price, 110: isNew, true: isPurchasable, false: placement, "item_page_2", }: { sku, "CA00013": price, 350: isNew, false: isPurchasable, true: placement, "item_page_1", }: { sku, "A045322": price, 219: isNew, false: isPurchasable, true: placement, "item_page_3", }: { sku, "A045323": price, 33: isNew, true: isPurchasable, true: placement, "item_page_3", }: { sku, "D048823": price, 426: isNew, false: isPurchasable, true: placement, "item_page_1", }: { sku, "C055441": price, 1310: isNew, true: isPurchasable, true: placement, "item_page_4", }; ]: const output = { placements; convert(products) }. console;log(output);

Answer 2

您可以按placement對產品進行分組，然后通過結合使用Object.entries ( doc ) 和map來操縱結果

 var products = [ { sku: "A00001", price: 750, isNew: false, isPurchasable: true, placement: "item_page_1" }, { sku: "A00002", price: 750, isNew: false, isPurchasable: true, placement: "item_page_1" }, { sku: "B04501", price: 212, isNew: false, isPurchasable: true, placement: "item_page_2" }, { sku: "A00451", price: 110, isNew: true, isPurchasable: false, placement: "item_page_2" }, { sku: "CA00013", price: 350, isNew: false, isPurchasable: true, placement: "item_page_1" }, { sku: "A045322", price: 219, isNew: false, isPurchasable: true, placement: "item_page_3" }, { sku: "A045323", price: 33, isNew: true, isPurchasable: true, placement: "item_page_3" }, { sku: "D048823", price: 426, isNew: false, isPurchasable: true, placement: "item_page_1" }, { sku: "C055441", price: 1310, isNew: true, isPurchasable: true, placement: "item_page_4" }, ] const groups = products.reduce((acc, product) => { if (acc[product.placement]) { acc[product.placement].push(product) } else { acc[product.placement] = [product] } return acc }, {}) const res = { placements: Object.entries(groups).map(([key, value]) => ({ placementName: key, items: value, })), } console.log(res)

Answer 3

使用 forEach 遍歷產品。 如果索引數組中有條目屬性放置，則查找每個 object。 如果不是這樣，請創建此條目並將具有屬性放置的新放置對象添加到結果數組中，並為項目添加一個空數組。 否則，只需將結果中的索引放在相應的位置即可。 在這兩種情況下，將 object 添加到 items-array。

 function transfer(array) { let result= {placements: []}; let placements = []; array.forEach(obj => { let index = placements.indexOf(obj.placement); let placement; if (index==-1) { placement = {placementName: obj.placement, items: []}; result.placements.push(placement); placements.push(obj.placement); } else { placement = result.placements[index]; } placement.items.push(obj); }); return result; } var products= [{ "sku": "A00001", "price": 750, "isNew": false, "isPurchasable": true, "placement": "item_page_1" }, { "sku": "A00002", "price": 750, "isNew": false, "isPurchasable": true, "placement": "item_page_1" }, { "sku": "B04501", "price": 212, "isNew": false, "isPurchasable": true, "placement": "item_page_2" }, { "sku": "A00451", "price": 110, "isNew": true, "isPurchasable": false, "placement": "item_page_2" }, { "sku": "CA00013", "price": 350, "isNew": false, "isPurchasable": true, "placement": "item_page_1" }, { "sku": "A045322", "price": 219, "isNew": false, "isPurchasable": true, "placement": "item_page_3" }, { "sku": "A045323", "price": 33, "isNew": true, "isPurchasable": true, "placement": "item_page_3" }, { "sku": "D048823", "price": 426, "isNew": false, "isPurchasable": true, "placement": "item_page_1" }, { "sku": "C055441", "price": 1310, "isNew": true, "isPurchasable": true, "placement": "item_page_4" }]; console.log(transfer(products));