Seperti yang Anda ketahui, JavaScript adalah bahasa pemrograman nomor satu di dunia, ini adalah bahasa web, ini adalah bahasa aplikasi hybrid seluler (seperti PhoneGap atau Appcelerator), ini adalah bahasa sisi server (seperti NodeJS atau Wakanda), ini adalah bahasa sisi server (seperti NodeJS atau Wakanda), Dan masih banyak implementasi lainnya. Pada saat yang sama, ini juga merupakan bahasa pencerahan bagi banyak pemula, karena tidak hanya dapat menampilkan pesan peringatan sederhana di browser, tetapi juga dapat digunakan untuk mengendalikan robot (menggunakan nodebot, atau nodruino). Pengembang yang menguasai JavaScript dan dapat menulis kode yang terorganisir, terstandarisasi, dan berkinerja efisien telah banyak dicari di pasar bakat.
Perlu diperhatikan bahwa cuplikan kode dalam artikel ini telah diuji pada Google Chrome terbaru (versi 30), yang menggunakan mesin JavaScript V8 (V8 3.20.17.15).
1 Jangan lupa menggunakan kata kunci var saat pertama kali memberikan nilai pada suatu variabel
Menetapkan nilai ke variabel yang tidak ditentukan menyebabkan terciptanya variabel global. Hindari variabel global.
2 Gunakan === sebagai pengganti ==
Operator == (atau !=) secara otomatis melakukan konversi tipe bila diperlukan. Operasi === (atau !==) tidak melakukan konversi apa pun. Ini membandingkan nilai dan tipe dan juga dianggap lebih cepat dari ==.
Copy kode kodenya sebagai berikut:
[10] === 10 // salah
[10] == 10 // benar
'10' == 10 // benar
'10' === 10 // salah
[] == 0 // benar
[] === 0 // salah
'' == salah // benar tetapi benar == "a" salah
'' === salah // salah
3 Gunakan penutupan untuk mengimplementasikan variabel privat
Copy kode kodenya sebagai berikut:
fungsi Orang(nama, umur) {
this.getName = function() { nama kembali;
this.setName = fungsi(Nama Baru) { nama = Nama Baru };
this.getAge = function() { mengembalikan usia };
this.setAge = fungsi(usia baru) { usia = usia baru };
//Properti tidak diinisialisasi di konstruktor
pekerjaan var;
this.getOccupation = function() { mengembalikan pekerjaan;
this.setOccupation = fungsi(newOcc) { pekerjaan =
baruOcc; };
}
4 Gunakan titik koma di akhir pernyataan
Merupakan praktik yang baik untuk menggunakan titik koma di akhir pernyataan. Anda tidak akan diperingatkan jika lupa menulisnya, karena dalam kebanyakan kasus, penerjemah JavaScript akan menambahkan titik koma untuk Anda.
5 Buat konstruktor objek
Copy kodenya seperti berikut: function Person(firstName, lastName){
ini.NamaDepan = NamaDepan;
ini.NamaBelakang = NamaBelakang;
}
var Saad = Orang baru("Saad", "Mousliki");
6 Gunakan typeof, instanceof dan konstruktor dengan hati-hati
Salin kode sebagai berikut: var arr = ["a", "b", "c"];
typeof arr; // mengembalikan "objek"
arr instanceof Array // benar
arr.konstruktor(); //[]
7 Membuat fungsi panggilan mandiri (Fungsi Panggilan Mandiri)
Hal ini sering disebut Fungsi Anonim yang Dipanggil Sendiri atau Ekspresi Fungsi yang Segera Dipanggil IIFE. Ini adalah fungsi yang dijalankan secara otomatis segera setelah pembuatan, biasanya sebagai berikut:
Copy kode kodenya sebagai berikut:
(fungsi(){
// beberapa kode pribadi yang akan dieksekusi secara otomatis
})();
(fungsi(a,b){
var hasil = a+b;
hasil pengembalian;
})(10,20)
8- Dapatkan item acak dari array
Kode salinannya adalah sebagai berikut: var items = [12, 548, 'a', 2, 5478, 'foo', 8852, , 'Doe', 2145, 119];
var randomItem = item[Matematika.lantai(Matematika.acak() * item.panjang)];[kode]
9 Dapatkan nomor acak dalam rentang tertentu
Cuplikan kode ini berguna ketika Anda ingin menghasilkan data pengujian, seperti nilai gaji acak antara nilai minimum dan maksimum.
[kode]var x = Math.floor(Math.random() * (maks - min + 1)) + min;
10 Hasilkan array angka antara 0 dan nilai maksimum yang ditetapkan
Copy kode sebagai berikut: var numberArray = [], max = 100;
for( var i=1; numberArray.push(i++) < maks;); // angka = [0,1,2,3 ... 100]
11 Hasilkan string alfanumerik acak
Copy kodenya seperti berikut : function generateRandomAlphaNum(len) {
var rdmstring = "";
for( ; rdmString.length < len; rdmString += Math.random().toString(36).substr(2));
kembalikan rdmString.substr(0, len);
}
12 Mengacak serangkaian angka
Kode copynya adalah sebagai berikut: var number = [5, 458, 120, -215, 228, 400, 122205, -85411];
angka = angka.sort(fungsi(){ return Math.random() - 0,5});
/* nomor array akan sama misalnya dengan [120, 5, 228, -215, 400, 458, -85411, 122205] */
13 Fungsi pemangkasan senar
Ada fungsi trim klasik di Java, C#, PHP dan banyak bahasa lainnya, yang digunakan untuk menghilangkan spasi dalam string, tetapi tidak ada di JavaScript, jadi kita perlu menambahkan fungsi ini ke objek String.
Copy kode kodenya sebagai berikut:
String.prototype.trim = function(){return this.replace(/^/s+|/s+$/g, "");};//Hapus spasi awal dan akhir string, kecuali spasi internal rangkaian
14 Tambahkan array ke array lain
Salin kode sebagai berikut: var array1 = [12, "foo", {name: "Joe"}, -2458];
var array2 = ["Doe" , 555 , 100];
Array.prototipe.push.apply(array1, array2);
/* array1 akan sama dengan [12, "foo", {name "Joe"}, -2458, "Doe", 555, 100] */
//Faktanya, concat bisa langsung menghubungkan dua array, namun nilai kembaliannya adalah array baru. Berikut adalah perubahan langsung ke array1
15 Ubah objek argumen menjadi array
Copy kode berikut: var argArray = Array.prototype.slice.call(arguments);
Objek argumentasi adalah objek mirip array, tetapi bukan array sebenarnya
16 Verifikasi apakah parameternya berupa angka (number)
Salin kodenya sebagai berikut: function isNumber(n){
kembali !isNaN(parseFloat(n)) && isFinite(n);
}
17 Verifikasi apakah parameternya berupa array
Salin kode sebagai berikut: function isArray(obj){
return Objek.prototipe.toString.call(obj) === '[Array objek]' ;
}
Catatan: Jika metode toString() diganti, Anda tidak akan mendapatkan hasil yang diinginkan menggunakan teknik ini. Atau Anda dapat menggunakan:
Copy kode kodenya sebagai berikut:
Array.isArray(obj); // Ini adalah metode array baru
Jika Anda tidak menggunakan banyak frame, Anda juga dapat menggunakan metode instanceof. Namun jika Anda memiliki banyak konteks, Anda akan mendapatkan hasil yang salah.
Salin kode sebagai berikut: var myFrame = document.createElement('iframe');
dokumen.body.appendChild(myFrame);
var myArray = window.frames[window.frames.length-1].Array;
var arr = arraysaya baru(a,b,10); // [a,b,10]
// instanceof tidak akan berfungsi dengan benar, myArray kehilangan konstruktornya
// konstruktor tidak dibagi antar frame
arr contoh Array; // salah
18 Dapatkan nilai maksimum atau minimum dalam serangkaian angka
Kode copynya adalah sebagai berikut: var number = [5, 458, 120, -215, 228, 400, 122205, -85411];
var maxInNumbers = Math.max.apply(Matematika, angka);
var minInNumbers = Math.min.apply(Matematika, angka);
//Catatan Penerjemah: Metode function.prototype.apply digunakan di sini untuk meneruskan parameter.
19 Hapus array
Copy kode sebagai berikut: var myArray = [12, 222, 1000];
myArray.length = 0; // myArray akan sama dengan [].
20 Jangan gunakan delete untuk menghapus item dari array.
Gunakan splice alih-alih delete untuk menghapus item dari array. Penggunaan delete hanya akan mengganti item asli dengan yang tidak terdefinisi, dan tidak benar-benar menghapusnya dari array.
Jangan gunakan ini:
Salin kode sebagai berikut: var items = [12, 548,'a', 2, 5478, 'foo', 8852,, 'Doe', 2154, 119];
item.panjang; // kembali 11
hapus item[3]; // kembalikan nilai benar
item.panjang; // kembali 11
/* item akan sama dengan [12, 548, "a", tidak terdefinisi × 1, 5478, "foo", 8852, tidak terdefinisi × 1, "Doe", 2154, 119] */
Sebagai gantinya gunakan:
Salin kode sebagai berikut: var items = [12, 548,'a', 2, 5478, 'foo', 8852,, 'Doe', 2154, 119];
item.panjang; // kembali 11
item.sambungan(3,1);
item.panjang; // kembalikan 10
/* item akan sama dengan [12, 548, "a", 5478, "foo", 8852, undefinisi × 1, "Doe", 2154, 119] */
Metode hapus harus digunakan untuk menghapus properti suatu objek.
21 Gunakan panjang untuk memotong array
Mirip dengan cara menghapus array di atas, kita menggunakan properti panjang untuk memotong array.
Salin kode sebagai berikut: var myArray = [12, 222, 1000, 124, 98, 10];
myArray.length = 4; // myArray akan sama dengan [12, 222, 1000, 124].
Selain itu, jika Anda menyetel panjang larik ke nilai yang lebih besar dari nilai saat ini, panjang larik akan diubah dan item baru yang belum ditentukan akan ditambahkan untuk menggantikannya. Panjang array bukan merupakan properti read-only.
Salin kode sebagai berikut: myArray.length = 10; // panjang array baru adalah 10
myArray[myArray.length - 1]; // tidak terdefinisi
22 Gunakan logika AND/OR untuk membuat penilaian bersyarat
Copy kode kodenya sebagai berikut:
var foo = 10;
foo == 10 && doSomething(); // Setara dengan if (foo == 10) doSomething();
foo == 5 ||.melakukan Sesuatu(); // Setara dengan if (foo != 5) melakukan Sesuatu();
Logis AND juga dapat digunakan untuk menetapkan nilai default parameter fungsi
Copy kode kodenya sebagai berikut:
fungsi melakukan Sesuatu(arg1){
Arg1 = arg1 ||10; // Jika arg1 tidak disetel, Arg1 akan disetel ke 10 secara default
}
23 Gunakan metode map() untuk mengulangi item dalam array
Copy kodenya seperti berikut: var squares = [1,2,3,4].map(function (val) {
kembalikan val * val;
});
// kuadrat akan sama dengan [1, 4, 9, 16]
24 Membulatkan angka ke N tempat desimal
Copy kode sebagai berikut: var num =2.443242342;
num = num.toFixed(4); // angka akan sama dengan 2,4432
25 Masalah titik mengambang
Salin kode sebagai berikut: 0.1 + 0.2 === 0.3 // salah
9007199254740992 + 1 // sama dengan 9007199254740992
9007199254740992 + 2 // sama dengan 9007199254740994
Mengapa ini terjadi? 0,1+0,2 sama dengan 0,30000000000000004. Perlu Anda ketahui bahwa semua nomor JavaScript secara internal direpresentasikan sebagai angka floating point dalam biner 64-bit, sesuai dengan standar IEEE 754. Untuk pengenalan lebih lanjut, Anda dapat membaca postingan blog ini. Anda dapat mengatasi masalah ini menggunakan metode toFixed() dan toPrecision().
26 Saat menggunakan for-in untuk menelusuri properti internal suatu objek, perhatikan pemeriksaan propertinya.
Cuplikan kode berikut menghindari akses properti prototipe saat melakukan iterasi pada properti objek:
Copy kode kodenya sebagai berikut:
for (nama var dalam objek) {
if (objek.hasOwnProperty(nama)) {
// melakukan sesuatu dengan nama
}
}
27 operator koma
Copy kode kodenya sebagai berikut:
var a = 0;
var b = ( a++, 99 );
console.log(a); // a akan sama dengan 1
konsol.log(b); // b sama dengan 99
28 Caching variabel yang memerlukan perhitungan atau query
Untuk penyeleksi jQuery, sebaiknya kita menyimpan elemen DOM ini dalam cache.
Salin kode sebagai berikut: var navright = document.querySelector('#right');
var navleft = dokumen.querySelector('#kiri');
var navup = dokumen.querySelector('#up');
var navdown = dokumen.querySelector('#down');
29 Validasi parameter sebelum memanggil isFinite()
Salin kode sebagai berikut: isFinite(0/0); // false
isFinite("foo"); // salah
isFinite("10"); // benar
isFinite(10); // benar
isFinite(tidak terdefinisi); // salah
isFinite(); // salah
isFinite(nol); // benar!!!
30 Hindari indeks negatif dalam array
Copy kode sebagai berikut: var numberArray = [1,2,3,4,5];
var dari = numberArray.indexOf("foo") ; // dari sama dengan -1
numberArray.splice(dari,2); // akan mengembalikan [5]
Pastikan parameter saat memanggil indexOf tidak negatif.
31 Serialisasi dan deserialisasi berbasis JSON (serialisasi dan deserialisasi)
Copy kode sebagai berikut: var person = {name :'Saad', age : 26, department : {ID : 15, name : "R&D"} };
var stringFromPerson = JSON.stringify(orang);
/* stringFromPerson sama dengan "{"name":"Saad","age":26,"department":{"ID":15,"name":"R&D"}}" */
var personFromString = JSON.parse(stringFromPerson);
/* personFromString sama dengan objek orang */
32 Hindari penggunaan eval() dan konstruktor Fungsi
Menggunakan konstruktor eval dan Fungsi adalah operasi yang sangat mahal karena setiap kali mereka memanggil mesin skrip untuk mengubah kode sumber menjadi kode yang dapat dieksekusi.
Salin kode sebagai berikut: var func1 = new Function(functionCode);
var func2 = eval(fungsiKode);
33 Hindari penggunaan dengan()
Menggunakan with() menyisipkan variabel global. Oleh karena itu, variabel dengan nama yang sama akan ditimpa nilainya dan menyebabkan masalah yang tidak perlu.
34 Hindari penggunaan for-in untuk melakukan iterasi pada array
Hindari menggunakan metode seperti ini:
Salin kode seperti berikut: var sum = 0;
untuk (var i dalam arrayNumbers) {
jumlah += Angka array[i];
}
Cara yang lebih baik adalah:
Salin kode seperti berikut: var sum = 0;
for (var i = 0, len = arrayNumbers.length; i < len; i++) {
jumlah += Angka array[i];
}
Keuntungan tambahannya adalah nilai kedua variabel i dan len hanya dieksekusi satu kali, yang lebih efisien dibandingkan metode berikut:
Copy kode berikut: for (var i = 0; i < arrayNumbers.length; i++)
Mengapa? Karena arrayNumbers.length dihitung setiap kali diulang.
35 Meneruskan fungsi alih-alih string saat memanggil setTimeout() dan setInterval().
Jika Anda meneruskan string ke setTimeout() atau setInterval(), string tersebut akan diuraikan seolah-olah menggunakan eval, yang sangat memakan waktu.
Jangan gunakan:
Copy kode kodenya sebagai berikut:
setInterval('melakukanSesuatuPeriodik()', 1000);
setTimeOut('melakukan SesuatuSetelahFiveSeconds()', 5000)
Sebagai gantinya gunakan:
Copy kode kodenya sebagai berikut:
setInterval(melakukan Sesuatu Secara Berkala, 1000);
setTimeOut(melakukan SesuatuSetelahFiveSeconds, 5000);
36 Gunakan pernyataan switch/case daripada pernyataan if/else yang panjang
Saat menilai lebih dari 2 situasi, penggunaan switch/case lebih efisien dan elegan (lebih mudah mengatur kode). Namun jangan gunakan switch/case ketika ada lebih dari 10 situasi yang akan dinilai.
37 Gunakan saklar/kotak ketika menilai rentang numerik
Dalam situasi berikut, masuk akal untuk menggunakan switch/case untuk menentukan rentang nilai:
Copy kode kodenya sebagai berikut:
fungsi getCategory(usia) {
var kategori = "";
beralih (benar) {
kasusnya adalahNaN(usia):
kategori = "bukan umur";
merusak;
kasus (usia >= 50):
kategori = "Lama";
merusak;
kasus (usia <= 20):
kategori = "Sayang";
merusak;
bawaan:
kategori = "Muda";
merusak;
};
kategori pengembalian;
}
getCategory(5); // akan mengembalikan "Sayang"
//Secara umum, untuk menilai rentang numerik, lebih tepat menggunakan if/else. switch/case lebih cocok untuk menilai nilai-nilai tertentu
38 Tentukan objek prototipe untuk objek yang dibuat
Dimungkinkan untuk menulis fungsi yang membuat objek dengan parameter tertentu sebagai prototipe:
Salin kode sebagai berikut: function clone(object) {
fungsi OneShotConstructor(){};
OneShotConstructor.prototype= objek;
kembalikan OneShotConstructor();
}
klon(Array).prototipe; // []
39 Fungsi escape HTML
Salin kode sebagai berikut: function escapeHTML(teks) {
var pengganti= {"<": "<", ">": ">","&": "&", "/"": """};
return text.replace(/[<>&"]/g, function(karakter) {
pengembalian pengganti[karakter];
});
}
40 Hindari penggunaan try-catch-finally di dalam satu lingkaran
Saat runtime, setiap kali klausa catch dijalankan, objek pengecualian yang ditangkap akan ditugaskan ke sebuah variabel, dan dalam struktur try-catch-finally, variabel ini akan dibuat setiap saat.
Hindari menulis seperti ini:
Salin kode sebagai berikut: var object = ['foo', 'bar'], i;
for (i = 0, len = objek.panjang; i <len; i++) {
mencoba {
// melakukan sesuatu yang menimbulkan pengecualian
}
menangkap (e) {
//menangani pengecualian
}
}
Sebagai gantinya gunakan:
Salin kode sebagai berikut: var object = ['foo', 'bar'], i;
mencoba {
for (i = 0, len = objek.panjang; i <len; i++) {
// melakukan sesuatu yang menimbulkan pengecualian
}
}
menangkap (e) {
//menangani pengecualian
}
41 Tetapkan batas waktu untuk XMLHttpRequests.
Setelah permintaan XHR memakan waktu lama (misalnya, karena masalah jaringan), Anda mungkin perlu membatalkan permintaan tersebut, lalu Anda dapat menggunakan setTimeout() dengan panggilan XHR.
Copy kode sebagai berikut: var xhr = new XMLHttpRequest();
xhr.onreadystatechange = fungsi () {
if (ini.readyState == 4) {
clearTimeout(batas waktu);
// melakukan sesuatu dengan data respons
}
}
var batas waktu = setTimeout( fungsi () {
xhr.abort(); // panggilan balik kesalahan panggilan
}, 60*1000 /* batas waktu setelah satu menit */ );
xhr.open('GET', url, benar);
xhr.kirim();
Selain itu, secara umum Anda harus menghindari permintaan Ajax yang sinkron sepenuhnya.
42 Menangani batas waktu WebSocket
Biasanya, setelah koneksi WebSocket dibuat, server akan menghentikan waktu koneksi Anda setelah 30 detik jika Anda tidak aktif. Firewall juga terputus setelah beberapa saat tidak aktif.
Untuk mencegah masalah batas waktu, Anda mungkin perlu mengirim pesan kosong ke server secara berkala. Untuk melakukannya, Anda dapat menambahkan dua fungsi berikut ke kode Anda: satu untuk mempertahankan koneksi dan satu lagi untuk membatalkan penangguhan koneksi. Dengan teknik ini, Anda dapat mengontrol masalah batas waktu.
Gunakan ID pengatur waktu:
Copy kode seperti berikut: var timerID = 0;
fungsi tetap hidup() {
batas waktu var = 15000;
if (webSocket.readyState == webSocket.OPEN) {
webSocket.kirim('');
}
timerId = setTimeout(keepAlive, batas waktu);
}
fungsi pembatalanKeepAlive() {
jika (pengatur waktu) {
batalkan Waktu Habis(timerId);
}
}
Metode keepAlive() harus ditambahkan di akhir metode onOpen() pada koneksi webSOcket, dan cancelKeepAlive() ditambahkan di akhir metode onClose().
43 Perlu diingat bahwa operator primitif selalu lebih efisien dibandingkan pemanggilan fungsi. Gunakan vanillaJS.
Misalnya, jangan gunakan:
Copy kodenya seperti berikut: var min = Math.min(a,b);
A.dorongan(v);
Sebagai gantinya gunakan:
Copy kode berikut: var min = a < b ?
A[A.panjang] = v;
44 Jangan lupa gunakan alat merapikan kode saat coding . Gunakan JSLint dan alat kompresi kode (minifikasi) (seperti JSMin) sebelum online. "Alat Penghemat Waktu: Alat Mempercantik dan Memformat Kode"
45 JavaScript luar biasa.
Meringkaskan
Saya tahu masih banyak tip, trik, dan praktik terbaik lainnya di luar sana, jadi jika Anda memiliki hal lain yang ingin Anda tambahkan atau memiliki masukan atau koreksi terhadap yang telah saya bagikan, beri tahu saya di komentar.