Saat saya mulai belajar JavaScript, hal pertama yang saya lakukan adalah membuat daftar trik yang membantu saya menghemat waktu. Saya melihatnya dari programmer lain, di situs berbeda dan di manual.
Pada artikel ini, saya akan menunjukkan 12 cara hebat untuk meningkatkan dan mempercepat kode JavaScript Anda. Dalam kebanyakan kasus, mereka bersifat universal.
Kami mengingatkan: untuk semua pembaca "Habr" - diskon 10 rubel saat mendaftar di kursus Skillbox apa pun menggunakan kode promosi "Habr".
Skillbox merekomendasikan: Tentu saja praktis .
Memfilter nilai unik
ARRAY
Tipe 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.
Teknik ini berfungsi untuk array yang berisi tipe primitif: undefinisi, null, boolean, string, dan angka. Jika Anda bekerja dengan array yang berisi objek, fungsi, atau array tambahan, Anda memerlukan pendekatan yang berbeda.
Panjang array cache dalam siklus
SIKLUS
Saat Anda mempelajari perulangan for, Anda mengikuti prosedur standar:
for (let i = 0; i < array.length; i++){
console.log(i);
}Namun, dengan sintaks ini, perulangan for berulang kali memeriksa panjang array setiap iterasi.
Kadang-kadang ini bisa berguna, tetapi dalam banyak kasus, lebih efisien untuk menyimpan cache panjang array, yang akan memerlukan satu akses ke dalamnya. Kita dapat melakukan ini dengan mendefinisikan variabel panjang dimana kita mendefinisikan variabel i, seperti ini:
for (let i = 0, length = array.length; i < length; i++){
console.log(i);
}Prinsipnya hampir sama seperti di atas, namun dengan memperbesar ukuran loop kita akan mendapatkan penghematan waktu yang signifikan.
Peringkat hubung singkat (peringkat McCarthy)
OPERATOR KONDISI
Operator ternary adalah cara yang cepat dan efisien untuk menulis pernyataan kondisional yang sederhana (dan terkadang tidak sesederhana itu):
x> 100? “lebih dari 100”: “kurang dari 100”;
x> 100? (x>200? "lebih dari 200": "antara 100-200"): "kurang dari 100";
Namun terkadang bahkan operator ternary lebih rumit dari yang dibutuhkan. Kita bisa menggunakan 'dan' && dan 'atau' sebagai gantinya || Operator Boolean untuk mengevaluasi ekspresi tertentu dengan cara yang lebih ringkas. Hal ini sering disebut "korsleting" atau "peringkat hubung singkat".
Bagaimana itu bekerja
Katakanlah kita hanya ingin mengembalikan satu dari dua kondisi atau lebih.
Menggunakan && akan mengembalikan nilai salah pertama. Jika setiap operan bernilai benar, maka ekspresi terakhir yang dievaluasi akan dikembalikan.
let one = 1, two = 2, three = 3;
console.log(one && two && three); // Result: 3
console.log(0 && null); // Result: 0Menggunakan || akan mengembalikan nilai sebenarnya pertama. Jika setiap operan bernilai false, maka nilai terakhir yang dievaluasi akan dikembalikan.
let one = 1, two = 2, three = 3;
console.log(one || two || three); // Result: 1
console.log(0 || null); // Result: nullmisalnya 1
Katakanlah kita ingin mengembalikan panjang suatu variabel, tetapi kita tidak mengetahui tipenya.
Dalam hal ini, Anda dapat menggunakan if/else untuk memeriksa apakah foo adalah tipe yang tepat, namun metode ini mungkin terlalu panjang. Oleh karena itu, lebih baik kita mengambil “korsleting” kita.
return (foo || []).length;Jika variabel foo memiliki panjang yang sesuai, maka variabel tersebut akan dikembalikan. Kalau tidak, kita akan mendapatkan 0.
misalnya 2
Apakah Anda mengalami masalah saat mengakses objek bersarang? Anda mungkin tidak mengetahui apakah suatu objek atau salah satu sub-propertinya ada, dan hal ini dapat menimbulkan masalah.
Misalnya, kami ingin mengakses properti data di this.state, tetapi data tidak ditentukan hingga program kami mengembalikan permintaan pengambilan.
Tergantung di mana kita menggunakannya, memanggil this.state.data mungkin mencegah aplikasi untuk memulai. Untuk mengatasi masalah ini, kita dapat membungkusnya dalam ekspresi kondisional:
if (this.state.data) {
return this.state.data;
} else {
return 'Fetching Data';
}Pilihan yang lebih baik adalah menggunakan operator "atau".
return (this.state.data || 'Fetching Data');Kami tidak dapat mengubah kode di atas untuk menggunakan &&. Operator 'Mengambil Data' && this.state.data akan mengembalikan this.state.data terlepas dari apakah itu tidak ditentukan atau tidak.
Rantai opsional
Seseorang mungkin menyarankan penggunaan rangkaian opsional ketika mencoba mengembalikan properti jauh ke dalam struktur pohon. Jadi, simbol tanda tanya? dapat digunakan untuk mengambil properti hanya jika properti tersebut bukan null.
Misalnya, kita dapat memfaktorkan ulang contoh di atas untuk mendapatkan this.state.data?..(). Artinya, data dikembalikan hanya jika nilainya bukan nol.
Atau, jika status ditentukan atau tidak, kita dapat mengembalikan this.state?.data.
Konversikan ke Boolean
KONVERSI JENIS
Selain fungsi boolean normal benar dan salah, JavaScript juga memperlakukan semua nilai lainnya sebagai benar atau salah.
Sampai dinyatakan lain, semua nilai dalam JavaScript adalah benar, kecuali 0, "", null, tidak terdefinisi, NaN dan, tentu saja, salah. Yang terakhir ini salah.
Kita dapat dengan mudah beralih di antara keduanya menggunakan operator !, yang juga mengubah tipenya menjadi boolean.
const isTrue = !0;
const isFalse = !1;
const alsoFalse = !!0;
console.log(true); // Result: true
console.log(typeof true); // Result: "boolean"Konversikan ke string
KONVERSI JENIS
Konversi cepat dari bilangan bulat ke string dapat dilakukan sebagai berikut.
const val = 1 + "";
console.log(val); // Result: "1"
console.log(typeof val); // Result: "string"Konversikan ke bilangan bulat
KONVERSI JENIS
Kami melakukan transformasi terbalik seperti ini.
let int = "15";
int = +int;
console.log(int); // Result: 15
console.log(typeof int); Result: "number"Metode ini juga dapat digunakan untuk mengubah tipe data boolean menjadi nilai numerik biasa, seperti yang ditunjukkan di bawah ini:
console.log(+true); // Return: 1
console.log(+false); // Return: 0Mungkin ada situasi di mana + akan diinterpretasikan sebagai operator penggabungan dan bukan sebagai operator penjumlahan. Untuk menghindari hal ini, Anda harus menggunakan tanda gelombang: ~~. Operator ini setara dengan -n-1. Misalnya, ~15 sama dengan -16.
Penggunaan dua tanda gelombang berturut-turut akan meniadakan operasi karena - (- - n - 1) - 1 = n + 1 - 1 = n. Dengan kata lain, ~-16 sama dengan 15.
const int = ~~"15"
console.log(int); // Result: 15
console.log(typeof int); Result: "number"<Quick Powers
OPERASI
Mulai di ES7, Anda dapat menggunakan operator eksponensial ** sebagai singkatan dari pangkat. Ini jauh lebih cepat daripada menggunakan Math.pow(2, 3). Kelihatannya sederhana, tetapi poin ini termasuk dalam daftar teknik, karena tidak disebutkan di mana-mana.
console.log(2 ** 3); // Result: 8Simbol ini berbeda dengan simbol ^ yang biasa digunakan untuk eksponensial. Namun dalam JavaScript ini adalah operator XOR.
Sebelum ES7, pintasan ** hanya dapat digunakan untuk pangkat basis 2 menggunakan operator shift kiri bitwise <<:
Math.pow(2, n);
2 << (n - 1);
2**n;Misalnya, 2 << 3 = 16 setara dengan 2 ** 4 = 16.
Mengapung ke bilangan bulat
OPERASI / KONVERSI JENIS
Jika Anda perlu mengonversi float menjadi bilangan bulat, Anda dapat menggunakan Math.floor(), Math.ceil(), atau Math.round(). Namun ada cara yang lebih cepat, untuk ini kita menggunakan |, yaitu operator OR.
console.log(23.9 | 0); // Result: 23
console.log(-23.9 | 0); // Result: -23Perilaku | sangat bergantung pada apakah Anda berurusan dengan bilangan positif atau negatif, jadi metode ini hanya cocok jika Anda yakin dengan apa yang Anda lakukan.
n | 0 menghapus semuanya setelah pemisah desimal, memotong float menjadi bilangan bulat.
Anda bisa mendapatkan efek pembulatan yang sama menggunakan ~~. Setelah konversi paksa ke bilangan bulat, nilainya tetap tidak berubah.
Menghapus nomor tambahan
Operator OR dapat digunakan untuk menghapus sejumlah digit dari suatu nomor. Artinya kita tidak perlu mengonversi tipe seperti di sini:
let str = "1553";
Number(str.substring(0, str.length - 1));Sebagai gantinya kami cukup menulis:
console.log(1553 / 10 | 0) // Result: 155
console.log(1553 / 100 | 0) // Result: 15
console.log(1553 / 1000 | 0) // Result: 1Tautan otomatis
KELAS
Notasi panah ES6 dapat digunakan dalam metode kelas, dan pengikatan tersirat. Ini berarti Anda dapat mengucapkan selamat tinggal pada ekspresi berulang seperti this.myMethod = this.myMethod.bind(this)!
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>
</>
)
}
};Pemangkasan susunan
ARRAY
Jika Anda perlu menghapus nilai dari array, 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]Namun ada metode lain yang lebih cepat. Jika kecepatan adalah hal yang penting bagi Anda, 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]Mencetak nilai terakhir dari sebuah array
ARRAY
Teknik ini memerlukan penggunaan metode irisan().
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]Memformat Kode JSON
JSON
Anda mungkin sudah menggunakan JSON.stringify. Tahukah Anda bahwa ini membantu memformat JSON Anda?
Metode stringify() mengambil dua parameter opsional: fungsi pengganti, yang dapat digunakan untuk memfilter JSON yang ditampilkan, dan nilai spasi.
console.log(JSON.stringify({ alpha: 'A', beta: 'B' }, null, 't'));
// Result:
// '{
// "alpha": A,
// "beta": B
// }'Sekian, semoga semua teknik ini bermanfaat. Trik apa yang kamu tahu? Tuliskan di komentar.
Skillbox merekomendasikan:
- Kursus praktik dua tahun .
- Kursus online .
- Kursus tahun praktis .
Sumber: www.habr.com