Menguasai Operator Spread untuk Objek dan Tatasusunan dalam JavaScript

Spread Operator untuk Objek dan Tatasusunan dalam JavaScript

pengendali penyebaran (...) ialah ciri berkuasa yang diperkenalkan dalam ES6 (ECMAScript 2015) yang membolehkan anda mengembangkan atau menyalin elemen tatasusunan atau sifat objek ke dalam yang baharu tatasusunan atau objek. Ia membantu dalam mencipta salinan cetek tatasusunan atau objek, menggabungkan berbilang tatasusunan atau objek dan menambah elemen atau sifat baharu.

1. Spread Operator dengan Tatasusunan

Pengendali hamparan boleh digunakan untuk menyalin elemen dari satu tatasusunan ke tatasusunan yang lain, atau untuk menggabungkan tatasusunan ke dalam tatasusunan tunggal.

Menyalin Tatasusunan

Pengendali hamparan boleh mencipta salinan cetek tatasusunan. Ini amat berguna apabila anda ingin mencipta tatasusunan baharu tetapi tidak mahu mengubah suai tatasusunan asal.

const arr1 = [1, 2, 3];
const arr2 = [...arr1];  // Spread operator to copy arr1

console.log(arr2);  // Output: [1, 2, 3]

Menggabungkan Tatasusunan

Anda boleh menggunakan operator spread untuk menggabungkan berbilang tatasusunan menjadi satu.

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

const combined = [...arr1, ...arr2];

console.log(combined);  // Output: [1, 2, 3, 4, 5, 6]

Menambahkan Elemen Baharu pada Tatasusunan

Anda boleh menambah elemen baharu pada tatasusunan dengan menggunakan operator hamparan bersama elemen lain.

const arr = [1, 2, 3];

const newArr = [0, ...arr, 4];

console.log(newArr);  // Output: [0, 1, 2, 3, 4]

2. Spread Operator dengan Objek

Pengendali hamparan juga boleh digunakan untuk menyalin sifat daripada satu objek ke objek lain atau untuk menggabungkan berbilang objek menjadi satu.

Menyalin Objek

Sama seperti tatasusunan, anda boleh mencipta salinan cetek objek menggunakan pengendali hamparan.

const person = { name: "John", age: 30 };

const personCopy = { ...person };

console.log(personCopy);  // Output: { name: "John", age: 30 }

Menggabungkan Objek

Anda boleh menggabungkan berbilang objek menjadi satu. Apabila terdapat sifat bercanggah, objek terakhir akan menimpa yang sebelumnya.

const person = { name: "John", age: 30 };
const address = { city: "New York", zip: "10001" };

const combined = { ...person, ...address };

console.log(combined);  // Output: { name: "John", age: 30, city: "New York", zip: "10001" }

Menambahkan Sifat Baharu pada Objek

Anda boleh menggunakan operator hamparan untuk menambah sifat baharu pada objek tanpa mengubah suai objek asal.

const person = { name: "John", age: 30 };

const updatedPerson = { ...person, city: "New York" };

console.log(updatedPerson);  // Output: { name: "John", age: 30, city: "New York" }

3. Spread Operator dalam Panggilan Fungsi

Anda boleh menggunakan operator spread untuk menghantar elemen tatasusunan sebagai argumen individu kepada fungsi.

const numbers = [1, 2, 3, 4];

function sum(a, b, c, d) {
  return a + b + c + d;
}

console.log(sum(...numbers));  // Output: 10 (1 + 2 + 3 + 4)

Ini amat berguna apabila berurusan dengan bilangan hujah yang dinamik.

4. Salinan Dalam dan Had

Pengendali hamparan melakukan salinan cetek, bermakna jika objek atau tatasusunan mengandungi objek atau tatasusunan bersarang, rujukan kepada objek/tatasusunan dalam tersebut akan disalin, bukan data sebenar. Ini boleh membawa kepada isu jika anda mengubah suai objek atau tatasusunan bersarang, kerana perubahan akan menjejaskan objek asal.

const arr1 = [1, 2, 3];
const arr2 = [...arr1];  // Spread operator to copy arr1

console.log(arr2);  // Output: [1, 2, 3]

Untuk mengelakkan perkara ini, anda mungkin perlu melakukan salinan dalam (yang melibatkan penyalinan struktur bersarang), tetapi pengendali hamparan tidak melakukan salinan dalam. Anda boleh menggunakan perpustakaan seperti Lodash atau menulis fungsi salinan dalam anda sendiri untuk tujuan ini.

5. Spread Operator dengan Tatasusunan Objek

Dalam kes di mana anda ingin mengubah suai objek individu dalam tatasusunan objek, anda boleh menggunakan operator hamparan untuk menyalin objek dan mengemas kini sifat tertentu.

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

const combined = [...arr1, ...arr2];

console.log(combined);  // Output: [1, 2, 3, 4, 5, 6]

6. Menggunakan Operator Spread dalam React

Dalam React, operator spread biasanya digunakan untuk menyalin props dan menyatakan objek.

const arr = [1, 2, 3];

const newArr = [0, ...arr, 4];

console.log(newArr);  // Output: [0, 1, 2, 3, 4]

Ia juga berguna dalam kemas kini keadaan, terutamanya apabila anda ingin mengemas kini nilai bersarang.

const person = { name: "John", age: 30 };

const personCopy = { ...person };

console.log(personCopy);  // Output: { name: "John", age: 30 }

Kesimpulan

pengendali penyebaran ialah ciri serba boleh dan berkuasa dalam JavaScript, memudahkan banyak tugas biasa seperti menyalin, menggabungkan dan mengubah suai tatasusunan dan objek. Ia boleh membantu menjadikan kod anda lebih bersih, lebih ringkas dan lebih mudah dibaca, terutamanya apabila bekerja dengan struktur data yang kompleks.

---

Hai, saya Abhay Singh Kathayat!
Saya seorang pembangun tindanan penuh dengan kepakaran dalam kedua-dua teknologi hadapan dan belakang. Saya bekerja dengan pelbagai bahasa pengaturcaraan dan rangka kerja untuk membina aplikasi yang cekap, berskala dan mesra pengguna.
Jangan ragu untuk menghubungi saya melalui e-mel perniagaan saya: kaashshorts28@gmail.com.

Atas ialah kandungan terperinci Menguasai Operator Spread untuk Objek dan Tatasusunan dalam JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!