著者はCOVID-19救済基金を選択し、 Write forDOnationsプログラムの一環として寄付を受け取りました。

序章

ECMAScript仕様の2015Edition 以降、配列およびオブジェクトを操作するための多くの新機能がJavaScript言語で利用できるようになりました。 この記事で学習する注目すべきもののいくつかは、 destructuring rest parameters 、およびSpread構文です。 これらの機能は、配列またはオブジェクトのメンバーにアクセスするためのより直接的な方法を提供し、これらのデータ構造をより迅速かつ簡潔に操作できるようにします。

他の多くの言語には、破棄、RESTパラメーター、およびスプレッドに対応する構文がないため、これらの機能には、新しいJavaScript開発者と別の言語からの開発者の両方にとって学習曲線がある可能性があります。 この記事では、オブジェクトと配列を分解する方法、spread演算子を使用してオブジェクトと配列を解凍する方法、および関数呼び出しでRESTパラメーターを使用する方法を学習します。

破壊

Destructuringassignment は、オブジェクトのプロパティまたは配列項目を変数として割り当てることができる構文です。 これにより、これらの構造体のデータを操作するために必要なコード行を大幅に減らすことができます。 破棄には、オブジェクトの破棄と配列の破棄の2つのタイプがあります。

オブジェクトの破壊

オブジェクトの破棄により、オブジェクトのプロパティを値として使用して、新しい変数を作成できます。

この例を考えてみましょう。idtitle、およびdateで音符を表すオブジェクトです。

const note = {
  id: 1,
  title: 'My first note',
  date: '01/01/1970',
}

従来、プロパティごとに新しい変数を作成する場合は、各変数を個別に割り当てる必要があり、多くの繰り返しがあります。

// Create variables from the Object properties
const id = note.id
const title = note.title
const date = note.date

オブジェクトの破棄を使用すると、これをすべて1行で実行できます。 各変数を中括弧{}で囲むことにより、JavaScriptは各プロパティから同じ名前の新しい変数を作成します。

// Destructure properties into variables
const { id, title, date } = note

ここで、 console.log()新しい変数:

console.log(id)
console.log(title)
console.log(date)

元のプロパティ値を出力として取得します。

Output
1 My first note 01/01/1970

注:オブジェクトを破棄しても、元のオブジェクトは変更されません。 すべてのエントリをそのままにして、元のnoteを呼び出すこともできます。

オブジェクト分解のデフォルトの割り当ては、オブジェクトプロパティと同じ名前の新しい変数を作成します。 新しい変数にプロパティ名と同じ名前を付けたくない場合は、[:)を使用して新しい変数の名前を変更し、[次のX198X]