12 trik JavaScript tidak ditemukan di sebagian besar tutorial

Ketika saya mulai belajar JavaScript, hal pertama yang saya lakukan adalah membuat daftar trik yang membantu saya menghemat waktu. Saya memata-matai mereka di programmer lain, di situs yang berbeda dan di manual.

Pada artikel ini, saya akan menunjukkan kepada Anda 12 cara hebat untuk meningkatkan dan mempercepat kode JavaScript Anda. Dalam kebanyakan kasus, mereka bersifat universal.

Kami mengingatkan Anda: untuk semua pembaca "Habr" - diskon 10.000 rubel saat mendaftar untuk kursus Skillbox apa pun menggunakan kode promo "Habr".

Skillbox merekomendasikan: Kursus praktis "Pengembang Mobile PRO" .

Penyaringan Nilai Unik

ARRAYS

Jenis objek Set diperkenalkan di ES6, bersama dengan ..., operator spread, kita dapat menggunakannya untuk membuat array baru yang hanya berisi nilai unik.

const array = [1, 1, 2, 3, 5, 5, 1] const uniqueArray = [...new Set(array)]; console.log(uniqueArray); // Result: [1, 2, 3, 5] 

Dalam situasi normal, diperlukan lebih banyak kode untuk melakukan operasi yang sama.

Trik ini berfungsi untuk array yang berisi tipe primitif: tidak terdefinisi, null, boolean, string, dan angka. Jika Anda bekerja dengan array yang berisi objek, fungsi, atau array tambahan, Anda akan memerlukan pendekatan yang berbeda.

Panjang cache dalam siklus

SIKLUS

Ketika Anda belajar untuk loop, Anda mengikuti prosedur standar:

 for (let i = 0; i < array.length; i++){ console.log(i); } 

Namun, dengan sintaks ini, loop for memeriksa ulang panjang array pada setiap iterasi.

Ini kadang-kadang bisa berguna, tetapi dalam kebanyakan kasus itu lebih efisien untuk men-cache panjang array, yang akan membutuhkan akses tunggal ke sana. Kita dapat melakukan ini dengan mendefinisikan panjang variabel, di mana untuk mengatur variabel i, misalnya, seperti ini:

 for (let i = 0, length = array.length; i < length; i++){ console.log(i); } 

Pada prinsipnya, hampir sama seperti di atas, tetapi dengan peningkatan ukuran siklus, kita akan mendapatkan penghematan waktu yang signifikan.

Peringkat arus pendek (peringkat McCarthy)

OPERATOR KONDISI

Operator ternary adalah cara cepat dan efisien untuk menulis pernyataan kondisional yang sederhana (dan terkadang tidak terlalu sederhana):

x> 100? "Lebih besar dari 100": "kurang dari 100";
x> 100? (x> 200? "lebih dari 200": "antara 100-200"): "kurang dari 100";

Tetapi kadang-kadang bahkan operator ternary lebih rumit daripada yang dibutuhkan. Sebagai gantinya, kita dapat menggunakan 'dan' && dan 'atau' || operator logis untuk mengevaluasi beberapa ekspresi dengan cara yang bahkan lebih ringkas. Ini sering disebut "hubungan pendek" atau "penilaian arus pendek".

Bagaimana cara kerjanya

Katakanlah kita ingin mengembalikan hanya satu dari dua kondisi atau lebih.

Menggunakan && akan mengembalikan nilai palsu pertama. Jika setiap operan bernilai true, ekspresi yang terakhir dievaluasi akan dikembalikan.

 let one = 1, two = 2, three = 3; console.log(one && two && three); // Result: 3 console.log(0 && null); // Result: 0 

Menggunakan || akan mengembalikan nilai sebenarnya pertama. Jika setiap operan bernilai false, maka nilai yang dihitung terakhir akan dikembalikan.

 let one = 1, two = 2, three = 3; console.log(one || two || three); // Result: 1 console.log(0 || null); // Result: null 

Contoh 1

Katakanlah kita ingin mengembalikan panjang ke variabel, tetapi tidak tahu jenisnya.

