すべての新しいES2019のヒントとトリック

ES2019は、ECMAScript標準にいくつかの新機能をもたらします。これらの機能は、node.js、Chrome、Firefox、およびSafariで公式に利用できます。古いブラウザをサポートするために、Babelを使用してこれらの機能をJavaScriptのさまざまなバージョンにコンパイルすることもできます。

何が利用可能か見てみましょう！

Object.fromEntriesメソッド

ES2017は、オブジェクトを配列表現に変換するObject.entriesメソッドを導入します。例えば：

学生と= {
  アメリア：20、
  ベアトリス：22、
  CECE：20、
  Deirdre：19、
  Eloise：21
}

Object.entries（学生） 
// [
// ['アメリア'、20]、
// ['Beatrice'、22]、
// ['cece'、20]、
// ['Deirdre'、19]、
// ['Eloise'、21]
//]

これは、オブジェクトがmap 、 filter 、 reduceなどの配列プロトタイプに組み込まれた多くの関数を使用できるようにするため、非常に便利です。ただし、結果をオブジェクトに戻すには、比較的退屈なプロセスが必要です。

学生と= {
  アメリア：20、
  ベアトリス：22、
  CECE：20、
  Deirdre：19、
  Eloise：21
}

//配列に変換して.filter（）関数を使用します。
  戻り年齢> = 21
}）// [['Beatrice'、22]、['eloise'、21]]]

//多次元配列をオブジェクトに戻すdrinkingageStudents = {}
for
    DrinkingAgeStudents [name] = age;
}
// {Beatrice：22、Eloise：21}

Object.fromEntriesメソッドは、このループを排除するように設計されています！オブジェクトでアレイプロトタイプメソッドを使用できるようにするためのクリーンなコードを提供します。

学生と= {
  アメリア：20、
  ベアトリス：22、
  CECE：20、
  Deirdre：19、
  Eloise：21
}

//配列に変換して.filter（）関数を使用します。
  戻り年齢> = 21
}）// [['Beatrice'、22]、['eloise'、21]]]

//多次元配列をオブジェクトに戻しますdripingageStudents = object.fromentries（overtwentyone）; 
// {Beatrice：22、Eloise：21}

配列とオブジェクトは異なるデータ構造であり、2つの間の変換がデータの損失につながる可能性があることに注意する必要があります。次の例は、配列要素がどのように重複するオブジェクトキーになるかを示しています。

学生と= [
  ['アメリア'、22]、 
  ['Beatrice'、22]、 
  ['eloise'、21]、 
  ['Beatrice'、20]
]

let dustentobj = object.fromentries（desustor）; 
// {Amelia：22、Beatrice：20、Eloise：21}
//最初のベアトリスは破棄されました！

これらの機能を使用する場合、潜在的な副作用に注意してください。

Object.fromEntriesメソッドサポート状況

クロム	Firefox	サファリ	角
75	67	12.1	サポートされていません

Array.prototype.flatメソッド

多次元配列は、特にデータを取得する場合、非常に一般的なデータ構造です。多次元配列を平らにする機能が必要です。以前に行われたかもしれませんが、この方法はエレガントではありません。

map関数が平らにする必要がある多次元配列を返す例を見てみましょう。

 letコース= [
  {
    件名：「数学」、
    numberofStudents：3、
    waitlistStudents：2、
    学生：['Janet'、 'Martha'、 'Bob'、['Phil'、 'C​​andace']]]
  }、
  {
    件名：「英語」、
    numberofStudents：2、
    学生：[「ウィルソン」、「テイラー」]
  }、
  {
    件名：「歴史」、
    numberofStudents：4、
    学生：['Edith'、 'Jacob'、 'Peter'、 'Betty']
  }
]

let courseStudents = courses.map（course => course.students）
// [
// ['Janet'、 'Martha'、 'Bob'、['Phil'、 'C​​andace']]、
// ['Wilson'、 'Taylor']、
// ['Edith'、 'Jacob'、 'Peter'、 'Betty']]
//]

[] .concat.apply（[]、courseStudents）//この方法を使用する必要があります

