JavaScriptでのDestructuring、RESTパラメーター、およびSpread構文の理解

序章

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

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

破壊

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

オブジェクトの破壊

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

この例を考えてみましょう。 id, title、 と 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

オブジェクト分解のデフォルトの割り当ては、オブジェクトプロパティと同じ名前の新しい変数を作成します。 新しい変数にプロパティ名と同じ名前を付けたくない場合は、コロンを使用して新しい変数の名前を変更することもできます（:）で見られるように、新しい名前を決定する noteId 以下では：

// Assign a custom name to a destructured value
const { id: noteId, title, date } = note

新しい変数をログに記録します noteId コンソールへ：

console.log(noteId)

次の出力が表示されます。

Output
1

ネストされたオブジェクトの値を分解することもできます。 たとえば、 note ネストされたオブジェクト author 物体：

const note = {
  id: 1,
  title: 'My first note',
  date: '01/01/1970',
  author: {
    firstName: 'Sherlock',
    lastName: 'Holmes',
  },
}

今、あなたは解体することができます note、次にもう一度構造を解除して、から変数を作成します。 author プロパティ：

// Destructure nested properties
const {
  id,
  title,
  date,
  author: { firstName, lastName },
} = note

次に、新しい変数をログに記録します firstName と lastName テンプレートリテラルの使用：

console.log(`${firstName} ${lastName}`)

これにより、次の出力が得られます。

Output
Sherlock Holmes

この例では、コンテンツにアクセスできますが、 author オブジェクト、 author オブジェクト自体にはアクセスできません。 オブジェクトとそのネストされた値にアクセスするには、それらを個別に宣言する必要があります。

// Access object and nested values
const {
  author,
  author: { firstName, lastName },
} = note

console.log(author)

このコードは author 物体：

Output
{firstName: "Sherlock", lastName: "Holmes"}

オブジェクトを破棄することは、作成する必要のあるコードの量を減らすのに役立つだけではありません。 また、関心のあるプロパティへのアクセスをターゲットにすることもできます。

最後に、デストラクチャリングを使用して、プリミティブ値のオブジェクトプロパティにアクセスできます。 たとえば、 String は文字列のグローバルオブジェクトであり、 length 財産：

const { length } = 'A string'

これにより、文字列の固有の長さプロパティが検出され、 length 変数。 ログ length これが機能したかどうかを確認するには：

console.log(length)

次の出力が得られます。

Output
8

文字列 A string ここでオブジェクトに暗黙的に変換され、 length 財産。

アレイの破壊

配列の破棄により、配列項目を値として使用して新しい変数を作成できます。 この例を考えてみましょう。日付のさまざまな部分を含む配列です。

const date = ['1970', '12', '01']

JavaScriptの配列はその順序を保持することが保証されているため、この場合、最初のインデックスは常に年になり、2番目は月になります。 これを知っていると、配列内のアイテムから変数を作成できます。

// Create variables from the Array items
const year = date[0]
const month = date[1]
const day = date[2]

ただし、これを手動で行うと、コード内で多くのスペースを占める可能性があります。 配列の破棄を使用すると、次のように、配列から値を順番に解凍して、独自の変数に割り当てることができます。

// Destructure Array values into variables
const [year, month, day] = date

次に、新しい変数をログに記録します。

console.log(year)
console.log(month)
console.log(day)

次の出力が得られます。

Output
1970
12
01

破壊構文をコンマの間に空白のままにすると、値をスキップできます。

// Skip the second item in the array
const [year, , day] = date

console.log(year)
console.log(day)

これを実行すると、 year と day:

Output
1970
01

ネストされたアレイは、構造を解除することもできます。 まず、ネストされた配列を作成します。

// Create a nested array
const nestedArray = [1, 2, [3, 4], 5]

次に、その配列を分解し、新しい変数をログに記録します。

// Destructure nested items
const [one, two, [three, four], five] = nestedArray

console.log(one, two, three, four, five)

次の出力が表示されます。

Output
1 2 3 4 5

関数のパラメーターを非構造化するために、非構造化構文を適用できます。 これをテストするには、構造を解除します keys と values Object.entries（）から。

まず、宣言します note 物体：

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

