JavaScript ialah bahasa pengaturcaraan paling popular di dunia dan boleh digunakan untuk pembangunan web, pembangunan aplikasi mudah alih (PhoneGap, Appcelerator), pembangunan sisi pelayan (Node.js dan Wakanda), dll. JavaScript juga merupakan bahasa pertama bagi ramai orang baru untuk memasuki dunia pengaturcaraan. Ia boleh digunakan untuk memaparkan kotak gesaan ringkas dalam penyemak imbas, atau untuk mengawal robot melalui nodebot atau nodruino. Pembangun yang boleh menulis kod JavaScript dengan struktur yang jelas dan prestasi tinggi kini merupakan orang yang paling dicari dalam pasaran pengambilan.
Dalam artikel ini, saya akan berkongsi beberapa petua, rahsia dan amalan terbaik JavaScript yang, dengan beberapa pengecualian, digunakan pada kedua-dua enjin JavaScript penyemak imbas dan jurubahasa JavaScript bahagian pelayan.
Kod sampel dalam artikel ini lulus ujian pada versi terkini Google Chrome 30 (V8 3.20.17.15).
1 Pastikan anda menggunakan kata kunci var apabila memberikan nilai kepada pembolehubah untuk kali pertama
Jika pembolehubah ditetapkan secara langsung tanpa diisytiharkan, ia akan digunakan sebagai pembolehubah global baharu secara lalai Cuba elakkan daripada menggunakan pembolehubah global.
2. Gunakan === bukannya ==
Pengendali
== dan != secara automatik menukar jenis data jika perlu. Tetapi === dan !== jangan, mereka membandingkan nilai dan jenis data pada masa yang sama, yang juga menjadikannya lebih pantas daripada == dan !=.
[10] === 10 // adalah palsu
[10] == 10 // adalah benar
'10' == 10 // adalah benar
'10' === 10 // adalah palsu
[] == 0 // adalah benar
[] === 0 // adalah palsu
'' == palsu // adalah benar tetapi benar == "a" adalah palsu
'' === palsu // adalah palsu
3 Keputusan logik bagi rentetan terkurang, nol, 0, palsu, NaN dan kosong adalah palsu
4. Gunakan koma bertitik di hujung baris
Secara praktikal, lebih baik menggunakan koma bertitik Tidak kira jika anda terlupa untuk menulisnya Dalam kebanyakan kes, penterjemah JavaScript akan menambahkannya secara automatik. Untuk maklumat lanjut tentang sebab koma bertitik digunakan, sila rujuk artikel The Truth About Semicolons dalam JavaScript.
5. Gunakan pembina objek
fungsi Orang(Nama depan,Nama akhir){
This.firstName = firstName;
This.lastName = lastName;
}
var Saad = Orang baharu("Saad", "Mousliki");
6. Gunakan typeof, instanceof dan constructor dengan berhati-hati
typeof: JavaScript unary operator, digunakan untuk mengembalikan jenis asal pembolehubah dalam bentuk rentetan yang typeof null juga akan mengembalikan objek (array Array, time Date, dll.) juga akan kembali objek
contructor: sifat prototaip dalaman, boleh ditindih melalui kod
instanceof: Operator JavaScript, akan mencari dalam pembina dalam rantaian prototaip, mengembalikan benar jika dijumpai, jika tidak, kembali palsu
var arr = ["a", "b", "c"];
typeof arr; // Kembalikan "objek"
arr instanceof Array // benar
arr.constructor(); //[]
7. Gunakan fungsi panggilan kendiri
Fungsi ini dilaksanakan secara automatik terus selepas penciptaan, biasanya dipanggil fungsi tanpa nama yang dipanggil sendiri (Fungsi Tanpa Nama Yang Diminta Sendiri) atau dipanggil secara langsung ungkapan fungsi (Ungkapan Fungsi Yang Dikenakan Serta-merta). Formatnya adalah seperti berikut:
(fungsi(){
//Kod yang diletakkan di sini akan dilaksanakan secara automatik
})();
(fungsi(a,b){
hasil var = a b;
Pulangan hasil;
})(10,20)
8 Dapatkan ahli secara rawak daripada tatasusunan
var item = [12, 548, 'a', 2, 5478, 'foo', 8852, , 'Doe', 2145, 119];
var randomItem = item[Math.floor(Math.random() * items.length)];
9 Dapatkan nombor rawak dalam julat yang ditentukan
Fungsi ini amat berguna apabila menjana data palsu untuk ujian, seperti gaji dalam julat tertentu.
var x = Math.floor(Math.random() * (maks - min 1)) min;
10 Hasilkan tatasusunan digital daripada 0 kepada nilai yang ditentukan
var numbersArray = [] , maks = 100;
for( var i=1; numbersArray.push(i ) < max;); // nombor = [1,2,3 ... 100]
11. Hasilkan rentetan abjad angka rawak
function generateRandomAlphaNum(len) {
var rdmString = "";
for( ; rdmString.length < len; rdmString = Math.random().toString(36).substr(2));
Kembalikan rdmString.substr(0, len);
12. Mengganggu susunan susunan nombor
nombor var = [5, 458, 120, -215, 228, 400, 122205, -85411];
nombor = nombor.sort(fungsi(){ return Math.random() - 0.5});
/* Tatasusunan nombor akan kelihatan seperti [120, 5, 228, -215, 400, 458, -85411, 122205] */
Fungsi pengisihan tatasusunan terbina dalam JavaScript digunakan di sini Cara yang lebih baik ialah menggunakan kod khusus untuk melaksanakannya (seperti algoritma Fisher-Yates Anda boleh melihat perbincangan ini di StackOverFlow).
13. Keluarkan ruang daripada rentetan
Java, C#, PHP dan bahasa lain semuanya melaksanakan fungsi penyingkiran ruang rentetan khas, tetapi tiada fungsi sedemikian dalam JavaScript Anda boleh menggunakan kod berikut untuk berfungsi fungsi pemangkasan untuk objek String:
String.prototype.trim = function(){return this.replace(/^s |s $/g, "");};
Enjin JavaScript baharu sudah mempunyai pelaksanaan asli trim().
14. Tambahkan antara tatasusunan
var array1 = [12 , "foo" , {name "Joe"} , -2458];
var array2 = ["Doe" , 555 , 100];
Array.prototype.push.apply(array1, array2);
/* Nilai tatasusunan1 ialah [12, "foo", {name "Joe"}, -2458, "Doe", 555, 100] */
15. Tukar objek kepada tatasusunan
var argArray = Array.prototype.slice.call(arguments);
16. Sahkan sama ada ia adalah nombor
fungsi ialahNombor(n){
Kembalikan !isNaN(parseFloat(n)) && isFinite(n);
}
17. Sahkan sama ada ia adalah tatasusunan
fungsi ialahArray(obj){
Kembalikan Object.prototype.toString.call(obj) === '[Array objek]' ;
}
Tetapi jika kaedah toString() ditindih, ia tidak akan berfungsi. Anda juga boleh menggunakan kaedah berikut:
Array.isArray(obj); // kaedah Array baharu
Jika bingkai tidak digunakan dalam penyemak imbas, instanceof juga boleh digunakan, tetapi jika konteksnya terlalu rumit, ralat mungkin berlaku.
var myFrame = document.createElement('iframe');
document.body.appendChild(myFrame);
var myArray = window.frames[window.frames.length-1].Array;
var arr = myArray(a,b,10); // [a,b,10]
// Pembina myArray telah hilang, dan hasil instanceof akan menjadi tidak normal
// Pembina tidak boleh dikongsi merentasi bingkai
arr instanceof Array; // false
18. Dapatkan nilai maksimum dan minimum dalam tatasusunan
nombor var = [5, 458, 120, -215, 228, 400, 122205, -85411];
var maxInNumbers = Math.max.apply(Math, nombor);
var minInNumbers = Math.min.apply(Math, numbers);
19. Kosongkan tatasusunan
var myArray = [12, 222, 1000];
myArray.length = 0; // myArray akan sama dengan [].
20. Jangan padam atau keluarkan elemen terus daripada tatasusunan
Jika anda terus menggunakan padam pada elemen tatasusunan, ia tidak dipadamkan, tetapi elemen itu ditetapkan kepada tidak ditentukan. Pemadaman elemen tatasusunan harus menggunakan splice.
Jangan:
Salin kod
Kod adalah seperti berikut:
var item = [12, 548 ,'a' , 2 , 5478 , 'foo' , 8852, , 'Doe' ,2154 , 119 ];
items.length; // kembalikan 11
padamkan item[3]; // kembalikan benar
items.length; // kembalikan 11
/* Hasil item ialah [12, 548, "a", undefined × 1, 5478, "foo", 8852, undefined × 1, "Doe", 2154, 119] */
Sebaliknya:
Salin kod
Kod adalah seperti berikut:
var item = [12, 548 ,'a' , 2 , 5478 , 'foo' , 8852, , 'Doe' ,2154 , 119 ];
items.length; // kembalikan 11
item.splice(3,1) ;
items.length; // kembalikan 10
/* item hasil ialah [12, 548, "a", 5478, "foo", 8852, undefined × 1, "Doe", 2154, 119]
delete boleh digunakan apabila memadam sifat objek.
21 Gunakan atribut panjang untuk memotong tatasusunan
Dalam contoh sebelumnya, atribut panjang digunakan untuk mengosongkan tatasusunan Ia juga boleh digunakan untuk memotong tatasusunan:
Salin kod
Kod adalah seperti berikut:
var myArray = [12, 222, 1000, 124, 98, 10];
myArray.length = 4; // myArray akan sama dengan [12, 222, 1000, 124].
Pada masa yang sama, jika atribut panjang dijadikan lebih besar, nilai panjang tatasusunan akan meningkat, dan tidak ditentukan akan digunakan sebagai elemen baharu untuk diisi. panjang ialah sifat boleh tulis.
Salin kod
Kod adalah seperti berikut:
22 Gunakan logik DAN atau dalam keadaan
Salin kod
Kod adalah seperti berikut:
Salin kod
Kod adalah seperti berikut:
fungsi doSomething(arg1){
arg1 = arg1 ||. 10; // arg1 akan mempunyai 10 sebagai nilai lalai jika ia belum ditetapkan
}
23 Jadikan gelung kaedah fungsi map() pada data
petak var = [1,2,3,4].peta(fungsi (val) {
Kembalikan val * val;
});
// petak sama dengan [1, 4, 9, 16]
24 Kekalkan bilangan tempat perpuluhan yang ditetapkan
var num =2.443242342;
num = num.toFixed(4); // num akan sama dengan 2.4432
Ambil perhatian bahawa toFixec() mengembalikan rentetan, bukan nombor.
25. Masalah pengiraan titik terapung
0.1 0.2 === 0.3 // adalah palsu
9007199254740992 1 // bersamaan dengan 9007199254740992
9007199254740992 2 // bersamaan dengan 9007199254740994
kenapa? Kerana 0.1 0.2 bersamaan dengan 0.30000000000000004. Nombor dalam JavaScript dibina mengikut piawaian IEEE 754 dan secara dalaman diwakili sebagai perpuluhan titik terapung 64-bit Untuk butiran, lihat cara nombor dalam JavaScript dikodkan.
Masalah ini boleh diselesaikan dengan menggunakan toFixed() dan toPrecision().
26 Periksa sifat objek melalui gelung untuk masuk
Penggunaan berikut boleh menghalang kemasukan sifat prototaip objek semasa lelaran.
untuk (nama var dalam objek) {
Jika (object.hasOwnProperty(name)) {
// buat sesuatu dengan nama
}
}
27. Pengendali koma
var a = 0;
var b = ( a , 99 );
console.log(a); // a akan sama dengan 1
console.log(b); // b bersamaan dengan 99
28. Simpan pembolehubah yang digunakan untuk pengiraan dan pertanyaan buat sementara waktu
Dalam pemilih jQuery, keseluruhan elemen DOM boleh disimpan buat sementara waktu.
Salin kod
Kod adalah seperti 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 dihantar ke isFinite() terlebih dahulu
Salin kod
isFinite(undefined); // palsu
isFinite(); // false
isFinite(null); // benar, perhatian khusus harus diberikan kepada
ini
30. Elakkan menggunakan nombor negatif sebagai indeks dalam tatasusunan
Salin kod
Ambil perhatian bahawa parameter indeks yang dihantar ke splice tidak boleh menjadi nombor negatif Jika ia adalah nombor negatif, elemen akan dipadamkan dari hujung tatasusunan.
31 Gunakan JSON untuk mensiri dan menyahsiri
Salin kod
Kod adalah seperti berikut:
var person = {name :'Saad', umur : 26, jabatan : {ID : 15, name : "R&D"} };
var stringFromPerson = JSON.stringify(person);
/* Hasil stringFromPerson ialah "{"name":"Saad","age":26,"department":{"ID":15,"name":"R&D"}}" */
var personFromString = JSON.parse(stringFromPerson);
/* Nilai personFromString adalah sama dengan objek orang */
32. Jangan gunakan eval() atau pembina fungsi
eval() dan pembina fungsi (Function consturctor) agak mahal Setiap kali ia dipanggil, enjin JavaScript mesti menukar kod sumber kepada kod boleh laku.
var func1 = Fungsi baharu(functionCode);
var func2 = eval(functionCode);
33. Elakkan menggunakan dengan()
Menggunakan dengan() boleh menambah pembolehubah pada skop global Oleh itu, jika terdapat pembolehubah lain dengan nama yang sama, ia akan mudah dikelirukan dan nilai akan ditimpa.
34. Jangan gunakan untuk masuk pada tatasusunan
Elakkan:
var sum = 0;
untuk (var i dalam arrayNumbers) {
jumlah = arrayNombor[i];
}
Sebaliknya:
var sum = 0;
untuk (var i = 0, len = arrayNumbers.length; i < len; i ) {
jumlah = arrayNombor[i];
}
Faedah lain ialah dua pembolehubah i dan len berada dalam pernyataan pertama bagi gelung for, dan ia hanya akan dimulakan sekali, iaitu lebih pantas daripada cara penulisan berikut:
untuk (var i = 0; i < arrayNumbers.length; i )
35 Gunakan fungsi dan bukannya rentetan apabila menghantar ke setInterval() dan setTimeout()
Jika anda menghantar rentetan ke setTimeout() dan setInterval(), ia akan ditukar dengan cara yang serupa dengan eval, yang pasti akan menjadi lebih perlahan, jadi jangan gunakan:
setInterval('doSomethingPeriodically()', 1000);
setTimeout('doSomethingAfterFiveSeconds()', 5000);
Sebaliknya gunakan:
36 Gunakan suis/sarung dan bukannya timbunan besar if/else
Apabila menilai terdapat lebih daripada dua cawangan, menggunakan suis/case adalah lebih pantas, lebih elegan, dan lebih kondusif untuk penyusunan kod Sudah tentu, jika terdapat lebih daripada 10 cawangan, jangan gunakan suis/case.
37. Gunakan selang nombor dalam suis/kes
Malah, keadaan kes dalam suis/kes juga boleh ditulis seperti ini:
Salin kod
Kod adalah seperti berikut:
fungsi getCategory(umur) {
var category = "";
suis (benar) {
kes ialahNaN(umur):
kategori = "bukan umur";
rehat;
kes (umur >= 50):
kategori = "Lama";
rehat;
kes (umur <= 20):
kategori = "Bayi";
rehat;
lalai:
kategori = "Muda";
rehat;
};
Kembalikan kategori;
}
getCategory(5); // akan mengembalikan "Bayi"
38. Gunakan objek sebagai prototaip objek
Dengan cara ini, anda boleh memberikan objek sebagai parameter untuk mencipta objek baharu berdasarkan prototaip ini:
Salin kod
klon(Array).prototaip; // []
39. Fungsi penukaran medan HTML
Salin kod
Kod adalah seperti berikut:
40. Jangan gunakan try-catch-finally dalam gelung
Bahagian tangkapan try-catch-finally akan memberikan pengecualian kepada pembolehubah semasa pelaksanaan, dan pembolehubah ini akan dibina menjadi pembolehubah baharu dalam skop masa jalan.
Jangan:
Salin kod Kod adalah seperti berikut:
}
Sebaliknya:
Salin kod
Kod adalah seperti berikut:
objek var = ['foo', 'bar'], i;
cuba {
untuk (i = 0, len = objek.panjang; i
// lakukan sesuatu yang memberikan pengecualian
}
}
tangkap (e) {
// mengendalikan pengecualian
}
41 Beri perhatian kepada menetapkan tamat masa apabila menggunakan XMLHttpRequests
Apabila XMLHttpRequests dilaksanakan, apabila tiada respons untuk masa yang lama (seperti masalah rangkaian, dll.), sambungan harus ditamatkan kerja ini boleh diselesaikan melalui setTimeout():
Salin kod
Kod adalah seperti berikut:
var xhr = XMLHttpRequest baharu (
xhr.onreadystatechange = fungsi () {
Jika (this.readyState == 4) {
,,,,,,,,,,,,,,,,,,,
// lakukan sesuatu dengan data respons
}
}
var tamat masa = setMasa tamat( fungsi () {
xhr.abort(); // panggilan balik ralat
}, 60*1000 /* tamat masa selepas seminit */ );
xhr.open('DAPAT', url, benar);
xhr.send();
Pada masa yang sama, perlu diingatkan bahawa jangan memulakan berbilang permintaan XMLHttpRequests pada masa yang sama.
42. Mengendalikan tamat masa WebSocket
Biasanya, selepas sambungan WebSocket dibuat, jika tiada aktiviti dalam masa 30 saat, pelayan akan tamat masa sambungan Tembok api juga boleh tamat masa sambungan jika tiada aktiviti dalam tempoh unit.
Untuk mengelakkan perkara ini berlaku, anda boleh menghantar mesej kosong kepada pelayan pada selang masa tertentu. Keperluan ini boleh dicapai melalui dua fungsi berikut, satu digunakan untuk memastikan sambungan aktif, dan satu lagi digunakan secara khusus untuk menamatkan keadaan ini.
tamat masa var = 15000
Jika (webSocket.readyState == webSocket.OPEN) {
webSocket.send('');
}
timerId = setTimeout(keepAlive, timeout);
}
fungsi cancelKeepAlive() {
Jika (Id pemasa) {
cancelTimeout(timerId);
}
}
Fungsi keepAlive() boleh diletakkan pada penghujung kaedah onOpen() sambungan WebSocket, dan cancelKeepAlive() diletakkan pada penghujung kaedah onClose().
43 Sila ambil perhatian bahawa pengendali primitif lebih pantas daripada panggilan fungsi, gunakan VanillaJS
Sebagai contoh, biasanya jangan lakukan ini:
Salin kod
Salin kod
Kod adalah seperti berikut:
Anda boleh menggunakan alatan seperti JSLint atau JSMin untuk memeriksa dan mengecilkan kod anda.
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
-
2024-10-22 09:46:29
-
2024-10-13 13:53:41
-
2024-10-12 12:15:51
-
2024-10-11 22:47:31
-
2024-10-11 19:36:51
-
2024-10-11 15:50:41
-
2024-10-11 15:07:41
-
2024-10-11 14:21:21
-
2024-10-11 12:59:11
-
2024-10-11 12:17:31
Topik-topik yang berkaitan
Lagi>
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
