Amalan Terbaik JavaScript

Dalam artikel ini saya akan membawa anda melalui “Tabiat yang baik” semasa mengekod JavaScript.

1 — Elakkan menggunakan Object() baharu
Dalam JavaScript, menggunakan Objek baharu agak berisiko, manakala menggunakan primitif sentiasa lebih baik atas beberapa sebab. Mari kita mendalami perkara ini.

Percakapan umum
"" sebagai contoh, mencipta rentetan primitif seperti yang kita semua tahu, sebaliknya... new String() mencipta objek rentetan. Memandangkan ia lebih kompleks dan mempunyai kaedah, objek rentetan boleh membawa gelagat yang tidak dijangka, tepatnya apabila ia berkaitan dengan perbandingan dan paksaan jenis.

Kesederhanaan
Primitif adalah lebih mudah dalam penggunaan dan lebih mudah, kerana penggunaannya mengelakkan kerumitan yang tidak perlu, dan kod menjadi mudah dibaca dan diselenggara.

Prestasi
Primitif lebih cekap dari segi ingatan dan prestasi. Semasa mencipta objek melibatkan overhed tambahan.

Kemungkinan kekeliruan
Memandangkan JavaScript melayan objek dan primitif secara berbeza, menggunakan Object() baharu boleh membawa kepada situasi mengelirukan di mana anda secara tidak sengaja berurusan dengan objek dan bukannya primitif, yang mungkin membawa anda ke sarang pepijat.

Dalam kebanyakan kes, lebih baik menggunakan primitif sebaliknya.

// ❌ Avoid
const str = new String();
const num = new Number();
const bool = new Boolean();
const obj = new Object();
const arr = new Array();
const regEx = new RegExp();
const func = new Function();

// ✅ Use
const str = "JavaScript";
const num = 10;
const bool = true;
const obj = {};
const arr = [];
const regEx = /()/;
const func = function() {};

2 — Elakkan menggunakan let dengan tatasusunan dan objek
Pertama sekali, mari kita jelaskan... Menggunakan let dengan tatasusunan dan objek sememangnya tidak bermasalah sama sekali. Tetapi terdapat beberapa pertimbangan khusus yang mungkin menyebabkan anda mengelakkannya dalam kes tertentu:

Penugasan Semula Lwn. Mutasi
Seperti yang kita sedia maklum, mari membolehkan kita menetapkan semula pembolehubah itu sendiri, yang boleh menyebabkan kekeliruan atau kehilangan data. Objek / tatasusunan boleh ditetapkan semula secara tidak sengaja dengan keseluruhan set data baharu (objek baharu / tatasusunan baharu).

Sebaliknya, menggunakan const menjadikannya lebih selamat dan jelas bahawa rujukan kepada objek / tatasusunan tidak akan berubah, tetapi anda masih boleh mengubah suai kandungannya.

Niat Keabadian
Menggunakan const, anda memberi isyarat kepada pembangun lain yang anda bekerjasama bahawa pembolehubah itu tidak boleh ditetapkan semula, meningkatkan kebolehbacaan dan kebolehselenggaraan kod.

Skop
Walaupun let mempunyai skop blok, ia boleh membawa kepada tingkah laku yang tidak dijangka dalam gelung atau pernyataan bersyarat. Dengan menggunakan const, pembolehubah kekal dalam skop tanpa risiko penugasan semula yang tidak disengajakan.

Amalan terbaik
Banyak standard pengekodan dan amalan terbaik menggalakkan penggunaan const untuk pembolehubah yang tidak memerlukan penugasan semula, mempromosikan kod yang lebih bersih dan lebih boleh diramal.

// ❌ Avoid
let book = { title: "Inferno", author: "Dan Brown" };

// The book object will be overrode with string
book = "Hello world";
// ✅ Use
const book = { title: "Inferno", author: "Dan Brown" };

// The book object cannot be overrode
book = "Hello world";

3 — Berhati-hati dengan penukaran Jenis Automatik
Juga dikenali sebagai paksaan jenis, dalam JavaScript berlaku apabila bahasa secara automatik menukar nilai daripada satu jenis kepada yang lain. Ini boleh berlaku dalam pelbagai situasi, terutamanya semasa operasi yang melibatkan jenis data yang berbeza:

// ❌ Avoid
const str = new String();
const num = new Number();
const bool = new Boolean();
const obj = new Object();
const arr = new Array();
const regEx = new RegExp();
const func = new Function();

