Petua Pantas: Cara Menggunakan Pengendali Penyebaran di JavaScript

Tutorial ini akan menerangkan pelbagai kegunaan pengendali lanjutan di JavaScript, serta perbezaan utama antara pengendali lanjutan dan pengendali sisa.

pengendali sambungan JavaScript diwakili oleh tiga titik (...) dan diperkenalkan dalam ES6. Ia boleh mengembangkan unsur -unsur dalam koleksi dan tatasusunan ke dalam elemen tunggal.

Pengendali lanjutan boleh digunakan untuk membuat dan mengklon tatasusunan dan objek, lulus array sebagai parameter fungsi, padam pendua dalam tatasusunan, dan banyak lagi.

mata utama

pengendali lanjutan JavaScript diwakili oleh tiga titik (...). Ia boleh digunakan untuk membuat dan mengklon array dan objek, lulus array sebagai parameter fungsi, padam pendua dalam tatasusunan, dan banyak lagi.
Pengendali lanjutan boleh digunakan untuk mengklon tatasusunan dan objek, menyusun susunan, menukar nodel kepada array, dan memadam pendua dalam tatasusunan. Walau bagaimanapun, adalah penting untuk diperhatikan bahawa ia hanya melakukan salinan cetek, yang bermaksud ia hanya menyalin unsur-unsur atau atribut peringkat atas. Jika array atau objek mengandungi array atau objek lain, tatasusunan atau objek disalin dengan rujukan, bukan dengan nilai.
Pengendali lanjutan adalah berbeza daripada pengendali yang tinggal, walaupun kedua -duanya menggunakan sintaks yang sama seperti tiga titik (...). Pengendali selebihnya boleh digunakan dalam senarai parameter fungsi, menunjukkan bahawa fungsi menerima bilangan parameter yang tidak ditentukan, yang boleh diproses sebagai array.

Tatabahasa

pengendali lanjutan hanya boleh digunakan untuk objek yang boleh dimakan. Ia mesti segera sebelum objek itu, tanpa sebarang pemisahan. Contohnya:

console.log(...arr);

Parameter fungsi

Ambil kaedah math.min () sebagai contoh. Kaedah ini mengambil sekurang -kurangnya satu nombor sebagai parameter dan mengembalikan bilangan terkecil parameter yang diluluskan.

Jika anda mempunyai pelbagai nombor dan ingin mencari nilai minimum nombor ini, jika tidak ada pengendali lanjutan, anda perlu lulus elemen satu persatu dengan indeks, atau menggunakan kaedah memohon () untuk lulus elemen array sebagai hujah. Contohnya:

Perhatikan bahawa parameter pertama adalah null, kerana parameter pertama digunakan untuk mengubah nilai fungsi panggilan ini.

const numbers = [15, 13, 100, 20];
const minNumber = Math.min.apply(null, numbers);
console.log(minNumber); // 13

Pengendali lanjutan adalah penyelesaian yang lebih mudah dan mudah dibaca untuk lulus unsur -unsur array sebagai parameter ke fungsi. Contohnya:

anda dapat melihat dalam contoh dalam talian ini:

const numbers = [15, 13, 100, 20];
const minNumber = Math.min(...numbers);
console.log(minNumber); // 13

Lihat contoh pada codepen

Buat array

Pengendali

boleh digunakan untuk membuat tatasusunan baru dari tatasusunan sedia ada atau objek lain yang mengandungi kaedah simbol.iterator (). Ini adalah objek yang boleh diulang dengan ... gelung. Sebagai contoh, ia boleh digunakan untuk mengklon tatasusunan. Jika anda hanya memberikan nilai array sedia ada ke array baru, membuat perubahan pada array baru akan mengemas kini array yang ada:

console.log(...arr);

Dengan menggunakan pengendali lanjutan, anda boleh mengklon array sedia ada ke dalam array baru, dan apa -apa perubahan yang dibuat kepada array baru tidak akan menjejaskan array yang ada:

const numbers = [15, 13, 100, 20];
const minNumber = Math.min.apply(null, numbers);
console.log(minNumber); // 13

Harus diingat bahawa ini hanya akan mengklonkan satu dimensi array. Ia tidak berfungsi dengan susunan multidimensi.

Pengendali lanjutan juga boleh digunakan untuk menggabungkan pelbagai array ke dalam satu array. Contohnya:

const numbers = [15, 13, 100, 20];
const minNumber = Math.min(...numbers);
console.log(minNumber); // 13

anda juga boleh menggunakan pengendali lanjutan untuk rentetan untuk membuat array di mana setiap item adalah watak dalam rentetan:

const numbers = [15, 13, 100, 20];
const clonedNumbers = numbers;
clonedNumbers.push(24);
console.log(clonedNumbers); // [15, 13, 100, 20, 24]
console.log(numbers); // [15, 13, 100, 20, 24]

Buat objek

Pengendali lanjutan boleh digunakan untuk membuat objek dengan cara yang berbeza.

Ia boleh digunakan untuk mengklon ringan objek lain. Contohnya:

Ia juga boleh digunakan untuk menggabungkan pelbagai objek ke dalam satu objek. Contohnya:

