☰

ES6 二重構造化分解 質問する

tag-icon • tag-icon javascript ecmascript-6 destructuring
ES6 二重構造化分解 質問する

これはおそらくかなり基本的な質問だとは思いますが、私は ES6 に精通しておらず、次のような構文に遭遇しました。

const { rootStore: { routerStore } } = this.props;

次のようなことが何を意味するのか理解しています:

const { rootStore } = this.props;

(のrootStoreプロパティからconst を作成します)。rootStorethis.props

しかし、上記の二重の脱構築（脱構築だと思います）はどういう意味でしょうか？

ベストアンサー1

これはネストされた構造化分解と呼ばれ、多くの状況で非常に役立ちます。

少しずつ理解していきましょう。

次の例を見てください:

const person = {
    friend: {
        name: 'john',
        age: 20,
    },
};

const { friend } = person;

console.log(friend);

ここでは、構造化解除を使用してプロパティの値を取得しますfriend。値自体がオブジェクトであるため、構造化解除も使用できます。

前の例から:

const person = {
    friend: {
        name: 'john',
        age: 20,
    },
};

const { friend } = person;

console.log(friend);

const {age} = friend ;

console.log(age) ;

今度はage、デストラクチャリングを使用してプロパティも取得します。これは非常に便利で美しいですが、プロパティだけが必要な場合ageと、プロパティが不要な場合はどうでしょうかfriend。上記の例をすべて 1 つのステップで実行できますか。はい。これが ES6 の素晴らしいところです。

const person = {
    friend: {
        name: 'john',
        age: 20,
    },
};

const { friend :{age} } = person;

console.log(age);

ご覧のとおり、 の値はage1 ステップで取得されます。これは、ネストされたオブジェクトがある場合の多くの状況で役立ちます。上記のコードでは、 の値をログに記録しようとすると、friendが取得されますReferenceError: friend is not defined。

ご存知ですか? ネストされた構造化分解は好きなだけ深くすることができます。楽しみのために用意したこの複雑な例を見てください。

const person = {
    friend: {
        name: 'john',
        other: {
            friend: {
                name: {
                    fullName: {
                        firstName: 'demo',
                    },
                },
            },
        },
    },
};

const {
    friend: {
        other: {
            friend: {
                name: {
                    fullName: { firstName },
                },
            },
        },
    },
} = person;

console.log(firstName); // demo

かわいい！！

デストラクチャリングについて詳しく知りたい場合は、次のリソースを参照してください。

分割代入 MDN

ECMAScript 6 における構造化分解とパラメータ処理

おすすめ記事