JavaScriptのスプレッド構文について簡単なサンプルコードで解説
14 回閲覧されました
みなさんこんにちは、joinioです。
今回はJavaScriptのスプレッド構文について簡単なサンプルコードで解説します。
Laravelの無料学習サイトを作りました
Laravelを勉強したい人向けの無料の学習サイトを作りました。
ここからリンクに飛べますのでぜひ利用してください。
スプレッド構文とは
「…」を使って配列やオブジェクトの中身を展開(要素だけを表示)するのに使います。
具体的にサンプルコードで見ていきます。
サンプルコード(配列の場合)
下記のコードで考えます。
const x = [1, 2];
const y = [3, 4];
const z = [...x, ...y];結果は「z = [1, 2, 3, 4]」です。
仕組みを説明します。
「…x」が「1, 2」になります。
「…y」が「3, 4」になります。
その結果「z = [1, 2, 3, 4]」になります。
サンプルコード(配列の場合)
下記のコードで考えます。
const common = { role: 'user', active: true };
const override = { role: 'admin' };
const merged = { ...common, ...override };結果は「merged = { role: ‘admin’, active: true }」です。
仕組みを説明します。
「…common」が「role: ‘user’, active: true」になります。
「…override」が「role: ‘admin’」になります。
その結果「 { role: ‘user, active: true, role: ‘admin’ }」になりますが「role」は2つあります。
この場合は後者が適用されます。
その結果「 { role: ‘admin’, active: true }」になります。