ちょっと息抜きjavascript

おはようございます。

只今職場でのもくもく会なうなのですが、今日はES6のjavascriptについてしっかり学び直そうと思い勉強しておりますどうもハヤトワンです。φ(..)

もくもく会終わりに、なにを勉強したかをシェアする機会があるので、どうせアウトプットするならブログに書いておこうということで今書いております。

スプレッド構文について

このスプレッド構文という書き方について学んだことをまとめてみようと思います。

そもそもこの「スプレッド構文」とは一体どんなものなのか。

MDNによると

”スプレッド構文 (...) を使うと、配列式や文字列などの反復可能オブジェクトを、0 個以上の引数 (関数呼び出しの場合) や要素 (配列リテラルの場合) を期待された場所で展開したり、オブジェクト式を、0 個以上のキーと値のペア (オブジェクトリテラルの場合) を期待された場所で展開したりすることができます。”

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax

んー、分かるような分からんような。。。笑

配列の展開

サンプルを見てみます。

まず普通に配列をコンソールで見てみると

const arr = [1, 2, 3];
console.log(arr);

コンソール

(3) [1, 2, 3]
0: 1
1: 2
2: 3
length: 3
__proto__: Array(0)

こんな感じに出力される。

これをスプレッド構文使うと、

const arr = [1, 2, 3];
console.log(...arr);

コンソール

1 2 3

このように出力される。

こういうのを「配列の展開」と表現するみたい。

順番に処理する

こういう配列と関数があるとする。

const numFunc = function (num1, num2, num3) {
  return console.log(num1 + num2 + num3);
};
numFunc(arr[1], arr[2], arr[3]);

コンソール

6

※ちなみにアローファンクションでシンプル記述にするとこう

const arr = [1, 2, 3];
const numFunc = (num1, num2, num3) => console.log(num1 + num2 + num3);
numFunc(arr[0], arr[1], arr[2]);

コンソール

6

これをスプレッド構文で書くとこう

const numFunc = (num1, num2, num3) => console.log(num1 + num2 + num3);
numFunc(...arr);

コンソール

6

同じように配列の中身を順番に取り出してくれる。

1つにまとめる

const arr = [1, 2, 3];
const [num1, ...arr1] = arr;
console.log(num1);
console.log(...arr1);

コンソール

1
2 3

これは、まずarrの中身を分割代入で順番に受け取る。

※分割代入とはシンプルにいうと、配列とかの中身を順番に変数に設定できること。

なので、const num1にはarrの1が入っており、

スプレッド構文の …arr1には2と3が入っている。

そして、配列を1つ目のconsole.log(num1)で1を取り出し、2つ目のconsole.log(…arr1)で残りの中身を取り出している。

配列のコピーと結合

まずはコピーを

const arr1 = [1, 2];
const arr2 = [3, 4];

const arr3 = [...arr1];
console.log(arr3);

コンソール

[1, 2]

これはconst arr3にスプレッド構文を使ってarr1の配列の中身をコピーしている。

次に結合

const arr1 = [1, 2];
const arr2 = [3, 4];
const arr3 = [...arr1, ...arr2];
console.log(arr3);

コンソール

[1, 2, 3, 4]

スプレッド構文を使うことで、arr1とarr2の中身を結合することが出来る。

また、スプレッド構文でのコピーは途中で配列の中身を書き換えてももとの配列には影響しない。

※影響受けるケース

const arr1 = [1, 2];
const arr2 = [3, 4];

const arr3 = arr1;
arr3[0] = 100;
console.log(arr3);
console.log(arr1);

コンソール

[100, 2]
[100, 2]←上書きされてる

影響受けないケース(スプレッド構文)

const arr1 = [1, 2];
const arr2 = [3, 4];
const arr3 = [...arr1];
arr3[0] = 100;
console.log(arr3);
console.log(arr1);

コンソール

[100, 2]
[1, 2]

といった感じです。

これをじゃあどう実践的に使うねんってところなんですが、これをこれから理解していきたいと思います。

今日はスプレッド構文とはなにかを頭の中にインデックスを作る日という感じでございました。

それでは今日はこのへんで！

今日も良い１日を！