JavaScript adalah bahasa pemrograman kelas dunia yang dapat digunakan untuk pengembangan web, pengembangan aplikasi seluler (phoneGap, appcelerator), pengembangan sisi server (Node.js dan Wakanda), dll. JavaScript juga merupakan bahasa pertama bagi banyak pemula yang memasuki dunia pemrograman. Ini dapat digunakan untuk menampilkan kotak prompt sederhana di browser, atau untuk mengontrol robot melalui nodebot atau noderuino. Pengembang yang dapat menulis kode JavaScript yang terstruktur dengan baik dan efisien sekarang menjadi orang yang paling dicari di pasar perekrutan.
Dalam artikel ini, saya akan membagikan beberapa tips, tips, dan praktik terbaik. Kecuali beberapa, keduanya adalah mesin JavaScript browser dan juru bahasa JavaScript sisi server.
Kode sampel dalam artikel ini lulus tes di Google Chrome 30 versi terbaru (V8 3.20.17.15).
1. Pastikan untuk menggunakan kata kunci VAR saat menetapkan nilai ke variabel untuk pertama kalinya.
Jika suatu variabel tidak dideklarasikan dan langsung ditugaskan ke nilai, itu akan digunakan sebagai variabel global baru secara default. Cobalah untuk menghindari menggunakan variabel global.
2. Gunakan === Ganti ==
Operator == dan! = Secara otomatis akan mengonversi tipe data jika diperlukan. Tapi === dan! == Tidak, mereka akan membandingkan nilai dan tipe data secara bersamaan, yang juga membuatnya lebih cepat dari == dan! =.
Salinan kode adalah sebagai berikut:
[10] === 10 // false
[10] == 10 // benar
'10' == 10 // benar
'10' === 10 // false
[] == 0 // benar
[] === 0 // false
'' == false // benar tapi benar == "a" false
'' === false // false
3. Hasil logis dari semua string yang kurang, null, 0, false, nan, dan kosong semuanya salah
4. Gunakan titik koma di ujung garis
Dalam praktiknya, yang terbaik adalah menggunakan titik koma. Tidak apa -apa lupa menulisnya. Dalam kebanyakan kasus, juru bahasa JavaScript akan ditambahkan secara otomatis. Untuk mengapa Anda ingin menggunakan titik koma, Anda dapat merujuk pada kebenaran tentang titik koma dalam artikel JavaScript.
5. Gunakan Konstruktor Objek
Salinan kode adalah sebagai berikut:
Function Person (FirstName, LastName) {
this.firstName = firstName;
this.LastName = LastName;
}
var saad = orang baru ("saad", "mousliki");
6. Berhati -hatilah dengan tipe, instance dan konstruktor
Tipeof: Operator unary JavaScript, digunakan untuk mengembalikan jenis asli dari suatu variabel dalam bentuk string. Perhatikan bahwa tipe NULL juga akan mengembalikan objek, dan sebagian besar jenis objek (array, tanggal waktu, dll.) Juga akan mengembalikan objek.
Konstruktor: Properti prototipe internal, yang dapat ditulis ulang melalui kode
Instanceof: Operator JavaScript, akan mencari di konstruktor dalam rantai prototipe, kembali true jika ditemukan, sebaliknya mengembalikan false jika false.
Salinan kode adalah sebagai berikut:
var arr = ["a", "b", "c"];
tipe ARR; // mengembalikan "objek"
ARR Instance dari array // true
arr.constructor (); // []
7. Gunakan fungsi mandiri
Fungsi dieksekusi secara otomatis secara langsung setelah pembuatan, yang biasanya disebut fungsi anonim yang diinformasikan sendiri atau ekspresi fungsi panggilan langsung (segera memohon ekspresi fungsi). Formatnya adalah sebagai berikut:
Salinan kode adalah sebagai berikut:
(fungsi(){
// Kode yang ditempatkan di sini akan dieksekusi secara otomatis
}) ();
(function (a, b) {
Hasil var = a+b;
hasil pengembalian;
}) (10,20)
8. Dapatkan secara acak anggota dari array
Salinan kode adalah sebagai berikut:
var item = [12, 548, 'a', 2, 5478, 'foo', 8852, 'doe', 2145, 119];
var randomItem = item [math.floor (math.random () * items.length)];
9. Dapatkan nomor acak dalam kisaran yang ditentukan
Fungsi ini sangat numerik ketika menghasilkan data palsu untuk pengujian, seperti jumlah upah dalam kisaran yang ditentukan.
Salinan kode adalah sebagai berikut:
var x = math.floor (math.random () * (maks - min + 1)) + min;
10. Hasilkan array angka dari 0 ke nilai yang ditentukan
Salinan kode adalah sebagai berikut:
var numberArray = [], maks = 100;
untuk (var i = 1; numberArray.push (i ++) <max;); // angka = [1,2,3 ... 100]
11. Hasilkan string alfanumerik acak
Salinan kode adalah sebagai berikut:
fungsi generaterandomalphanum (len) {
var rdmstring = "";
untuk (; rdmstring.length <len; rdmstring += math.random (). tostring (36) .substr (2));
return rdmstring.substr (0, len);
12. Ganggu urutan array angka
Salinan kode adalah sebagai berikut:
var angka = [5, 458, 120, -215, 228, 400, 122205, -85411];
numbers = numbers.sort (function () {return math.random () - 0.5});
/ * Angka array akan mirip dengan [120, 5, 228, -215, 400, 458, -85411, 122205] */
Di sini kami menggunakan fungsi penyortiran array bawaan dari JavaScript. Cara yang lebih baik adalah mengimplementasikannya dengan kode khusus (seperti algoritma Fisher-Yates). Anda dapat merujuk pada diskusi ini di StackOverflow.
13. Lepaskan ruang dari string
Bahasa seperti Java, C# dan PHP semuanya menerapkan fungsi penghinaan string khusus, tetapi tidak ada yang namanya JavaScript. Anda dapat menggunakan kode berikut untuk membuat fungsi trim untuk fungsi objek String:
Salinan kode adalah sebagai berikut:
String.prototype.trim = function () {return this.replace (/^/s+|/s+$/g, "");};
Mesin JavaScript baru sudah memiliki implementasi asli trim ().
14. Menambahkan Antara Array
Salinan kode adalah sebagai berikut:
var array1 = [12, "foo", {name "joe"}, -2458];
var array2 = ["doe", 555, 100];
Array.prototype.push.apply (array1, array2);
/ * nilai array1 adalah [12, "foo", {name "joe"}, -2458, "doe", 555, 100] */
15. Konversi objek menjadi array
Salinan kode adalah sebagai berikut:
var argarray = array.prototype.slice.call (argumen);
16. Verifikasi apakah itu angka
Salinan kode adalah sebagai berikut:
function isNumber (n) {
return! isnan (parsefloat (n)) && isfinite (n);
}
17. Verifikasi apakah itu array
Salinan kode adalah sebagai berikut:
fungsi isArray (obj) {
return object.prototype.toString.call (obj) === '[array objek]';
}
Tetapi jika metode tostring () ditulis ulang, itu tidak akan berhasil. Anda juga dapat menggunakan metode berikut:
Salinan kode adalah sebagai berikut:
Array.isarray (OBJ); // Ini metode array baru
Jika Anda tidak menggunakan bingkai di browser Anda, Anda juga dapat menggunakan instanceof, tetapi jika konteksnya terlalu rumit, Anda juga dapat membuat kesalahan.
Salinan kode adalah sebagai berikut:
var myframe = document.createElement ('iframe');
Document.Body.AppendChild (MyFrame);
var myArray = window.frames [window.frames.length-1] .Array;
var arr = myArray baru (a, b, 10); // [a, b, 10]
// Konstruktor myarray telah hilang, hasil dari instanceof akan abnormal
// Konstruktor tidak dapat dibagikan di seluruh bingkai
array array; // PALSU
18. Dapatkan nilai maksimum dan minimum dalam array
Salinan kode adalah sebagai berikut:
var angka = [5, 458, 120, -215, 228, 400, 122205, -85411];
var maxinnumbers = math.max.Apply (matematika, angka);
var mininnumbers = Math.min.Amply (matematika, angka);
19. Bersihkan array
Salinan kode adalah sebagai berikut:
var myArray = [12, 222, 1000];
myarray.length = 0; // myarray akan sama dengan [].
20. Jangan menghapus atau menghapus elemen langsung dari array
Jika Anda menggunakan Delete langsung pada elemen array, itu tidak benar -benar dihapus, tetapi cukup atur elemen sebagai tidak terdefinisi. Sambungan harus digunakan untuk penghapusan elemen array.
Jangan:
Salinan kode adalah sebagai berikut:
var item = [12, 548, 'a', 2, 5478, 'foo', 8852, 'doe', 2154, 119];
item.length; // Kembalikan 11
Hapus item [3]; // Kembalikan true
item.length; // Kembalikan 11
/ * Hasil item adalah [12, 548, "A", tidak terdefinisi × 1, 5478, "foo", 8852, × 1 yang tidak ditentukan, "doe", 2154, 119] */
Adapun:
Salinan kode adalah sebagai berikut:
var item = [12, 548, 'a', 2, 5478, 'foo', 8852, 'doe', 2154, 119];
item.length; // Kembalikan 11
item.splice (3,1);
item.length; // Kembalikan 10
/* Hasil item adalah [12, 548, "a", 5478, "foo", 8852, tidak ditentukan × 1, "doe", 2154, 119]
Anda dapat menggunakan Hapus saat menghapus properti objek.
21. Gunakan atribut panjang untuk memotong array
Pada contoh sebelumnya, gunakan atribut panjang untuk menghapus array, dan Anda juga dapat menggunakannya untuk memotong array:
Salinan kode adalah sebagai berikut:
var myArray = [12, 222, 1000, 124, 98, 10];
myarray.length = 4; // myarray akan sama dengan [12, 222, 1000, 124].
Pada saat yang sama, jika atribut panjang meningkat, nilai panjang array akan meningkat, dan tidak ditentukan akan digunakan sebagai elemen baru untuk diisi. Panjang adalah properti yang dapat ditulis.
Salinan kode adalah sebagai berikut:
myarray.length = 10; // Panjang array baru adalah 10
myarray [myarray.length - 1]; // belum diartikan
22. Gunakan logika dan atau dalam kondisi
Salinan kode adalah sebagai berikut:
var foo = 10;
foo == 10 && dosomething (); // adalah hal yang sama seperti jika (foo == 10) dosomething ();
foo == 5 || dosomething (); // adalah hal yang sama seperti jika (foo! = 5) dosomething ();
Logis atau juga dapat digunakan untuk mengatur nilai default, seperti nilai default parameter fungsi.
Salinan kode adalah sebagai berikut:
function dosomething (arg1) {
arg1 = arg1 || 10; // arg1 akan memiliki 10 sebagai nilai default jika belum diatur
}
23. Buat loop metode fungsi peta () data
Salinan kode adalah sebagai berikut:
var squares = [1,2,3,4] .map (function (val) {
mengembalikan val * val;
});
// kotak akan sama dengan [1, 4, 9, 16]
24. Pertahankan jumlah tempat desimal yang ditentukan
Salinan kode adalah sebagai berikut:
var num = 2.443242342;
num = num.tofixed (4); // num akan sama dengan 2.4432
Perhatikan bahwa tofixec () mengembalikan string, bukan angka.
25. Masalah Perhitungan Titik Terapung
Salinan kode adalah sebagai berikut:
0.1 + 0.2 === 0.3 //
9007199254740992 + 1 // sama dengan 9007199254740992
9007199254740992 + 2 // sama dengan 9007199254740994
Mengapa? Karena 0,1+0,2 sama dengan 0,3000000000000000000004. Nomor JavaScript dibangun sesuai dengan standar IEEE 754 dan diwakili secara internal oleh desimal floating point 64-bit. Untuk detailnya, silakan merujuk bagaimana angka -angka di JavaScript dikodekan.
Masalah ini dapat diselesaikan dengan menggunakan tofixed () dan topRecision ().
26. Periksa properti objek melalui loop for-in
Penggunaan berikut dapat mencegahnya memasuki sifat prototipe objek selama iterasi.
Salinan kode adalah sebagai berikut:
untuk (nama var di objek) {
if (object.hasownproperty (name)) {
// Lakukan sesuatu dengan nama
}
}
27. Operator koma
Salinan kode adalah sebagai berikut:
var a = 0;
var b = (a ++, 99);
console.log (a); // A akan sama dengan 1
console.log (b); // B sama dengan 99
28. Penyimpanan variabel sementara yang digunakan untuk perhitungan dan kueri
Pada pemilih jQuery, seluruh elemen DOM dapat disimpan sementara.
Salinan kode adalah sebagai berikut:
var navright = document.queryselector ('#right');
var navleft = document.queryselector ('#left');
var navup = document.queryselector ('#up');
var navdown = document.queryselector ('#down');
29. Periksa parameter yang diteruskan di isfinite () terlebih dahulu
Salinan kode adalah sebagai berikut:
isfinite (0/0); // PALSU
isfinite ("foo"); // PALSU
isfinite ("10"); // BENAR
isfinite (10); // BENAR
isfinite (tidak terdefinisi); // PALSU
isfinite (); // PALSU
isfinite (null); // Benar, perhatikan ini
30. Hindari menggunakan angka negatif sebagai pengindeksan dalam array
Salinan kode adalah sebagai berikut:
var numberArray = [1,2,3,4,5];
var from = numberArray.indexof ("foo"); // Dari sama dengan -1
numberArray.splice (dari, 2); // akan kembali [5]
Perhatikan bahwa parameter indeks yang diteruskan ke splice bukanlah angka negatif. Ketika itu adalah angka negatif, elemen akan dihapus dari akhir array.
31. Gunakan JSON untuk membuat serialisasi dan deserialize
Salinan kode adalah sebagai berikut:
var person = {name: 'saad', usia: 26, departemen: {id: 15, nama: "r & d"}};
var stringfromperson = json.stringify (orang);
/ * Hasil StringFromperson adalah "{" name ":" Saad "," Age ": 26," department ": {" id ": 15," name ":" r & d "}}" */
var personfromString = json.parse (StringFromperson);
/* Nilai personfromString sama dengan objek orang*/
32. Jangan gunakan eval () atau konstruktor fungsi
Overhead eval () dan konstruktor fungsi tinggi. Setiap kali mereka dipanggil, mesin JavaScript perlu mengubah kode sumber menjadi kode yang dapat dieksekusi.
Salinan kode adalah sebagai berikut:
var func1 = fungsi baru (functionCode);
var func2 = eval (functionCode);
33. Hindari menggunakan dengan ()
Gunakan dengan () untuk menambahkan variabel ke ruang lingkup global. Oleh karena itu, jika ada variabel lain dengan nama yang sama, mudah untuk bingung, dan nilainya juga akan ditimpa.
34. Jangan gunakan untuk array
menghindari:
Salinan kode adalah sebagai berikut:
var sum = 0;
untuk (var i di arraynumbers) {
jumlah += arraynumber [i];
}
Alih-alih:
Salinan kode adalah sebagai berikut:
var sum = 0;
untuk (var i = 0, len = arraynumbers.length; i <len; i ++) {
jumlah += arraynumber [i];
}
Keuntungan lain adalah bahwa dua variabel I dan Len berada dalam deklarasi pertama dari loop, dan keduanya hanya akan diinisialisasi sekali, yang lebih cepat dari metode penulisan berikut:
Salinan kode adalah sebagai berikut:
untuk (var i = 0; i <arraynumbers.length; i ++)
35. Gunakan fungsi alih -alih string saat lulus ke setInterval () dan setTimeout ()
Jika Anda meneruskan string ke setTimeout () dan setInterval (), mereka akan mengonversi dengan cara yang sama untuk mengevaluasi, yang pasti akan lebih lambat, jadi jangan gunakan:
Salinan kode adalah sebagai berikut:
setInterval ('dosomethingperiodically ()', 1000);
setTimeout ('dosomethingAfterfiveseconds ()', 5000);
Sebaliknya, gunakan:
Salinan kode adalah sebagai berikut:
setInterval (dosomethingicially, 1000);
setTimeout (dosomethingAfterfiveseconds, 5000);
36. Gunakan sakelar/casing alih -alih setumpuk besar IF/else
Ketika menilai bahwa ada lebih dari dua cabang, gunakan sakelar/case lebih cepat, dan lebih elegan, dan lebih kondusif untuk organisasi kode. Tentu saja, jika ada lebih dari 10 cabang, jangan gunakan sakelar/casing.
37. Gunakan interval digital di Switch/Case
Bahkan, kondisi kasus dalam sakelar/case juga dapat ditulis seperti ini:
Salinan kode adalah sebagai berikut:
fungsi getCategory (usia) {
var kategori = "";
Switch (true) {
case isnan (usia):
kategori = "bukan usia";
merusak;
case (usia> = 50):
kategori = "lama";
merusak;
kasus (usia <= 20):
kategori = "bayi";
merusak;
bawaan:
kategori = "muda";
merusak;
};
kategori pengembalian;
}
GetCategory (5); // akan mengembalikan "sayang"
38. Gunakan objek sebagai prototipe
Dengan cara ini, Anda dapat membuat objek baru berdasarkan ini sebagai parameter:
Salinan kode adalah sebagai berikut:
function clone (objek) {
function oneshotconstructor () {};
OneshotConstructor.prototype = objek;
mengembalikan OneShotConstructor baru ();
}
klon (array) .prototype; // []
39. Fungsi Konversi Bidang HTML
Salinan kode adalah sebagai berikut:
fungsi melarikan diri (teks) {
var Replacements = {"<": "<", ">": ">", "&": "&", "/": "" "};
return text.replace (/[<> & "]/g, function (karakter) {
mengembalikan pengganti [karakter];
});
}
40. Jangan gunakan cobalah-tangkapan akhir di dalam loop
Bagian tangkapan dalam try-catch-finial akan menetapkan pengecualian untuk variabel saat dieksekusi, dan variabel ini akan dibangun ke dalam variabel baru dalam ruang lingkup runtime.
Jangan:
Salinan kode adalah sebagai berikut:
var objek = ['foo', 'bar'], i;
untuk (i = 0, len = objek.length; i <len; i ++) {
mencoba {
// Lakukan sesuatu yang melempar pengecualian
}
Catch (e) {
// menangani pengecualian
}
}
Alih-alih:
Salinan kode adalah sebagai berikut:
var objek = ['foo', 'bar'], i;
mencoba {
untuk (i = 0, len = objek.length; i <len; i ++) {
// Lakukan sesuatu yang melempar pengecualian
}
}
Catch (e) {
// menangani pengecualian
}
41. Perhatikan pengaturan batas waktu saat menggunakan XMLHTTPREQUESTS
Ketika XmlHttpRequests dieksekusi, ketika tidak ada respons untuk waktu yang lama (seperti masalah jaringan, dll.), Koneksi harus dibatalkan. Pekerjaan ini dapat dilakukan dengan setTimeout ():
Salinan kode adalah sebagai berikut:
var xhr = xmlhttpRequest baru ();
xhr.onreadystatechange = function () {
if (this.readystate == 4) {
ClearTimeout (timeout);
// Lakukan sesuatu dengan data respons
}
}
var timeout = setTimeout (function () {
xhr.abort (); // panggilan balik kesalahan
}, 60*1000 /*Batas waktu setelah satu menit* /);
xhr.open ('get', url, true);
xhr.send ();
Pada saat yang sama, perlu dicatat bahwa beberapa permintaan XMLHTTPREQUESTS tidak boleh dimulai pada saat yang sama.
42. Tangani waktu tunggu Websocket
Secara umum, setelah koneksi WebSocket dibuat, jika tidak ada aktivitas dalam waktu 30 detik, server akan menghitung waktu koneksi, dan firewall juga dapat menghitung waktu koneksi yang tidak aktif dalam siklus satuan.
Untuk mencegah hal ini terjadi, pesan kosong dapat dikirim ke server setiap waktu tertentu. Persyaratan ini dapat dicapai melalui dua fungsi berikut, satu untuk menjaga koneksi tetap aktif dan yang lainnya khusus untuk mengakhiri keadaan ini.
Salinan kode adalah sebagai berikut:
var timerid = 0;
function keepalive () {
var timeout = 15000;
if (websocket.readystate == WebSocket.open) {
websocket.send ('');
}
timerId = setTimeout (Keepalive, timeout);
}
Fungsi contancheKeepealive () {
if (timerid) {
CancelTimeout (timerid);
}
}
Fungsi KeepAlive () dapat ditempatkan di akhir metode OnOpen () dari koneksi WebSocket, dan CancelKeepeAlive () dapat ditempatkan pada akhir metode OnClose ().
43. Perhatikan waktu dan operator asli lebih cepat dari panggilan fungsi. Gunakan vanillejs
Misalnya, umumnya tidak seperti ini:
Salinan kode adalah sebagai berikut:
var min = math.min (a, b);
A.Push (V);
Ini dapat digunakan sebagai gantinya:
Salinan kode adalah sebagai berikut:
var min = a <b? A: B;
A [a.length] = v;
44. Perhatikan struktur kode selama pengembangan, periksa dan kompres kode javascript sebelum online
Anda dapat menggunakan alat seperti JSLint atau JSmin untuk memeriksa dan mengompres kode.