Array.prototype.flatメソッドが生まれました。オプションの深さパラメーターを受け入れます。

 CourseStudents = [
  ['ジャネット'、「マーサ」、「ボブ」、['Phil'、 'C​​andace']]、
  [「ウィルソン」、「テイラー」]、
  [「エディス」、「ジェイコブ」、「ピーター」、「ベティ」]
]

flattenonelevel = courseStudents.flat（1）
console.log（flattenonelevevel）
// [
//「ジャネット」、
//「マーサ」、
//「ボブ」、
// ['Phil'、 'C​​andace']、
//「ウィルソン」、
//「テイラー」、
//「エディス」、
//「ジェイコブ」、
//「ピーター」、
//「ベティ」
//]

flattentwolevels = courseStudents.flat（2）
console.log（flattentwolevels）
// [
//「ジャネット」、「マーサ」、
//「ボブ」、「フィル」、
//「キャンディス」、「ウィルソン」、
//「テイラー」、「エディス」、
//「ジェイコブ」、「ピーター」、
//「ベティ」
//]

パラメーターが指定されていない場合、デフォルトの深さは1です。これは非常に重要です。この例では、これはアレイを完全に平らにしないためです。

 CourseStudents = [
  ['ジャネット'、「マーサ」、「ボブ」、['Phil'、 'C​​andace']]、
  [「ウィルソン」、「テイラー」]、
  [「エディス」、「ジェイコブ」、「ピーター」、「ベティ」]
]

defaultflattened = courseStudents.flat（）と
console.log（defaultflattened）
// [
//「ジャネット」、
//「マーサ」、
//「ボブ」、
// ['Phil'、 'C​​andace']、
//「ウィルソン」、
//「テイラー」、
//「エディス」、
//「ジェイコブ」、
//「ピーター」、
//「ベティ」
//]

この設計の理由は、機能がデフォルトでは貪欲ではなく、この方法で実行するために明示的な指示が必要であるためです。 Infinity 、深さが不明であり、アレイを完全に平らにする意図がある場合のパラメーターとして使用できます。

 CourseStudents = [
  ['ジャネット'、「マーサ」、「ボブ」、['Phil'、 'C​​andace']]、
  [「ウィルソン」、「テイラー」]、
  [「エディス」、「ジェイコブ」、「ピーター」、「ベティ」]
]

AlwaysFlattened = courseStudents.flat（infinity）
console.log（常にフラット化）
// [
//「ジャネット」、「マーサ」、
//「ボブ」、「フィル」、
//「キャンディス」、「ウィルソン」、
//「テイラー」、「エディス」、
//「ジェイコブ」、「ピーター」、
//「ベティ」
//]

いつものように、貪欲な操作は注意して使用する必要があり、配列の深さが実際に不明な場合、貪欲な操作は良い選択ではないかもしれません。

Array.prototype.flatメソッドサポート状況

クロム	Firefox	サファリ	角
75	67	12	サポートされていません

Chrome Android	Firefox Android	iOSサファリ	つまり、モバイル	サムスンインターネット	Android WebView
75	67	12.1	サポートされていません	サポートされていません	67

Array.prototype.flatMapメソッド

flatメソッドを追加すると、combined function Array.prototype.flatMapも取得します。上記の例で実際にそれが機能するものを見てきましたが、もう1つ見てみましょう。

要素を配列に挿入したい場合、ES2019がこれらの機能を追加する前にどのように見えますか？

等級= [78、62、80、64]

curved = grades.map（grade => [grade、grade 7]）
// [[78、85]、[62、69]、[80、87]、[64、71]]

フラットマップ= [] .concat.apply（[]、curved）//はフラットに使用できますが、// [前に存在しませんでした。
// 78、85、62、69、
// 80、87、64、71
//]

Array.prototype.flatができたので、この例を少し改善できます。

等級= [78、62、80、64]

フラットマップ= grades.map（grade => [grade、grade 7]）。flat（）
// [
// 78、85、62、69、
// 80、87、64、71
//]

ただし、特に機能的なプログラミングでは、これは依然として比較的人気のあるパターンです。したがって、アレイプロトタイプに組み込まれるのは素晴らしいことです。 flatMapを使用して、これを行うことができます：

