Apabila saya mula belajar JavaScript, perkara pertama yang saya lakukan ialah membuat senarai helah yang membantu saya menjimatkan masa. Saya melihatnya daripada pengaturcara lain, di tapak yang berbeza dan dalam manual.
Dalam artikel ini, saya akan menunjukkan kepada anda 12 cara terbaik untuk menambah baik dan mempercepatkan kod JavaScript anda. Dalam kebanyakan kes ia adalah universal.
Kami mengingatkan: untuk semua pembaca "Habr" - diskaun sebanyak 10 rubel apabila mendaftar dalam mana-mana kursus Skillbox menggunakan kod promosi "Habr".
Skillbox mengesyorkan: Kursus praktikal .
Menapis nilai unik
ARRAYS
Jenis objek Set telah diperkenalkan dalam ES6, bersama-sama dengan..., operator spread, kita boleh menggunakannya untuk mencipta tatasusunan baharu yang mengandungi hanya 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 keadaan biasa, lebih banyak kod diperlukan untuk melaksanakan operasi yang sama.
Teknik ini berfungsi untuk tatasusunan yang mengandungi jenis primitif: tidak ditentukan, null, boolean, rentetan dan nombor. Jika anda bekerja dengan tatasusunan yang mengandungi objek, fungsi atau tatasusunan tambahan, anda memerlukan pendekatan yang berbeza.
Panjang tatasusunan cache dalam kitaran
KITARAN
Apabila anda belajar untuk gelung, anda mengikut prosedur standard:
for (let i = 0; i < array.length; i++){
console.log(i);
}Walau bagaimanapun, dengan sintaks ini, gelung for berulang kali menyemak panjang tatasusunan setiap lelaran.
Kadangkala ini boleh berguna, tetapi dalam kebanyakan kes, cache panjang tatasusunan adalah lebih cekap, yang memerlukan satu akses kepadanya. Kita boleh melakukan ini dengan menentukan pembolehubah panjang di mana kita menentukan pembolehubah i, seperti ini:
for (let i = 0, length = array.length; i < length; i++){
console.log(i);
}Pada dasarnya, hampir sama seperti di atas, tetapi dengan meningkatkan saiz gelung kita akan mendapat penjimatan masa yang ketara.
Penarafan litar pintas (Penilaian McCarthy)
OPERATOR BERSYARAT
Operator ternary ialah cara yang pantas dan cekap untuk menulis pernyataan bersyarat yang mudah (dan kadangkala tidak begitu mudah):
x> 100? βlebih daripada 100β: βkurang daripada 100β;
x> 100? (x>200? "lebih daripada 200": "antara 100-200"): "kurang daripada 100";
Tetapi kadangkala walaupun pengendali ternary lebih rumit daripada yang diperlukan. Kita boleh menggunakan 'dan' && dan 'atau' sebaliknya || Pengendali Boolean untuk menilai ungkapan tertentu dengan cara yang lebih ringkas. Ia sering dipanggil "litar pintas" atau "kadaran litar pintas".
ΠΠ°ΠΊ ΡΡΠΎ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ
Katakan kita mahu memulangkan hanya satu daripada dua atau lebih syarat.
Menggunakan && akan mengembalikan nilai palsu pertama. Jika setiap operan dinilai kepada benar, maka ungkapan terakhir yang dinilai 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 sebenar pertama. Jika setiap operan bernilai palsu, maka nilai penilaian terakhir akan dikembalikan.
let one = 1, two = 2, three = 3;
console.log(one || two || three); // Result: 1
console.log(0 || null); // Result: null1 Contoh
Katakan kita mahu mengembalikan panjang pembolehubah, tetapi kita tidak tahu jenisnya.
Dalam kes ini, anda boleh menggunakan if/else untuk menyemak bahawa foo adalah jenis yang betul, tetapi kaedah ini mungkin terlalu panjang. Oleh itu, adalah lebih baik untuk mengambil "litar pintas" kami.
return (foo || []).length;Jika pembolehubah foo mempunyai panjang yang sesuai, maka itu akan dikembalikan. Jika tidak, kita akan mendapat 0.
2 Contoh
Adakah anda mengalami masalah mengakses objek bersarang? Anda mungkin tidak tahu sama ada objek atau salah satu subsifatnya wujud, dan ini boleh membawa kepada masalah.
Sebagai contoh, kami ingin mengakses sifat data dalam this.state, tetapi data tidak ditakrifkan sehingga program kami mengembalikan permintaan pengambilan.
Bergantung pada tempat kami menggunakannya, memanggil this.state.data mungkin menghalang aplikasi daripada bermula. Untuk menyelesaikan masalah, kita boleh membungkus ini dalam ungkapan bersyarat:
if (this.state.data) {
return this.state.data;
} else {
return 'Fetching Data';
}Pilihan yang lebih baik ialah menggunakan operator "atau".
return (this.state.data || 'Fetching Data');Kami tidak boleh menukar kod di atas untuk menggunakan &&. Pengendali 'Mengambil Data' && this.state.data akan mengembalikan this.state.data tanpa mengira sama ada ia tidak ditentukan atau tidak.
Rantai pilihan
Seseorang mungkin mencadangkan menggunakan rantaian pilihan apabila cuba mengembalikan harta benda jauh ke dalam struktur pokok. Jadi, simbol tanda tanya? boleh digunakan untuk mendapatkan semula harta hanya jika ia tidak batal.
Sebagai contoh, kita boleh memfaktorkan semula contoh di atas untuk mendapatkan this.state.data?..(). Iaitu, data dikembalikan hanya jika nilainya tidak batal.
Atau, jika penting sama ada keadaan ditakrifkan atau tidak, kami boleh mengembalikan this.state?.data.
Tukar kepada Boolean
PENUKARAN JENIS
Sebagai tambahan kepada fungsi boolean biasa benar dan salah, JavaScript juga menganggap semua nilai lain sebagai benar atau palsu.
Sehingga dinyatakan sebaliknya, semua nilai dalam JavaScript adalah benar, kecuali 0, "", null, undefined, NaN dan, sudah tentu, palsu. Yang terakhir adalah palsu.
Kita boleh menukar antara keduanya dengan mudah menggunakan operator !, yang juga menukar jenis kepada boolean.
const isTrue = !0;
const isFalse = !1;
const alsoFalse = !!0;
console.log(true); // Result: true
console.log(typeof true); // Result: "boolean"Tukar kepada rentetan
PENUKARAN JENIS
Penukaran pantas daripada integer kepada rentetan boleh dilakukan seperti berikut.
const val = 1 + "";
console.log(val); // Result: "1"
console.log(typeof val); // Result: "string"Tukar kepada integer
PENUKARAN JENIS
Kami melakukan transformasi terbalik seperti ini.
let int = "15";
int = +int;
console.log(int); // Result: 15
console.log(typeof int); Result: "number"Kaedah ini juga boleh digunakan untuk menukar jenis data boolean kepada nilai angka biasa, seperti yang ditunjukkan di bawah:
console.log(+true); // Return: 1
console.log(+false); // Return: 0Mungkin terdapat situasi di mana + akan ditafsirkan sebagai pengendali gabungan dan bukannya pengendali penambahan. Untuk mengelakkan ini, anda harus menggunakan tildes: ~~. Operator ini bersamaan dengan -n-1. Sebagai contoh, ~15 bersamaan dengan -16.
Menggunakan dua tilde berturut-turut menafikan operasi kerana - (- - n - 1) - 1 = n + 1 - 1 = n. Dengan kata lain, ~-16 bersamaan dengan 15.
const int = ~~"15"
console.log(int); // Result: 15
console.log(typeof int); Result: "number"<Kuasa Pantas
OPERASI
Bermula dalam ES7, anda boleh menggunakan operator eksponen ** sebagai singkatan untuk kuasa. Ini adalah lebih pantas daripada menggunakan Math.pow(2, 3). Nampaknya mudah, tetapi perkara ini termasuk dalam senarai teknik, kerana ia tidak disebut di mana-mana.
console.log(2 ** 3); // Result: 8Ia tidak boleh dikelirukan dengan simbol ^, yang biasa digunakan untuk eksponen. Tetapi dalam JavaScript ini adalah pengendali XOR.
Sebelum ES7, pintasan ** hanya boleh digunakan untuk kuasa asas 2 menggunakan operator anjakan kiri bitwise <<:
Math.pow(2, n);
2 << (n - 1);
2**n;Sebagai contoh, 2 << 3 = 16 bersamaan dengan 2 ** 4 = 16.
Terapung kepada integer
OPERASI / PENUKARAN JENIS
Jika anda perlu menukar apungan kepada integer, anda boleh menggunakan Math.floor(), Math.ceil() atau Math.round(). Tetapi ada cara yang lebih pantas, untuk ini kami menggunakan |, iaitu operator OR.
console.log(23.9 | 0); // Result: 23
console.log(-23.9 | 0); // Result: -23Tingkah laku | bergantung pada sama ada anda berurusan dengan nombor positif atau negatif, jadi kaedah ini hanya sesuai jika anda yakin dengan apa yang anda lakukan.
n | 0 mengalih keluar segala-galanya selepas pemisah perpuluhan, memotong apungan kepada integer.
Anda boleh mendapatkan kesan pembundaran yang sama menggunakan ~~. Selepas penukaran paksa kepada integer, nilai kekal tidak berubah.
Mengalih keluar nombor belakang
Operator OR boleh digunakan untuk mengeluarkan sebarang nombor digit daripada nombor. Ini bermakna kita tidak perlu menukar jenis seperti di sini:
let str = "1553";
Number(str.substring(0, str.length - 1));Sebaliknya kami hanya menulis:
console.log(1553 / 10 | 0) // Result: 155
console.log(1553 / 100 | 0) // Result: 15
console.log(1553 / 1000 | 0) // Result: 1Pautan automatik
KELAS
Notasi anak panah ES6 boleh digunakan dalam kaedah kelas, dan pengikatan tersirat. Ini bermakna anda boleh mengucapkan selamat tinggal kepada ungkapan berulang seperti ini.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
ARRAYS
Jika anda perlu mengeluarkan nilai daripada tatasusunan, terdapat kaedah yang lebih pantas daripada splice().
Sebagai contoh, jika anda mengetahui saiz tatasusunan asal, anda boleh mengatasi sifat panjangnya seperti 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 kaedah lain, dan lebih cepat. Jika kelajuan adalah perkara yang penting kepada anda, berikut ialah 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 tatasusunan
ARRAYS
Teknik ini memerlukan penggunaan kaedah 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]Memformat kod JSON
JSON
Anda mungkin telah menggunakan JSON.stringify. Adakah anda tahu bahawa ia membantu memformat JSON anda?
Kaedah stringify() mengambil dua parameter pilihan: fungsi pengganti, yang boleh digunakan untuk menapis JSON yang dipaparkan dan nilai ruang.
console.log(JSON.stringify({ alpha: 'A', beta: 'B' }, null, 't'));
// Result:
// '{
// "alpha": A,
// "beta": B
// }'Itu sahaja, saya harap semua teknik ini berguna. Apakah helah yang anda tahu? Tulis mereka dalam komen.
Skillbox mengesyorkan:
- Kursus praktikal dua tahun .
- Kursus dalam talian .
- Kursus tahun praktikal .
Sumber: www.habr.com