JavaScript スプレッド構文と分割代入

JavaScript備忘録 Vol.6

目次

• スプレッド構文
• 分割代入
• forEach( )

今回もJavaScriptの記事になっています。

スプレッド構文

2つの配列があったとします。

const price1 = [500, 600];
const prices = [100, 200, 300, 400];

例えば、price1の要素をpricesの配列に格納したいとします。

その場合

const price1 = [500, 600];
const prices = [100, 200, 300, 400, price1];


console.log(prices);

とすると結果は

このように配列の中に配列が入るような形になってしまいます。

ここでスプレッド構文を用いることで要素のみを配列に追加することができます。

スプレッド構文は...配列名とします。

今回の場合は

const price1 = [500, 600];
const prices = [100, 200, 300, 400, ...price1];


console.log(prices);

とすることで、pricesにprice1の要素のみを追加することができます。

また、スプレッド構文は関数の引数としても使用される場合があります。

const numbers = [100, 200, 300];

function sum(a, b, c){
  console.log(a + b + c)
}

例えば上記のような配列と関数があったとしましょう。

3つの引数のトータルを出力する関数ですね

const numbers = [100, 200, 300];

function sum(a, b, c){
  console.log(a + b + c)
}

sum(...numbers);

このように関数を呼び出す際に

関数名(スプレッド構文);

としてあげます。

結果はこうですね。

覚えておくと何かと便利かなと思います。

分割代入

const prices = [100, 200, 300, 400];

このような配列の定数があるとします。

分割代入を使うとこの値を別の定数に代入することができます。

どういうことかというと

const prices = [100, 200, 300, 400];

const [a, b, c, d] = prices;
console.log(a);
console.log(b);
console.log(c);
console.log(d);

このようにすることで

a,b,c,dにpricesの値を順番に代入してくれます。

また、定数に入れたいのが頭から2つ目までで、残りの2つは配列のままにしておきたいとします。

その時には

const prices = [100, 200, 300, 400];

const [a, b, ...others] = prices;
console.log(a);
console.log(b);
console.log(others);

とすることで実現することができます。

そしてここが分割代入の一番のキモかなと思うのですが

分割代入では値の変換をすることができます。

どういうことかというと

let x = 1;
let y = 2;

という2つの変数があり、この値を入れ替えたいとします。

その場合、分割代入を用いて

let x = 1;
let y = 2;

[x, y] = [y, x];

console.log(x);
console.log(y);

と書いてあげると

このようにxとyの値が入れ替わります。

forEach( )

以前にfor文を用いて繰り返し処理を行う方法を紹介しましたが、

forEach( )を使用することでもう少し簡単に処理を書くことができます。

まずはforEach( )の書き方ですが

定数.forEach((引数) =>{ //関数
  //処理
});

のような書き方で実装することができます。

引数の名前は何でもいいのですが、単数形を書くことが多いんですかね？そんな風に感じます。

これで要素が無くなるまで繰り返し処理を行ってくれます。

では例文を見ていきましょう。

const prices = [100, 200, 300, 400];

prices.forEach((price) => {
  console.log(price)
});

結果は

こんな感じで出力されます。

さらにこれにインデックス番号も表示させたいとしましょう。

その場合には引数をもう一つ追加してあげれば実現することができます。

const prices = [100, 200, 300, 400];

prices.forEach((price, index) => {
  console.log(｀インデックス番号${index}: 要素の値${price}｀)
});

結果はこうですね

for文と違って範囲の指定時に要素の数を気にしなければならないということもないので、便利ですかね。

マークダウン内のテンプレートリテラルのバッククォートは全角になっていますのでコピペの際には半角に直してください。

今回はここまで

次回は・・・まだまだJS！

それではまた次回！