Bagikan 12 tips javascript yang sangat praktis

Dalam artikel ini, kami akan berbagi dengan Anda 12 tips tentang JavaScript. Kiat -kiat ini dapat membantu Anda memecahkan beberapa masalah dalam pekerjaan Anda yang sebenarnya.

Gunakan !! operator untuk mengonversi nilai boolean

Kadang -kadang kita perlu memeriksa apakah ada variabel atau memeriksa apakah nilainya memiliki nilai yang valid, dan jika ada, itu mengembalikan true. Untuk melakukan verifikasi seperti itu, kita dapat menggunakan !! Operator untuk mengimplementasikannya sangat nyaman dan sederhana. Untuk variabel, Anda dapat menggunakan !! Variabel untuk dideteksi. Selama nilai variabel adalah: 0, null, "", tidak terdefinisi atau nan, itu akan mengembalikan false, jika tidak itu akan mengembalikan true. Misalnya, contoh berikut:

 Function Account (Cash) {this.cash = Cash; this.hasmoney = !! uang tunai; } var akun = akun baru (100.50); Console.log (Account.Cash); // 100.50 console.log (Account.hasmoney); // true var emplemcount = akun baru (0); console.log (emplemcount.cash); // 0 console.log (emplemcount.hasmoney); // PALSU

Dalam contoh ini, selama nilai akun. Cash lebih besar dari 0, nilai yang dikembalikan oleh akun.hasmoney benar.

Gunakan + untuk mengonversi string menjadi angka

Trik ini sangat berguna. Ini sangat sederhana dan dapat dikonversi menjadi angka dengan memotong data string. Namun, hanya cocok untuk data string, jika tidak, NAN akan dikembalikan, seperti contoh berikut:

 fungsi tonumber (strnumber) {return +strnumber; } console.log (tonumber ("1234")); // 1234 console.log (tonumber ("acb")); // nan

Ini juga berfungsi untuk tanggal, dalam hal ini akan mengembalikan nomor cap waktu:

Salin kode sebagai berikut: console.log (+tanggal baru ()) // 1461288164385 dan simbol bersyarat

Jika Anda memiliki kode seperti ini:

 if (conected) {login (); }

Anda juga dapat menyingkat variabel dan menggunakan && dan menggabungkannya bersama. Misalnya, contoh di atas dapat disingkat sebagai berikut:

Salinan kode adalah sebagai berikut: CONECTED && LOGIN ();

Jika beberapa properti atau fungsi ada dalam suatu objek, Anda juga dapat melakukan deteksi, seperti yang ditunjukkan pada kode berikut:

Salinan kode adalah sebagai berikut: user && user.login ();

Gunakan || operator

Ada fitur parameter default di ES6. Untuk mensimulasikan fitur ini di browser yang lebih lama, || Operator dapat digunakan dan nilai default akan diteruskan sebagai parameter kedua. Jika nilai yang dikembalikan oleh parameter pertama salah, nilai kedua akan dianggap sebagai nilai default. Seperti dalam contoh berikut:

 fungsi pengguna (nama, usia) {this.name = name || "Oliver Queen"; this.age = usia || 27; } var user1 = pengguna baru (); console.log (user1.name); // Oliver Queen Console.log (user1.age); // 27 var user2 = pengguna baru ("Barry Allen", 25); console.log (user2.name); // Barry Allen Console.log (user2.age); // 25

Cache Array.length in loop

Trik ini sangat sederhana, dan ini akan memiliki dampak yang sangat besar pada kinerja ketika berhadapan dengan loop array yang besar. Pada dasarnya, semua orang akan menulis serangkaian iterasi sinkron seperti ini:

 untuk (var i = 0; i <array.length; i ++) {console.log (array [i]); }

Jika ini adalah array kecil, ini bagus, jika Anda berurusan dengan array besar, kode ini akan menghitung ulang ukuran array pada setiap iterasi, yang akan menyebabkan beberapa penundaan. Untuk menghindari fenomena ini, array.length dapat digunakan sebagai cache:

 var length = array.length; untuk (var i = 0; i <panjang; i ++) {console.log (array [i]); }

Anda juga dapat menulisnya seperti ini:

 untuk (var i = 0, panjang = array.length; i <panjang; i ++) {console.log (array [i]); }

Mendeteksi properti di objek

