小技巧 | 使用 Object.groupBy() 輕松分組JavaScript數(shù)組

作者：zhangzhang 2023-11-23 11:37:13

Object.groupBy() 是一種靜態(tài)方法，按屬性對(duì)數(shù)組數(shù)據(jù)進(jìn)行分組。只需傳入兩個(gè)參數(shù)：數(shù)組和回調(diào)函數(shù)。對(duì)數(shù)組中的每個(gè)元素執(zhí)行回調(diào)函數(shù)以確定其所屬的組。

使用 Object.groupBy() 來(lái)對(duì)數(shù)據(jù)進(jìn)行分組，而不用任何循環(huán)

在 JavaScript 中分組數(shù)據(jù)曾經(jīng)是個(gè)痛苦的過(guò)程，我們不得不遍歷對(duì)象并將它們放入單獨(dú)的數(shù)組中，但現(xiàn)在，多虧了新的 Object.groupBy() 方法，分組數(shù)據(jù)變得輕而易舉。

假設(shè)下面的數(shù)組是我們的數(shù)據(jù)

const studentsArray = [
  {
    name: "John Doe",
    age: 18,
    grade: 12,
    major: "Computer Science",
    gpa: 3.8,
  },
  {
    name: "Jane Doe",
    age: 17,
    grade: 11,
    major: "English",
    gpa: 3.6,
  },
  {
    name: "Michael Smith",
    age: 16,
    grade: 10,
    major: "Mathematics",
    gpa: 4.0,
  },
  {
    name: "Susan Jones",
    age: 15,
    grade: 9,
    major: "History",
    gpa: 3.2,
  },
  {
    name: "David Williams",
    age: 14,
    grade: 8,
    major: "Computer Science",
    gpa: 3.4,
  },
  {
    name: "Mary Brown",
    age: 13,
    grade: 7,
    major: "Mathematics",
    gpa: 3.1,
  },
  {
    name: "Charles Miller",
    age: 12,
    grade: 6,
    major: "History",
    gpa: 3.0,
  },
  {
    name: "Patricia Davis",
    age: 11,
    grade: 5,
    major: "Physical Education",
    gpa: 3.5,
  },
  {
    name: "James Garcia",
    age: 10,
    grade: 4,
    major: "Foreign Language",
    gpa: 3.3,
  },
  {
    name: "Jennifer Johnson",
    age: 9,
    grade: 3,
    major: "Physical Education",
    gpa: 3.7,
  },
];

如果我們想根據(jù)它們的 major 分組，那么我們會(huì)使用如下方法

Object.groupBy(studentsArray, ({ major }) => major);

這將給我們以下輸出

圖片

現(xiàn)在假設(shè)我們想根據(jù)年齡大于 10 來(lái)分組

Object.groupBy(studentsArray, ({ age }) => age > 10);

圖片

那么小于 10 的元素將是 false ，大于 10 的元素將是 true 。我們可以用更多的方式來(lái)完成我們的工作。

圖片

責(zé)任編輯：武曉燕來(lái)源：獨(dú)立開(kāi)發(fā)者張張

JavaScript 數(shù)組