Demystifying Destructuring Assignment dalam JavaScript

Memusnahkan Tugasan dalam JavaScript

tugasan memusnahkan dalam JavaScript ialah sintaks yang membenarkan membongkar nilai daripada tatasusunan atau sifat daripada objek kepada pembolehubah yang berbeza. Ia menjadikan kod lebih ringkas dan lebih mudah dibaca semasa mengekstrak data.

---

1. Pemusnahan Tatasusunan

Pemusnahan tatasusunan mengekstrak nilai daripada tatasusunan dan menetapkannya kepada pembolehubah.

Contoh:

const fruits = ["Apple", "Banana", "Cherry"];
const [first, second, third] = fruits;
console.log(first); // Output: Apple
console.log(second); // Output: Banana
console.log(third); // Output: Cherry

A. Melangkau Elemen

Anda boleh melangkau elemen dengan meninggalkan ruang kosong antara koma.

Contoh:

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

B. Nilai Lalai

Nilai lalai boleh digunakan jika elemen tatasusunan tidak ditentukan.

Contoh:

const colors = ["Red"];
const [primary, secondary = "Blue"] = colors;
console.log(primary); // Output: Red
console.log(secondary); // Output: Blue

C. Sintaks Rehat

Gunakan operator selebihnya ... untuk mengumpul elemen yang tinggal ke dalam tatasusunan.

Contoh:

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

---

2. Pemusnahan Objek

Pemusnahan objek mengekstrak sifat daripada objek kepada pembolehubah.

Contoh:

const person = { name: "Alice", age: 25, country: "USA" };
const { name, age } = person;
console.log(name); // Output: Alice
console.log(age); // Output: 25

A. Menamakan Semula Pembolehubah

Anda boleh menamakan semula pembolehubah semasa memusnahkan menggunakan titik bertindih (:).

Contoh:

const person = { name: "Alice", age: 25 };
const { name: fullName, age: years } = person;
console.log(fullName); // Output: Alice
console.log(years); // Output: 25

B. Nilai Lalai

Nilai lalai boleh digunakan jika sifat tidak ditentukan.

Contoh:

const person = { name: "Alice" };
const { name, age = 30 } = person;
console.log(name); // Output: Alice
console.log(age); // Output: 30

C. Pemusnahan Objek Bersarang

Anda boleh memusnahkan sifat daripada objek bersarang.

Contoh:

const employee = {
  id: 101,
  details: { name: "Bob", position: "Developer" },
};
const {
  details: { name, position },
} = employee;
console.log(name); // Output: Bob
console.log(position); // Output: Developer

D. Sintaks Rehat

Gunakan operator selebihnya untuk mengumpul harta yang tinggal.

Contoh:

const person = { name: "Alice", age: 25, country: "USA" };
const { name, ...others } = person;
console.log(name); // Output: Alice
console.log(others); // Output: { age: 25, country: "USA" }

---

3. Pemusnahan Bercampur

Anda boleh menggabungkan tatasusunan dan pemusnahan objek.

Contoh:

const data = {
  id: 1,
  items: ["Apple", "Banana", "Cherry"],
};
const {
  id,
  items: [firstItem],
} = data;
console.log(id); // Output: 1
console.log(firstItem); // Output: Apple

---

4. Pemusnahan Parameter Fungsi

Anda boleh memusnahkan tatasusunan atau objek secara langsung dalam parameter fungsi.

A. Memusnahkan Tatasusunan dalam Parameter:

function sum([a, b]) {
  return a + b;
}
console.log(sum([5, 10])); // Output: 15

B. Memusnahkan Objek dalam Parameter:

const fruits = ["Apple", "Banana", "Cherry"];
const [first, second, third] = fruits;
console.log(first); // Output: Apple
console.log(second); // Output: Banana
console.log(third); // Output: Cherry

---

5. Kes Penggunaan Praktikal

• Bertukar Pembolehubah:

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

• Mengembalikan Berbilang Nilai daripada Fungsi:

const colors = ["Red"];
const [primary, secondary = "Blue"] = colors;
console.log(primary); // Output: Red
console.log(secondary); // Output: Blue

• Mengendalikan Respons API:

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

---

6. Ringkasan

• Pemusnahan membolehkan mengekstrak data daripada tatasusunan dan objek kepada pembolehubah dengan cara yang bersih dan ringkas.
• Anda boleh menggunakan nilai lalai, menamakan semula, sintaks rehat dan juga memusnahkan objek atau tatasusunan bersarang.
• Ia digunakan secara meluas dalam JavaScript moden, terutamanya dalam React, Redux dan semasa mengendalikan API.

Menguasai tugasan pemusnahan menjadikan kod JavaScript anda lebih mudah dibaca dan cekap.

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 Demystifying Destructuring Assignment dalam JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!