等級= [78、62、80、64]

フラットマップ= grades.flatmap（grade => [grade、grade 7]）;
// [
// 78、85、62、69、
// 80、87、64、71
//]

Array.prototype.flatのデフォルトのパラメーターは1です。 flatMap 、パラメーターなしでmapとflatを組み合わせることに相当します。したがって、 flatMap 1つのレイヤーのみを平らにします。

等級= [78、62、80、64]

フラットマップ= grades.flatmap（grade => [grade、[grade 7]]）を;
// [
// 78、[85]、
// 62、[69]、
// 80、[87]、
// 64、[71]
//]

Array.prototype.flatMapメソッドサポート状況

クロム	Firefox	サファリ	角
75	67	12	サポートされていません

Chrome Android	Firefox Android	iOSサファリ	つまり、モバイル	サムスンインターネット	Android WebView
75	67	12.1	サポートされていません	サポートされていません	67

String.trimStartおよびString.trimEndメソッド

ES2019へのもう1つの素晴らしい追加はエイリアスです。これにより、いくつかの文字列関数名がより明確になります。以前は、 String.trimRightとString.trimLeft利用可能でした。

メッセージ=「CS 101へようこそ」
message.trimright（）
//「CS 101へようこそ」
message.trimleft（）
//「CS 101へようこそ」
message.trimright（）。trimleft（）
//「CS 101へようこそ」

これらは素晴らしい機能ですが、目的に合った名前を彼らに与えることも役立ちます。開始スペースとエンドスペースを削除します。

メッセージ=「CS 101へようこそ」
message.trimend（）
//「CS 101へようこそ」
message.trimstart（）
//「CS 101へようこそ」
message.trimend（）。trimstart（）
//「CS 101へようこそ」

String.trimStartとString.trimEndメソッドは状況をサポートします

クロム	Firefox	サファリ	角
75	67	12	サポートされていません

オプションのcatchバインディング

ES2019のもう1つの優れた機能はtry-catchブロックのパラメーターをオプションにすることです。以前は、すべてのcatchブロックが例外をパラメーターとして渡しました。これは、 catchブロック内のコードがそれを無視しても、それがまだ存在することを意味します。

試す {
  parsed = json.parse（obj）と
} catch（e）{
  // eを無視するか、console.log（obj）を使用します
}

これはもうそうではありません。 catchブロックで例外が使用されていない場合、何も必要ありません。

試す {
  parsed = json.parse（obj）と
} catch {
  console.log（obj）
}

これは、エラーが何であるかをすでに知っていて、それをトリガーするデータを探している場合に適したオプションです。

オプションのcatchバインディングのサポート

クロム	Firefox	サファリ	角
75	67	12	サポートされていません

Function.toString()メソッドの変更

ES2019はFunction.toString()メソッドの実行方法も変更しました。以前は、スペースを完全に削除していました。

関数グリーティング（）{
  const name = 'CSSトリック'
  console.log（ `hello $ {name}`）
}

Greeting.toString（）
// 'function greeting（）{\ nconst name = \' css tricks \ '\ nconsole.log（ `hello $ {name} //`）\ n}'

これで、ソースコードの関数の真の表現を反映しています。

関数グリーティング（）{
  const name = 'CSSトリック'
  console.log（ `hello $ {name}`）
}

Greeting.toString（）
// '関数Greeting（）{\ n'  
// "const name = 'cssトリック' \ n"  
// 'console.log（ `hello from $ {name}`）\ n'  
// '}'

これは主に内部の変化ですが、これが将来ブロガーまたは2人の人生を楽にするかもしれないと考えるのは仕方がありません。

Function.toString()メソッドのサポート

クロム	Firefox	サファリ	角
75	60	12 - 部分的なサポート	17 - 部分的なサポート

これがES2019の主な新機能です！

また、次のような他の新機能を探索することもできます。

• シンボルの説明
• ソートの安定性
• JSONのスーパーセットとしてのECMAScript
• JSON.stringify

幸せなJavaScriptプログラミングを！

以上がすべての新しいES2019のヒントとトリックの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。