ES6 Destructuring 함수 매개변수를 사용할 때 루트 객체를 전달하는 방법은 무엇입니까?-JS 튜토리얼-php.cn

ES6 Destructuring 함수 매개변수를 사용할 때 루트 객체를 전달하는 방법은 무엇입니까?

DDD

풀어 주다： 2024-11-02 03:50:30

원래의

713명이 탐색했습니다.

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 Destructuring

ES6 Destructuring을 사용하면 특정 매개변수를 추출하는 것이 더 많아집니다. 편리함:

// 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?
};

로그인 후 복사

옵션: 개별 추출 또는 루트 객체 전달

한 가지 옵션은 setupChildClass6()에서 각 옵션을 개별적으로 추출한 다음 setupParentClass6에 전달하는 것입니다. (). 그러나 이 접근 방식은 매개 변수가 많아 장황해질 수 있습니다.

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

로그인 후 복사

임시 변수 사용

더 간결한 해결책은 임시 변수를 사용하여 루트를 유지하는 것입니다. options 개체를 setupParentClass6()에 전달하기 전에:

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

로그인 후 복사

이 메서드를 사용하면 setupChildClass6()에 필요한 특정 매개 변수의 구조를 해제하는 동시에 전체 옵션 개체를 setupParentClass6()에 전달할 수 있습니다.

위 내용은 ES6 Destructuring 함수 매개변수를 사용할 때 루트 객체를 전달하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!