ES 2023新特性速解

来源:https://www.cnblogs.com/observer-csh/archive/2023/09/18/17710468.html
-Advertisement-
Play Games

ES 2023新特性速解 一、新增數組方法 操作數組的方法 Array.prototype.toSorted(compareFn) //返回一個新數組,其中元素按升序排序,而不改變原始數組。 Array.prototype.toReversed() //返回一個新數組,該數組的元素順序被反轉,但不改 ...


ES 2023新特性速解

一、新增數組方法

操作數組的方法

Array.prototype.toSorted(compareFn)		//返回一個新數組,其中元素按升序排序,而不改變原始數組。
Array.prototype.toReversed()	//返回一個新數組,該數組的元素順序被反轉,但不改變原始數組。
Array.prototype.toSpliced(start,deleteCount,item1...,itemN)		//返回一個新數組,在給定索引處刪除和/或替換了一些元素,而不改變原始數組。

新增的這三個數組方法分別對標以下原有的以下三個方法,它們與原先方法的區別就是:執行它們並不會影響原先的數組

Array.prototype.sort(compareFn)		
Array.prototype.reverse()
Array.prototype.splice(start,deleteCount,item1...,itemN)

toSorted

compareFn:指定一個定義排序順序的函數。如果省略,則將數組元素轉換為字元串,然後根據每個字元的 Unicode 碼位值進行排序。

compareFn(a, b) 返回值 排序順序
> 0 ab後,如[b, a]
< 0 ab前,如[a, b]
=== 0 保持 ab 原來的順序
const arr = [5,7,8,61,24,32,42,35]
//不傳入參數
const sortArr1 = arr.toSorted()
//傳入箭頭函數 	a:比較的第一個元素,b:比較的第二個元素
const sortArr2 = arr.toSorted((a,b)=>a-b)

console.log(arr)			//[5, 7, 8, 61, 24, 32, 42, 35]
console.log(sortArr1)		//[24, 32, 35, 42, 5, 61, 7, 8]
console.log(sortArr2)		//[5, 7, 8, 24, 32, 35, 42, 61]

toReversed

const arr = [5,7,8,61,24,32,42,35]

const reverseArr = arr.toReversed()

console.log(arr)			//[5, 7, 8, 61, 24, 32, 42, 35]
console.log(reverseArr) 	//[35, 42, 32, 24, 61, 8, 7, 5]

toSpliced

start

從 0 開始計算的索引,表示要開始改變數組的位置,它會被轉換為整數

  • 如果 start < 0,則從數組末尾開始計數,使用 start + array.length
  • 如果 start < -array.length 或者省略了 start,則使用 0
  • 如果 start >= array.length,不會刪除任何元素,但該方法將表現為添加元素的函數,添加提供的所有元素。

deleteCount 可選

一個整數,指示數組中要從 start 刪除的元素數量。

如果 deleteCount 被省略了,或者如果它的值大於或等於由 start 指定的位置到數組末尾的元素數量,將會刪除從 start 到數組末尾的所有元素。但是,如果你想要傳遞任何 itemN 參數,則應向 deleteCount 傳遞 Infinity 值,以刪除 start 之後的所有元素,因為顯式的 undefined轉換0

如果 deleteCount0 或者負數,則不會刪除元素。在這種情況下,你應該指定至少一個新元素(見下文)。

item1, …, itemN 可選

元素將從 start 開始添加到數組當中。

如果你沒有指定任何元素,toSpliced() 只會從數組中刪除元素。

const arr = [5,7,8,61,24,32,42,35]
//插入元素
const insertArr = arr.toSpliced(0,0,7)
//刪除元素
const deleteArr = arr.toSpliced(0,1)

//替換元素
const replaceArr = arr.toSpliced(0,1,7)

console.log(arr)			//[5, 7, 8, 61, 24, 32, 42, 35]
console.log(insertArr) 		//[7, 5, 7, 8, 61, 24, 32, 42, 35]
console.log(deleteArr) 		//[7, 8, 61, 24, 32, 42, 35]
console.log(replaceArr) 	//[7, 7, 8, 61, 24, 32, 42, 35]

瀏覽器相容性

操作數組方法

