Meta bdejt nitgħallem JavaScript, l-ewwel ħaġa li għamilt kienet għamilt lista ta’ tricks li għenuni niffranka l-ħin. Rajthom minn programmaturi oħra, fuq siti differenti u f'manwali.
F'dan l-artikolu, ser nuruk 12-il mod tajjeb biex ittejjeb u tħaffef il-kodiċi JavaScript tiegħek. F'ħafna każijiet huma universali.
Infakkrukom: għall-qarrejja kollha ta '"Habr" - skont ta' 10 rublu meta tirreġistra fi kwalunkwe kors ta 'Skillbox billi tuża l-kodiċi promozzjonali "Habr".
Skillbox jirrakkomanda: Kors prattiku .
Iffiltrar ta' valuri uniċi
ARRAYS
It-tip ta 'oġġett Set ġie introdott f'ES6, flimkien mal-..., operatur tal-firxa, nistgħu nużawha biex noħolqu firxa ġdida li fiha biss valuri uniċi.
const array = [1, 1, 2, 3, 5, 5, 1]
const uniqueArray = [...new Set(array)];
console.log(uniqueArray); // Result: [1, 2, 3, 5]F'sitwazzjoni normali, hemm bżonn ħafna aktar kodiċi biex titwettaq l-istess operazzjoni.
Din it-teknika taħdem għal arrays li fihom tipi primittivi: mhux definit, null, boolean, string u numru. Jekk qed taħdem ma 'firxa li fiha oġġetti, funzjonijiet, jew arrays addizzjonali, ikollok bżonn approċċ differenti.
Tul tal-firxa tal-cache f'ċikli
ĊIKLI
Meta titgħallem for loops, issegwi l-proċedura standard:
for (let i = 0; i < array.length; i++){
console.log(i);
}Madankollu, b'din is-sintassi, il-linja for jiċċekkja ripetutament it-tul tal-firxa kull iterazzjoni.
Xi drabi dan jista 'jkun utli, iżda fil-biċċa l-kbira tal-każijiet huwa aktar effiċjenti li t-tul tal-firxa fil-cache, li jkun jeħtieġ aċċess wieħed għaliha. Nistgħu nagħmlu dan billi niddefinixxu varjabbli tat-tul fejn niddefinixxu l-varjabbli i, bħal dan:
for (let i = 0, length = array.length; i < length; i++){
console.log(i);
}Fil-prinċipju, kważi l-istess bħal hawn fuq, iżda billi nżidu d-daqs tal-linja aħna se tikseb iffrankar ta 'ħin sinifikanti.
Klassifikazzjoni taċ-ċirkwit qasir (klassifikazzjoni McCarthy)
OPERATURI KONDIZZJONALI
L-operatur ternarju huwa mod veloċi u effiċjenti biex tikteb dikjarazzjonijiet kundizzjonali sempliċi (u kultant mhux daqshekk sempliċi):
x> 100? “aktar minn 100”: “inqas minn 100”;
x> 100? (x>200? "aktar minn 200": "bejn 100-200"): "inqas minn 100";
Imma kultant anke l-operatur ternarju huwa aktar ikkumplikat milli meħtieġ. Nistgħu nużaw 'u' && u 'jew' minflok || Operaturi booleani biex jevalwaw ċerti espressjonijiet b'mod saħansitra aktar konċiż. Ħafna drabi tissejjaħ "short circuit" jew "short circuit rating".
Kif taħdem din
Ejja ngħidu li rridu nirritornaw waħda biss minn żewġ kundizzjonijiet jew aktar.
L-użu ta' && se jirritorna l-ewwel valur falz. Jekk kull operand jevalwa għal veru, allura l-aħħar espressjoni evalwata tiġi rritornata.
let one = 1, two = 2, three = 3;
console.log(one && two && three); // Result: 3
console.log(0 && null); // Result: 0Bl-użu || se jirritorna l-ewwel valur veru. Jekk kull operand jevalwa bħala falz, allura l-aħħar valur evalwat jintbagħat lura.
let one = 1, two = 2, three = 3;
console.log(one || two || three); // Result: 1
console.log(0 || null); // Result: null1 Eżempju
Ejja ngħidu li rridu nirritornaw it-tul ta 'varjabbli, iżda ma nafux it-tip tagħha.
F'dan il-każ, tista 'tuża jekk / inkella biex tivverifika li foo huwa t-tip it-tajjeb, iżda dan il-metodu jista' jkun twil wisq. Għalhekk, huwa aħjar li nieħdu "short circuit" tagħna.
return (foo || []).length;Jekk il-foo varjabbli għandu tul xieraq, allura dan jiġi rritornat. Inkella nġibu 0.
2 Eżempju
Kellek problemi biex taċċessa oġġett nested? Jista' jkun li ma tkunx taf jekk oġġett jew waħda mis-subproprjetajiet tiegħu jeżistux, u dan jista' jwassal għal problemi.
Pereżempju, ridna naċċessaw il-proprjetà tad-dejta f'dan.state, iżda d-dejta mhix definita sakemm il-programm tagħna jirritorna talba ta' fetch.
Jiddependi minn fejn nużawha, is-sejħa this.state.data tista' tipprevjeni l-applikazzjoni milli tibda. Biex issolvi l-problema, nistgħu nagħżlu dan f'espressjoni kondizzjonali:
if (this.state.data) {
return this.state.data;
} else {
return 'Fetching Data';
}Għażla aħjar tkun li tuża l-operatur "jew".
return (this.state.data || 'Fetching Data');Ma nistgħux nibdlu l-kodiċi hawn fuq biex nużaw &&. L-operatur 'Fetching Data' && this.state.data se jirritorna this.state.data irrispettivament minn jekk tkunx definita jew le.
Katina fakultattiva
Wieħed jista 'jissuġġerixxi li tuża katina fakultattiva meta tipprova tirritorna proprjetà fil-fond fi struttura ta' siġra. Allura, is-simbolu tat-trade mark? jista' jintuża biex tiġi rkuprata proprjetà biss jekk ma tkunx nulla.
Pereżempju, nistgħu nirrefactorizzaw l-eżempju ta' hawn fuq biex niksbu this.state.data?..(). Jiġifieri, id-dejta tiġi rritornata biss jekk il-valur ma jkunx null.
Jew, jekk ikun importanti jekk l-istat huwiex definit jew le, nistgħu nirritornaw this.state?.data.
Ikkonverti għal Boolean
KONVERŻJONI TAT-TIP
Minbarra l-funzjonijiet booleani normali veri u foloz, JavaScript jittratta wkoll il-valuri l-oħra kollha bħala veri jew foloz.
Sakemm jiġi nnutat mod ieħor, il-valuri kollha f'JavaScript huma veri, ħlief 0, "", null, mhux definit, NaN u, ovvjament, foloz. Dawn tal-aħħar huma foloz.
Nistgħu faċilment jaqilbu bejn it-tnejn billi tuża l-operatur !, li wkoll jikkonverti t-tip għal boolean.
const isTrue = !0;
const isFalse = !1;
const alsoFalse = !!0;
console.log(true); // Result: true
console.log(typeof true); // Result: "boolean"Ikkonverti għal spag
KONVERŻJONI TAT-TIP
Konverżjoni ta 'malajr minn numru sħiħ għal string tista' ssir kif ġej.
const val = 1 + "";
console.log(val); // Result: "1"
console.log(typeof val); // Result: "string"Ikkonverti għal numru sħiħ
KONVERŻJONI TAT-TIP
Aħna nwettqu t-trasformazzjoni inversa bħal din.
let int = "15";
int = +int;
console.log(int); // Result: 15
console.log(typeof int); Result: "number"Dan il-metodu jista 'jintuża wkoll biex jikkonverti t-tip ta' data boolean għal valuri numeriċi regolari, kif muri hawn taħt:
console.log(+true); // Return: 1
console.log(+false); // Return: 0Jista' jkun hemm sitwazzjonijiet fejn + se jiġi interpretat bħala operatur ta' konkatenazzjoni aktar milli operatur ta' żieda. Biex tevita dan, għandek tuża tildes: ~~. Dan l-operatur huwa ekwivalenti għal -n-1. Per eżempju, ~15 huwa ugwali għal -16.
L-użu ta' żewġ tildi wara xulxin jiċħad l-operazzjoni minħabba li - (- - n - 1) - 1 = n + 1 - 1 = n. Fi kliem ieħor, ~-16 huwa ugwali għal 15.
const int = ~~"15"
console.log(int); // Result: 15
console.log(typeof int); Result: "number"<Quick Powers
OPERAZZJONIJIET
Tibda f'ES7, tista' tuża l-operatur ta' esponenzjar ** bħala qosor għall-poteri. Dan huwa ħafna aktar mgħaġġel milli tuża Math.pow(2, 3). Jidher sempliċi, iżda dan il-punt huwa inkluż fil-lista ta 'tekniki, peress li mhuwiex imsemmi kullimkien.
console.log(2 ** 3); // Result: 8M'għandux jiġi konfuż mas-simbolu ^, li huwa komunement użat għall-esponenzjazzjoni. Iżda f'JavaScript dan huwa l-operatur XOR.
Qabel ES7, is-shortcut ** setgħet tintuża biss għall-poteri tal-bażi 2 bl-użu tal-operatur shift xellug bit-bit <<:
Math.pow(2, n);
2 << (n - 1);
2**n;Pereżempju, 2 << 3 = 16 huwa ekwivalenti għal 2 ** 4 = 16.
Float għal numru sħiħ
OPERAZZJONIJIET / KONVERŻJONI TAT-TIP
Jekk għandek bżonn tikkonverti float għal numru sħiħ, tista' tuża Math.floor(), Math.ceil() jew Math.round(). Iżda hemm mod aktar mgħaġġel, għal dan nużaw |, jiġifieri, l-operatur OR.
console.log(23.9 | 0); // Result: 23
console.log(-23.9 | 0); // Result: -23Imġieba | jiddependi ħafna fuq jekk tkunx qed tittratta ma 'numri pożittivi jew negattivi, għalhekk dan il-metodu huwa adattat biss jekk inti kunfidenti f'dak li qed tagħmel.
n | 0 ineħħi kollox wara s-separatur deċimali, u jnaqqas il-float għal numru sħiħ.
Tista 'tikseb l-istess effett ta' arrotondament billi tuża ~~. Wara konverżjoni sfurzata għal numru sħiħ, il-valur jibqa' mhux mibdul.
It-tneħħija tan-numri ta' wara
L-operatur OR jista 'jintuża biex ineħħi kwalunkwe numru ta' ċifri minn numru. Dan ifisser li m'għandniex bżonn nikkonvertiw tipi bħal hawn:
let str = "1553";
Number(str.substring(0, str.length - 1));Minflok aħna sempliċement niktbu:
console.log(1553 / 10 | 0) // Result: 155
console.log(1553 / 100 | 0) // Result: 15
console.log(1553 / 1000 | 0) // Result: 1Konnessjoni awtomatika
KLASSIJIET
Notazzjonijiet tal-vleġeġ ES6 jistgħu jintużaw fil-metodi tal-klassi, u l-irbit huwa implikat. Dan ifisser li tista' tgħid addiju għal espressjonijiet ripetittivi bħal dan.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 tirqim
ARRAYS
Jekk għandek bżonn tqaxxar il-valuri minn firxa, hemm metodi aktar mgħaġġla minn splice ().
Pereżempju, jekk taf id-daqs tal-array oriġinali, tista' tegħleb il-proprjetà tat-tul tagħha kif ġej:
let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array.length = 4;
console.log(array); // Result: [0, 1, 2, 3]Iżda hemm metodu ieħor, u wieħed aktar mgħaġġel. Jekk il-veloċità hija l-importanti għalik, hawn huma l-għażliet tagħna:
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]Stampar tal-aħħar valur(i) ta' firxa
ARRAYS
Din it-teknika teħtieġ l-użu tal-metodu 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]Ifformattjar tal-Kodiċi JSON
JSON
Jista' jkun li diġà użajt JSON.stringify. Kont taf li jgħin biex jifformattja l-JSON tiegħek?
Il-metodu stringify() jieħu żewġ parametri fakultattivi: funzjoni ta 'sostituzzjoni, li tista' tintuża biex tiffiltra l-JSON murija, u valur ta 'spazju.
console.log(JSON.stringify({ alpha: 'A', beta: 'B' }, null, 't'));
// Result:
// '{
// "alpha": A,
// "beta": B
// }'Dak kollu, nittama li dawn it-tekniki kollha kienu utli. Liema tricks taf? Iktbuhom fil-kummenti.
Skillbox jirrakkomanda:
- Kors prattiku ta' sentejn .
- Kors onlajn .
- Kors prattiku tas-sena .
Sors: www.habr.com