Dalam hal ini, Anda dapat menggunakan if / else untuk memverifikasi bahwa foo adalah tipe yang sesuai, tetapi metode ini mungkin terlalu lama. Oleh karena itu, lebih baik untuk mengambil "korsleting" kami.

 return (foo || []).length; 

Jika variabel foo memiliki panjang yang sesuai, maka akan dikembalikan. Kalau tidak, kita mendapat 0.

Contoh 2

Pernahkah Anda memiliki masalah dalam mengakses objek bersarang? Anda mungkin tidak tahu apakah ada objek atau salah satu subprop propertinya, dan ini dapat menyebabkan masalah.

Misalnya, kami ingin mengakses properti data di this.state, tetapi data tidak ditentukan sampai program kami mengembalikan kueri untuk pemilihan.

Tergantung di mana kita menggunakannya, panggilan ke this.state.data dapat mencegah aplikasi untuk memulai. Untuk mengatasi masalah, kita dapat membungkus ini dalam ekspresi kondisional:

 if (this.state.data) { return this.state.data; } else { return 'Fetching Data'; } 

Opsi yang lebih cocok adalah menggunakan operator "atau".

 return (this.state.data || 'Fetching Data'); 

Kami tidak dapat mengubah kode di atas untuk menggunakan &&. Pernyataan 'Mengambil Data' && this.state.data akan mengembalikan this.state.data apakah itu tidak terdefinisi atau tidak.

Rantai opsional

Anda dapat menyarankan menggunakan rantai opsional ketika mencoba mengembalikan properti jauh ke dalam struktur pohon. Jadi, simbol tanda tanya? dapat digunakan untuk mengambil properti hanya jika bukan nol.

Sebagai contoh, kita dapat memperbaiki contoh di atas dengan mendapatkan this.state.data? .. (). Yaitu, data dikembalikan hanya jika nilainya tidak nol.

Atau, jika penting apakah status didefinisikan atau tidak, kita dapat mengembalikan this.state? .Data.

Konversikan ke Boolean

KONVERSI JENIS

Selain fungsi logis yang biasa benar dan salah, JavaScript juga memperlakukan semua nilai lain sebagai benar atau salah.

Kecuali ditentukan lain, semua nilai dalam JavaScript adalah benar, dengan pengecualian 0, "", null, undefined, NaN, dan, tentu saja, false. Yang terakhir palsu.

Kita dapat dengan mudah beralih di antara keduanya menggunakan Operator!, Yang juga mengubah tipe menjadi logis.

 const isTrue = !0; const isFalse = !1; const alsoFalse = !!0; console.log(isTrue); // Result: true console.log(typeof true); // Result: "boolean" 

Konversi ke string

KONVERSI JENIS

Konversi cepat integer ke string dapat dilakukan sebagai berikut.

 const val = 1 + ""; console.log(val); // Result: "1" console.log(typeof val); // Result: "string" 

Konversi ke integer

KONVERSI JENIS

Kami melakukan transformasi terbalik sebagai berikut.

 let int = "15"; int = +int; console.log(int); // Result: 15 console.log(typeof int); Result: "number" 

Metode ini juga dapat digunakan untuk mengonversi tipe data boolean boolean ke nilai numerik biasa, seperti yang ditunjukkan di bawah ini:

 console.log(+true); // Return: 1 console.log(+false); // Return: 0 

Mungkin ada situasi di mana + akan ditafsirkan sebagai operator gabungan daripada penambahan. Untuk menghindarinya, gunakan tildes: ~~. Operator ini setara dengan ekspresi -n-1. Sebagai contoh, ~ 15 adalah -16.

Menggunakan dua gelombang berturut-turut meniadakan operasi, karena - (- - n - 1) - 1 = n + 1 - 1 = n. Dengan kata lain, ~ -16 adalah 15.

 const int = ~~"15" console.log(int); // Result: 15 console.log(typeof int); Result: "number" 

<Kekuatan Cepat

OPERASI

Dimulai dengan ES7, Anda dapat menggunakan operator eksponensial ** sebagai singkatan untuk derajat. Ini jauh lebih cepat daripada menggunakan Math.pow (2, 3). Tampaknya sederhana, tetapi saat ini termasuk dalam daftar resepsi, karena tidak disebutkan di mana-mana.

 console.log(2 ** 3); // Result: 8 

