Reactを使っているとこんな書き方をすることがよくある。
const { width, height } = this.props;
これは書き換えるとこんな感じになる。
const width = this.props.width;
const height = this.props.height;
冗長だし倍近く文字数が増えてしまうので、この手の書き方をおさらいしてみます。
楽できるところは楽しよう。
サンプルと解説
最初の話を簡単に書くとこんな感じになる。
|
1 2 |
let { oo } = { o: 1, oo: 2, ooo: 3 }; console.log(oo); //2 |
オブジェクトのキー(oo)をそのまま変数として宣言している。
逆に変数はオブジェクトにできる。
|
1 2 3 4 5 6 7 |
//変数を{}で返すと{変数名:値}のオブジェクトになる const getObj = () => { let o1 = "a"; let o2 = "B"; return { o1, o2 }; }; console.log(getObj()); //{ o1: 'a', o2: 'B' } |
するとこう受け取ることもできる。
|
1 2 |
let { o1, o2 } = getObj(); console.log(o1, o2); //a B |
オブジェクトの一部を変数宣言できるとはいえ好きな変数名を付けたいこともある。
|
1 2 3 |
//{元キー:変数名}で中身を好きな変数に入れられる let { o: v } = { o: 1, oo: 2, ooo: 3 }; console.log(v); //1 |
便利ではあるけどちょっとわかりにくい。
一見すると何を宣言しているのかわからず混乱するかもしれない。
他のよくある使い方としては関数の引数でオブジェクトの一部をとったり。
|
1 2 3 4 5 |
//関数の引数でもオブジェクトの一部を受け取れる const echooo = ({ ooo }) => { console.log(ooo); }; echooo({ o: 1, oo: 2, ooo: 3 }); //3 |
特定キーが必要なオブジェクトを作るときにはこんなトリッキーなのも見かける。
|
1 2 3 4 5 |
//こんな風に特定の形のJSONに設定しなおすのも簡単 const toJSON = ({ target_name: name }) => { console.log({ name }); }; toJSON({ target_name: "Lena" }); //{ name: 'Lena' } |
追記：ES6/ECMAScript2015 – Destructuring assignment
今回の内容は分割代入というみたいです。納得できるけどすぐに忘れそう。
配列でもできるのは気付かなかった、というかこんなのは見たことない。