Buka Kunci Kuasa JavaScript: Petua dan Teknik Pro

1. Gunakan penstrukturan untuk menukar pembolehubah

let a = 1, b = 2;
[a, b] = [b, a];
console.log(a, b); // 2 1

Sebab: Menyediakan cara satu baris yang bersih untuk menukar nilai pembolehubah tanpa pembolehubah sementara.

2. Gunakan huruf templat untuk interpolasi rentetan

const name = "Alice";
console.log(`Hello, ${name}!`); // Hello, Alice!

Sebab: Menjadikan gabungan rentetan lebih mudah dibaca dan kurang terdedah kepada ralat berbanding kaedah tradisional.

3. Gunakan operator penggabungan batal (??) untuk nilai lalai

const value = null;
const defaultValue = value ?? "Default";
console.log(defaultValue); // "Default"

Sebab: Menyediakan cara ringkas untuk mengendalikan nilai nol atau tidak ditentukan, membezakan daripada nilai palsu seperti 0 atau rentetan kosong.

4. Gunakan rantaian pilihan (?.) untuk akses harta yang selamat

const obj = { nested: { property: "value" } };
console.log(obj?.nested?.property); // "value"
console.log(obj?.nonexistent?.property); // undefined

Sebab: Mencegah ralat apabila mengakses sifat bersarang yang mungkin tidak wujud, mengurangkan keperluan untuk semakan bertele-tele.

5. Gunakan operator hamparan (...) untuk manipulasi tatasusunan

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combined = [...arr1, ...arr2];
console.log(combined); // [1, 2, 3, 4, 5, 6]

Sebab: Memudahkan operasi tatasusunan seperti menggabungkan, menyalin atau menambah elemen, menjadikan kod lebih ringkas dan boleh dibaca.

6. Gunakan Array.from() untuk mencipta tatasusunan daripada objek seperti tatasusunan

const arrayLike = { 0: "a", 1: "b", 2: "c", length: 3 };
const newArray = Array.from(arrayLike);
console.log(newArray); // ["a", "b", "c"]

Sebab: Menukar objek seperti tatasusunan atau iterabel kepada tatasusunan sebenar dengan mudah, membolehkan penggunaan kaedah tatasusunan.

7. Gunakan Object.entry() untuk lelaran objek yang mudah

const obj = { a: 1, b: 2, c: 3 };
for (const [key, value] of Object.entries(obj)) {
  console.log(`${key}: ${value}`);
}

Sebab: Menyediakan cara yang bersih untuk mengulang kedua-dua kekunci dan nilai objek secara serentak.

8. Gunakan Array.prototype.flat() untuk meratakan tatasusunan bersarang

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

Sebab: Memudahkan kerja dengan tatasusunan bersarang dengan meratakannya ke kedalaman tertentu.

9. Gunakan async/tunggu untuk kod tak segerak yang lebih bersih

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error:', error);
  }
}

Sebab: Menjadikan kod tak segerak kelihatan dan berkelakuan lebih seperti kod segerak, meningkatkan kebolehbacaan dan pengendalian ralat.

10. Gunakan Set untuk nilai unik dalam tatasusunan

const numbers = [1, 2, 2, 3, 4, 4, 5];
const uniqueNumbers = [...new Set(numbers)];
console.log(uniqueNumbers); // [1, 2, 3, 4, 5]

Sebab: Menyediakan cara yang cekap untuk mengalih keluar pendua daripada tatasusunan tanpa gelung manual.

11. Gunakan Object.freeze() untuk mencipta objek tidak berubah

const frozenObj = Object.freeze({ prop: 42 });
frozenObj.prop = 100; // Fails silently in non-strict mode
console.log(frozenObj.prop); // 42

Sebab: Menghalang pengubahsuaian pada objek, berguna untuk mencipta pemalar atau memastikan integriti data.

12. Gunakan Array.prototype.reduce() untuk transformasi tatasusunan yang berkuasa

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, curr) => acc + curr, 0);
console.log(sum); // 15

Sebab: Membenarkan operasi tatasusunan kompleks dilakukan dalam satu pas, selalunya lebih cekap daripada gelung.

13. Gunakan operator logik DAN (&&) untuk pelaksanaan bersyarat

const isTrue = true;
isTrue && console.log("This will be logged");

Sebab: Menyediakan cara singkat untuk melaksanakan kod hanya jika syarat adalah benar, tanpa pernyataan if yang jelas.

14. Gunakan Object.assign() untuk menggabungkan objek

const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
const merged = Object.assign({}, obj1, obj2);
console.log(merged); // { a: 1, b: 3, c: 4 }

Sebab: Memudahkan penggabungan objek, berguna untuk menggabungkan objek konfigurasi atau membuat salinan objek dengan penggantian.

15. Gunakan Array.prototype.some() dan Array.prototype.every() untuk array

checking
const numbers = [1, 2, 3, 4, 5];
console.log(numbers.some(n => n > 3)); // true
console.log(numbers.every(n => n > 0)); // true

Sebab: Menyediakan cara ringkas untuk menyemak sama ada mana-mana atau semua elemen dalam tatasusunan memenuhi syarat, mengelakkan gelung eksplisit.

16. Gunakan console.table() untuk pengelogan data jadual yang lebih baik

const users = [
  { name: "John", age: 30 },
  { name: "Jane", age: 28 },
];
console.table(users);

Sebab: Meningkatkan kebolehbacaan data log dalam format jadual, terutamanya berguna untuk tatasusunan objek.

17. Gunakan Array.prototype.find() untuk mendapatkan elemen padanan pertama

const numbers = [1, 2, 3, 4, 5];
const found = numbers.find(n => n > 3);
console.log(found); // 4

Sebab: Cekap mencari elemen pertama dalam tatasusunan yang memenuhi syarat, menghentikan lelaran setelah ditemui.

18. Gunakan Object.keys(), Object.values(), dan Object.entry() untuk objek

manipulation
const obj = { a: 1, b: 2, c: 3 };
console.log(Object.keys(obj)); // ["a", "b", "c"]
console.log(Object.values(obj)); // [1, 2, 3]
console.log(Object.entries(obj)); // [["a", 1], ["b", 2], ["c", 3]]

Sebab: Menyediakan cara mudah untuk mengekstrak dan bekerja dengan sifat dan nilai objek, berguna untuk banyak operasi objek.

19. Gunakan API Antarabangsa untuk pengantarabangsaan

const number = 123456.789;
console.log(new Intl.NumberFormat('de-DE').format(number)); // 123.456,789

Sebab: Memudahkan pemformatan nombor, tarikh dan rentetan mengikut peraturan khusus setempat tanpa pelaksanaan manual.

20. Gunakan Array.prototype.flatMap() untuk memetakan dan meratakan dalam satu langkah

const sentences = ["Hello world", "How are you"];
const words = sentences.flatMap(sentence => sentence.split(" "));
console.log(words); // ["Hello", "world", "How", "are", "you"]

Sebab: Menggabungkan operasi pemetaan dan perataan dengan cekap, berguna untuk transformasi yang menghasilkan hasil bersarang.

Atas ialah kandungan terperinci Buka Kunci Kuasa JavaScript: Petua dan Teknik Pro. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!