AVt天堂网 手机版,亚洲va久久久噜噜噜久久4399,天天综合亚洲色在线精品,亚洲一级Av无码毛片久久精品

當前位置:首頁 > 科技  > 軟件

JavaScript 終于原生支持數組分組了!

來源: 責編: 時間:2023-09-21 20:48:14 256觀看
導讀以前的數組分組假設有一個由表示人員的對象組成的數組,需要按照年齡進行分組。可以使用forEach循環來實現,代碼如下:const people = [ { name: "Alice", age: 28 }, { name: "Bob", age: 30 }, { name: "Eve", age: 2

Cdy28資訊網——每日最新資訊28at.com

以前的數組分組

假設有一個由表示人員的對象組成的數組,需要按照年齡進行分組。可以使用forEach循環來實現,代碼如下:Cdy28資訊網——每日最新資訊28at.com

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

輸出結果如下:Cdy28資訊網——每日最新資訊28at.com

{  "28": [{"name":"Alice","age":28}, {"name":"Eve","age":28}],  "30": [{"name":"Bob","age":30}]}

也可以使用reduce方法:Cdy28資訊網——每日最新資訊28at.com

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

無論哪種方式,代碼都略顯繁瑣。每次都要檢查對象,看分組鍵是否存在,如果不存在,則創建一個空數組,并將項目添加到該數組中。Cdy28資訊網——每日最新資訊28at.com

使用 Object.groupBy 分組

可以通過以下方式來使用新的Object.groupBy方法:Cdy28資訊網——每日最新資訊28at.com

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

可以看到,代碼非常簡潔!Cdy28資訊網——每日最新資訊28at.com

不過需要注意,使用Object.groupBy方法返回一個沒有原型(即沒有繼承任何屬性和方法)的對象。這意味著該對象不會繼承Object.prototype上的任何屬性或方法,例如hasOwnProperty或toString等。雖然這樣做可以避免意外覆蓋Object.prototype上的屬性,但也意味著不能使用一些與對象相關的方法。Cdy28資訊網——每日最新資訊28at.com

const peopleByAge = Object.groupBy(people, (person) => person.age);console.log(peopleByAge.hasOwnProperty("28"));// TypeError: peopleByAge.hasOwnProperty is not a function

在調用Object.groupBy時,傳遞給它的回調函數應該返回一個字符串或 Symbol 類型的值。如果回調函數返回其他類型的值,它將被強制轉換為字符串。Cdy28資訊網——每日最新資訊28at.com

在這個例子中,回調函數返回的是一個數字類型的age屬性值,但由于Object.groupBy方法要求鍵必須是字符串或 Symbol 類型,所以該數字會被強制轉換為字符串類型。Cdy28資訊網——每日最新資訊28at.com

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.groupBy和Object.groupBy幾乎做的是相同的事情,只是返回的結果類型不同。Map.groupBy返回一個Map對象,而不是像Object.groupBy返回一個普通的對象。Cdy28資訊網——每日最新資訊28at.com

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在比較鍵時使用的是嚴格相等(===),只有兩個對象具有相同的引用,才能被認為是相同的鍵。Cdy28資訊網——每日最新資訊28at.com

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

在上面的例子中,如果嘗試使用與ceo對象類似的對象作為鍵去訪問Map中的項,由于這個對象與之前存儲在Map中的ceo對象不是同一個對象,所以無法檢索到對應的值。Cdy28資訊網——每日最新資訊28at.com

瀏覽器支持

這兩個groupBy方法是 proposal-array-grouping 提案提出的,該提案目前處于第3階段,預計會在 2024 年成為正式標準。Cdy28資訊網——每日最新資訊28at.com

9 月 12 日,Chrome 117發布,該版本支持了這兩個方法。Firefox Nightly 在一個標志后已經實現了這兩個方法。Safari已經以不同的名稱實現了這些方法。由于這些方法在 Chrome 中可用,這意味著它們已經在V8中被實現,所以下一次V8更新時它們將在Node中可用。Cdy28資訊網——每日最新資訊28at.com

Cdy28資訊網——每日最新資訊28at.com

Cdy28資訊網——每日最新資訊28at.com

為什么要使用靜態方法?

你可能會想,為什么這個功能被實現為Object.groupBy而不是Array.prototype.groupBy。根據提案,有一個庫曾經用不兼容的groupBy方法對Array.prototype進行了修改。在考慮為Web新增API時,向后兼容性非常重要。幾年前,在嘗試實現Array.prototype.flatten時就出現了一個稱為SmooshGate的事件。Cdy28資訊網——每日最新資訊28at.com

使用靜態方法實際上對未來的可擴展性更好。當Records和Tuples提案實現時,可以添加一個Record.groupBy方法,用于將數組分組為不可變記錄。Cdy28資訊網——每日最新資訊28at.com

簡而言之,使用靜態方法可以更好地保持向后兼容性,并提供更好的擴展性,以便在未來添加更多功能和數據結構。Cdy28資訊網——每日最新資訊28at.com

JavaScript 正在填補這些空白,并使我們的開發更簡單。目前,lodash.groupBy每周的 npm 下載量在 150 萬至 200 萬次之間,當所有瀏覽器都支持該方法之后,就不再需要引入lodash.groupBy 庫了!Cdy28資訊網——每日最新資訊28at.com

Cdy28資訊網——每日最新資訊28at.com

本文鏈接:http://www.tebozhan.com/showinfo-26-10900-0.htmlJavaScript 終于原生支持數組分組了!

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

上一篇: 前后端分離項目必備——自動生成API文檔神器Swagger

下一篇: OpenAI一夜顛覆AI繪畫!DALL·E 3+ChatGPT強強聯合,畫面直接細節爆炸

標簽:
  • 熱門焦點
  • 俄羅斯:將審查iPhone等外國公司設備 保數據安全

    iPhone和特斯拉都屬于在各自領域領頭羊的品牌,推出的產品也也都是數一數二的,但對于一些國家而言,它們的產品可靠性和安全性還是在限制范圍內。近日,俄羅斯聯邦通信、信息技術
  • 2023年Q2用戶偏好榜:12+256G版本成新主流

    3月份的性能榜、性價比榜和好評榜之后,就要輪到2023年的第二季度偏好榜了,上半年的新機潮已經過去,最明顯的肯定就是大內存和存儲的機型了,另外部分中端機也取消了屏幕塑料支架
  • 6月安卓手機好評榜:魅族20 Pro蟬聯冠軍

    性能榜和性價比榜之后,我們來看最后的安卓手機好評榜,數據來源安兔兔評測,收集時間2023年6月1日至6月30日,僅限國內市場。第一名:魅族20 Pro好評率:95%5月份的時候魅族20 Pro就是
  • 一加首款折疊屏!一加Open渲染圖出爐:罕見單手可握小尺寸

    8月5日消息,此前就有爆料稱,一加首款折疊屏手機將會在第三季度上市,如今隨著時間臨近,新機的各種消息也開始浮出水面。據悉,這款新機將會被命名為“On
  • CSS單標簽實現轉轉logo

    轉轉品牌升級后更新了全新的Logo,今天我們用純CSS來實現轉轉的新Logo,為了有一定的挑戰性,這里我們只使用一個標簽實現,將最大化的使用CSS能力完成Logo的繪制與動畫效果。新logo
  • 自動化在DevOps中的力量:簡化軟件開發和交付

    自動化在DevOps中扮演著重要角色,它提升了DevOps的效能。通過自動化工具和方法,DevOps團隊可以實現以下目標:消除手動和重復性任務。簡化流程。在整個軟件開發生命周期中實現更
  • 一個注解實現接口冪等,這樣才優雅!

    場景碼猿慢病云管理系統中其實高并發的場景不是很多,沒有必要每個接口都去考慮并發高的場景,比如添加住院患者的這個接口,具體的業務代碼就不貼了,業務偽代碼如下:圖片上述代碼有
  • 一條抖音4億人圍觀 ! 這家MCN比無憂傳媒還野

    作者:Hiu 來源:互聯網品牌官01 擦邊少女空降熱搜,幕后推手曝光被網友譽為“純欲天花板”的女網紅井川里予,近期因為一組哥特風照片登上熱搜,引發了一場互聯網世界關于
  • 引領旗艦級影像能力向中端機普及 OPPO K11 系列發布 1799 元起

    7月25日,OPPO正式發布K系列新品—— OPPO K11 。此次 K11 在中端手機市場長期被忽視的影像板塊發力,突破性地搭載索尼 IMX890 旗艦大底主攝,支持 OIS
Top