Nalika aku miwiti sinau JavaScript, sing pisanan aku lakoni yaiku nggawe dhaptar trik sing mbantu aku ngirit wektu. Aku kesawang saka programer liyane, ing situs beda lan ing manual.
Ing artikel iki, aku bakal nuduhake sampeyan 12 cara sing apik kanggo nambah lan nyepetake kode JavaScript sampeyan. Ing kasus paling padha universal.
Kita ngelingake: kanggo kabeh sing maca "Habr" - diskon 10 rubel nalika ndhaptar kursus Skillbox nggunakake kode promosi "Habr".
Skillbox nyaranake: Kursus praktis .
Nyaring nilai unik
ARAYS
Jinis obyek Setel dikenalakΓ© ing ES6, bebarengan karo ..., operator nyebar, kita bisa nggunakake aplikasi iku kanggo nggawe Uploaded anyar sing mung ngemot nilai unik.
const array = [1, 1, 2, 3, 5, 5, 1]
const uniqueArray = [...new Set(array)];
console.log(uniqueArray); // Result: [1, 2, 3, 5]Ing kahanan normal, luwih akeh kode sing dibutuhake kanggo nindakake operasi sing padha.
Teknik iki dianggo kanggo array sing ngemot jinis primitif: undefined, null, boolean, string lan number. Yen sampeyan nggarap array sing ngemot obyek, fungsi, utawa array tambahan, sampeyan butuh pendekatan sing beda.
Dawane cache array ing siklus
SIKLUS
Nalika sampeyan sinau kanggo puteran, sampeyan tindakake prosedur standar:
for (let i = 0; i < array.length; i++){
console.log(i);
}Nanging, kanthi sintaks iki, loop for bola-bali mriksa dawa array saben iterasi.
Kadhangkala iki bisa migunani, nanging ing sawetara kasus luwih efisien kanggo cache dawa array, sing mbutuhake siji akses menyang. Kita bisa nindakake iki kanthi nemtokake variabel dawa ing ngendi kita nemtokake variabel i, kaya iki:
for (let i = 0, length = array.length; i < length; i++){
console.log(i);
}Ing asas, meh padha karo ing ndhuwur, nanging kanthi nambah ukuran daur ulang kita bakal entuk irit wektu sing signifikan.
Rating sirkuit cendhak (Rating McCarthy)
OPERATOR KONDISI
Operator ternary minangka cara sing cepet lan efisien kanggo nulis pernyataan kondisional sing prasaja (lan kadhangkala ora gampang banget):
x> 100? "luwih saka 100": "kurang saka 100";
x> 100? (x> 200? "luwih saka 200": "antarane 100-200"): "kurang saka 100";
Nanging kadhangkala malah operator ternary luwih rumit tinimbang sing dibutuhake. Kita bisa nggunakake 'lan' && lan 'utawa' tinimbang || Operator Boolean kanggo ngevaluasi ekspresi tartamtu kanthi cara sing luwih ringkes. Asring disebut "short circuit" utawa "short circuit rating".
Carane ora karya iki
Contone, kita pengin bali mung siji saka loro utawa luwih kondisi.
Nggunakake && bakal ngasilake nilai palsu pisanan. Yen saben operan dievaluasi dadi bener, banjur ekspresi pungkasan sing dievaluasi bakal dibalekake.
let one = 1, two = 2, three = 3;
console.log(one && two && three); // Result: 3
console.log(0 && null); // Result: 0nganggo || bakal ngasilake nilai bener pisanan. Yen saben operand ngevaluasi palsu, banjur nilai evaluasi pungkasan bakal bali.
let one = 1, two = 2, three = 3;
console.log(one || two || three); // Result: 1
console.log(0 || null); // Result: nullcontone 1
Contone, kita pengin ngasilake dawa variabel, nanging ora ngerti jinise.
Ing kasus iki, sampeyan bisa nggunakake yen / liya kanggo mriksa sing foo jinis tengen, nanging cara iki bisa uga dawa banget. Mulane, luwih becik njupuk "sirkuit pendek" kita.
return (foo || []).length;Yen variabel foo nduweni dawa sing cocog, banjur bakal bali. Yen ora, kita bakal entuk 0.
contone 2
Apa sampeyan duwe masalah ngakses obyek bersarang? Sampeyan bisa uga ora ngerti apa obyek utawa salah siji saka subproperties ana, lan iki bisa mimpin kanggo masalah.
Contone, kita pengin ngakses properti data ing this.state, nanging data ora ditetepake nganti program kita ngasilake panjalukan njupuk.
Gumantung ing ngendi kita nggunakake, nelpon this.state.data bisa nyegah aplikasi saka miwiti. Kanggo ngatasi masalah, kita bisa mbungkus iki ing ekspresi kondisional:
if (this.state.data) {
return this.state.data;
} else {
return 'Fetching Data';
}Pilihan sing luwih apik yaiku nggunakake operator "utawa".
return (this.state.data || 'Fetching Data');Kita ora bisa ngganti kode ing ndhuwur kanggo nggunakake &&. Operator 'Fetching Data' && this.state.data bakal ngasilake this.state.data preduli manawa ora ditemtokake utawa ora.
Rantai opsional
Siji bisa menehi saran nggunakake chaining opsional nalika nyoba ngasilake properti menyang struktur wit. Dadi, simbol tandha pitakon? bisa digunakake kanggo njupuk properti mung yen ora null.
Contone, kita bisa refactor conto ing ndhuwur kanggo njaluk this.state.data?..(). Sing, data bali mung yen Nilai ora null.
Utawa, yen penting apa negara ditetepake utawa ora, kita bisa ngasilake this.state?.data.
Ngonversi menyang Boolean
KONVERSI JENIS
Saliyane fungsi boolean normal bener lan salah, JavaScript uga nganggep kabeh nilai liyane minangka bener utawa palsu.
Nganti kacathet, kabeh nilai ing JavaScript bener, kajaba 0, "", null, undefined, NaN lan, mesthi, palsu. Sing terakhir iku palsu.
Kita bisa kanthi gampang ngalih ing antarane loro nggunakake operator !, sing uga ngowahi jinis kasebut dadi boolean.
const isTrue = !0;
const isFalse = !1;
const alsoFalse = !!0;
console.log(true); // Result: true
console.log(typeof true); // Result: "boolean"Ngonversi menyang string
KONVERSI JENIS
Konversi cepet saka integer menyang string bisa ditindakake kaya ing ngisor iki.
const val = 1 + "";
console.log(val); // Result: "1"
console.log(typeof val); // Result: "string"Ngonversi menyang integer
KONVERSI JENIS
Kita nindakake transformasi mbalikke kaya iki.
let int = "15";
int = +int;
console.log(int); // Result: 15
console.log(typeof int); Result: "number"Cara iki uga bisa digunakake kanggo ngowahi jinis data boolean menyang angka biasa, kaya sing kapacak ing ngisor iki:
console.log(+true); // Return: 1
console.log(+false); // Return: 0Bisa uga ana kahanan sing + bakal diinterpretasikake minangka operator concatenation tinimbang operator tambahan. Kanggo nyegah iki, sampeyan kudu nggunakake tildes: ~~. Operator iki padha karo -n-1. Contone, ~15 padha karo -16.
Nggunakake loro tildes ing saurutan negates operasi amarga - (- - n - 1) - 1 = n + 1 - 1 = n. Ing tembung liyane, ~-16 padha karo 15.
const int = ~~"15"
console.log(int); // Result: 15
console.log(typeof int); Result: "number"<Quick Powers
OPERASI
Miwiti ing ES7, sampeyan bisa nggunakake operator eksponensial ** minangka shorthand kanggo kakuwasan. Iki luwih cepet tinimbang nggunakake Math.pow(2, 3). Iku misale jek prasaja, nanging titik iki kalebu ing dhaftar Techniques, awit iku ora kasebut nang endi wae.
console.log(2 ** 3); // Result: 8Aja bingung karo simbol ^, sing umum digunakake kanggo eksponensial. Nanging ing JavaScript iki operator XOR.
Sadurunge ES7, trabasan ** mung bisa digunakake kanggo kekuwatan basis 2 nggunakake operator shift kiwa bitwise <<:
Math.pow(2, n);
2 << (n - 1);
2**n;Contone, 2 << 3 = 16 padha karo 2 ** 4 = 16.
Ngambang menyang integer
OPERASI / KONVERSI JENIS
Yen sampeyan perlu Ngonversi float menyang integer, sampeyan bisa nggunakake Math.floor (), Math.ceil () utawa Math.round (). Nanging ana cara sing luwih cepet, iki digunakake |, yaiku, operator OR.
console.log(23.9 | 0); // Result: 23
console.log(-23.9 | 0); // Result: -23tindak tanduk | gumantung banget ing apa sing dealing with nomer positif utawa negatif, supaya cara iki mung cocok yen sampeyan manteb ing ati ing apa sing dilakoni.
n | 0 mbusak kabeh sawise pemisah desimal, truncating float menyang integer.
Sampeyan bisa entuk efek pembulatan sing padha nggunakake ~~. Sawise konversi dipeksa dadi integer, regane tetep ora owah.
Mbusak nomer mburi
Operator OR bisa digunakake kanggo mbusak sawetara digit saka nomer. Iki tegese kita ora perlu ngowahi jinis kaya ing kene:
let str = "1553";
Number(str.substring(0, str.length - 1));Nanging kita mung nulis:
console.log(1553 / 10 | 0) // Result: 155
console.log(1553 / 100 | 0) // Result: 15
console.log(1553 / 1000 | 0) // Result: 1Nyambung otomatis
KELAS
Notasi panah ES6 bisa digunakake ing metode kelas, lan ikatan diwenehake. Iki tegese sampeyan bisa ngucapake pamit kanggo ekspresi sing bola-bali kaya iki.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>
</>
)
}
};Array trimming
ARAYS
Yen sampeyan kudu mbusak nilai saka array, ana cara sing luwih cepet tinimbang splice ().
Contone, yen sampeyan ngerti ukuran array asli, sampeyan bisa ngganti properti dawa kaya ing ngisor iki:
let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array.length = 4;
console.log(array); // Result: [0, 1, 2, 3]Nanging ana cara liyane, lan luwih cepet. Yen kacepetan sing penting kanggo sampeyan, iki pilihan kita:
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]Nyetak nilai pungkasan saka array
ARAYS
Teknik iki mbutuhake nggunakake 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]Format kode JSON
JSON
Sampeyan bisa uga wis nggunakake JSON.stringify. Apa sampeyan ngerti yen mbantu ngowahi format JSON sampeyan?
Metode stringify () njupuk rong parameter opsional: fungsi panggantos, sing bisa digunakake kanggo nyaring JSON sing ditampilake, lan nilai spasi.
console.log(JSON.stringify({ alpha: 'A', beta: 'B' }, null, 't'));
// Result:
// '{
// "alpha": A,
// "beta": B
// }'Iku kabeh, muga-muga kabeh teknik kasebut migunani. Apa trik sampeyan ngerti? Tulis ing komentar.
Skillbox nyaranake:
- Kursus praktis rong taun .
- Kursus online .
- Kursus praktis setahun .
Source: www.habr.com