【Use Destructuring Assignment to Assign Variables from Arrays】フリーコードキャンプを日本語で解説!

フリーコードキャンプ

おいーす、もりたけです。

フリーコードキャンプを日本語で解説!の第123弾です。

JavaScript Algorithms and Data Structures Certification (300 hours)の中の、

Introduction to the ES6 Challengesの中の、

Use Destructuring Assignment to Assign Variables from Arrays

です。

さっそく見ていきましょう。

まずは本文から。

ES6 makes destructuring arrays as easy as destructuring objects.

One key difference between the spread operator and array destructuring is that the spread operator unpacks all contents of an array into a comma-separated list. Consequently, you cannot pick or choose which elements you want to assign to variables.Destructuring an array lets us do exactly that:

const [a, b] = [1, 2, 3, 4, 5, 6];
console.log(a, b); // 1, 2

The variable a is assigned the first value of the array, and b is assigned the second value of the array. We can also access the value at any index in an array with destructuring by using commas to reach the desired index:

const [a, b,,, c] = [1, 2, 3, 4, 5, 6];
console.log(a, b, c); // 1, 2, 5

Use destructuring assignment to swap the values of a and b so that a receives the value stored in b, and b receives the value stored in a.


 

解説していきます。

今回はスプレッド演算子と構造化配列の違いについてです。

スプレッド演算子は配列の全ての内容をコンマ区切りのリストい展開してしまいます。したがって、変数に割り当てる要素を選択または選択することはできません。

 

構造化配列を使えばそれが可能になります。

const [a, b] = [1, 2, 3, 4, 5, 6];
console.log(a, b); // 1, 2

このように配列のそれぞれの位置に変数を割り当てることができました。

コンマを使うことで配列内の任意のインデックスの値にアクセスできます。

const [a, b,,, c] = [1, 2, 3, 4, 5, 6];
console.log(a, b, c); // 1, 2, 5

 

では課題を見てみましょう。

構造化割り当てを使ってaとbの値を入れ替えろという内容ですね。

例のように配列を使っていっぺんに値を変更してあげれば入れ替えることができそうです。

すでにaとbの値は宣言されているので上書きするだけで大丈夫なことに注意しましょう。

 

答えはこうです。

let a = 8, b = 6;
// Only change code below this line
 [a , b] = [b, a];

 

ということで今回は構造化にできてスプレッド演算子にはできない事について学びました。

では次回!

タイトルとURLをコピーしました