web-dev-qa-db-ja.com

immutable.jsで分解代入を使用できますか？

標準のJSオブジェクトでは、次のような構造化代入を使用できます。

let obj = {name: 'james', code: '007'}
let {name, code} = obj // creates new variables 'name' and 'code' (with the proper values)

一部のFlux/Reduxエバンジェリストが示唆しているように、私はアプリにimmutable.jsを使用しています。不変のリスト/マップでも構造化を使用できますか？もちろん、次のことができます。

let obj = immutable.fromJS({name: 'james', code: '007'})
let {name, code} = obj.toJS()

ただし、オブジェクトが大きくなると、これは非常に非効率的になります（オブジェクトを最初にjs化する必要があるため）。

immutable.jsdestructuring
24
Tomas Kulich

不変リストを使用すると、分解は非常に簡単に機能します。これは、配列の分解がすべての反復可能オブジェクトで機能し（ 何かが反復可能であるかどうかのチェック ）、js配列だけを受けないためです。

マップを使用すると、状況はより複雑になります。リストとは異なり、マップのような構造の分解ISは単純なJSオブジェクトのみを受け、それ以外は何もありません。現在、ESコミュニティはこれを良いアイデアと見なしているようには見えません（ https://esdiscuss.org/topic/extensible-destructuring-proposal ）

ただし、これを可能にするbabel-pluginが存在します： https://github.com/vacuumlabs/babel-plugin-extensible-destructuring このプラグインがインストールされている.babelrcで有効にすると、不変マップに.@@get定義されたメソッド：

// main.js, first file loaded
import {Iterable} from 'immutable';
Iterable.prototype[Symbol.for('get')] = function(value) {return this.get(value); };

そして、すべてが機能します（ネストされた分解、またはデフォルト値での分解）

import {fromJS} from 'immutable';
const map = fromJS({author: {name: {first: "John", last: "Doe"}, birthdate: "10-10-2010"}});
const {author: {name: {first, last}, birthdate}} = map;

免責事項：私は上記のプラグインの作成者の1人です。

40
Tomas Kulich