// ✅ Use
const str = "JavaScript";
const num = 10;
const bool = true;
const obj = {};
const arr = [];
const regEx = /()/;
const func = function() {};

Berhati-hati dengan nombor, boleh ditukar kepada rentetan atau NaN secara tidak sengaja. Oleh itu, pertimbangkan untuk melaksanakan ujian jenis sebelum operasi sensitif atau pertimbangkan untuk menggunakan TypeScript untuk menaip selamat.

4 — Elakkan menggunakan perbandingan berganda sama
== dan === ialah pengendali perbandingan yang digunakan untuk membandingkan nilai, tetapi mereka berkelakuan berbeza.

Kesaksamaan Abstrak
Apabila menggunakan ==, JavaScript menukar nilai kepada jenis biasa sebelum membuat perbandingan

// ❌ Avoid
let book = { title: "Inferno", author: "Dan Brown" };

// The book object will be overrode with string
book = "Hello world";
// ✅ Use
const book = { title: "Inferno", author: "Dan Brown" };

// The book object cannot be overrode
book = "Hello world";

Bila Perlu Digunakan ?
Gunakan === apabila anda ingin memastikan kedua-dua nilai dan jenis adalah sama, yang secara amnya merupakan amalan yang baik untuk mengelakkan hasil yang tidak dijangka.

Gunakan == jika anda secara khusus perlu membandingkan nilai tanpa mengambil kira jenisnya, tetapi ini boleh membawa kepada pepijat dan biasanya tidak digalakkan.

Secara umum, pertimbangkan untuk menggunakan === untuk perbandingan yang lebih boleh diramal dan jelas.

Nota: Perkara yang sama berlaku dengan !== dan !=

5 — Gunakan Pemusnahan Objek / Tatasusunan
Dalam JavaScript, menggunakan teknik pemusnahan dengan Objek dan Tatasusunan memberi anda beberapa faedah.

Sintaks tugasan yang memusnahkan ialah ungkapan JavaScript yang memungkinkan untuk membongkar nilai daripada tatasusunan atau sifat daripada objek, ke dalam pembolehubah yang berbeza. Seperti yang dikatakan oleh dokumen web MDN.

Keringkas
Ia membolehkan anda mengekstrak berbilang sifat daripada objek atau elemen daripada tatasusunan dalam satu pernyataan, mengurangkan jumlah kod yang anda perlukan untuk menulis.

let sum = "5" + 1; // "51" (string concatenation)
// In the code above, typeof sum is a string

let sub = "5" - 1; // 4 (string converted to number)
// In the code obove, typeof sub in a number
Another example can be helpful:

let lang = "JavaScript"; // typeof name is string
lang = 15; // changes typeof x to a number

Kejelasan
Pemusnahan boleh menjadikan kod anda lebih mudah dibaca dengan menunjukkan dengan jelas sifat atau elemen yang anda gunakan.

console.log(5 == '5'); // true (number is converted to string)
console.log(null == undefined); // true (considered equal)
console.log(0 == false); // true (0 is converted to boolean as it's falsy value)
Strict Equality
With ===, the comparison checks both the value and the type. If types are different, it returns false

console.log(5 === '5'); // false (different types)
console.log(null === undefined); // false (different types)
console.log(0 === false); // false (different types)

Nilai Lalai
Anda boleh menetapkan nilai lalai dengan mudah jika sifat atau elemen itu tidak wujud.

const book = { name: 'The Lost Symbol', author: 'Dan Brown' };
const { name, price } = book; // concise extraction

Pemusnahan Bersarang
Anda boleh memusnahkan objek atau tatasusunan bersarang, yang boleh memudahkan mengakses data bersarang dalam.

const colors = ['red', 'green', 'blue'];
const [firstColor, secondColor] = colors; // clear intention

Parameter Fungsi
Ia boleh berguna untuk parameter fungsi, membolehkan anda membongkar nilai secara terus.

const { height = 180 } = person; // uses default value if height is undefined

Penstrukturan membantu menyelaraskan kod anda, menjadikannya lebih bersih dan lebih mudah diselenggara.

6 — Parameter lalai
Parameter lalai ialah teknik yang baik untuk diguna pakai untuk memastikan kod anda lebih jelas dan mudah dibaca.

Parameter fungsi lalai membenarkan parameter yang dinamakan dimulakan dengan nilai lalai jika tiada nilai atau undefined diluluskan. Seperti yang dikatakan oleh dokumen web MDN.

