如果滿足條件，則在陣列中求和并組合相似的物件元素-Javascript-有解無憂

我有一個這種形狀的陣列：

[
  {
    unique: 8,
    views: 24,
    name: "https://l.instagram.com/",
    sec: 5.39,
  },
  {
    unique: 2,
    views: 20,
    name: "",
    sec: 0,
  },
  {
    unique: 2,
    views: 5,
    name: "https://www.tiktok.com/",
    sec: 5.39,
  },
  {
    unique: 4,
    views: 3,
    name: "https://l.instagram.com",
    sec: 2.00,
  },
  {
    unique: 1,
    views: 2,
    name: "https://www.tiktok.com",
    sec: 2.00,
  },
];

我正在嘗試將相同的參考者與值的總和（視圖、唯一性等）組合到一個新陣列中。新的陣列需要根據條件形成，基本上參考名稱需要根據型別進行格式化。例如，所有（“https://l.instagram.com/”、“l.instagram.com”、“https://www.instagram.com/”等）推薦人都需要被稱為 Instagram，并且與其他人相同 - YouTube , TikTok 等，如果為空，則為 'Direct'。這是我想到的最終結果：

[
  {
    unique: 12,
    views: 27,
    name: "Instagram",
    sec: 7.39,
  },
  {
    unique: 2,
    views: 20,
    name: "Direct",
    sec: 0,
  },
  {
    unique: 3,
    views: 7,
    name: "TikTok",
    sec: 7.39,
  },
];

我的想法是通過陣列進行映射，如果該值包含所需的字串，它將對新物件中的值求和。也許映射或減少，或兩者的組合？任何指南或幫助表示贊賞。提前致謝！

uj5u.com熱心網友回復：

（對不起，我錯過了這個“直接”要求，將修改并附加）

Array.map，以及所有陣列回圈方法，一次遍歷陣列一個元素，而不保留先前元素的資訊，并且對未來元素視而不見，因此在回圈物件時需要一些方法來跟蹤先前物件。

在我提出的代碼片段解決方案中，我宣告了一個中間物件，其中包含您想要一起收集的每個不同組的物件（在您的情況下為 tiktok 和 instagram，如果您的初始資料集非常復雜但在這個例子我只是通過眼睛閱讀它們）。

接下來，使用回圈遍歷原始物件陣列for-each。對于每個元素（物件），.name都會檢查屬性并嘗試提取子字串，該子字串可用作參考中間陣列中匹配物件的鍵。這是通過將拆分.name為一個陣列來完成的，在找到句點 (.) 的地方打破名稱字串。因為您的名稱都是(something).tiktok.(something)型別，所以可以將唯一鍵 (tiktok) 提取為該拆分陣列的第二個元素（索引 1）：

// suppose current element.name is "https://www.tiktok.com";
key = element.name.split(".")[1];
// key now holds 'tiktok';

現在key可以使用它來參考我們之前宣告的物件的中間物件中的相關物件，并且可以像這樣訪問和更新各個屬性：

 intermediateObjectOfObjects[key].unique  = element.unique;

回圈的陳述句for-each被放在一個條件if塊中，以忽略任何沒有定義名稱的地方。

回圈完成for-each后，資料現在將位于物件的物件中（內部物件都根據您的需要進行更新）。

所以，最后我們只需要將更新的物件移動到它們自己的陣列中：

// define a new array:
const finalObjectArray=[];
// iterate through the intermediate array, adding each inner object to the new array:

     for (const property in intermediateObjectOfObjects) {
       finalObjectArray.push(intermediateObjectOfObjects[property]);
     } // end for-in object iterations;

最終結果是一個陣列，其中包含每個命名組的一個物件，其中每個物件的原始陣列中的值組合在一起。

const arrayOfObjects = [
  {
    unique: 8,
    views: 24,
    name: "https://l.instagram.com/",
    sec: 5.39,
  },
  {
    unique: 2,
    views: 20,
    name: "",
    sec: 0,
  },
  {
    unique: 2,
    views: 5,
    name: "https://www.tiktok.com/",
    sec: 5.39,
  },
  {
    unique: 4,
    views: 3,
    name: "https://l.instagram.com",
    sec: 2.00,
  },
  {
    unique: 1,
    views: 2,
    name: "https://www.tiktok.com",
    sec: 2.00,
  },
];

