Hello，大家好，我是 Sunday。27P28資訊網——每日最新資訊28at.com

ES 2024增加了很多 JS 的新特性， 在這篇文章中 我們也提到過幾個可能會大火的新方法。27P28資訊網——每日最新資訊28at.com

其中 Object.groupBy 是最受大家關注的新方法之一：27P28資訊網——每日最新資訊28at.com

Object.groupBy() 靜態方法根據提供的回調函數返回的字符串值對給定可迭代對象中的元素進行分組。返回的對象具有每個組的單獨屬性，其中包含組中的元素的數組。27P28資訊網——每日最新資訊28at.com

它的具體語法如下所示：27P28資訊網——每日最新資訊28at.com

Object.groupBy(items, callbackFn)// array：需要分組的數組。// callback：對數組中的每個元素執行的回調函數。回調函數返回一個值，用作分組的鍵。

而這樣方法在 Lodash 中也有過類似的實現，作用也與 Object.groupBy 類似（如果我們關注最近幾年的 ES 新增特性，會發現很多的新增特性都在社區庫中提前進行過實現）：27P28資訊網——每日最新資訊28at.com

圖片27P28資訊網——每日最新資訊28at.com

那么接下來就讓我們通過 5 個場景，深入看一下 Object.groupBy 這個方法，對我們以后的開發會有什么幫助！27P28資訊網——每日最新資訊28at.com

01：按單一條件分組

按照年齡為數據進行分組。27P28資訊網——每日最新資訊28at.com

const users = [  { name: '張三', age: 21 },  { name: '李四', age: 25 },  { name: '王五', age: 21 },  { name: '趙六', age: 28 } ] const groupedByAge = Object.groupBy(users, (user) => user.age) console.log(groupedByAge) /*  {    "21": [        {            "name": "張三",             "age": 21        },         {            "name": "王五",             "age": 21        }    ],     "25": [        {            "name": "李四",             "age": 25        }    ],     "28": [        {            "name": "趙六",             "age": 28        }    ]}  */

02：按多個條件分組

const users = [  { name: '張三', age: 21, gender: '男' },  { name: '李四', age: 25, gender: '女' },  { name: '王五', age: 21, gender: '女' },  { name: '趙六', age: 25, gender: '女' },  { name: '孫七', age: 30, gender: '女' },  { name: '周八', age: 21, gender: '男' }]const groupedByAgeAndGender = Object.groupBy(users, (user) => {  const ageGroup = user.age < 25 ? '25歲以下' : '25歲以上'  return `${ageGroup}-${user.gender}`})console.log(groupedByAgeAndGender)/*{"25歲以下-男": [  {    "name": "張三",    "age": 21,    "gender": "男"  },  {    "name": "周八",    "age": 21,    "gender": "男"  }],"25歲以上-女": [  {    "name": "李四",    "age": 25,    "gender": "女"  },  {    "name": "趙六",    "age": 25,    "gender": "女"  },  {    "name": "孫七",    "age": 30,    "gender": "女"  }],"25歲以下-女": [  {    "name": "王五",    "age": 21,    "gender": "女"  }]}  */

03：按復雜計算分組

根據指定的結果對數據進行分組處理。27P28資訊網——每日最新資訊28at.com

const students = [  { name: '張三', score: 85 },  { name: '李四', score: 92 },  { name: '王五', score: 70 },  { name: '趙六', score: 78 },  { name: '孫七', score: 88 }]const groupedByGrade = Object.groupBy(students, (student) => {  if (student.score >= 90) return 'A'  if (student.score >= 80) return 'B'  if (student.score >= 70) return 'C'  return 'D'})console.log(groupedByGrade)/*{"B": [  {    "name": "張三",    "score": 85  },  {    "name": "孫七",    "score": 88  }],"A": [  {    "name": "李四",    "score": 92  }],"C": [  {    "name": "王五",    "score": 70  },  {    "name": "趙六",    "score": 78  }]}  */

04：依賴另外的數據進行分組

假設我們有一個用戶數據數組，并且想要按用戶居住的城市對其進行分組，其中城市數據是從外部 API 獲取的。27P28資訊網——每日最新資訊28at.com

const users = [  { name: '張三', cityId: 1 },  { name: '李四', cityId: 2 },  { name: '王五', cityId: 1 },  { name: '趙六', cityId: 3 },  { name: '孫七', cityId: 2 }]// Simulate fetching city data from an external APIconst cityData = {  1: '北京',  2: '上海',  3: '深圳'}const groupedByCity = Object.groupBy(users, (user) => cityData[user.cityId])console.log(groupedByCity)/*{"北京": [  {    "name": "張三",    "cityId": 1  },  {    "name": "王五",    "cityId": 1  }],"上海": [  {    "name": "李四",    "cityId": 2  },  {    "name": "孫七",    "cityId": 2  }],"深圳": [  {    "name": "趙六",    "cityId": 3  }]}*/

05：按日期分組

根據日期進行數據劃分。27P28資訊網——每日最新資訊28at.com

const logs = [  { message: '時間1', date: '2024-01-01T10:00:00Z' },  { message: '時間2', date: '2024-01-01T12:00:00Z' },  { message: '時間3', date: '2024-01-02T10:00:00Z' },  { message: '時間4', date: '2024-01-02T14:00:00Z' },  { message: '時間5', date: '2024-01-03T10:00:00Z' }]const groupedByDate = Object.groupBy(  logs,  (log) => new Date(log.date).toISOString().split('T')[0])console.log(groupedByDate)/*{"2024-01-01": [  {    "message": "時間1",    "date": "2024-01-01T10:00:00Z"  },  {    "message": "時間2",    "date": "2024-01-01T12:00:00Z"  }],"2024-01-02": [  {    "message": "時間3",    "date": "2024-01-02T10:00:00Z"  },  {    "message": "時間4",    "date": "2024-01-02T14:00:00Z"  }],"2024-01-03": [  {    "message": "時間5",    "date": "2024-01-03T10:00:00Z"  }]}*/

總結

結合以上的 5 個場景，我們可以看出 Object.groupBy 主要用來處理 分組 相關的操作。預期對應的還有 Map.groupBy() 這個方法，他們的使用場景相差不大，這里就不去細說了。27P28資訊網——每日最新資訊28at.com

所以，有了 Object.groupBy 之后，一旦遇到 分組 相關的場景，那就是用它吧~27P28資訊網——每日最新資訊28at.com

本文鏈接：http://www.tebozhan.com/showinfo-26-103164-0.htmlLodash 的又一方法被替代了，探索 JS 新特性 Object.groupBy

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com

上一篇： 面試官：網頁太慢了怎么排查？

下一篇： 聊一聊 CSS 的十個技巧和竅門