ホームページ >ウェブフロントエンド >jsチュートリアル >ES6 の関数パラメータの構造化を使用するときにルート オブジェクトを渡す方法は?

ES6 の関数パラメータの構造化を使用するときにルート オブジェクトを渡す方法は?

DDD
DDDオリジナル
2024-11-02 03:50:30698ブラウズ

How to Pass the Root Object When Using ES6 Destructuring Function Parameters?

ES6 でのルート オブジェクトの名前付け関数パラメータの構造化

ES6 では、オブジェクトや配列からプロパティを変数に抽出する簡潔な方法として構造化を提供しています。ただし、関数の引数を構造化するときにルート オブジェクトの名前を保持することが困難になる場合があります。

ES5 継承メタファー

ES5 では、オプション オブジェクト全体を渡すことができます。継承チェーンを親クラスに「アップ」し、すべてのパラメーターにアクセスできるようにします。

// ES5:
var setupParentClass5 = function(options) {
    textEditor.setup(options.rows, options.columns);
};

var setupChildClass5 = function(options) {
    rangeSlider.setup(options.minVal, options.maxVal);
    setupParentClass5(options); // pass the options object UP
};

ES6 の構造化

ES6 の構造化では、特定のパラメーターの抽出がさらに多くなります。便利:

// ES6:
var setupParentClass6 = ({rows, columns}) => {
    textEditor.setup(rows, columns);
};

var setupChildClass6 = ({minVal, maxVal}) => {
    rangeSlider.setup(minVal, maxVal);
    setupParentClass6( /* ??? */ );  // how to pass the root options object?
};

オプション: 個別の抽出またはルート オブジェクトの受け渡し

1 つのオプションは、setupChildClass6() で各オプションを個別に抽出し、それらを setupParentClass6 に渡すことです。 ()。ただし、このアプローチはパラメータが多くなると冗長になる可能性があります。

// ugh.
var setupChildClass6b = ({minVal, maxVal, rows, columns}) => {
    rangeSlider.setup(minVal, maxVal);
    setupParentClass6({rows, columns});
};

一時変数の使用

より簡潔な解決策は、ルートを保持する一時変数を使用することです。 setupParentClass6() に渡す前に options オブジェクトを渡す:

const setupChildClass6 = options => {
    const {minVal, maxVal} = options;
    rangeSlider.setup(minVal, maxVal);
    setupParentClass6(options);
};

このメソッドを使用すると、options オブジェクト全体を setupParentClass6() に渡しながら、setupChildClass6() で必要な特定のパラメーターを構造化できます。

以上がES6 の関数パラメータの構造化を使用するときにルート オブジェクトを渡す方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。