查找數組元素的方法

Array.prototype.findLast(compareFn)		//方法反向迭代數組,並返回滿足提供的測試函數的第一個元素的值。如果沒有找到對應元素,則返回 undefined。
Array.prototype.findLastIndex()		//方法反向迭代數組,並返回滿足提供的測試函數的第一個元素的下標索引。如果沒有找到對應元素,則返回 undefined。

callbackFn

數組中測試元素的函數。回調應該返回一個真值,表示已找到匹配的元素,否則返回一個假值。函數在被調用時會傳遞以下參數:

  • element

    當前遍歷到的元素。

  • index

    當前遍歷到的元素的索引(位置)。

  • array

    調用 findLast() 的數組本身。

findLast

const arr = [5,7,8,61,24,32,42,35]

console.log(arr.findLast(a=>a === 5))

findLastIndex

const arr = [5,7,8,61,24,5,32,42,35]

console.log(arr.findIndex(a=>a === 5))	//0

console.log(arr.findLastIndex(a=>a === 5))	//5

瀏覽器相容性

數組查找方法

二、WeakMap支持鍵值類型新增

新增Sybmol類型來作為WeakMap的Key,助於對象被垃圾收集

const symbol= Symbol('foo')

const weakMap = new WeakMap()

weakMap.set(symbol,51)

weakMap.get(symbol) //51

瀏覽器相容性

symbol

symbol02

三、Hashbang 語法

