Penyebaran dan Rehat Operator dalam JavaScript

Kisah snek:
Katakan anda mempunyai sebakul makanan ringan:

const snacks = ['apple', 'banana', 'chocolate'];

Sekarang, anda ingin berkongsi makanan ringan ini dengan rakan anda. Tetapi daripada memberi mereka keseluruhan bakul, anda mengeluarkan setiap snek dan memberikannya satu persatu:

console.log(...snacks);  // Output: apple banana chocolate

Pengendali ... (hamparan) seperti mengeluarkan makanan ringan dari bakul dan menghamparkannya di atas meja. Rakan anda kini boleh mengambil mereka secara individu!

Sebaliknya, jika rakan anda membawa lebih banyak makanan ringan, anda boleh mengumpulkan semuanya ke dalam satu bakul besar menggunakan ... (rehat) pengendali:

function collectSnacks(...moreSnacks) {
  console.log(moreSnacks);
}

collectSnacks('cookie', 'chips', 'juice');  // Output: ['cookie', 'chips', 'juice']

Di sini, pengendali ... mengumpul semua makanan ringan ke dalam bakul baharu. Beginilah cara operator lain berfungsi!

Jika anda baru menggunakan JavaScript, anda mungkin terjumpa dua elemen sintaks khas: operator spread dan rest. Kedua-duanya kelihatan sama—tiga titik (...)—tetapi ia digunakan dalam cara yang berbeza. Mari pecahkan mereka dengan contoh mudah!

1. Apakah itu Operator Spread?
Operator spread (...) digunakan untuk mengembangkan tatasusunan atau objek ke dalam elemen individu. Ia seperti membongkar tatasusunan atau objek ke dalam komponennya.

Contoh: Mengembangkan Tatasusunan
Katakan anda mempunyai tatasusunan nombor dan anda mahu menghantarnya secara individu ke dalam fungsi.

const numbers = [1, 2, 3];
console.log(...numbers);  // Output: 1 2 3

Anda boleh menggunakan operator spread untuk menyebarkan elemen tatasusunan!

Contoh: Menggabungkan Tatasusunan
Jika anda mempunyai dua tatasusunan dan ingin menggabungkannya, pengendali hamparan memudahkannya:

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];

const mergedArray = [...array1, ...array2];
console.log(mergedArray);  // Output: [1, 2, 3, 4, 5, 6]

Ia seperti meletakkan semua elemen daripada tatasusunan1 dan tatasusunan2 ke dalam satu tatasusunan baharu.

Contoh: Menyalin Objek
Anda juga boleh menggunakan operator spread dengan objek:

const user = { name: "Ahmed", age: 25 };
const updatedUser = { ...user, location: "Bengaluru" };

console.log(updatedUser);
// Output: { name: "Ahmed", age: 25, location: "Bengaluru" }

Di sini, kami menyalin sifat daripada objek pengguna dan menambah lokasi hartanah baharu.

1. Apakah itu Operator Rehat? Operator selebihnya adalah bertentangan dengan operator spread. Daripada mengembangkan tatasusunan atau objek, ia mengumpulkan berbilang elemen ke dalam tatasusunan atau objek.

Contoh: Fungsi dengan Parameter Rehat
Bayangkan anda sedang menulis fungsi yang mengambil sebarang bilangan hujah:

function addNumbers(...nums) {
  return nums.reduce((sum, current) => sum + current, 0);
}

console.log(addNumbers(1, 2, 3, 4));  // Output: 10

Dalam kes ini, operator yang lain ...nums mengumpulkan semua argumen ke dalam tatasusunan, menjadikannya lebih mudah untuk berfungsi dengan berbilang nilai.

Contoh: Memusnahkan dengan Rehat
Anda juga boleh menggunakan operator selebihnya apabila memusnahkan tatasusunan:

const [first, ...rest] = [1, 2, 3, 4];
console.log(first);  // Output: 1
console.log(rest);   // Output: [2, 3, 4]

Di sini, mula-mula dapatkan elemen pertama tatasusunan, dan selebihnya mengumpulkan elemen yang tinggal ke dalam tatasusunan baharu.

Kesimpulan
Operator spread dan rest ialah alat yang berkuasa dan serba boleh dalam JavaScript. Untuk imbas kembali:

• Sebarkan (...) mengembangkan tatasusunan atau objek ke dalam elemen individu.
• Rehat (...) mengumpul berbilang elemen ke dalam tatasusunan atau objek.

Semoga anda memahami 2 konsep ini tersebar dan berehat, ia akan menjadikan kod JavaScript anda lebih ringkas dan lebih mudah dibaca!

Selamat mengekod :)

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