你知道 0 ?? 1等於多少嗎？
大家好，我是 LBJ，今天我們聊聊2022一些值得掌握的新特性!
現在前端發展很快，各種技術和框架層出不窮、百花齊放，很多人都喊學不動啦！事實上JavaScript 作為前端的主要語言，雖然它的發展很快，每年都會出一些新特性，但視乎 JavaScript 開發者的發展速度更快一些，因為很多相對較新的功能都已經有很高的採用率
下面來看看那些具有較高採用率的新特性，2022你應該了解的10個 JS 小技巧
正文1. 用??代替||，用於判斷運算符左側的值為null或undefined時，才返回右側的值??運算符是 ES2020 引入，也被稱為null判斷運算符( Nullish coalescing operator)
它的行為類似||，但是更嚴
||運算符是左邊是空字符串或false或0等「falsy值」，都會返回後側的值。而??必須運算符左側的值為null或undefined時，才會返回右側的值。因此0||1的結果為1，0??1的結果為0
例如
constresponse={settings:{nullValue:null,height:400,animationDuration:0,headerText:'',showSplashScreen:false}};constundefinedValue=response.settings.undefinedValue??'someotherdefault';//result:'someotherdefault'constnullValue=response.settings.nullValue??'someotherdefault';//result:'someotherdefault'constheaderText=response.settings.headerText??'Hello,world!';//result:''constanimationDuration=response.settings.animationDuration??300;//result:0constshowSplashScreen=response.settings.showSplashScreen??true;//result:false瀏覽器支持情況
image.png2. 使用?.簡化&&和三元運算符?.也是ES2020 引入，有人稱為鏈判斷運算符（optional chaining operator）
?.直接在鏈式調用的時候判斷，判斷左側的對象是否為null或undefined，如果是的，就不再往下運算，返回undefined，如果不是，則返回右側的值
例如
varstreet=user.address&&user.address.street;varfooInput=myForm.querySelector('input[name=foo]')varfooValue=fooInput?fooInput.value:undefined//簡化varstreet=user.address?.streetvarfooValue=myForm.querySelector('input[name=foo]')?.value註：常見寫法
瀏覽器支持情況
image.png3. 使用動態導入import()實現按需加載（優化靜態import）我們可以使用 import 語句初始化的加載依賴項
importdefaultExportfrom"module-name";import*asnamefrom"module-name";//...但是靜態引入的import 語句需要依賴於 type="module" 的script標籤，而且有的時候我們希望可以根據條件來按需加載模塊，比如以下場景：
這個時候我們就可以使用動態引入import()，它跟函數一樣可以用於各種地方，返回的是一個 promise
基本使用如下兩種形式
//形式1import('/modules/my-module.js').then((module)=>{//Dosomethingwiththemodule.});//形式2letmodule=awaitimport('/modules/my-module.js');瀏覽器支持情況
image.png4. 使用頂層 await（top-level await）簡化 async 函數其實上面的代碼就有用到
letmodule=awaitimport('/modules/my-module.js');頂層 await 允許開發者在 async 函數外部使用 await 字段
因此
//以前(asyncfunction(){awaitPromise.resolve(console.log('🎉'));//→🎉})();//簡化後awaitPromise.resolve(console.log('🎉'));瀏覽器支持情況
image.png5. 使用String.prototype.replaceAll()簡化replace一次性替換所有子字符串String.prototype.replaceAll()用法與String.prototype.replace()類似
但是replace僅替換第一次出現的子字符串，而replaceAll會替換所有
例如需要替換所有a為A：
//以前console.log('aaa'.replace(/a/g,'A'))//AAA//簡化後console.log('aaa'.replaceAll('a','A'))//AAA瀏覽器支持情況
image.png6. 使用Proxy替代Object.defineProperty為什麼使用 Proxy 替代 Object.defineProperty，簡單總結Proxy的幾點優勢
使用也很簡單，Proxy本質是構造函數，通過new即可產生對象，它接收兩個參數：
例如響應式reactive的基本實現：
functionreactive(obj){returnnewProxy(obj,{get(target,key){//可以做依賴收集track(target,key)returntarget[key]},set(target,key,val){target[key]=val//觸發依賴trigger(target,key)}})}瀏覽器支持情況
image.png7. Promise.any快速獲取一組Promise實例中第一個fulfilled的promisePromise.any 接收一組Promise實例作為參數
寫法推薦
try{constfirst=awaitPromise.any(promises);//Anyofthepromiseswasfulfilled.}catch(error){//Allofthepromiseswererejected.}或者
Promise.any(promises).then((first)=>{//Anyofthepromiseswasfulfilled.},(error)=>{//Allofthepromiseswererejected.});瀏覽器支持情況
image.png8. 使用BigInt支持大整數計算問題ES2020[1] 引入了一種新的數據類型 BigInt，用來表示任意位數的整數
例如
//超過53個二進制位的數值（相當於16個十進制位），無法保持精度Math.pow(2,53)===Math.pow(2,53)+1//true//BigIntBigInt(Math.pow(2,53))===BigInt(Math.pow(2,53))+BigInt(1)//false除了使用BigInt來聲明一個大整數，還可以使用數字後面加n的形式，如
1234//普通整數1234n//BigInt需要了解BigInt數字操作時的支持情況，以免踩坑
瀏覽器支持情況
image.png9. 使用Array.prototype.at()簡化arr.lengthArray.prototype.at()接收一個正整數或者負整數作為參數，表示獲取指定位置的成員
參數正數就表示順數第幾個，負數表示倒數第幾個，這可以很方便的某個數組末尾的元素
例如
vararr=[1,2,3,4,5]//以前獲取最後一位console.log(arr[arr.length-1])//5//簡化後console.log(arr.at(-1))//510. 使用哈希前綴#將類字段設為私有在類中通過哈希前綴#標記的字段都將被私有，子類實例將無法繼承
例如
classClassWithPrivateField{#privateField;#privateMethod(){return'helloworld';}constructor(){this.#privateField=42;}}constinstance=newClassWithPrivateField()console.log(instance.privateField);//undefinedconsole.log(instance.privateMethod);//undefined可以看到，屬性privateField和方法privateMethod都被私有化了，在實例中無法獲取到
結語很多新特性都有很多人在用了，特別是??和?.以及動態引入import()，不知道你都用過哪些？
好了，以上就是本文的相關內容，如有問題歡迎指出~🤞
來源：https://juejin.cn/post/7072274726940311588
https://github.com/tc39/proposal-bigint: https://link.juejin.cn/?target=https%3A%2F%2Fgithub.com%2Ftc39%2Fproposal-bigint
留言列表