ES 2020のこれらの新機能が期待されます.

7215 ワード

葡萄城公式サイトでは、葡萄城は開発者のために専門的な開発ツール、解決策とサービスを提供して、開発者になります.
原文の出所:https://blog.bitsrc.io/es2020-has-been-finalized-here-is-what-im-excited-about-414959bc2f7f

ここ数年、JavaScriptと先端領域の持続的な発展に伴い、特に2015年ES 6のリリース後、この発展のプロセスはますます速くなってきました.多くの新しい機能もES 2020バージョンに含まれる予定です.
この間、私たちはES 2020について基本的に決まった機能リストを得ました.この機能リストのほとんどはES 2020の新バージョンリリースリストに表示されます.この中の機能の一部は開発者として、これらの機能がリリースされる前に、コーディング時に問題があったら自分で解決してほしいと期待されています.これらの機能はなんですか?

オプションリンク
個人的には、ES 2020の最も期待される機能の一つだと思います.この機能は、各属性が存在するかどうかを確認することなく、対象の深層ネスティング属性に安全にアクセスできるようにします.さて、Talk is chep.Show me the codeは、実際にコードレベルで何か変化があるかを見てみましょう.
オプションのリンクを使用する前のコード:

const user = {
   firstName:"Joseph",
   lastName:"Kuruvilla",
   age:38,
   address:{
      number:"239",
      street:"Ludwig Lane",
      city:"Chennai",
      zip:"600028",
   prop1:{
    prop2:{
     prop3:{
      prop4:{
       value:'sample'
      }
     }
    }
   }
   }
}

 

if(user && user.address){
 console.log(user.address.zip); //600028
}
 
if(user && user.address && user.address.prop1 && user.address.prop1.prop2 && user.address.prop1.prop2.prop3 && user.address.prop1.prop2.prop3.prop4){
 console.log(user.address.prop1.prop2.prop3.prop4.value);
}

//        
console.log(user.address.prop102.po);
//Error

　　
上記のように、アクセス属性の前に、訪問層の属性が存在するかどうかを確認して、Canot read property'po'of undefinedエラーが発生しないようにしてください.ネストレベルの増加に伴い、手動で確認する属性の数も増加します.これは、一度抜かしたら、プログラムにundefinedまたはnullオブジェクトのエラーが発生し、アプリケーションに問題が発生するという意味です.
オプションのリンク機能が現れたら
オプションのリンク機能が現れると、私たちの仕事は比較的楽になります.オプションのリンク演算子を使うことで、深さのネストされたオブジェクトにアクセスできます.未定義またはnullオブジェクトを確認する必要はありません.
どのように使うかを見てみましょう.

const user = {
   firstName:"Joseph",
   lastName:"Kuruvilla",
   age:38,
   address:{
      number:"239",
      street:"Ludwig Lane",
      city:"Chennai",
      zip:"600028",
   prop1:{
prop2:{
     prop3:{
      prop4:{
       value:'sample'
      }
     }
    }
   }
   }
}console.log(user?.address?.zip);
//600028
console.log(user?.address?.prop1?.prop2?.prop3?.prop4?.value);
//sample
//Accessing unexisting property
console.log(user?.address?.prop102?.po);
//undefined

　　
ES 2020は一つの導入を通じて?オペレータはコードをたくさん減らすことに成功しました.

空の値結合(Nullish Coalescing)
この機能を初めて聞いた時は、もう一つの期待できる機能だと思います.大量に手動で実現することを繰り返していたので、このような機能が現れることを期待していました.
Nullish値はfalsey値ではなくnullish値を確認します.nullish値はnullまたはundefinedを指し、falsey値は空の文字列、数字0、undefined、null、false、NaN、等値です.この二つの値はあまり変わらないように見えますが、実は大きな違いがあります.
値が空に結合される前に
私は最近プロジェクトをしていますが、その中で暗夜モードの切り替え機能を増やす必要があります.入力がtrueかfalseかを確認しなければなりません.ユーザーが設定していない場合、デフォルトはtrueです.以下はどのようにして空の値を結合する前にコードを実現しますか?

const darkModePreference1 = true
const darkModePreference2 = false
const darkModePreference3 = undefined
const darkModePreference4 = null
 
const getUserDarkModePreference = (darkModePreference) => {
  if (darkModePreference || darkModePreference === false) {
    return darkModePreference
  }
  return true
}
 
getUserDarkModePreference(darkModePreference1)
// true
 
getUserDarkModePreference(darkModePreference2)
// false
 
getUserDarkModePreference(darkModePreference3)
// true
 
getUserDarkModePreference(darkModePreference4)
// true

　　
空の値をマージして表示された後
空の値を使って合併したら、あなたがするのは使うのですか?オペレータ.if文は不要です.

const darkModePreference1 = true
const darkModePreference2 = false
const darkModePreference3 = undefined
const darkModePreference4 = null
 