Hashbang 註釋是一種特殊的註釋語法,其行為與單行註釋 (//) 完全一樣,只是它以 #! 開頭,並且只在腳本或模塊的最開始處有效。註意,#! 標誌之前不能有任何空白字元。註釋由 #! 之後的所有字元組成直到第一行的末尾;只允許有一條這樣的註釋。JavaScript 中的 hashbang 註釋類似於 Unix 中的 shebang,它提供了一個特定的 JavaScript 解釋器的路徑,用它來執行這個腳本。

// 寫在腳本文件第一行
#!/usr/bin/env node
'use strict';
console.log(1);


// 寫在模塊文件第一行
#!/usr/bin/env node
export {};
console.log(1);

這樣就可以直接運行腳本代碼了

# 以前執行腳本
node demo.js


# 有了 hashbang 之後執行腳本
./demo.js

只有當腳本直接在 shell 中運行時,Hashbang 語法才有語意意義,其他環境下 JavaScript 解釋器會把它視為普通註釋。

參考文檔地址:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/toSpliced


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • UUID(通用唯一識別碼)是由32個十六進位數組成的無序字元串,通過一定的演算法計算出來。為了保證其唯一性,UUID規範定義了包括網卡MAC地址、時間戳、名字空間(Namespace)、隨機或偽隨機數、時序等元素,以及從這些元素生成UUID的演算法。一般來說,演算法可以保證任何地方產生的任意一個UUID都... ...
  • Redis是游戲資料庫重要選型之一,華為雲GaussDB(for Redis)能及時上報用戶下線行為,被廣泛應用於排行榜等多種業務場景。 ...
  • Ubuntu20.04安裝Postgres主從備份 一.查看可安裝的Postgres包 #列出相關的軟體包,這裡安裝的是14版本 apt list | grep -w postgresql-14 | tail -1 #下載Postgres apt install -y postgresql-14/f ...
  • 基於OpenHarmony和華為雲平臺打造的智能家居設備,分別為智能門鎖,儲物精靈 NFC版,儲物精靈Pro版三個設備。 ...
  • 之前在 《iOS16新特性:靈動島適配開發與到家業務場景結合的探索實踐》 里介紹了iOS16新的特性:實時更新(Live Activity)中靈動島的適配流程,但其實除了靈動島的展示樣式,Live Activity還有一種非常實用的應用場景,那就是鎖屏界面實時狀態更新: ...
  • 前端遠程調試方案 Chii 的使用經驗分享 Chii 是與 weinre 一樣的遠程調試工具 ,主要是將 web inspector 替換為最新的 chrome devtools frontend 監控列表頁面可以看到網站的標題鏈接,IP,useragent,可以快速定位調試頁面,監控頁信息完善,支 ...
  • 這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 JavaScript 語言的內核足夠大,導致我們很容易誤解它的某些部分是如何工作的。我最近重構了一些使用 every ()方法的代碼,並且發現我並不真正理解every()的邏輯。在我看來,我認為回調函數必須被調用並返回 true的時候ev ...
  • 今天在維護優化公司中台項目時,發現路由的文件配置非常多非常亂,只要只中大型項目,都會進入很多的路由頁面,規範一點的公司還會吧路由進行模塊化導入,但是依然存在很多文件夾的和手動導入的問題。 於是我想到了我之前使用vuex時進行的模塊化自動導入js文件,能不能使用到自動導入.vue文件中去,答案是可以! ...
一周排行
    -Advertisement-
    Play Games
  • 前言 插件化的需求主要源於對軟體架構靈活性的追求,特別是在開發大型、複雜或需要不斷更新的軟體系統時,插件化可以提高軟體系統的可擴展性、可定製性、隔離性、安全性、可維護性、模塊化、易於升級和更新以及支持第三方開發等方面的能力,從而滿足不斷變化的業務需求和技術挑戰。 一、插件化探索 在WPF中我們想要開 ...
  • 歡迎ReaLTaiizor是一個用戶友好的、以設計為中心的.NET WinForms項目控制項庫,包含廣泛的組件。您可以使用不同的主題選項對項目進行個性化設置,並自定義用戶控制項,以使您的應用程式更加專業。 項目地址:https://github.com/Taiizor/ReaLTaiizor 步驟1: ...
  • EDP是一套集組織架構,許可權框架【功能許可權,操作許可權,數據訪問許可權,WebApi許可權】,自動化日誌,動態Interface,WebApi管理等基礎功能於一體的,基於.net的企業應用開發框架。通過友好的編碼方式實現數據行、列許可權的管控。 ...
  • Channel 是乾什麼的 The System.Threading.Channels namespace provides a set of synchronization data structures for passing data between producers and consume ...
  • efcore如何優雅的實現按年分庫按月分表 介紹 本文ShardinfCore版本 本期主角: ShardingCore 一款ef-core下高性能、輕量級針對分表分庫讀寫分離的解決方案,具有零依賴、零學習成本、零業務代碼入侵適配 距離上次發文.net相關的已經有很久了,期間一直在從事java相關的 ...
  • 前言 Spacesniffer 是一個免費的文件掃描工具,通過使用樹狀圖可視化佈局,可以立即瞭解大文件夾的位置,幫助用戶處理找到這些文件夾 當前系統C盤空間 清理後系統C盤空間 下載 Spacesniffer 下載地址:https://spacesniffer.en.softonic.com/dow ...
  • EDP是一套集組織架構,許可權框架【功能許可權,操作許可權,數據訪問許可權,WebApi許可權】,自動化日誌,動態Interface,WebApi管理等基礎功能於一體的,基於.net的企業應用開發框架。通過友好的編碼方式實現數據行、列許可權的管控。 ...
  • 一、ReZero簡介 ReZero是一款.NET中間件 : 全網唯一開源界面操作就能生成API , 可以集成到任何.NET6+ API項目,無破壞性,也可讓非.NET用戶使用exe文件 免費開源:MIT最寬鬆協議 , 一直從事開源事業十年,一直堅持開源 1.1 純ReZero開發 適合.Net Co ...
  • 一:背景 1. 講故事 停了一個月沒有更新文章了,主要是忙於寫 C#內功修煉系列的PPT,現在基本上接近尾聲,可以回頭繼續更新這段時間分析dump的一些事故報告,有朋友微信上找到我,說他們的系統出現了大量的http超時,程式不響應處理了,讓我幫忙看下怎麼回事,dump也抓到了。 二:WinDbg分析 ...
  • 開始做項目管理了(本人3年java,來到這邊之後真沒想到...),天天開會溝通整理需求,他們講話的時候忙裡偷閑整理一下常用的方法,其實語言還是有共通性的,基本上看到方法名就大概能猜出來用法。出去打水的時候看到外面太陽好好,真想在外面坐著曬太陽,回來的時候好兄弟三年前送給我的鍵盤D鍵不靈了,在打"等待 ...