const intermediateObjectOfObjects = {

   tiktok: {
           unique: 0,
           views: 0,
           name: "https://www.tiktok.com",
           sec: 0
           },

instagram: {
           unique: 0,
           views: 0,
           name: "https://www.instagram.com",
           sec: 0
           },

direct: {
           unique: 0,
           views: 0,
           name: "direct",
           sec: 0
           }

} // end intermediate object;

const finalObjectArray=[];


  arrayOfObjects.forEach(element => {

     key = (element.name.split(".")[1]) ? element.name.split(".")[1] : 'direct' ;
     intermediateObjectOfObjects[key].unique  = element.unique;
     intermediateObjectOfObjects[key].views  = element.views;
     intermediateObjectOfObjects[key].sec  = element.sec;

});


     for (const property in intermediateObjectOfObjects) {
       finalObjectArray.push(intermediateObjectOfObjects[property]);
     } // end for-in object iterations;

console.log(finalObjectArray);

編輯以包括未定義物件名稱的“直接”組：

我沒有使用條件來測驗名稱，而是if使用三元運算子來詢問“是否拆分（'。'）在元素 [1] 中回傳了一個有效的字串？所以使用它作為名稱，如果不使用 'direct' 作為姓名”

（語法看起來很奇怪，但意思是我上面參考的：

 key = (element.name.split(".")[1]) ? element.name.split(".")[1] : 'direct' ;

當然，物件的中間物件也必須修改為包含“直接”作為命名物件；

uj5u.com熱心網友回復：

您可以使用以下組合：

Array#map,
Array#reduce,
Object.entries，和
Object.fromEntries

const data = [{unique: 8,views: 24,name: "https://l.instagram.com/",sec: 5.39}, {unique: 2,views: 20,name: "",sec: 0}, {unique: 2,views: 5,name: "https://www.tiktok.com/",sec: 5.39}, {unique: 4,views: 3,name: "https://l.instagram.com",sec: 2.00}, {unique: 1,views: 2,name: "https://www.tiktok.com",sec: 2.00}];

const result = Object.entries( 
    data
    .map(({name,...rest}) => ({...rest,name:name.split('.').slice(-2)[0] || "direct" }))
    .reduce((prev,{name,...rest}) =>
        ({...prev,[name]:Object.fromEntries(
            Object.entries(rest).map(([k,v]) => [k, (prev[name] && prev[name][k] || 0)   v])
        )}), {})
)
.map(([name,rest]) => ({name,...rest}));

console.log( result );

uj5u.com熱心網友回復：

獲取單獨陣列中的名稱。迭代該陣列并將其與主陣列匹配。您也可以嘗試通過用 (.) 拆分并在is陳述句中更改===為includes. 像這樣的東西：

    let items = [
        {
          unique: 8,
          views: 24,
          name: "https://l.instagram.com",
          sec: 5.39,
        },
        {
          unique: 2,
          views: 20,
          name: "",
          sec: 0,
        },
        {
          unique: 2,
          views: 5,
          name: "https://www.tiktok.com",
          sec: 5.39,
        },
        {
          unique: 4,
          views: 3,
          name: "https://l.instagram.com",
          sec: 2.00,
        },
        {
          unique: 1,
          views: 2,
          name: "https://www.tiktok.com",
          sec: 2.00,
        },
    ];
  
  var resultArr = [];
  var valueArr = [...new Set(items.map(function(item){ return item.name }))];
  console.log(valueArr);
  valueArr.map((name) => {
      let crrItem = {
          name: name,
          unique: 0,
          views: 0,
          sec: 0
      }
      items.map((item) => {
        //   console.log(item.name === name);
          if(item.name === name){
              crrItem.unique  = item.unique;
              crrItem.views  = item.views;
              crrItem.sec  = item.sec;
            //   console.log(crrItem);
          }
      });
      if(crrItem.unique > 0){
          resultArr.push(crrItem);
      }
  });
  console.log(resultArr);

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/452490.html

標籤：javascript 数组反应算法数组算法

上一篇：如何找到最小和的路徑，在二進制矩陣中向右和向下移動

下一篇：使用C 的選擇排序實作不正確