Operator Spread JavaScript

Operator Spread JavaScript (…)

• Operator Spread dalam JavaScript mengembangkan (membongkar) tatasusunan ke dalam elemen individunya.

*Ia digunakan dengan kedua-dua tatasusunan dan objek, dalam tatasusunan ia digunakan apabila:

1. Membina Tatasusunan
2. menghantar argumen ke dalam fungsi

1- Membina Susunan:

• di sini kita boleh menggunakannya untuk mengembangkan elemen tatasusunan dan menggunakannya dalam tatasusunan yang lain (contohnya tatasusunan).

const arr = [5, 6, 7];

// without the spread operator ?

const badArr = [1, 2, 3, 4, arr[0], arr[1], arr[2]];
console.log(badArr); // [1, 2, 3, 4, 5, 6, 7]

// with the spread operator ?

const goodArr = [1, 2, 3, 4, ...arr];
console.log(goodArr); // [1, 2, 3, 4, 5, 6, 7]

• seperti yang anda boleh lihat, pengendali spread menjadikan perkara lebih mudah.

• jika anda sekali lagi mahukan elemen individu tatasusunan dikembangkan, gunakan pengendali hamparan:
  

console.log(...goodArr); // 1 2 3 4 5 6 7

//the line above is just like writing this code:

console.log(1, 2, 3, 4, 5, 6, 7); // 1 2 3 4 5 6 7

• contoh lain untuk memahami lebih lanjut:

const foods = ['chicken', 'meat', 'rice'];

const Newfoods = [...foods, 'pizza '];
console.log(Newfoods); // ['chicken', 'meat', 'rice', 'pizza ']

• perlu diingat bahawa di sini kami mencipta tatasusunan yang benar-benar baru, kami tidak mengubah (memutasi) tatasusunan makanan, lihat:

console.log(foods); // ['chicken', 'meat', 'rice']

• Spread Operator adalah serupa dengan Destructuring, tetapi perbezaannya ialah operator spread tidak mencipta pembolehubah baharu, jadi kami boleh menggunakannya hanya di tempat kami menulis nilai yang dipisahkan dengan koma.

Dua kes penggunaan berguna pengendali hamparan dengan tatasusunan:

1.membuat salinan tatasusunan:

const arrOriginal = [1, 2, 3, 4, 5];

const arrCopy = [...arrOriginal];
console.log(arrCopy); // [1, 2, 3, 4, 5]

2.menggabungkan dua atau lebih tatasusunan:

const arr1 = ['A', 'B', 'C'];
const arr2 = ['D', 'E', 'F'];

const mergedArr = [...arr1, ...arr2];
console.log(mergedArr); // ['A', 'B', 'C', 'D', 'E', 'F']

• Operator spread bukan sahaja berfungsi pada tatasusunan, ia juga berfungsi pada semua iterable, iaitu perkara seperti: tatasusunan, rentetan, peta dan set (kebanyakan struktur data terbina dalam), tetapi BUKAN (objek).
• pada rentetan: setiap huruf pada rentetan asal = elemen individu, contoh:

const str = 'spongeBob';

const letters = [...str, 'squarePants'];
console.log(letters); // ['s', 'p', 'o', 'n', 'g', 'e', 'B', 'o', 'b', 'squarePants']

• tetapi ingat, kami masih tidak mahu menggunakan operator spread selain dalam dua situasi yang kami nyatakan di bahagian atas, yang mana "membina tatasusunan" & "melalui hujah", kerana sebagai contoh, jika kami mahu gunakan beberapa nilai yang dipisahkan dengan koma untuk mencipta rentetan mengikut literal templat, ia tidak akan berfungsi dan akan memberi kita ralat, kerana ia bukan tempat yang menjangkakan berbilang nilai yang dipisahkan dengan koma:

console.log(`spelling sponge bob's name: ${...str}`);  // Expression expected

2- menghantar hujah ke dalam fungsi

const arr = [5, 6, 7];

// without the spread operator ?

const badArr = [1, 2, 3, 4, arr[0], arr[1], arr[2]];
console.log(badArr); // [1, 2, 3, 4, 5, 6, 7]

// with the spread operator ?

const goodArr = [1, 2, 3, 4, ...arr];
console.log(goodArr); // [1, 2, 3, 4, 5, 6, 7]

• Menggunakan Operator Spread:
• Bermula dengan ES2018, Operator Spread sebenarnya juga berfungsi untuk objek, walaupun objek tidak boleh diulang, contoh:

console.log(...goodArr); // 1 2 3 4 5 6 7

//the line above is just like writing this code:

console.log(1, 2, 3, 4, 5, 6, 7); // 1 2 3 4 5 6 7

• pada yang pertama kami mencipta objek baharu dengan sifat yang sama seperti objek restoran, tetapi kami menambah sifat lain iaitu harta netWorth.
• dalam yang kedua, kami membuat salinan objek restoran, ambil perhatian bahawa Perubahan pada objek yang disalin tidak menjejaskan objek asal dan begitu juga sebaliknya.

Semoga anda memahami segala-galanya di sini, jika anda mempunyai sebarang pertanyaan boleh ajukan di ruangan komen, TERIMA KASIH kerana membaca ?

Atas ialah kandungan terperinci Operator Spread JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!