快捷導(dǎo)航

Js數(shù)組對象如何根據(jù)多個key值進(jìn)行分類

更新時間：2024年02月22日 08:58:44 作者：浮生如夢似離殤

這篇文章主要介紹了Js數(shù)組對象如何根據(jù)多個key值進(jìn)行分類,每周從 npm 下載?lodash.groupBy?的次數(shù)在 150 萬到 200 萬之間，很高興看到 JavaScript 填補(bǔ)了這些空白，讓我們的工作變得更加輕松，需要的朋友可以參考下

js 數(shù)組對象根據(jù)多個key值進(jìn)行分類

const list = [
  { id: 1, name: "手機(jī)1", orderNo: "6901443393268", sku: "51095BKR" },
  { id: 2, name: "手機(jī)2", orderNo: "6901443393262", sku: "51095BBQ" },
  { id: 3, name: "手機(jī)3", orderNo: "6901443393262", sku: "51095BKR" },
  { id: 4, name: "手機(jī)2", orderNo: "6901443393262", sku: "51095BKR" },
  { id: 5, name: "手機(jī)5", orderNo: "6901443393268", sku: "51095BBQ" },
  { id: 6, name: "手機(jī)3", orderNo: "6901443393262", sku: "51095BKR" },
  { id: 7, name: "手機(jī)7", orderNo: "6901443393262", sku: "51095BKR" },
  { id: 8, name: "手機(jī)5", orderNo: "6901443393268", sku: "51095BBQ" },
  { id: 9, name: "手機(jī)5", orderNo: "6901443393268", sku: "51095BBQ" },
  { id: 10, name: "手機(jī)5", orderNo: "6901443393268", sku: "51095BBQ" },
  { id: 11, name: "手機(jī)5", orderNo: "6901443393268", sku: "51095BBQ" },
];
/**
 * 數(shù)組對象根據(jù)多個key值進(jìn)行分類
 * @param {*} arr
 * @param {*} key
 */
const handleArraySortByKey = (arr, key) => {
  const obj = {};
  arr.forEach((item) => {
    let value = Array.isArray(key)
      ? key.map((v) => item[v]).join()
      : item[key];
    obj[value] ? obj[value].push(item) : (obj[value] = [item]);
  });
  return Object.keys(obj).map((item) => obj[item]);
};
console.log(handleArraySortByKey(list, ["orderNo", "sku"]));

補(bǔ)充：

JavaScript 的新數(shù)組分組方法

對數(shù)組中的項目進(jìn)行分組，你可能已經(jīng)做過很多次了。每次都會手動編寫一個分組函數(shù)，或者使用 lodash 的 groupBy 函數(shù)。

好消息是，JavaScript 現(xiàn)在有了分組方法，所以你再也不必這樣做了。Object.groupBy 和 Map.groupBy 這兩個新方法將使分組變得更簡單，并節(jié)省我們的時間或依賴性。

以前的做法

假設(shè)你有一個代表人的對象數(shù)組，你想按年齡對它們進(jìn)行分組。你可以這樣使用 forEach 循環(huán)：

const people = [
  { name: "Alice", age: 28 },
  { name: "Bob", age: 30 },
  { name: "Eve", age: 28 },
];
const peopleByAge = {};
people.forEach((person) => {
  const age = person.age;
  if (!peopleByAge[age]) {
    peopleByAge[age] = [];
  }
  peopleByAge[age].push(person);
});
console.log(peopleByAge);
/*
{
  "28": [{"name":"Alice","age":28}, {"name":"Eve","age":28}],
  "30": [{"name":"Bob","age":30}]
}
*/

或者可以像這樣來使用reduce：

const peopleByAge = people.reduce((acc, person) => {
  const age = person.age;
  if (!acc[age]) {
    acc[age] = [];
  }
  acc[age].push(person);
  return acc;
}, {});

無論哪種方法，代碼都略顯笨拙。你總是要檢查對象是否存在分組鍵，如果不存在，就用一個空數(shù)組來創(chuàng)建它。然后再將項目推入數(shù)組。

使用Object.groupBy

有了新的 Object.groupBy 方法，你就可以像這樣得出結(jié)果：

const peopleByAge = Object.groupBy(people, (person) => person.age);

