分割代入をマスターする

12852 ワード
JavaScript React TypeScript tech テキストリンク

基本

配列の分割代入

「変数に代入する配列の要素数＞定義した変数の数」の場合、余った配列の要素は無視される。

const [name1, name2] = ["hoge", "fuga", "piyo"];
console.log(name1); // hoge
console.log(name2); // fuga

オブジェクトの分割代入

オブジェクトのプロパティ名で値を参照するため、配列とは異なり変数定義の順番は関係ない。

const {　name2, name1 } = { name1: "hoge", name2: "fuga" };
console.log(name1); // hoge
console.log(name2); // fuga

スプレッド構文との併用

余った配列（オブジェクト）の要素も取得したい場合、スプレッド構文を用いることで配列（オブジェクト）として取得できる。余った配列（オブジェクト）の要素数はいくつ増えても問題ない。

配列の場合

const [name, ...rest] = ["hoge", "fuga", "piyo", "foo"];
console.log(name); // hoge
console.log(rest); // ["fuga", "piyo", "foo"]

オブジェクトの場合

const {　name1, ...rest } = { name1: "hoge", name2: "fuga", name3: "piyo" };
console.log(name1); // hoge
console.log(rest); // { name2: "fuga", name3: "piyo" }

変数のデフォルト値

「変数に代入する配列の要素数＜定義した変数の数」の場合でもエラーにはならず、不足した値はundefinedとなる。

const [name] = [];
console.log(name); // undefined

しかし、通常このような使い方はせず、値がない場合はデフォルト値を使用することが多い。

const [name1 = "hoge", name2 = "fuga"] = ["piyo"];
console.log(name1); // piyo
console.log(name2); // fuga

変数名の置換

変数名は、置換前: 置換後の形式で名前を置換することが可能。

const {　name1: n1, name2 } = { name1: "hoge", name2: "fuga" };
console.log(n1); // hoge
console.log(name2); // fuga

関数の引数

分割代入は関数の引数としても使用することができる。

const f = ({ name1, name2 }) => {
  console.log(name1, name2);
};
f({ name1: "hoge", name2: "fuga" }); // hoge fuga

これに変数のデフォルト値を組み合わせるとこのようになる。

const f = ({ name1 = "hoge", name2 = "fuga" } = {}) => {
  console.log(name1, name2);
};
f(); // hoge fuga
f({ name1: "piyo" }); // piyo fuga
f({ name1: "piyo", name2: "foo" }); // piyo foo

恐らくここまで読めたら分割代入は一通りマスターできているかと！

Intersection Observer APIを使って無限スクロールをReactでつくってみた
Visionで輪郭抽出して遊ぶ