Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk Melepasi Objek Akar Apabila Menggunakan Parameter Fungsi Pemusnahan ES6?

Bagaimana untuk Melepasi Objek Akar Apabila Menggunakan Parameter Fungsi Pemusnahan ES6?

DDD
DDDasal
2024-11-02 03:50:30611semak imbas

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

Menamakan Objek Root dalam Parameter Fungsi Memusnahkan ES6

ES6 menawarkan penstrukturan sebagai cara ringkas untuk mengekstrak sifat daripada objek dan tatasusunan kepada pembolehubah. Walau bagaimanapun, ia boleh menjadi mencabar untuk mengekalkan nama objek akar apabila memusnahkan argumen fungsi.

Metafora Warisan ES5

Dalam ES5, anda boleh melepasi keseluruhan objek pilihan "naikkan" rantaian warisan kepada kelas induk, membenarkannya mengakses semua parameter:

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

Pemusnahan ES6

Dengan pemusnahan ES6, mengekstrak parameter tertentu menjadi lebih mudah:

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

Pilihan: Pengekstrakan Individu atau Lulus Objek Akar

Satu pilihan ialah mengekstrak setiap pilihan secara individu dalam setupChildClass6(), dan kemudian menyerahkannya kepada setupParentClass6 (). Walau bagaimanapun, pendekatan ini boleh menjadi verbose dengan banyak parameter:

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

Menggunakan Pembolehubah Sementara

Penyelesaian yang lebih ringkas ialah menggunakan pembolehubah sementara untuk memegang punca objek pilihan sebelum menghantarnya ke setupParentClass6():

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

Kaedah ini membolehkan anda memusnahkan parameter khusus yang diperlukan dalam setupChildClass6(), sambil masih menghantar keseluruhan objek pilihan ke setupParentClass6().

Atas ialah kandungan terperinci Bagaimana untuk Melepasi Objek Akar Apabila Menggunakan Parameter Fungsi Pemusnahan ES6?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya:Fungsi - Cabaran JavaScriptArtikel seterusnya:Fungsi - Cabaran JavaScript