ホームページ > 記事 > ウェブフロントエンド > ES6 の関数パラメータの構造化を使用するときにルート オブジェクトを渡す方法は?
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 サイトの他の関連記事を参照してください。