const numbers = [15, 13, 100, 20];
const clonedNumbers = [...numbers];
clonedNumbers.push(24);
console.log(clonedNumbers); // [15, 13, 100, 20, 24]
console.log(numbers); // [15, 13, 100, 20]

Harus diingat bahawa jika objek berkongsi nama harta yang sama, nilai harta benda lanjutan terakhir akan digunakan. Contohnya:

const evenNumbers = [2, 4, 6, 8];
const oddNumbers = [1, 3, 5, 7];
const allNumbers = [...evenNumbers, ...oddNumbers];
console.log(...allNumbers); //[2, 4, 6, 8, 1, 3, 5, 7]

Pengendali lanjutan boleh digunakan untuk membuat objek dari array di mana indeks dalam array menjadi atribut dan nilai pada indeks itu menjadi nilai atribut. Contohnya:

Ia juga boleh digunakan untuk membuat objek dari rentetan, sama juga, indeks dalam rentetan menjadi atribut, dan watak -watak pada indeks itu menjadi nilai atribut. Contohnya:

const str = 'Hello, World!';
const strArr = [...str];
console.log(strArr); // ['H', 'e', 'l', 'l', 'o', ',', ' ', 'W', 'o', 'r', 'l', 'd', '!']

Tukar nodel kepada array

const obj = { name: 'Mark', age: 20};
const clonedObj = { ...obj };
console.log(clonedObj); // {name: 'Mark', age: 20}

Nodelist adalah koleksi nod yang merupakan unsur -unsur dalam dokumen. Tidak seperti tatasusunan, unsur -unsur ini diakses melalui kaedah dalam koleksi seperti item atau entri.

const obj1 = { name: 'Mark', age: 20};
const obj2 = { occupation: 'Student' };
const clonedObj = { ...obj1, ...obj2 };
console.log(clonedObj); // {name: 'Mark', age: 20, occupation: 'Student'}

Anda boleh menggunakan pengendali lanjutan untuk menukar nodel ke array. Contohnya:

Padam pendua dalam array

set objek adalah koleksi yang menyimpan hanya nilai unik. Sama seperti nodel, set boleh ditukar kepada tatasusunan menggunakan pengendali lanjutan.

const obj1 = { name: 'Mark', age: 20};
const obj2 = { age: 30 };
const clonedObj = { ...obj1, ...obj2 };
console.log(clonedObj); // {name: 'Mark', age: 30}

Oleh kerana menetapkan kedai hanya nilai unik, ia boleh dipasangkan dengan pengendali lanjutan untuk memadam pendua dalam array. Contohnya:

pengendali lanjutan dan pengendali sisa

Pengendali selebihnya juga merupakan pengendali tiga mata (...), tetapi ia digunakan untuk tujuan yang berbeza. Pengendali selebihnya boleh digunakan dalam senarai parameter fungsi, menunjukkan bahawa fungsi menerima bilangan parameter yang tidak ditentukan. Parameter ini boleh diproses sebagai tatasusunan.

Contoh:

const numbers = [15, 13, 100, 20];
const obj = { ...numbers };
console.log(obj); // {0: 15, 1: 13, 2: 100, 3: 20}

Dalam contoh ini, pengendali selebihnya digunakan sebagai parameter untuk mengira fungsi. Anda kemudian melelehkan item dalam array dan tambahkannya untuk mengira jumlah mereka.

Anda kemudian boleh lulus pembolehubah satu demi satu ke fungsi calculatesum sebagai parameter, atau gunakan pengendali lanjutan untuk lulus elemen array sebagai parameter:

Kesimpulan

const str = 'Hello, World!';
const obj = { ...str };
console.log(obj); // {0: 'H', 1: 'e', 2: 'l', 3: 'l', 4: 'o', 5: ',', 6: ' ', 7: 'W', 8: 'o', 9: 'r', 10: 'l', 11: 'd', 12: '!'}

pengendali lanjutan membolehkan anda berbuat lebih banyak dengan kod yang lebih sedikit sambil mengekalkan kod yang boleh dibaca. Ia boleh digunakan untuk objek yang boleh dimakan, lulus parameter ke fungsi, atau membuat tatasusunan dan objek dari objek lain yang boleh diperolehi.

const nodeList = document.querySelectorAll('div');
console.log(nodeList.item(0)); // <div>...</div>
const nodeArray = [...nodeList];
console.log(nodeArray[0]); // <div>...</div>

Bacaan yang berkaitan:

• kaedah matematik yang hilang dalam JavaScript
• Petua Pantas: Cara Mengasingkan Objek Objek di JavaScript
• cara menggunakan gelung dalam javascript
• Petua Pantas: Uji sama ada rentetan sepadan dengan ungkapan biasa dalam JavaScript
• 《JavaScript: Dari Newbie ke Ninja》

JavaScript Extended Operator FAQs (FAQs)

(soalan yang sering ditanya sama dengan kandungan FAQ asal tetapi dengan kata -kata yang berbeza harus ditambah di sini untuk mengekalkan konsistensi kandungan dan elakkan menyalin teks asal secara langsung)

Atas ialah kandungan terperinci Petua Pantas: Cara Menggunakan Pengendali Penyebaran di JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!