【Angular/TypeScript】Spread Operator(...)【ドット3つ】
※下記の内容に不備がありましたら、コメント頂けると幸いです。また、下記の内容をご使用頂ける場合は自己責任でお願いします。
【目次】
概要
Angular After Tutorialに取り組んでいると、見慣れない「...(ドット3つ)」が出てきたので備忘録として記事にまとめます。
Spread Operator(...)
意味
早速ですが、参考資料から。
Spread Operator - TypeScript Deep Dive 日本語版
上記のサイトを参考にすると、【...は演算子で、配列またはオブジェクトの要素(中身)を展開する】ことができるみたいです。
たぶんイマイチ理解できていないと思います。スプレッド演算子を理解するには、例を見るのが最も分かりやすいとのことなので、次の項目で例を挙げていきます。
使い方
配列の代入(Array Assignment)
function foo(x, y, z) { }
var args = [0, 1, 2];
foo(...args); // foo.apply(null, args);と同じ結果
applyのthis引数にnullを渡さなくてもすむようになりました。
配列の代入(Array Assignment)
var list = [1, 2];
list = [...list, 3, 4];
console.log(list); // [1,2,3,4]
オブジェクトの展開(Object Spread)
const point2D = {x: 1, y: 2};
const point3D = {...point2D, z: 3}; // {x: 1, y: 2, z: 3}
const point2D = {x: 1, y: 2};
const anotherPoint3D = {x: 5, z: 4, ...point2D};
console.log(anotherPoint3D); // {x: 1, y: 2, z: 4}
const yetAnotherPoint3D = {...point2D, x: 5, z: 4}
console.log(yetAnotherPoint3D); // {x: 5, y: 2, z: 4}
Object.assignのような使い方もできるみたいです。これは便利。
今後に向けて
Angular After Tutorialでは、Storeサービスのupdateメソッドから受け取ったstateオブジェクトを展開して、userListオブジェクトに格納するために使っていましたね。
見慣れない構文だったので面倒臭くなりそうだなと思っていましたが、調べてみるととても便利な演算子であることが分かりました。
これからはどんどん使っていきたいと思います。
参考
素晴らしい記事に感謝いたします。
