在ES6中更新物件陣列的重復值-有解無憂

我有一個像

const arr = [
{id: '1', name: 'name 1', age: 20},
{id: '2', name: 'name 2', age: 21},
{id: '2', name: 'name 3', age: 22},
{id: '2', name: 'name 4', age: 23},
{id: '3', name: 'name 5', age: 24},
{id: '3', name: 'name 6', age: 25},
{id: '4', name: 'name 7', age: 26},
{id: '5', name: 'name 8', age: 27},
{id: '5', name: 'name 9', age: 28},
{id: '5', name: 'name 10', age: 29},
];

我知道我在陣列中有重復項（只看 id 屬性），我不想洗掉重復項，我需要附加一些東西來區分。

arr = [
{id: '1_0', name: 'name 1', age: 20},
{id: '2_0', name: 'name 2', age: 21},
{id: '2_1', name: 'name 3', age: 22},
{id: '2_2', name: 'name 4', age: 23},
{id: '3_0', name: 'name 5', age: 24},
{id: '3_1', name: 'name 6', age: 25},
{id: '4_0', name: 'name 7', age: 26},
{id: '5_0', name: 'name 8', age: 27},
{id: '5_1', name: 'name 9', age: 28},
{id: '5_2', name: 'name 10', age: 29},
];

提前致謝。

uj5u.com熱心網友回復：

您可以使用一個物件進行計數并使用 subversions 映射新物件。

這個答案有一個閉包

(ids => o => ({ ...o, id: `${o.id}_${ids[o.id] ??= 0, ids[o.id]  }` }))
({})

用一個物件呼叫函式并回傳另一個函式的地方

        o => ({ ...o, id: `${o.id}_${ids[o.id] ??= 0, ids[o.id]  }` })

用于映射。

映射函式回傳一個新物件，并用舊值和新值的id一部分替換屬性，id新值對于任何未見過的都從零開始id。

const
    array = [{ id: '1', name: 'name 1', age: 20 }, { id: '2', name: 'name 2', age: 21 }, { id: '2', name: 'name 3', age: 22 }, { id: '2', name: 'name 4', age: 23 }, { id: '3', name: 'name 5', age: 24 }, { id: '3', name: 'name 6', age: 25 }, { id: '4', name: 'name 7', age: 26 }, { id: '5', name: 'name 8', age: 27 }, { id: '5', name: 'name 9', age: 28 }, { id: '5', name: 'name 10', age: 29 }],
    result = array.map(
        (ids => o => ({ ...o, id: `${o.id}_${ids[o.id] ??= 0, ids[o.id]  }` }))
        ({})
    );

console.log(result);

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

uj5u.com熱心網友回復：

const arr = [
  { id: "1", name: "name 1", age: 20 },
  { id: "2", name: "name 2", age: 21 },
  { id: "2", name: "name 3", age: 22 },
  { id: "2", name: "name 4", age: 23 },
  { id: "3", name: "name 5", age: 24 },
  { id: "3", name: "name 6", age: 25 },
  { id: "4", name: "name 7", age: 26 },
  { id: "5", name: "name 8", age: 27 },
  { id: "5", name: "name 9", age: 28 },
  { id: "5", name: "name 10", age: 29 },
];

let obj = {};

for (let i = 0; i < arr.length; i  ) {
  if (obj[arr[i].id] == undefined) {
    obj[arr[i].id] = 0;
  } else {
    obj[arr[i].id] = obj[arr[i].id]   1;
  }
  arr[i].id = arr[i].id   "_"   obj[arr[i].id];
}
console.log(arr);

這會做

uj5u.com熱心網友回復：

需要單次迭代：

const arr = [
  {id: '1', name: 'name 1', age: 20},
  {id: '2', name: 'name 2', age: 21},
  {id: '2', name: 'name 3', age: 22},
  {id: '2', name: 'name 4', age: 23},
  {id: '3', name: 'name 5', age: 24},
  {id: '3', name: 'name 6', age: 25},
  {id: '4', name: 'name 7', age: 26},
  {id: '5', name: 'name 8', age: 27},
  {id: '5', name: 'name 9', age: 28},
  {id: '5', name: 'name 10', age: 29},
];