Parameter tunggal

const user = { profile: { name: 'Eren Yeager', age: 20 } };
const { profile: { name } } = user; // easy access to nested properties

Berbilang Parameter
Anda boleh menetapkan lalai untuk berbilang parameter.

function display({ name, age }) {
    console.log(`${name} is ${age} years old.`);
}

Berhati-hati dengan parameter yang tidak diberikan apabila melepasi gandaan. Elakkan menghantar parameter yang mungkin tidak ditakrifkan yang mungkin tidak dilalui sebagai yang pertama, atau sebelum mana-mana parameter lain yang diluluskan.

Jika anda mengesyaki bahawa nilai parameter tidak boleh diberikan atau boleh dihantar sebagai tidak ditentukan, pastikan untuk menghantarnya sebagai yang terakhir, serta untuk berbilang parameter tidak diberikan.

Menggunakan Ungkapan sebagai Lalai
Anda boleh menggunakan ungkapan untuk mengira nilai lalai.

// ❌ Avoid
const str = new String();
const num = new Number();
const bool = new Boolean();
const obj = new Object();
const arr = new Array();
const regEx = new RegExp();
const func = new Function();

// ✅ Use
const str = "JavaScript";
const num = 10;
const bool = true;
const obj = {};
const arr = [];
const regEx = /()/;
const func = function() {};

Parameter Rehat dengan Lalai
Anda boleh menggabungkan parameter lalai dengan parameter rehat.

// ❌ Avoid
let book = { title: "Inferno", author: "Dan Brown" };

// The book object will be overrode with string
book = "Hello world";
// ✅ Use
const book = { title: "Inferno", author: "Dan Brown" };

// The book object cannot be overrode
book = "Hello world";

Faedah
Kebolehbacaan yang Dipertingkatkan: Jelas perkara lalai yang digunakan jika hujah ditinggalkan.
Kurang Plat Dandang: Mengurangkan keperluan untuk menyemak dan menetapkan nilai lalai di dalam badan fungsi.
Fleksibiliti Dipertingkat: Fungsi boleh mengendalikan rangkaian input yang lebih luas dengan lebih anggun.
Parameter lalai ialah ciri berkuasa yang meningkatkan kebolehgunaan fungsi dan menjadikan kod anda lebih bersih!

7 —Gunakan lalai dalam Suis anda
Menamatkan penyataan suis anda dengan kes lalai ialah amalan yang baik dalam JavaScript. Kes lalai bertindak sebagai sandaran apabila tiada kes yang ditentukan sepadan dengan input:

let sum = "5" + 1; // "51" (string concatenation)
// In the code above, typeof sum is a string

let sub = "5" - 1; // 4 (string converted to number)
// In the code obove, typeof sub in a number
Another example can be helpful:

let lang = "JavaScript"; // typeof name is string
lang = 15; // changes typeof x to a number

Tangkap-Semua
Ia menyediakan cara untuk mengendalikan nilai yang tidak dijangka, memastikan kod anda tidak gagal secara senyap.

console.log(5 == '5'); // true (number is converted to string)
console.log(null == undefined); // true (considered equal)
console.log(0 == false); // true (0 is converted to boolean as it's falsy value)
Strict Equality
With ===, the comparison checks both the value and the type. If types are different, it returns false

console.log(5 === '5'); // false (different types)
console.log(null === undefined); // false (different types)
console.log(0 === false); // false (different types)

Kebolehbacaan yang dipertingkatkan
Memasukkan kes lalai menjelaskan kepada pembangun lain (atau diri sendiri) bahawa anda mempertimbangkan semua kemungkinan.

Pengendalian Ralat
Ia boleh digunakan untuk mengelog atau membuang ralat apabila nilai yang tidak dijangka ditemui.

const book = { name: 'The Lost Symbol', author: 'Dan Brown' };
const { name, price } = book; // concise extraction

Sentiasa sertakan kes lalai jika terdapat kemungkinan menerima input yang tidak dijangka.
Gunakan kes lalai untuk memberikan maklum balas atau pengelogan yang berguna, terutamanya dalam senario penyahpepijatan.
Pertimbangkan untuk menggunakan huruf besar lalai untuk menetapkan nilai sandaran jika berkenaan.
Menambah kes lalai pada penyata suis anda meningkatkan keteguhan dan kebolehselenggaraan kod.