簡單多了！不過也有一些需要注意的地方。

Object.groupBy 返回一個空原型對象。這意味著該對象不繼承 Object.prototype 的任何屬性。這很好，因為這意味著你不會意外覆蓋 Object.prototype 上的任何屬性，但這也意味著該對象沒有你可能期望的任何方法，如 hasOwnProperty 或 toString。

const peopleByAge = Object.groupBy(people, (person) => person.age);
console.log(peopleByAge.hasOwnProperty("28"));
// TypeError: peopleByAge.hasOwnProperty is not a function

傳遞給 Object.groupBy 的回調(diào)函數(shù)應(yīng)返回字符串或Symbol。如果返回其他內(nèi)容，則將強(qiáng)制轉(zhuǎn)為字符串。

在我們的示例中，我們一直以數(shù)字形式返回age，但在結(jié)果中卻被強(qiáng)制轉(zhuǎn)為字符串。盡管如此，你仍然可以使用數(shù)字訪問屬性，因為使用方括號符號也會將參數(shù)強(qiáng)制為字符串。

console.log(peopleByAge[28]);
// => [{"name":"Alice","age":28}, {"name":"Eve","age":28}]
console.log(peopleByAge["28"]);
// => [{"name":"Alice","age":28}, {"name":"Eve","age":28}]

使用Map.groupBy

除了返回 Map 之外，Map.groupBy 的功能與 Object.groupBy 幾乎相同。這意味著你可以使用所有常用的 Map 函數(shù)。這也意味著你可以從回調(diào)函數(shù)返回任何類型的值。

const ceo = { name: "Jamie", age: 40, reportsTo: null };
const manager = { name: "Alice", age: 28, reportsTo: ceo };
const people = [
  ceo,
  manager,
  { name: "Bob", age: 30, reportsTo: manager },
  { name: "Eve", age: 28, reportsTo: ceo },
];
const peopleByManager = Map.groupBy(people, (person) => person.reportsTo);

在本例中，我們是按照向誰匯報工作來對人員進(jìn)行分組的。請注意，要從該 Map 中按對象檢索項目，對象必須具有相同的引用。

peopleByManager.get(ceo);
// => [{ name: "Alice", age: 28, reportsTo: ceo }, { name: "Eve", age: 28, reportsTo: ceo }]
peopleByManager.get({ name: "Jamie", age: 40, reportsTo: null });
// => undefined

在上面的示例中，第二行使用了一個看起來像 ceo 對象的對象，但它并不是同一個對象，因此它不會從 Map 中返回任何內(nèi)容。要想成功地從 Map 中獲取項目，請確保你保留了要用作鍵的對象的引用。

何時可用

這兩個 groupBy 方法是 TC39 提議的一部分，目前處于第三階段。這意味著它很有可能成為一項標(biāo)準(zhǔn)，因此也出現(xiàn)了一些實施方案。

Chrome 瀏覽器 117 版本剛剛推出了對這兩種方法的支持，而 Firefox 瀏覽器 119 版本也發(fā)布了對這兩種方法的支持。Safari 以不同的名稱實現(xiàn)了這些方法，我相信他們很快就會更新。既然 Chrome 瀏覽器中出現(xiàn)了這些方法，就意味著它們已在 V8 中實現(xiàn)，因此下次 V8 更新時，Node 中也會出現(xiàn)這些方法。

為什么使用靜態(tài)方法

你可能會問，為什么要以 Object.groupBy 而不是 Array.prototype.groupBy 的形式來實現(xiàn)呢？根據(jù)該提案，有一個庫曾經(jīng)用一個不兼容的 groupBy 方法對 Array.prototype 進(jìn)行了猴子補(bǔ)丁。在考慮新的應(yīng)用程序接口時，向后兼容性非常重要。幾年前，在嘗試實現(xiàn) Array.prototype.flatten 時，這一點在一次被稱為 SmooshGate 的事件中得到了強(qiáng)調(diào)。

幸運的是，使用靜態(tài)方法似乎更有利于未來的可擴(kuò)展性。當(dāng) Record 和 Tuples 提議實現(xiàn)時，我們可以添加一個 Record.groupBy 方法，用于將數(shù)組分組為不可變的記錄。