快捷導(dǎo)航

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

更新時(shí)間：2024年02月22日 08:58:44 作者：浮生如夢(mèng)似離殤

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

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

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ù)組對(duì)象根據(jù)多個(gè)key值進(jìn)行分類(lèi)
 * @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ù)組分組方法

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

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

以前的做法

假設(shè)你有一個(gè)代表人的對(duì)象數(shù)組，你想按年齡對(duì)它們進(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}]
}
*/

或者可以像這樣來(lái)使用reduce：

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

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

使用Object.groupBy

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

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

簡(jiǎn)單多了！不過(guò)也有一些需要注意的地方。

Object.groupBy 返回一個(gè)空原型對(duì)象。這意味著該對(duì)象不繼承 Object.prototype 的任何屬性。這很好，因?yàn)檫@意味著你不會(huì)意外覆蓋 Object.prototype 上的任何屬性，但這也意味著該對(duì)象沒(méi)有你可能期望的任何方法，如 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ù)字訪問(wèn)屬性，因?yàn)槭褂梅嚼ㄌ?hào)符號(hào)也會(huì)將參數(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ù)返回任何類(lèi)型的值。

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);

在本例中，我們是按照向誰(shuí)匯報(bào)工作來(lái)對(duì)人員進(jìn)行分組的。請(qǐng)注意，要從該 Map 中按對(duì)象檢索項(xiàng)目，對(duì)象必須具有相同的引用。

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

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

何時(shí)可用

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

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

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

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

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

總結(jié)

將項(xiàng)目分組顯然是我們開(kāi)發(fā)人員的一項(xiàng)重要工作。目前，每周從 npm 下載 lodash.groupBy 的次數(shù)在 150 萬(wàn)到 200 萬(wàn)之間。很高興看到 JavaScript 填補(bǔ)了這些空白，讓我們的工作變得更加輕松。

到此這篇關(guān)于Js數(shù)組對(duì)象如何根據(jù)多個(gè)key值進(jìn)行分類(lèi)的文章就介紹到這了,更多相關(guān)js數(shù)組對(duì)象根據(jù)多個(gè)key值分類(lèi)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: