Nalika kuring mimiti diajar JavaScript, hal kahiji anu kuring lakukeun nyaéta ngadamel daptar trik anu ngabantosan kuring ngahémat waktos. Kuring nempo aranjeunna ti programer séjén, dina situs béda jeung dina manual.
Dina tulisan ieu, kuring bakal nunjukkeun anjeun 12 cara anu hadé pikeun ningkatkeun sareng nyepetkeun kode JavaScript anjeun. Dina kalolobaan kasus aranjeunna universal.
Kami ngingetan: pikeun sakabéh pamiarsa "Habr" - diskon 10 rubles nalika enrolling dina sagala Tangtu Skillbox ngagunakeun "Habr" kode promosi.
Skillbox nyarankeun: Kursus praktis .
Nyaring nilai unik
ARAYS
Tipe obyék Set diwanohkeun dina ES6, babarengan jeung ..., operator sumebar, urang bisa make eta pikeun nyieun Asép Sunandar Sunarya anyar nu ngandung ukur nilai unik.
const array = [1, 1, 2, 3, 5, 5, 1]
const uniqueArray = [...new Set(array)];
console.log(uniqueArray); // Result: [1, 2, 3, 5]Dina kaayaan normal, langkung seueur kode anu diperyogikeun pikeun ngalakukeun operasi anu sami.
Téhnik ieu lumaku pikeun arrays ngandung tipe primitif: undefined, null, boolean, string jeung angka. Upami anjeun damel sareng arrays anu ngandung objék, fungsi, atanapi arrays tambahan, anjeun peryogi pendekatan anu béda.
Panjang Asép Sunandar Sunarya cache dina siklus
SIKLUS
Nalika anjeun diajar loop, anjeun nuturkeun prosedur standar:
for (let i = 0; i < array.length; i++){
console.log(i);
}Tapi, ku sintaksis ieu, loop for sababaraha kali mariksa panjang array unggal iterasi.
Kadang-kadang ieu bisa jadi mangpaat, tapi di hal nu ilahar leuwih efisien cache panjang Asép Sunandar Sunarya, nu bakal merlukeun hiji aksés ka dinya. Urang tiasa ngalakukeun ieu ku netepkeun variabel panjang dimana urang nangtukeun variabel i, sapertos kieu:
for (let i = 0, length = array.length; i < length; i++){
console.log(i);
}Sacara prinsip, ampir sarua jeung di luhur, tapi ku ngaronjatna ukuran loop urang bakal meunang tabungan waktu signifikan.
Peunteun sirkuit pondok (peunteun McCarthy)
OPERATOR SYARAT
Operator ternary mangrupikeun cara anu gancang sareng épisién pikeun nyerat pernyataan kondisional anu saderhana (kadangkala henteu saderhana pisan):
x> 100? "leuwih ti 100": "kirang ti 100";
x> 100? (x> 200? "leuwih ti 200": "antara 100-200"): "kirang ti 100";
Tapi sok sanajan operator ternary leuwih pajeulit batan diperlukeun. Urang bisa make 'jeung' && jeung 'atawa' gantina || Operator Boolean pikeun meunteun ekspresi anu tangtu ku cara anu langkung ringkes. Hal ieu mindeng disebut "short circuit" atawa "short circuit rating".
Kumaha teu karya ieu
Sebutkeun urang ngan ukur hoyong mulangkeun hiji tina dua atanapi langkung kaayaan.
Ngagunakeun && bakal mulangkeun nilai palsu munggaran. Upami unggal operan dievaluasi leres, maka ekspresi terakhir anu dievaluasi bakal dipulangkeun.
let one = 1, two = 2, three = 3;
console.log(one && two && three); // Result: 3
console.log(0 && null); // Result: 0Ngagunakeun || bakal mulangkeun nilai leres munggaran. Lamun unggal operan ngaevaluasi kana palsu, mangka nilai dievaluasi panungtungan bakal balik.
let one = 1, two = 2, three = 3;
console.log(one || two || three); // Result: 1
console.log(0 || null); // Result: nullconto 1
Sebutkeun urang hoyong mulangkeun panjang variabel, tapi urang henteu terang jinisna.
Dina hal ieu, Anjeun bisa make lamun / sejenna pikeun pariksa yen foo mangrupakeun tipe katuhu, tapi metoda ieu bisa jadi panjang teuing. Kituna, eta leuwih hade nyandak urang "short circuit".
return (foo || []).length;Upami variabel foo ngagaduhan panjang anu cocog, éta bakal dipulangkeun. Upami teu kitu, urang bakal meunang 0.
conto 2
Dupi anjeun ngalaman masalah ngakses hiji objék nested? Anjeun bisa jadi teu nyaho naha hiji obyék atawa salah sahiji subproperties na aya, sarta ieu bisa ngakibatkeun masalah.
Contona, urang hayang ngakses sipat data di this.state, tapi data teu diartikeun dugi program urang mulih pamundut dipulut.
Gumantung kana dimana kami nganggo eta, nelepon this.state.data bisa nyegah aplikasi ti dimimitian. Pikeun ngajawab masalah, urang bisa mungkus ieu dina ekspresi kondisional:
if (this.state.data) {
return this.state.data;
} else {
return 'Fetching Data';
}Hiji pilihan hadé bakal ngagunakeun "atawa" operator.
return (this.state.data || 'Fetching Data');Urang teu bisa ngarobah kodeu di luhur ngagunakeun &&. The 'Fetching Data' && this.state.data operator bakal balik this.state.data paduli naha éta undefined atanapi henteu.
ranté pilihan
Hiji tiasa nyarankeun ngagunakeun ranté pilihan nalika nyobian mulangkeun harta anu jero kana struktur tangkal. Janten, simbol tanda tanya? bisa dipaké pikeun meunangkeun harta ngan lamun teu null.
Contona, urang bisa refactor conto di luhur pikeun meunangkeun this.state.data?..(). Hartina, data dipulangkeun ngan lamun nilaina henteu nol.
Atawa, lamun eta perkara naha kaayaan diartikeun atanapi henteu, urang bisa balik this.state?.data.
Ngarobah Boolean
KONVERSI TIPE
Salian fungsi boolean normal leres sareng salah, JavaScript ogé ngarawat sadaya nilai sanés salaku leres atanapi palsu.
Dugi ka dicatet, sadaya nilai dina JavaScript leres, kecuali 0, "", null, undefined, NaN sareng, tangtosna, palsu. Panungtungan anu palsu.
Urang bisa kalayan gampang pindah antara dua ngagunakeun operator !, nu ogé ngarobah tipe kana boolean.
const isTrue = !0;
const isFalse = !1;
const alsoFalse = !!0;
console.log(true); // Result: true
console.log(typeof true); // Result: "boolean"Ngarobah kana string
KONVERSI TIPE
Konvérsi gancang tina integer ka string tiasa dilakukeun sapertos kieu.
const val = 1 + "";
console.log(val); // Result: "1"
console.log(typeof val); // Result: "string"Ngarobah kana integer
KONVERSI TIPE
Kami ngalakukeun transformasi sabalikna sapertos kieu.
let int = "15";
int = +int;
console.log(int); // Result: 15
console.log(typeof int); Result: "number"Metoda ieu ogé bisa dipaké pikeun ngarobah tipe data boolean kana nilai numerik biasa, sakumaha ditémbongkeun di handap ieu:
console.log(+true); // Return: 1
console.log(+false); // Return: 0Meureun aya kaayaan dimana + bakal diinterpretasi salaku operator concatenation tinimbang hiji operator tambahan. Pikeun ngahindarkeun ieu, anjeun kedah nganggo tildes: ~~. Operator ieu sarua jeung -n-1. Contona, ~15 sarua jeung -16.
Ngagunakeun dua tildes sakaligus negates operasi sabab - (- - n - 1) - 1 = n + 1 - 1 = n. Dina basa sejen, ~-16 sarua jeung 15.
const int = ~~"15"
console.log(int); // Result: 15
console.log(typeof int); Result: "number"<Kakuatan Gancang
Operasi
Dimimitian dina ES7, anjeun tiasa nganggo operator éksponénsial ** salaku shorthand pikeun kakuatan. Ieu leuwih gancang ti ngagunakeun Math.pow(2, 3). Sigana basajan, tapi titik ieu kaasup kana daptar téknik, sabab teu disebutkeun di mana waé.
console.log(2 ** 3); // Result: 8Teu matak bingung jeung simbol ^, nu ilahar dipaké pikeun éksponénsial. Tapi dina JavaScript ieu operator XOR.
Sateuacan ES7, potong kompas ** ngan tiasa dianggo pikeun kakuatan dasar 2 nganggo operator shift kénca bitwise <<:
Math.pow(2, n);
2 << (n - 1);
2**n;Contona, 2 << 3 = 16 sarua jeung 2 ** 4 = 16.
Ngambang ka integer
OPERASI / KONVERSI TIPE
Lamun perlu ngarobah ngambang ka integer, Anjeun tiasa make Math.floor (), Math.ceil () atanapi Math.round (). Tapi aya cara anu langkung gancang, pikeun ieu kami nganggo |, nyaéta operator OR.
console.log(23.9 | 0); // Result: 23
console.log(-23.9 | 0); // Result: -23Kalakuan | gumantung sakitu legana on naha anjeun kaayaan angka positif atawa négatif, jadi metoda ieu ngan cocog mun anjeun yakin kana naon anu anjeun lakukeun.
n | 0 miceun sagalana sanggeus pamisah decimal, truncating float ka integer.
Anjeun bisa meunangkeun éfék rounding sarua maké ~~. Saatos konversi kapaksa jadi integer, nilai tetep unchanged.
Nyoplokkeun angka labuh
Operator OR tiasa dianggo pikeun ngahapus sajumlah digit tina hiji nomer. Ieu hartosna urang henteu kedah ngarobih jinis sapertos kieu:
let str = "1553";
Number(str.substring(0, str.length - 1));Gantina urang ngan nulis:
console.log(1553 / 10 | 0) // Result: 155
console.log(1553 / 100 | 0) // Result: 15
console.log(1553 / 1000 | 0) // Result: 1Ngahubungkeun otomatis
KELAS
Notasi panah ES6 tiasa dianggo dina metode kelas, sareng ngariung tersirat. Ieu ngandung harti yén anjeun bisa ngucapkeun pamit ka ekspresi repetitive kawas kieu.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>
</>
)
}
};Pamasangan susunan
ARAYS
Lamun perlu strip nilai tina Asép Sunandar Sunarya, aya métode gancang ti splice ().
Contona, upami anjeun terang ukuran array aslina, anjeun tiasa override sipat panjangna saperti kieu:
let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array.length = 4;
console.log(array); // Result: [0, 1, 2, 3]Tapi aya cara anu sanés, sareng anu langkung gancang. Upami laju anu penting pikeun anjeun, ieu 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]Nyitak nilai panungtungan (s) tina hiji Asép Sunandar Sunarya
ARAYS
Téhnik ieu merlukeun pamakean metoda keureutan ().
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]Ngaformat kode JSON
JSON
Anjeun meureun geus dipaké JSON.stringify. Naha anjeun terang yén éta ngabantosan pormat JSON anjeun?
Metodeu stringify () nyokot dua parameter pilihan: a fungsi replacer, nu bisa dipaké pikeun nyaring JSON ditampilkeun, sarta nilai spasi.
console.log(JSON.stringify({ alpha: 'A', beta: 'B' }, null, 't'));
// Result:
// '{
// "alpha": A,
// "beta": B
// }'Sakitu wae, mugia sadayana téknik ieu aya mangpaatna. trik naon anjeun terang? Tulis aranjeunna dina komentar.
Skillbox nyarankeun:
- Kursus praktis dua taun .
- Tangtu online .
- Kursus taun praktis .
sumber: www.habr.com