このオブジェクトを指定すると、 forEach（）メソッドに渡される引数を破棄することで、キーと値のペアを一覧表示できます。

// Using forEach
Object.entries(note).forEach(([key, value]) => {
  console.log(`${key}: ${value}`)
})

または、forループを使用して同じことを実行できます。

// Using a for loop
for (let [key, value] of Object.entries(note)) {
  console.log(`${key}: ${value}`)
}

いずれにせよ、あなたは以下を受け取ります：

Output
id: 1
title: My first note
date: 01/01/1970

オブジェクトの破棄と配列の破棄は、単一の破棄の割り当てに組み合わせることができます。 デフォルトパラメータは、デフォルトの日付を new Date（）に設定するこの例に示すように、デストラクチャリングで使用することもできます。

まず、宣言します note 物体：

const note = {
  title: 'My first note',
  author: {
    firstName: 'Sherlock',
    lastName: 'Holmes',
  },
  tags: ['personal', 'writing', 'investigations'],
}

次に、オブジェクトを分解し、同時に新しいを設定します date デフォルトの変数 new Date():

const {
  title,
  date = new Date(),
  author: { firstName },
  tags: [personalTag, writingTag],
} = note

console.log(date)

console.log(date) 次に、次のような出力が得られます。

Output
Fri May 08 2020 23:53:49 GMT-0500 (Central Daylight Time)

このセクションに示されているように、非構造化割り当て構文はJavaScriptに多くの柔軟性を追加し、より簡潔なコードを記述できるようにします。 次のセクションでは、spread構文を使用してデータ構造を構成データエントリに拡張する方法を説明します。

広める

Spread 構文（...）は、配列、オブジェクト、および関数呼び出しを操作するためのJavaScriptへのもう1つの便利な追加機能です。 Spreadを使用すると、オブジェクトと反復可能オブジェクト（配列など）を解凍または展開できます。これを使用して、データ構造の浅いコピーを作成し、データ操作を容易にすることができます。

配列で拡散

Spreadを使用すると、配列を使用した一般的なタスクを簡素化できます。 たとえば、2つの配列があり、それらを結合したいとします。

// Create an Array
const tools = ['hammer', 'screwdriver']
const otherTools = ['wrench', 'saw']

元々、 concat（）を使用して2つの配列を連結していました。

// Concatenate tools and otherTools together
const allTools = tools.concat(otherTools)

これで、spreadを使用して、配列を新しい配列に解凍することもできます。

// Unpack the tools Array into the allTools Array
const allTools = [...tools, ...otherTools]

console.log(allTools)

これを実行すると、次のようになります。

Output
["hammer", "screwdriver", "wrench", "saw"]

これは、不変性の場合に特に役立ちます。 たとえば、次のようなアプリを使用している可能性があります users オブジェクトの配列に格納されます：

// Array of users
const users = [
  { id: 1, name: 'Ben' },
  { id: 2, name: 'Leslie' },
]

あなたが使うことができます push 既存のアレイを変更し、新しいユーザーを追加します。これは変更可能なオプションです。

// A new user to be added
const newUser = { id: 3, name: 'Ron' }

users.push(newUser)

しかし、これは user 配列。保存したい場合があります。

Spreadを使用すると、既存の配列から新しい配列を作成し、最後に新しい項目を追加できます。

const updatedUsers = [...users, newUser]

console.log(users)
console.log(updatedUsers)

今度は新しいアレイ、 updatedUsers、新しいユーザーがいますが、元のユーザー users 配列は変更されません：

Output
[{id: 1, name: "Ben"}
 {id: 2, name: "Leslie"}]

[{id: 1, name: "Ben"}
 {id: 2, name: "Leslie"}
 {id: 3, name: "Ron"}]

既存のデータを変更する代わりにデータのコピーを作成すると、予期しない変更を防ぐのに役立ちます。 JavaScriptでは、オブジェクトまたは配列を作成して別の変数に割り当てる場合、実際には新しいオブジェクトを作成するのではなく、参照を渡します。

この例では、配列が作成され、別の変数に割り当てられます。

// Create an Array
const originalArray = ['one', 'two', 'three']

// Assign Array to another variable
const secondArray = originalArray

2番目の配列の最後の項目を削除すると、最初の項目が変更されます。