Jangan bingung dengan simbol ^, yang biasanya digunakan untuk eksponensial. Tetapi dalam JavaScript, ini adalah operator XOR.

Sebelum ES7, singkatan ** hanya dapat diterapkan untuk derajat dengan basis 2 menggunakan operator shift kiri bitwise <<:

 Math.pow(2, n); 2 << (n - 1); 2**n; 

Misalnya, 2 << 3 = 16 sama dengan ekspresi 2 ** 4 = 16.

Bilangan bulat mengambang

JENIS OPERASI / TRANSFORMASI

Jika Anda perlu mengkonversi float ke integer, Anda dapat menggunakan Math.floor (), Math.ceil () atau Math.round (). Tetapi ada cara yang lebih cepat, untuk ini kami menggunakan |, yaitu, operator OR.

 console.log(23.9 | 0); // Result: 23 console.log(-23.9 | 0); // Result: -23 

Perilaku | sebagian besar tergantung pada apakah Anda berurusan dengan angka positif atau negatif, jadi metode ini hanya cocok jika Anda yakin dengan apa yang Anda lakukan.

n | 0 menghapus semuanya setelah pemisah desimal, memotong angka floating-point ke integer.

Anda bisa mendapatkan efek pembulatan yang sama menggunakan ~~. Setelah konversi paksa ke integer, nilainya tetap tidak berubah.

Kami menghapus angka trailing

Operator ATAU dapat digunakan untuk menghapus sejumlah digit dari suatu nomor. Ini berarti bahwa kita tidak perlu mengonversi jenis, seperti di sini:

 let str = "1553"; Number(str.substring(0, str.length - 1)); 

Sebagai gantinya, kami hanya menulis:

 console.log(1553 / 10 | 0) // Result: 155 console.log(1553 / 100 | 0) // Result: 15 console.log(1553 / 1000 | 0) // Result: 1 

Tautan Otomatis

KELAS

Panah ES6 dapat digunakan dalam metode kelas, dan pengikatan tersirat. Berkat ini, Anda dapat mengucapkan selamat tinggal pada duplikat ekspresi seperti this.myMethod = this.myMethod.bind (ini)!

 import React, { Component } from React; export default class App extends Compononent { constructor(props) { super(props); this.state = {}; } myMethod = () => { // This method is bound implicitly! } render() { return ( <> <div> {this.myMethod()} </div> </> ) } }; 

Array pemangkasan

ARRAYS

Jika Anda perlu menghapus nilai dari array, maka ada metode yang lebih cepat daripada splice ().

Misalnya, jika Anda mengetahui ukuran array asli, Anda dapat mengganti properti panjangnya sebagai berikut:

 let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; array.length = 4; console.log(array); // Result: [0, 1, 2, 3] 

Tetapi ada metode lain, dan lebih cepat. Jika kecepatan penting bagi Anda, maka inilah pilihan kami:

 let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; array = array.slice(0, 4); console.log(array); // Result: [0, 1, 2, 3] 

Output nilai array terakhir

ARRAYS
Teknik ini membutuhkan penggunaan metode slice ().

 let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; console.log(array.slice(-1)); // Result: [9] console.log(array.slice(-2)); // Result: [8, 9] console.log(array.slice(-3)); // Result: [7, 8, 9] 

Pemformatan kode JSON

Json

Anda mungkin sudah menggunakan JSON.stringify. Apakah Anda tahu itu membantu memformat JSON Anda?

Metode stringify () menerima dua parameter opsional: fungsi replacer, yang dapat digunakan untuk memfilter JSON yang ditampilkan, dan ruang nilai.

 console.log(JSON.stringify({ alpha: 'A', beta: 'B' }, null, '\t')); // Result: // '{ // "alpha": A, // "beta": B // }' 

Itu saja, saya harap semua trik ini bermanfaat. Dan trik apa yang kamu tahu? Tuliskan di komentar.

Skillbox merekomendasikan:

• Kursus praktis dua tahun "Saya adalah pengembang web PRO . "
• Kursus online "Pengembang C # dengan 0" .
• Kursus tahunan praktis "Pengembang PHP dari 0 hingga PRO" .