8 — Elakkan menggunakan eval()
Eval() ialah fungsi JavaScript terbina dalam yang mengambil rentetan sebagai hujah dan menilainya sebagai kod JavaScript. Ini bermakna anda boleh melaksanakan secara dinamik kod yang dijana pada masa jalan.

const colors = ['red', 'green', 'blue'];
const [firstColor, secondColor] = colors; // clear intention

Mengelakkan penggunaan eval() dalam JavaScript disyorkan secara meluas atas beberapa sebab penting.

Risiko Keselamatan
Suntikan Kod: eval() boleh melaksanakan kod sewenang-wenangnya, menjadikan aplikasi anda terdedah kepada serangan suntikan kod. Jika input pengguna dinilai, penyerang boleh menyuntik kod hasad.

const { height = 180 } = person; // uses default value if height is undefined

Isu Prestasi
Pelaksanaan Perlahan: Kod yang dilaksanakan dengan eval() berjalan lebih perlahan daripada kod biasa kerana ia perlu ditafsirkan pada masa jalan, memintas pengoptimuman tertentu yang dibuat oleh enjin JavaScript.
Cabaran Penyahpepijatan
Lebih Sukar untuk Nyahpepijat: Menggunakan eval() menyukarkan penyahpepijatan. Ralat yang dilemparkan ke dalam eval() sukar untuk dikesan kembali ke sumber asal.
Alternatif
Daripada eval(), pertimbangkan alternatif yang lebih selamat ini:

JSON Parsing: Jika anda berurusan dengan data JSON, gunakan JSON.parse() dan bukannya eval().
const jsonString = '{"name": "Alice"}';
const obj = JSON.parse(jsonString); // Cara selamat untuk menukar rentetan JSON kepada objek
Pembina Fungsi: Jika anda perlu mencipta fungsi secara dinamik, pertimbangkan untuk menggunakan pembina Fungsi.

// ❌ Avoid
const str = new String();
const num = new Number();
const bool = new Boolean();
const obj = new Object();
const arr = new Array();
const regEx = new RegExp();
const func = new Function();

// ✅ Use
const str = "JavaScript";
const num = 10;
const bool = true;
const obj = {};
const arr = [];
const regEx = /()/;
const func = function() {};

Ringkasnya, elakkan menggunakan eval() disebabkan oleh risiko keselamatan, isu prestasi dan kesukaran penyahpepijatan. Pilih alternatif yang lebih selamat untuk mencapai matlamat anda tanpa menjejaskan integriti dan prestasi kod anda.

9 — Gunakan Mod Ketat
Dalam JavaScript, "Mod Ketat" ialah cara untuk mengikut serta dalam varian terhad bahasa, yang membantu menangkap kesilapan pengekodan biasa dan tindakan "tidak selamat". Ia boleh menjadikan kod anda lebih mudah diramal dan lebih mudah untuk nyahpepijat.

Dayakan Mod Ketat
Secara global: Dengan meletakkan "guna ketat"; di bahagian atas fail skrip.

// ❌ Avoid
let book = { title: "Inferno", author: "Dan Brown" };

// The book object will be overrode with string
book = "Hello world";
// ✅ Use
const book = { title: "Inferno", author: "Dan Brown" };

// The book object cannot be overrode
book = "Hello world";

Faedah Menggunakan Mod Ketat
Menghalang penggunaan pembolehubah yang tidak diisytiharkan: Menetapkan nilai kepada pembolehubah yang tidak diisytiharkan akan menimbulkan ralat.

let sum = "5" + 1; // "51" (string concatenation)
// In the code above, typeof sum is a string

let sub = "5" - 1; // 4 (string converted to number)
// In the code obove, typeof sub in a number
Another example can be helpful:

let lang = "JavaScript"; // typeof name is string
lang = 15; // changes typeof x to a number

Menghapuskan paksaan ini: Dalam Mod Ketat, ini tidak ditentukan dalam fungsi yang dipanggil tanpa konteks yang jelas.

console.log(5 == '5'); // true (number is converted to string)
console.log(null == undefined); // true (considered equal)
console.log(0 == false); // true (0 is converted to boolean as it's falsy value)
Strict Equality
With ===, the comparison checks both the value and the type. If types are different, it returns false

console.log(5 === '5'); // false (different types)
console.log(null === undefined); // false (different types)
console.log(0 === false); // false (different types)