// Remove the last item of the second Array
secondArray.pop()

console.log(originalArray)

これにより、次の出力が得られます。

Output
["one", "two"]

Spreadを使用すると、配列またはオブジェクトの浅いコピーを作成できます。つまり、最上位のプロパティは複製されますが、ネストされたオブジェクトは引き続き参照によって渡されます。 単純な配列またはオブジェクトの場合、必要なのは浅いコピーだけです。

同じサンプルコードを記述しても、spreadを使用して配列をコピーすると、元の配列は変更されなくなります。

// Create an Array
const originalArray = ['one', 'two', 'three']

// Use spread to make a shallow copy
const secondArray = [...originalArray]

// Remove the last item of the second Array
secondArray.pop()

console.log(originalArray)

以下がコンソールに記録されます。

Output
["one", "two", "three"]

Spreadを使用して、setまたはその他のiterableを配列に変換することもできます。

新しいセットを作成し、それにいくつかのエントリを追加します。

// Create a set
const set = new Set()

set.add('octopus')
set.add('starfish')
set.add('whale')

次に、スプレッド演算子を使用します set 結果をログに記録します。

// Convert Set to Array
const seaCreatures = [...set]

console.log(seaCreatures)

これにより、次のようになります。

Output
["octopus", "starfish", "whale"]

これは、文字列から配列を作成する場合にも役立ちます。

const string = 'hello'

const stringArray = [...string]

console.log(stringArray)

これにより、各文字が配列内のアイテムとして配列されます。

Output
["h", "e", "l", "l", "o"]

オブジェクトで広がる

オブジェクトを操作する場合、spreadを使用してオブジェクトをコピーおよび更新できます。

元々、 Object.assign（）はオブジェクトのコピーに使用されていました。

// Create an Object and a copied Object with Object.assign()
const originalObject = { enabled: true, darkMode: false }
const secondObject = Object.assign({}, originalObject)

The secondObject これで、のクローンになります originalObject.

これは、スプレッド構文で簡略化されています。オブジェクトを新しいオブジェクトにスプレッドすることで、オブジェクトを浅くコピーできます。

// Create an object and a copied object with spread
const originalObject = { enabled: true, darkMode: false }
const secondObject = { ...originalObject }

console.log(secondObject)

これにより、次のようになります。

Output
{enabled: true, darkMode: false}

配列の場合と同様に、これは浅いコピーのみを作成し、ネストされたオブジェクトは引き続き参照によって渡されます。

不変の方法で既存のオブジェクトのプロパティを追加または変更することは、スプレッドによって単純化されます。 この例では、 isLoggedIn プロパティがに追加されます user 物体：

const user = {
  id: 3,
  name: 'Ron',
}

const updatedUser = { ...user, isLoggedIn: true }

console.log(updatedUser)

これにより、次のように出力されます。

Output
{id: 3, name: "Ron", isLoggedIn: true}

Spreadを介してオブジェクトを更新する際に注意すべき重要な点の1つは、ネストされたオブジェクトも同様に拡散する必要があるということです。 たとえば、 user ネストされたオブジェクトがあります organization 物体：

const user = {
  id: 3,
  name: 'Ron',
  organization: {
    name: 'Parks & Recreation',
    city: 'Pawnee',
  },
}

新しいアイテムを追加しようとした場合 organization、既存のフィールドを上書きします。

const updatedUser = { ...user, organization: { position: 'Director' } }

console.log(updatedUser)

これにより、次のようになります。

Output
id: 3
name: "Ron"
organization: {position: "Director"}

可変性が問題にならない場合は、フィールドを直接更新できます。

user.organization.position = 'Director'

しかし、不変のソリューションを探しているので、既存のプロパティを保持するために内部オブジェクトを広げることができます。

const updatedUser = {
  ...user,
  organization: {
    ...user.organization,
    position: 'Director',
  },
}

console.log(updatedUser)

これにより、次のようになります。

Output
id: 3
name: "Ron"
organization: {name: "Parks & Recreation", city: "Pawnee", position: "Director"}

関数呼び出しで拡散

Spreadは、関数呼び出しの引数とともに使用することもできます。

例として、ここに multiply 3つのパラメーターを受け取り、それらを乗算する関数：

