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

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!