const getUserDarkModePreference = (darkModePreference) => {
  return darkModePreference ?? true;
}
getUserDarkModePreference(darkModePreference1)
// true
 
getUserDarkModePreference(darkModePreference2)
// false
 
getUserDarkModePreference(darkModePreference3)
// true
 
getUserDarkModePreference(darkModePreference4)
// true

ここのロジックは、変数dark ModePreferenceが空の値を含むなら、trueを与えて、この特性のコードを使うと分かりやすいです.

動的インポート
この機能は、より効率的にあなたのアプリケーションを実行するのに役立ちます.動的導入により、リアルタイムでアプリケーションにモジュール形式でJSファイルを必要に応じて導入することができます.ES 2020の前に、モジュールが使用されているかどうかにかかわらず、事前に導入するべきです.
例えば、機能を追加して、pdf形式のファイルをダウンロードする必要があると仮定します.
動的導入前とその後はどうやって実現するかを見てみましょう.
動的導入前
実際のプロジェクトでは、pdfをダウンロードする機能はすべてのサイトのゲストには使用されません.しかし、私たちの訪問者がそれを使うかどうかにかかわらず、導入する必要があります.これは、このpdfモジュールもページローディング時にロードされることを意味する.

import { exportAsPdf } from './export-as-pdf.js'

const exportPdfButton = document.querySelector('.exportPdfBtn');
exportPdfButton.addEventListener('click', exportAsPdf);

　　
このオーバーヘッドは、遅延ローディングモジュールを使用することによって減少することができる.コード分離(code-spliting)によって実現できます.コード分離は既にwebpackまたは他のモジュールパッキングツールによって実現できます.
しかし、ES 2020では、この機能を原生で実現し、モジュールパッキングツールなどの他の方法で出費を減らす必要がなくなりました.
動的導入後

const exportPdfButton = document.querySelector('.exportPdfBtn');

exportPdfButton.addEventListener('click', () => { 
     import('./export-as-pdf.js')
.then(module => {
      module.exportAsPdf()
    })
    .catch(err => {
      // handle the error if the module fails to load
    })
})

　　
上のコードで見たように、アプリケーションのオーバーヘッドとページローディング時間を減らすために、必要に応じてモジュールをロードすることができます.

Promise.all Settled
もしあなたがこのようなシーンを持っているなら、一旦すべてのプロミセが完成したら、タスクを実行しなければなりません.プロミセ.allを使用します.この方法には欠点がある.どのプロミセも断られると、一つのミスを投げかけます.これはあなたのコードがあなたのすべてのプロミスが完了するまで待つことはないということです.
これはあなたが望むものではないかもしれません.もしあなたの需要がそれらの結果に関心がないならば、それらを全部運行するだけで、新しいPromise.allSettled()の方法を使うことができます.この方法はあなたのすべてのプロミセが実行された後にのみ呼び出されます.
promise.allを使う

const PromiseArray = [
    Promise.resolve(100),
    Promise.reject(null),
    Promise.resolve("Data release"),
    Promise.reject(new Error('Something went wrong'))];
 
Promise.all(PromiseArray)
  .then(data => console.log('all resolved! here are the resolve values:', data))
  .catch(err => console.log('got rejected! reason:', err))
 
//got rejected! reason: null

　　
上のコードのように、プロミセが失敗するとエラーが発生します.
promise.all Settledを使う

const PromiseArray = [
    Promise.resolve(100),
    Promise.reject(null),
    Promise.resolve("Data release"),
    Promise.reject(new Error('Something went wrong'))];
 
Promise.allSettled(PromiseArray).then(res =>{
console.log(res);
}).catch(err => console.log(err));
 
//[
//{status: "fulfilled", value: 100},
//{status: "rejected", reason: null},
//{status: "fulfilled", value: "Data release"},
//{status: "rejected", reason: Error: Something went wrong ...}
//]

　　
プロミセが拒否されても、プロミセ.allSettledはすべてのプロミスが実行された後、結果を返します.

他にも期待できる機能
Big Int
Javascriptで許可されている最大値より大きい数字を使うことを許可します.この数字はpow(2,53)-1です.しかし、これは後方互換ではなく、従来の浮動小数点基準(IEEE 754)はこの大きさの数字をサポートしていないためである.
String.matchAll
match All()は正規表現と関連する方法である.これは、正規表現にマッチするすべての結果と、グループ獲得グループを含むディズエ代数を返します.この方法はStringプロトタイプに追加された.
global This
グローバルオブジェクトに対する参照であり、環境には関係ありません.ブラウザでは、全体のオブジェクトはwindowオブジェクトです.Node環境では、グローバルオブジェクトはグローバルオブジェクトであり、ウェブワーカーではselfである.

締め括りをつける
本文の中にはいくつかの機能があります.個人的な角度で整理しました.もしどの機能が欠けていたら、あるいは理解が間違っているところがありますか?

関数のスコープを詳しく説明する