Dalam tutorial ini, anda akan belajar mengenai pengendali penyebaran JavaScript dengan bantuan contoh.
Operator penyebaran adalah tambahan baru untuk ciri yang tersedia dalam versi ES6 JavaScript .
Operator Penyebaran
Operator spread … digunakan untuk memperluas atau menyebarkan iterable atau array. Sebagai contoh,
const arrValue = ('My', 'name', 'is', 'Jack'); console.log(arrValue); // ("My", "name", "is", "Jack") console.log(… arrValue); // My name is Jack
Dalam kes ini, kod:
console.log(… arrValue)
bersamaan dengan:
console.log('My', 'name', 'is', 'Jack');
Salin Array Menggunakan Spread Operator
Anda juga boleh menggunakan sintaks spread … untuk menyalin item ke dalam satu array. Sebagai contoh,
const arr1 = ('one', 'two'); const arr2 = (… arr1, 'three', 'four', 'five'); console.log(arr2); // Output: // ("one", "two", "three", "four", "five")
Klon Array Menggunakan Spread Operator
Dalam JavaScript, objek ditetapkan berdasarkan rujukan dan bukan berdasarkan nilai. Sebagai contoh,
let arr1 = ( 1, 2, 3); let arr2 = arr1; console.log(arr1); // (1, 2, 3) console.log(arr2); // (1, 2, 3) // append an item to the array arr1.push(4); console.log(arr1); // (1, 2, 3, 4) console.log(arr2); // (1, 2, 3, 4)
Di sini, kedua-dua pemboleh ubah arr1 dan arr2 merujuk kepada susunan yang sama. Oleh itu perubahan dalam satu pemboleh ubah mengakibatkan perubahan pada kedua-dua pemboleh ubah tersebut.
Walau bagaimanapun, jika anda ingin menyalin tatasusunan agar tidak merujuk kepada susunan yang sama, anda boleh menggunakan operator penyebaran. Dengan cara ini, perubahan dalam satu susunan tidak dapat dilihat pada yang lain. Sebagai contoh,
let arr1 = ( 1, 2, 3); // copy using spread syntax let arr2 = (… arr1); console.log(arr1); // (1, 2, 3) console.log(arr2); // (1, 2, 3) // append an item to the array arr1.push(4); console.log(arr1); // (1, 2, 3, 4) console.log(arr2); // (1, 2, 3)
Spread Operator dengan Objek
Anda juga boleh menggunakan operator penyebaran dengan literal objek. Sebagai contoh,
const obj1 = ( x : 1, y : 2 ); const obj2 = ( z : 3 ); // add members obj1 and obj2 to obj3 const obj3 = (… obj1,… obj2); console.log(obj3); // (x: 1, y: 2, z: 3)
Di sini, kedua obj1- dua dan obj2sifat ditambahkan untuk obj3menggunakan pengendali spread.
Parameter Rehat
Ketika operator spread digunakan sebagai parameter, ia dikenal sebagai parameter selebihnya.
Anda juga dapat menerima banyak argumen dalam panggilan fungsi menggunakan parameter selebihnya. Sebagai contoh,
let func = function(… args) ( console.log(args); ) func(3); // (3) func(4, 5, 6); // (4, 5, 6)
Di sini,
- Apabila argumen tunggal diteruskan ke
func()fungsi, parameter selebihnya hanya mengambil satu parameter. - Apabila tiga argumen dilalui, parameter selebihnya mengambil ketiga-tiga parameter.
Catatan : Menggunakan parameter selebihnya akan meneruskan argumen sebagai elemen array.
Anda juga dapat menyampaikan beberapa argumen ke fungsi menggunakan operator penyebaran. Sebagai contoh,
function sum(x, y ,z) ( console.log(x + y + z); ) const num1 = (1, 3, 4, 5); sum(… num1); // 8
Sekiranya anda melewati beberapa argumen menggunakan operator penyebaran, fungsi mengambil argumen yang diperlukan dan mengabaikan yang lain.
Catatan : Operator Spread diperkenalkan pada ES6 . Beberapa penyemak imbas mungkin tidak menyokong penggunaan sintaks spread. Lawati sokongan Operator Penyebaran JavaScript untuk mengetahui lebih lanjut.