Trik ini berguna ketika Anda perlu mendeteksi apakah ada beberapa properti dan menghindari menjalankan fungsi atau properti yang tidak ditentukan. Jika Anda berencana untuk menyesuaikan beberapa kode browser lintas-kompatibel, Anda juga dapat menggunakan tip ini. Misalnya, Anda ingin menggunakan Document.QuerySelector () untuk memilih ID dan membuatnya kompatibel dengan browser IE6, tetapi fungsi ini tidak ada di browser IE6, sehingga sangat berguna untuk menggunakan operator ini untuk mendeteksi apakah fungsi ini ada, seperti contoh berikut:

 if ('queryselector' dalam dokumen) {document.queryselector ("#id"); } else {document.geteLementById ("id"); }

Dalam contoh ini, jika fungsi QuerySelector tidak ada dalam dokumen, maka dokumen dipanggil.

Dapatkan elemen terakhir di array

Array.prototype.slice (begin, end) digunakan untuk mendapatkan elemen array antara awal dan akhir. Jika Anda tidak mengatur parameter akhir, nilai panjang default dari array akan dianggap sebagai nilai akhir. Tetapi beberapa siswa mungkin tidak tahu bahwa fungsi ini juga dapat menerima nilai negatif sebagai parameter. Jika Anda menetapkan nilai negatif sebagai nilai awal, maka Anda bisa mendapatkan elemen terakhir dari array. menyukai:

 var array = [1,2,3,4,5,6]; console.log (array.slice (-1)); // [6] console.log (array.slice (-2)); // [5,6] console.log (array.slice (-3)); // [4,5,6]

Pemotongan array

Trik ini terutama digunakan untuk mengunci ukuran array, dan sangat berguna jika digunakan untuk menghapus beberapa elemen dalam array. Misalnya, array Anda memiliki 10 elemen, tetapi Anda hanya ingin hanya memiliki lima elemen pertama, maka Anda dapat memotong array dengan array.length = 5. Seperti dalam contoh berikut:

 var array = [1,2,3,4,5,6]; console.log (array.length); // 6 array.length = 3; console.log (array.length); // 3 console.log (array); // [1,2,3]

Ganti semua

Fungsi string.replace () memungkinkan Anda menggunakan string atau ekspresi reguler untuk mengganti string. Fungsi ini sendiri hanya menggantikan string pertama. Namun, Anda dapat menggunakan /g dalam ekspresi reguler untuk mensimulasikan fungsi fungsi replaceall ():

 var string = "John John"; console.log (string.replace (/hn/, "ana")); // "Joana John" Console.log (String.Replace (/hn/g, "ana")); // "Joana Joana"

Menggabungkan array

Jika Anda ingin menggabungkan dua array, Anda biasanya akan menggunakan fungsi array.concat ():

 var array1 = [1,2,3]; var array2 = [4,5,6]; console.log (array1.concat (array2)); // [1,2,3,4,5,6];

Fungsi ini kemudian tidak cocok untuk menggabungkan dua array besar, karena akan mengkonsumsi banyak memori untuk menyimpan array yang baru dibuat. Dalam hal ini, Anda dapat menggunakan array.pus (). Terapkan (ARR1, ARR2) untuk membuat array baru sebagai gantinya. Metode ini tidak digunakan untuk membuat array baru, itu hanya menggabungkan angka pertama dan kedua bersama -sama sambil mengurangi penggunaan memori:

 var array1 = [1,2,3]; var array2 = [4,5,6]; console.log (array1.push.Apply (array1, array2)); // [1,2,3,4,5,6];

Konversi nodelist menjadi array

Jika Anda menjalankan fungsi Document.QuerySelectorAll ("P"), itu dapat mengembalikan array elemen DOM, yaitu objek nodelist. Tetapi objek ini tidak memiliki fungsi fungsi array, seperti sort (), reduping (), peta (), filter (), dll. Agar fungsi fungsi array asli ini dapat digunakan pada mereka, daftar node perlu dikonversi menjadi array. Anda dapat menggunakan [] .slice.call (elemen) untuk mengimplementasikan:

 var elemen = document.queryselectorall ("p"); // nodelist var arrayElements = [] .slice.call (elemen); // Sekarang nodelist adalah array var arrayElements = array.from (elemen); // Ini adalah cara lain untuk mengubah nodelist menjadi array

Menyusutnya elemen array

Untuk shuffle elemen array, tidak perlu menggunakan perpustakaan eksternal, seperti LoDash, lakukan saja:

 var list = [1,2,3]; console.log (list.sort (function () {math.random () - 0.5})); // [2,1,3]

Meringkaskan

Sekarang Anda telah mempelajari beberapa tips JavaScript yang berguna. Saya harap tips ini dapat membantu Anda memecahkan beberapa masalah di tempat kerja, atau artikel ini akan membantu Anda. Jika Anda memiliki beberapa tips JavaScript yang sangat baik, silakan bagikan dengan kami di komentar.