// Create a function to multiply three items
function multiply(a, b, c) {
  return a * b * c
}

通常、次のように、関数呼び出しへの引数として3つの値を個別に渡します。

multiply(1, 2, 3)

これにより、次のようになります。

Output
6

ただし、関数に渡したいすべての値がすでに配列に存在する場合、spread構文を使用すると、配列内の各項目を引数として使用できます。

const numbers = [1, 2, 3]

multiply(...numbers)

これにより、同じ結果が得られます。

Output
6

multiply.apply(null, [1, 2, 3])

Output
6

Spreadによってコードがどのように短縮されるかを確認したので、次のさまざまな使用法を見てみましょう。 ... 構文：RESTパラメーター。

残りのパラメーター

この記事で学習する最後の機能は、restパラメーター構文です。 構文はspreadと同じように見えます（...）ただし、逆の効果があります。 配列またはオブジェクトを個々の値に解凍する代わりに、残りの構文は不定の数の引数の配列を作成します。

関数内 restTest たとえば、必要に応じて args 不定の数の引数で構成される配列であるためには、次のようになります。

function restTest(...args) {
  console.log(args)
}

restTest(1, 2, 3, 4, 5, 6)

に渡されるすべての引数 restTest 関数がで利用可能になりました args 配列：

Output
[1, 2, 3, 4, 5, 6]

Rest構文は、唯一のパラメーターとして、またはリストの最後のパラメーターとして使用できます。 唯一のパラメーターとして使用された場合、すべての引数が収集されますが、リストの最後にある場合は、次の例に示すように、残っているすべての引数が収集されます。

function restTest(one, two, ...args) {
  console.log(one)
  console.log(two)
  console.log(args)
}

restTest(1, 2, 3, 4, 5, 6)

これにより、最初の2つの引数が個別に取得され、残りが配列にグループ化されます。

Output
1
2
[3, 4, 5, 6]

古いコードでは、 arguments 変数を使用して、関数に渡されるすべての引数を収集できます。

function testArguments() {
  console.log(arguments)
}

testArguments('how', 'many', 'arguments')

これにより、次の出力が得られます。

[secondary_label Output]1
Arguments(3) ["how", "many", "arguments"]

ただし、これにはいくつかの欠点があります。 まず、 arguments 変数は矢印関数では使用できません。

const testArguments = () => {
  console.log(arguments)
}

testArguments('how', 'many', 'arguments')

これにより、エラーが発生します。

Output
Uncaught ReferenceError: arguments is not defined

さらに、 arguments は真の配列ではなく、最初に配列に変換せずにmapやfilterなどのメソッドを使用することはできません。 また、次のように、残りの引数だけでなく、渡されたすべての引数を収集します。 restTest(one, two, ...args) 例。

残りは、配列を破棄するときにも使用できます。

const [firstTool, ...rest] = ['hammer', 'screwdriver', 'wrench']

console.log(firstTool)
console.log(rest)

これにより、次のようになります。

Output
hammer
["screwdriver", "wrench"]

残りは、オブジェクトを破棄するときにも使用できます。

const { isLoggedIn, ...rest } = { id: 1, name: 'Ben', isLoggedIn: true }

console.log(isLoggedIn)
console.log(rest)

次の出力を提供します。

Output
true
{id: 1, name: "Ben"}

このように、REST構文は、不確定な量のアイテムを収集するための効率的な方法を提供します。

結論

この記事では、デストラクチャリング、スプレッド構文、およびRESTパラメーターについて学習しました。 要約すれば：

• 破棄は、配列アイテムまたはオブジェクトプロパティから変数を作成するために使用されます。
• Spread構文は、配列、オブジェクト、関数呼び出しなどの反復可能オブジェクトを解凍するために使用されます。
• Restパラメーター構文は、不定の数の値から配列を作成します。

破棄、RESTパラメーター、およびスプレッド構文は、コードを簡潔かつクリーンに保つのに役立つJavaScriptの便利な機能です。

破壊の実際を確認したい場合は、 Propsを使用してReactコンポーネントをカスタマイズする方法を参照してください。この構文を使用してデータを分解し、カスタムフロントエンドコンポーネントに渡します。 JavaScriptの詳細については、JavaScriptシリーズのコーディング方法に戻ってください。