Hello，大家好，我是 Sunday。h8e28資訊網(wǎng)——每日最新資訊28at.com

ES 2024增加了很多 JS 的新特性， 在這篇文章中 我們也提到過幾個(gè)可能會(huì)大火的新方法。h8e28資訊網(wǎng)——每日最新資訊28at.com

其中 Object.groupBy 是最受大家關(guān)注的新方法之一：h8e28資訊網(wǎng)——每日最新資訊28at.com

Object.groupBy() 靜態(tài)方法根據(jù)提供的回調(diào)函數(shù)返回的字符串值對(duì)給定可迭代對(duì)象中的元素進(jìn)行分組。返回的對(duì)象具有每個(gè)組的單獨(dú)屬性，其中包含組中的元素的數(shù)組。h8e28資訊網(wǎng)——每日最新資訊28at.com

它的具體語法如下所示：h8e28資訊網(wǎng)——每日最新資訊28at.com

Object.groupBy(items, callbackFn)// array：需要分組的數(shù)組。// callback：對(duì)數(shù)組中的每個(gè)元素執(zhí)行的回調(diào)函數(shù)。回調(diào)函數(shù)返回一個(gè)值，用作分組的鍵。

而這樣方法在 Lodash 中也有過類似的實(shí)現(xiàn)，作用也與 Object.groupBy 類似（如果我們關(guān)注最近幾年的 ES 新增特性，會(huì)發(fā)現(xiàn)很多的新增特性都在社區(qū)庫中提前進(jìn)行過實(shí)現(xiàn)）：h8e28資訊網(wǎng)——每日最新資訊28at.com

圖片h8e28資訊網(wǎng)——每日最新資訊28at.com

那么接下來就讓我們通過 5 個(gè)場(chǎng)景，深入看一下 Object.groupBy 這個(gè)方法，對(duì)我們以后的開發(fā)會(huì)有什么幫助！h8e28資訊網(wǎng)——每日最新資訊28at.com

01：按單一條件分組

按照年齡為數(shù)據(jù)進(jìn)行分組。h8e28資訊網(wǎng)——每日最新資訊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：按多個(gè)條件分組

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：按復(fù)雜計(jì)算分組

根據(jù)指定的結(jié)果對(duì)數(shù)據(jù)進(jìn)行分組處理。h8e28資訊網(wǎng)——每日最新資訊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：依賴另外的數(shù)據(jù)進(jìn)行分組

假設(shè)我們有一個(gè)用戶數(shù)據(jù)數(shù)組，并且想要按用戶居住的城市對(duì)其進(jìn)行分組，其中城市數(shù)據(jù)是從外部 API 獲取的。h8e28資訊網(wǎng)——每日最新資訊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：按日期分組

根據(jù)日期進(jìn)行數(shù)據(jù)劃分。h8e28資訊網(wǎng)——每日最新資訊28at.com

const logs = [  { message: '時(shí)間1', date: '2024-01-01T10:00:00Z' },  { message: '時(shí)間2', date: '2024-01-01T12:00:00Z' },  { message: '時(shí)間3', date: '2024-01-02T10:00:00Z' },  { message: '時(shí)間4', date: '2024-01-02T14:00:00Z' },  { message: '時(shí)間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": "時(shí)間1",    "date": "2024-01-01T10:00:00Z"  },  {    "message": "時(shí)間2",    "date": "2024-01-01T12:00:00Z"  }],"2024-01-02": [  {    "message": "時(shí)間3",    "date": "2024-01-02T10:00:00Z"  },  {    "message": "時(shí)間4",    "date": "2024-01-02T14:00:00Z"  }],"2024-01-03": [  {    "message": "時(shí)間5",    "date": "2024-01-03T10:00:00Z"  }]}*/

總結(jié)

結(jié)合以上的 5 個(gè)場(chǎng)景，我們可以看出 Object.groupBy 主要用來處理 分組 相關(guān)的操作。預(yù)期對(duì)應(yīng)的還有 Map.groupBy() 這個(gè)方法，他們的使用場(chǎng)景相差不大，這里就不去細(xì)說了。h8e28資訊網(wǎng)——每日最新資訊28at.com

所以，有了 Object.groupBy 之后，一旦遇到 分組 相關(guān)的場(chǎng)景，那就是用它吧~h8e28資訊網(wǎng)——每日最新資訊28at.com

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

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com

上一篇： 面試官：網(wǎng)頁太慢了怎么排查？

下一篇： 聊一聊 CSS 的十個(gè)技巧和竅門