影音體驗是真的強 簡單聊聊iQOO Pad
大公司的好處就是產品線豐富，非常細分化的東西也能給你做出來，例如早先我們看到了新的vivo Pad2，之后我們又在iQOO Neo8 Pro的發布會上看到了iQOO的首款平板產品iQOO Pad。雖
在JavaScript編程中，對數組進行分組是一項常見的任務。無論是根據特定屬性將對象分組，還是按照某些規則重新組織數組元素，分組操作在日常開發中都是常見的。過去，為了實現這一目標，通常需要編寫自定義的分組函數或者使用第三方庫，比如lodash的groupBy函數。然而，好消息是，JavaScript正逐漸引入原生的分組方法，使我們的開發工作更加便捷。在本文中，我們將探討JavaScript的新特性，即Object.groupBy和Map.groupBy，這兩個新特性將使數組分組操作更加容易。
假設現在有一個包含人員信息的數組，每個人都有姓名和年齡屬性，需求想要按照他們的年齡將他們分組。在以前的JavaScript中，可能需要編寫自定義的分組函數，或者使用forEach或reduce等方法，來實現分組操作。如下：
const people = [ { name: "Alice", age: 28 }, { name: "Bob", age: 30 }, { name: "Eve", age: 28 },];// 使用forEach進行分組const peopleByAge = {};people.forEach((person) => { const age = person.age; if (!peopleByAge[age]) { peopleByAge[age] = []; } peopleByAge[age].push(person);});// 使用reduce進行分組const peopleByAge = people.reduce((acc, person) => { const age = person.age; if (!acc[age]) { acc[age] = []; } acc[age].push(person); return acc;}, {});運行結果：
圖片
無論是使用forEach還是reduce，這些傳統方法都需要手動檢查分組鍵是否存在，如果不存在則創建一個空數組，然后將對象推入該數組中。上面的示例代碼相對繁瑣，可能需要不少工作量，尤其是在復雜的應用程序中。
下面就來Javascript即將支持的兩種新特性是如何實現上述需求的→
JavaScript新引入的Object.groupBy方法，使數據分組將變得更加簡單和高效。使用Object.groupBy，可以按照指定的屬性或規則將數組中的對象分組，而不需要手動管理分組過程。如下：
const people = [ { name: "Alice", age: 28 }, { name: "Bob", age: 30 }, { name: "Eve", age: 28 },];const peopleByAge = Object.groupBy(people, (person) => person.age);在控制臺運行代碼可以看到：
圖片
如上圖所示，使用Object.groupBy，只需提供一個回調函數，該回調函數將確定如何進行分組。在這種情況下，就可以按照人的年齡屬性進行分組，這是不是比傳統的手動分組方法要簡單得多。
然而，需要注意的是，Object.groupBy返回一個無原型的對象，這意味著它不會繼承Object.prototype上的任何屬性或方法。因此，不能像通常那樣使用hasOwnProperty等方法。此外，回調函數應返回一個字符串或符號，否則它將被強制轉換為字符串。
console.log(peopleByAge.hasOwnProperty("28"));
圖片
除了Object.groupBy，JavaScript還引入了Map.groupBy方法，該方法在執行分組操作時返回一個Map對象。與Object.groupBy相比，Map.groupBy提供了更多的靈活性，因為它允許返回任何類型的值，并且可以使用Map的各種方法來操作結果。如下：
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);運行結果：
圖片
在這個示例中，我們根據人員的上級進行分組。一個重要的注意點是，要從Map中檢索對象，必須使用相同的對象引用。如果傳遞的對象雖然內容相同但不是同一個對象，將無法從Map中檢索到結果。
peopleByManager.get(ceo); // 返回與ceo對象相關的人員peopleByManager.get({ name: "Jamie", age: 40, reportsTo: null }); // 返回undefined，因為這不是同一個對象
圖片
Map.groupBy的優勢在于，它返回一個Map對象，可以使用Map的方法來處理分組后的結果，這在某些場景下非常有用。
目前Object.groupBy和Map.groupBy是TC39提案的一部分，目前處于第3階段。這表明它們有望成為JavaScript標準的一部分。在實際應用中，Chrome 117已經支持這兩個方法，而Firefox Nightly則在實驗標志下實現了它們。Safari也已經實現了類似的方法，可以期待它們會在不久的將來更新以提供更好的支持。
上面示例代碼運行的瀏覽器版本是118.0.5993.89，故可以正確的打印出結果。
圖片
你可能會疑惑為什么這些分組方法被實現為Object.groupBy和Map.groupBy，而不是Array.prototype.groupBy。這是因為在過去，有一些庫曾經在Array.prototype上添加了不兼容的groupBy方法，這導致了一些兼容性問題，所以就沒有在Array.prototype上實現。
本文介紹了JavaScript中即將引入的Object.groupBy和Map.groupBy兩種原生分組方法的使用。這些兩種原生分組方法將填補JavaScript開發中的空白，使前端開發人員能夠更輕松地進行分組操作，提高了編程效率和代碼質量。希望本文能對你以后的工作有所幫助。
本文轉載自微信公眾號「黑土豆的前端博客 」，可以通過以下二維碼關注。轉載本文請聯系公眾號。
本文鏈接：http://www.www897cc.com/showinfo-26-16755-0.htmlJavascript支持數組分組(groupBy)的方法即將到來！
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯系：2376512515@qq.com 津ICP備18001702號
津公網安備 12010102000574號