Melarang sintaks tertentu: Beberapa sintaks yang dianggap bermasalah atau mengelirukan tidak dibenarkan.
Perangkap Biasa
Fungsi anak panah: Ambil perhatian bahawa fungsi anak panah tidak mempunyai ini sendiri, jadi Mod Ketat tidak digunakan dengan cara yang sama.
eval: Kod yang dilaksanakan dalam pernyataan eval berjalan dalam skop tempatan dan bukannya skop global.
Menggunakan Mod Ketat biasanya dianggap sebagai amalan terbaik, terutamanya untuk aplikasi yang lebih besar, kerana ia membantu anda menulis kod yang lebih bersih dan selamat.

10 — Pastikan Kod KERING (Jangan Ulangi Sendiri)
Prinsip DRY (Don't Repeat Yourself) ialah konsep utama dalam pembangunan perisian yang bertujuan untuk mengurangkan pengulangan dalam kod. Dengan memastikan bahawa setiap pengetahuan atau logik diwakili dalam satu tempat, anda menjadikan kod anda lebih mudah untuk diselenggara, difahami dan difaktorkan semula.

Fungsi
Merangkumkan logik berulang dalam fungsi. Dengan cara ini, anda boleh menggunakan semula kod yang sama tanpa pendua.

const book = { name: 'The Lost Symbol', author: 'Dan Brown' };
const { name, price } = book; // concise extraction

Modul
Gunakan modul untuk menyusun kod anda. Ini membantu mengekalkan fungsi dan pembolehubah yang berkaitan bersama-sama, menjadikannya boleh diguna semula di seluruh bahagian aplikasi anda yang berbeza.

const colors = ['red', 'green', 'blue'];
const [firstColor, secondColor] = colors; // clear intention

Kelas dan Objek
Gunakan kelas atau objek untuk mengumpulkan data dan tingkah laku yang berkaitan. Enkapsulasi ini membantu mengelakkan pengulangan apabila bekerja dengan struktur data yang serupa.

const { height = 180 } = person; // uses default value if height is undefined

Nota: Jika anda menggunakan paradigma "Pengaturcaraan Fungsian" dalam pengekodan harian anda, pertimbangkan untuk menggunakan mana-mana petua lain kecuali "Kelas dan Objek" ini.

Templat dan Komponen
Dalam pembangunan web, gunakan templat atau komponen (dalam rangka kerja seperti React, Vue, dll.) untuk merangkum logik UI dan gaya yang digunakan semula.

// ❌ Avoid
const str = new String();
const num = new Number();
const bool = new Boolean();
const obj = new Object();
const arr = new Array();
const regEx = new RegExp();
const func = new Function();

// ✅ Use
const str = "JavaScript";
const num = 10;
const bool = true;
const obj = {};
const arr = [];
const regEx = /()/;
const func = function() {};

Struktur Data
Gunakan tatasusunan atau objek untuk menyimpan data berkaitan dan bukannya membuat pembolehubah berasingan untuk setiap bahagian data.

// ❌ Avoid
let book = { title: "Inferno", author: "Dan Brown" };

// The book object will be overrode with string
book = "Hello world";
// ✅ Use
const book = { title: "Inferno", author: "Dan Brown" };

// The book object cannot be overrode
book = "Hello world";

Menggunakan prinsip DRY membawa kepada kod yang lebih bersih dan boleh diselenggara. Ia membantu meminimumkan risiko pepijat kerana perubahan perlu dibuat hanya di satu tempat, dan ia meningkatkan kebolehbacaan dengan mengurangkan kekacauan. Ingat bahawa walaupun penting untuk mengelakkan pengulangan, terdapat keseimbangan untuk menyerang; terlalu abstrak boleh membawa kepada kerumitan, jadi gunakan pertimbangan anda apabila menggunakan prinsip ini.

11 — Gunakan Pembolehubah Bermakna dan Nama Fungsi
Menggunakan nama pembolehubah dan fungsi yang bermakna adalah penting untuk menulis kod yang jelas, boleh diselenggara dan boleh difahami.

Jadilah Deskriptif
Pilih nama yang menerangkan dengan jelas tujuan atau nilai pembolehubah atau fungsi.

let sum = "5" + 1; // "51" (string concatenation)
// In the code above, typeof sum is a string

let sub = "5" - 1; // 4 (string converted to number)
// In the code obove, typeof sub in a number
Another example can be helpful:

let lang = "JavaScript"; // typeof name is string
lang = 15; // changes typeof x to a number

Gunakan Perkataan Tindakan untuk Fungsi
Mulakan fungsi dengan kata kerja yang menerangkan tindakan yang dilakukan.

console.log(5 == '5'); // true (number is converted to string)
console.log(null == undefined); // true (considered equal)
console.log(0 == false); // true (0 is converted to boolean as it's falsy value)
Strict Equality
With ===, the comparison checks both the value and the type. If types are different, it returns false

console.log(5 === '5'); // false (different types)
console.log(null === undefined); // false (different types)
console.log(0 === false); // false (different types)

Elakkan Singkatan
Walaupun nama pendek mungkin kelihatan mudah, ia boleh menyebabkan kekeliruan. Elakkan singkatan melainkan ia difahami secara meluas.

const book = { name: 'The Lost Symbol', author: 'Dan Brown' };
const { name, price } = book; // concise extraction

Gunakan Konvensyen Penamaan Konsisten
Berpegang pada konvensyen penamaan yang konsisten di seluruh pangkalan kod anda, seperti camelCase untuk pembolehubah dan fungsi serta PascalCase untuk kelas.

const colors = ['red', 'green', 'blue'];
const [firstColor, secondColor] = colors; // clear intention

Nyatakan Jenis Data atau Tujuan dalam Nama
Jika pembolehubah menyimpan jenis data tertentu atau berfungsi untuk tujuan tertentu, masukkan pembolehubah itu dalam nama.

const { height = 180 } = person; // uses default value if height is undefined

Gunakan Maklumat Kontekstual
Pertimbangkan konteks di mana pembolehubah atau fungsi akan digunakan untuk menjadikan nama lebih bermakna.

const user = { profile: { name: 'Eren Yeager', age: 20 } };
const { profile: { name } } = user; // easy access to nested properties

Pastikan Ia Ringkas tetapi Jelas
Walaupun nama harus bersifat deskriptif, mereka tidak boleh terlalu panjang. Matlamat untuk keseimbangan antara kejelasan dan kepekatan.

function display({ name, age }) {
    console.log(`${name} is ${age} years old.`);
}

Gunakan Bahasa Khusus Domain
Jika anda bekerja dalam domain tertentu (seperti kewangan, penjagaan kesihatan, dll.), gunakan istilah yang biasa dengan domain tersebut.

biar Kadar faedah = 5.5; // Jelas dalam konteks kewangan.

function greet(name = 'Guest') {
    console.log(`Hello, ${name}!`);
}

greet();         // Output: Hello, Guest!
greet('Chrollo');  // Output: Hello, Chrollo!

Refactor Apabila Perlu
Jika anda mendapati bahawa nama tidak lagi sesuai apabila kod itu berkembang, jangan teragak-agak untuk memfaktorkannya semula untuk kejelasan yang lebih baik.

function multiply(a, b = 1) {
    return a * b;
}

multiply(5);    // Output: 5
multiply(5, 2);  // Output: 10

Nama pembolehubah dan fungsi yang bermakna meningkatkan kebolehbacaan dan kebolehselenggaraan kod dengan ketara. Mereka membantu orang lain (dan diri anda sendiri) memahami tujuan dan fungsi kod anda sepintas lalu, menjadikan kerjasama dan penyahpepijatan lebih mudah. Sentiasa berusaha untuk mendapatkan kejelasan dalam konvensyen penamaan anda.

12 — Elakkan Pembolehubah Global
Mengelakkan pembolehubah global ialah amalan utama dalam JavaScript (dan pengaturcaraan secara umum) untuk mengekalkan kod yang bersih, modular dan boleh diselenggara. Pembolehubah global boleh membawa kepada tingkah laku yang tidak dijangka, konflik penamaan dan kesukaran dalam penyahpepijatan.

Gunakan Skop Fungsi
Isytiharkan pembolehubah dalam fungsi untuk mengehadkan skopnya dan menghalangnya daripada boleh diakses secara global.

// ❌ Avoid
const str = new String();
const num = new Number();
const bool = new Boolean();
const obj = new Object();
const arr = new Array();
const regEx = new RegExp();
const func = new Function();

// ✅ Use
const str = "JavaScript";
const num = 10;
const bool = true;
const obj = {};
const arr = [];
const regEx = /()/;
const func = function() {};

Gunakan Skop Blok dengan let dan const
Gunakan let dan const untuk mengisytiharkan pembolehubah dalam blok (seperti gelung atau bersyarat), memastikan ia tidak boleh diakses di luar blok itu.

// ❌ Avoid
let book = { title: "Inferno", author: "Dan Brown" };

// The book object will be overrode with string
book = "Hello world";
// ✅ Use
const book = { title: "Inferno", author: "Dan Brown" };

// The book object cannot be overrode
book = "Hello world";

Modularkan Kod Anda
Susun kod anda ke dalam modul. Gunakan modul ES6 atau IIFE (Ungkapan Fungsi Yang Dipanggil Serta-merta) untuk merangkum pembolehubah.

let sum = "5" + 1; // "51" (string concatenation)
// In the code above, typeof sum is a string

let sub = "5" - 1; // 4 (string converted to number)
// In the code obove, typeof sub in a number
Another example can be helpful:

let lang = "JavaScript"; // typeof name is string
lang = 15; // changes typeof x to a number

Enkapsulasi dalam Objek:
Himpunkan pembolehubah dan fungsi berkaitan dalam objek untuk mengelakkan pencemaran skop global.

console.log(5 == '5'); // true (number is converted to string)
console.log(null == undefined); // true (considered equal)
console.log(0 == false); // true (0 is converted to boolean as it's falsy value)
Strict Equality
With ===, the comparison checks both the value and the type. If types are different, it returns false

console.log(5 === '5'); // false (different types)
console.log(null === undefined); // false (different types)
console.log(0 === false); // false (different types)

Gunakan Storan Tempatan dengan Bijak
Jika anda perlu mengekalkan data, pertimbangkan untuk menggunakan storan setempat, storan sesi atau indexedDB dan bukannya pembolehubah global.

const book = { name: 'The Lost Symbol', author: 'Dan Brown' };
const { name, price } = book; // concise extraction

Hadkan Penggunaan Global
Jika anda mesti menggunakan pembolehubah global, hadkan penggunaannya kepada pemalar konfigurasi atau tetapan seluruh aplikasi. Namakannya dengan jelas untuk menunjukkan sifat global mereka.

const colors = ['red', 'green', 'blue'];
const [firstColor, secondColor] = colors; // clear intention

Elakkan Kesan Sampingan
Apabila mereka bentuk fungsi, elakkan mengubah suai pembolehubah global. Ini memastikan fungsi boleh diramal dan lebih mudah untuk diuji.

const { height = 180 } = person; // uses default value if height is undefined

Gunakan 'ini' dengan Bijak
Dalam pengaturcaraan berorientasikan objek, gunakan ini untuk mengurus keadaan dalam keadaan dan bukannya bergantung pada pembolehubah global.

const user = { profile: { name: 'Eren Yeager', age: 20 } };
const { profile: { name } } = user; // easy access to nested properties

Dengan mengelakkan pembolehubah global, anda mempertingkatkan modulariti dan kebolehselenggaraan kod anda. Ia membantu mengelakkan konflik penamaan dan kesan sampingan yang tidak diingini, menjadikan kod anda lebih mudah diramal dan lebih mudah untuk digunakan. Mengikuti amalan terbaik ini akan membawa kepada pangkalan kod yang lebih bersih dan terurus.

13 — Gunakan Promises dan Async/Await for Asynchronous Code
Menggunakan Promises dan async/wait dalam JavaScript membantu mengurus operasi tak segerak dengan lebih berkesan, menjadikan kod anda lebih bersih dan lebih mudah dibaca.

Memahami Janji
Janji ialah objek yang mewakili penyiapan (atau kegagalan) operasi tak segerak dan nilai yang terhasil.

Anda boleh mencipta Promise menggunakan pembina Promise:

function display({ name, age }) {
    console.log(`${name} is ${age} years old.`);
}

Menepati Janji
Anda boleh mengendalikan hasil Promise menggunakan .then() untuk kejayaan dan .catch() untuk pengendalian ralat.

function greet(name = 'Guest') {
    console.log(`Hello, ${name}!`);
}

greet();         // Output: Hello, Guest!
greet('Chrollo');  // Output: Hello, Chrollo!

Merangkai Janji
Anda boleh merantai berbilang operasi tak segerak menggunakan Janji.

function multiply(a, b = 1) {
    return a * b;
}

multiply(5);    // Output: 5
multiply(5, 2);  // Output: 10

Menggunakan Async/Await
async/wait menyediakan cara yang lebih segerak untuk menulis kod tak segerak, menjadikannya lebih mudah untuk dibaca dan diselenggara.

Mengisytiharkan Fungsi Async:
Gunakan kata kunci async sebelum fungsi untuk mentakrifkannya sebagai fungsi tak segerak.

// ❌ Avoid
const str = new String();
const num = new Number();
const bool = new Boolean();
const obj = new Object();
const arr = new Array();
const regEx = new RegExp();
const func = new Function();

// ✅ Use
const str = "JavaScript";
const num = 10;
const bool = true;
const obj = {};
const arr = [];
const regEx = /()/;
const func = function() {};

Memanggil Fungsi Async
Anda boleh memanggil fungsi async sama seperti fungsi biasa. Tetapi, awas ia akan sentiasa membalas Janji.

// ❌ Avoid
let book = { title: "Inferno", author: "Dan Brown" };

// The book object will be overrode with string
book = "Hello world";
// ✅ Use
const book = { title: "Inferno", author: "Dan Brown" };

// The book object cannot be overrode
book = "Hello world";

Mengendalikan Berbilang Operasi Tak Segerak
Anda boleh menggunakan Promise.all untuk menjalankan berbilang janji secara selari dan menunggu semua janji itu diselesaikan.

let sum = "5" + 1; // "51" (string concatenation)
// In the code above, typeof sum is a string

let sub = "5" - 1; // 4 (string converted to number)
// In the code obove, typeof sub in a number
Another example can be helpful:

let lang = "JavaScript"; // typeof name is string
lang = 15; // changes typeof x to a number

Pengendalian Ralat
Kedua-dua Janji dan async/menunggu menyediakan cara untuk menangani ralat dengan anggun.

Menggunakan .catch() dengan Janji:

console.log(5 == '5'); // true (number is converted to string)
console.log(null == undefined); // true (considered equal)
console.log(0 == false); // true (0 is converted to boolean as it's falsy value)
Strict Equality
With ===, the comparison checks both the value and the type. If types are different, it returns false

console.log(5 === '5'); // false (different types)
console.log(null === undefined); // false (different types)
console.log(0 === false); // false (different types)

Menggunakan try/catch dengan Async/Await:

const book = { name: 'The Lost Symbol', author: 'Dan Brown' };
const { name, price } = book; // concise extraction

Menggunakan Promises dan async/wait menjadikan pengendalian operasi tak segerak dalam JavaScript lebih mudah diurus. Mereka membantu mengelakkan panggilan balik neraka dan meningkatkan kebolehbacaan kod. Menerima corak ini akan membawa kepada kod yang lebih bersih, lebih boleh diselenggara dan tahan ralat.

14 — Dokumen Kod Anda
Mendokumentasikan kod anda adalah penting untuk mengekalkan kejelasan, membantu kerjasama dan memastikan kebolehselenggaraan jangka panjang.

Gunakan Komen Jelas
Terangkan "Mengapa," Bukan "Apa": Fokus pada menerangkan sebab anda melakukan sesuatu dan bukannya apa yang dilakukan oleh kod tersebut. Kod itu sendiri sepatutnya cukup boleh dibaca untuk menyampaikan perkara yang dilakukannya.

const colors = ['red', 'green', 'blue'];
const [firstColor, secondColor] = colors; // clear intention

Komen Logik Kompleks: Untuk bahagian kod yang rumit atau tidak jelas, berikan penjelasan terperinci.

const { height = 180 } = person; // uses default value if height is undefined

Gunakan Komen Gaya Docstring
Dalam JavaScript, terutamanya apabila menggunakan JSDoc, anda boleh mendokumentasikan fungsi, kelas dan kaedah menggunakan ulasan berstruktur.

const user = { profile: { name: 'Eren Yeager', age: 20 } };
const { profile: { name } } = user; // easy access to nested properties

Kekalkan Fail README
Untuk projek, kekalkan fail README.md yang memberikan gambaran keseluruhan, arahan pemasangan, contoh penggunaan dan garis panduan sumbangan.

Dokumentasi yang berkesan menjadikan kod anda lebih mudah difahami dan diselenggara, membantu pembangun semasa dan akan datang (termasuk anda sendiri) berfungsi dengan cekap. Dengan memasukkan amalan ini ke dalam aliran kerja pembangunan anda, anda akan memupuk kerjasama yang lebih baik dan mengurangkan keluk pembelajaran bagi sesiapa sahaja yang berinteraksi dengan kod anda.

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