[JS/REACT]スプレット演算子： 配列やオブジェクトの要素を展開するときに
スプレット演算子
スプレッド構文 (...) を使うと、配列式や文字列などの反復可能オブジェクトを、0 個以上の
引数 (関数呼び出しの場合) や要素 (配列リテラルの場合) を期待された場所で展開したり、
オブジェクト式を、0 個以上のキーと値の組 (オブジェクトリテラルの場合) を
期待された場所で展開したりすることができます。
MDN web docs
-
JavaScriptやReactのコードでよく使用される便利な演算子で、
配列やオブジェクトの要素を展開するために使用され、コードを簡潔にすることができるもの。 -
スプレット演算子は、三つのドット（
...）で表される。
配列やオブジェクトの前に配置することで、配列の要素やオブジェクトのプロパティを展開することができる。
ex.1 配列を要素展開し、新しい配列を作成
const arr = [1, 2, 3];
//この配列の要素を、スプレット演算子を使って展開すると...
const newArr = [...arr, 4, 5, 6];
console.log(newArr);
// [1, 2, 3, 4, 5, 6]
このように、スプレット演算子を使うことで、
配列の要素を展開し、新しい配列を作成することができる。
ex.2 オブジェクトでも使用例
const obj1 = { foo: 'bar', x: 42 };
//このオブジェクトのプロパティを、スプレット演算子を使って展開することができます。
const obj2 = { ...obj1, y: 13 };
console.log(obj2);
// { foo: 'bar', x: 42, y: 13 }
このように、オブジェクトもプロパティを展開し、新しいオブジェクトを作成することができる。
ex. 3 関数の引数での使用例
function sum(a, b, c) {
return a + b + c;
}
//この関数に、スプレット演算子を使って配列を引数として渡すことができる。
const arr = [1, 2, 3];
const result = sum(...arr);
console.log(result);
// 6
このように配列の要素を関数の引数として展開し、関数を呼び出すこともできます。
注意点
-
配列やオブジェクトが大きすぎる場合には使用しない方が良い。
大きなデータを展開する場合には、コードのパフォーマンスに悪影響を与える可能性がある。 -
元の配列やオブジェクトが変更されないようにするため、
展開前のオブジェクトや配列を変更しないように注意する必要がある。
展開前のオブジェクトや配列が変更された場合、展開後の配列やオブジェクトにも変更が反映されてしまう。
以上！
今日の個人的な一言日記..."刺激"
今日は久しぶりに毎週末一緒にstudyをやってる人たちでご飯食べて、ボーリングして
いつもとは違う刺激を受けた日でした！
いろんなところから、いろんな人から刺激！ 可能性無限大！✨
５月、今月も最高の月に🔥
私も誰かのモチベになっていたり、誰かのパワーになっていたら、幸せ！
引き続き、頑張ります。
Discussion