//keep track of how many times each id has been encountered
const counterPerRecord = new Map();

for (const record of arr) {
  //get count or default to zero
  const next = counterPerRecord.get(record.id) ?? 0;
  //update the count for next time we encounter the id
  counterPerRecord.set(record.id, next 1);
  
  //update the id
  record.id  = `_${next}`;
}

console.log(arr);

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

您只需要一個映射來跟蹤下一個要附加到每個id屬性的數字的下一個實體。第一次為零，每次遇到相同的id.

uj5u.com熱心網友回復：

1）您可以使用以下方法輕松實作結果Map

const arr = [
  { id: "1", name: "name 1", age: 20 },
  { id: "2", name: "name 2", age: 21 },
  { id: "2", name: "name 3", age: 22 },
  { id: "2", name: "name 4", age: 23 },
  { id: "3", name: "name 5", age: 24 },
  { id: "3", name: "name 6", age: 25 },
  { id: "4", name: "name 7", age: 26 },
  { id: "5", name: "name 8", age: 27 },
  { id: "5", name: "name 9", age: 28 },
  { id: "5", name: "name 10", age: 29 },
];

const map = new Map();
arr.forEach((o) => map.has(o.id) ? map.get(o.id).push(o) : map.set(o.id, [o]));

const result = [];
for (let [, arr] of map) {
  arr.forEach((o, i) => result.push({ ...o, id: `${o.id}_${i}` }));
}

console.log(result);

/* This is not a part of answer. It is just to give the output full height. So IGNORE IT */
.as-console-wrapper { max-height: 100% !important; top: 0; }

2）你也可以使用這里的地圖和地圖（感謝VLAZ）

const arr = [
  { id: "1", name: "name 1", age: 20 },
  { id: "2", name: "name 2", age: 21 },
  { id: "2", name: "name 3", age: 22 },
  { id: "2", name: "name 4", age: 23 },
  { id: "3", name: "name 5", age: 24 },
  { id: "3", name: "name 6", age: 25 },
  { id: "4", name: "name 7", age: 26 },
  { id: "5", name: "name 8", age: 27 },
  { id: "5", name: "name 9", age: 28 },
  { id: "5", name: "name 10", age: 29 },
];

const map = new Map();
const result = arr.map((curr) => {
  map.set(curr.id, (map.get(curr.id) ?? -1)   1);
  return { ...curr, id: `${curr.id}_${map.get(curr.id)}` };
});

console.log(result);

/* This is not a part of answer. It is just to give the output full height. So IGNORE IT */
.as-console-wrapper { max-height: 100% !important; top: 0; }

uj5u.com熱心網友回復：

你可以使用這樣的東西：

const arr = [
  { id: "1", name: "name 1", age: 20 },
  { id: "2", name: "name 2", age: 21 },
  { id: "2", name: "name 3", age: 22 },
  { id: "2", name: "name 4", age: 23 },
  { id: "3", name: "name 5", age: 24 },
  { id: "3", name: "name 6", age: 25 },
  { id: "4", name: "name 7", age: 26 },
  { id: "5", name: "name 8", age: 27 },
  { id: "5", name: "name 9", age: 28 },
  { id: "5", name: "name 10", age: 29 },
];

for (let i = arr.length - 1; i >= 0; i--) {
   arr[i].id = `${arr[i].id}_${arr.filter(el => el.id === arr[i].id).length - 1}`;
}

console.log(arr);

注意：正如@MrMythical 提到的，1_0is just 10，1_1is11等等。所以我在示例中將 id 轉換為字串以避免 id 重復。

警告：正如@VLAZ 和@Jeremy Thille 所注意到的，這是一個昂貴的解決方案 ( O(n^2))，對于大資料是不可接受的。對于優化良好的解決方案 ( O(n))，請使用Map。

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

標籤：javascript 数组打字稿 ecmascript-6

上一篇：在打字稿和javascript中為基類創建命名引數

下一篇：打字稿：擴展多種型別的模板化介面陣列