Wéi ech ugefaang JavaScript ze léieren, ass dat éischt wat ech gemaach hunn eng Lëscht vun Tricks ze maachen déi mir gehollef hunn Zäit ze spueren. Ech hunn se vun anere Programméierer gesinn, op verschiddene Siten an an Handbücher.
An dësem Artikel weisen ech Iech 12 super Weeër fir Äre JavaScript Code ze verbesseren an ze beschleunegen. Am meeschte Fäll si se universell.
Mir erënneren Iech: fir all Habr Lieser - eng Remise vun 10 Rubel wann Dir Iech an all Skillbox Cours aschreift mat dem Habr Promo Code.
Skillbox recommandéiert: Praktesch Cours .
Filteren eenzegaarteg Wäerter
ARRAYS
De Set Objekttyp gouf am ES6 agefouert, zesumme mam ..., Verbreedungsoperateur, kënne mir et benotzen fir eng nei Array ze kreéieren déi nëmmen eenzegaarteg Wäerter enthält.
const array = [1, 1, 2, 3, 5, 5, 1]
const uniqueArray = [...new Set(array)];
console.log(uniqueArray); // Result: [1, 2, 3, 5]An enger normaler Situatioun ass vill méi Code gebraucht fir déiselwecht Operatioun auszeféieren.
Dës Technik funktionnéiert fir Arrays mat primitiven Typen: ondefinéiert, null, boolesch, String an Zuel. Wann Dir mat enger Array schafft, déi Objeten, Funktiounen oder zousätzlech Arrays enthält, braucht Dir eng aner Approche.
Längt vum Cache-Array an Zyklen
CYCLES
Wann Dir fir Loops léiert, befollegt Dir d'Standardprozedur:
for (let i = 0; i < array.length; i++){
console.log(i);
}Wéi och ëmmer, mat dëser Syntax kontrolléiert de For Loop ëmmer erëm d'Längt vun der Array all Iteratioun.
Heiansdo kann dëst nëtzlech sinn, awer an de meeschte Fäll ass et méi effizient d'Längt vun der Array ze cache, wat een Zougang dozou erfuerdert. Mir kënnen dëst maachen andeems Dir eng Längtvariabel definéiert wou mir d'Variabel i definéieren, sou:
for (let i = 0, length = array.length; i < length; i++){
console.log(i);
}Am Prinzip, bal d'selwecht wéi uewen, awer duerch d'Erhéijung vun der Loopgréisst wäerte mir bedeitend Zäit spueren.
Kuerzschluss Bewäertung (McCarthy Bewäertung)
CONDITIONAL OPERATOREN
Den ternäre Bedreiwer ass e séieren an effiziente Wee fir einfach (an heiansdo net sou einfach) bedingte Aussoen ze schreiwen:
x> 100? "méi wéi 100": "manner wéi 100";
x> 100? (x>200? "méi wéi 200": "tëscht 100-200": "manner wéi 100";
Awer heiansdo ass och den ternäre Bedreiwer méi komplizéiert wéi néideg. Mir kënnen 'an' && an 'oder' amplaz || Boolschen Bedreiwer fir bestëmmt Ausdréck op eng nach méi präzis Manéier ze evaluéieren. Et gëtt dacks "Kuerzschluss" oder "Kuerzschluss Bewäertung" genannt.
Wéi heescht dat Aarbecht
Loosst eis soen, mir wëllen nëmmen eng vun zwou oder méi Konditiounen zréckginn.
Mat && gëtt den éischte falsche Wäert zréck. Wann all Operand op richteg evaluéiert, da gëtt dee leschten Ausdrock evaluéiert zréck.
let one = 1, two = 2, three = 3;
console.log(one && two && three); // Result: 3
console.log(0 && null); // Result: 0Benotzt || gëtt den éischte richtege Wäert zréck. Wann all Operand op falsch evaluéiert, da gëtt de leschte bewäertte Wäert zréck.
let one = 1, two = 2, three = 3;
console.log(one || two || three); // Result: 1
console.log(0 || null); // Result: nullBeispill 1
Loosst eis soen, mir wëllen d'Längt vun enger Variabel zréckginn, awer mir kennen seng Aart net.
An dësem Fall kënnt Dir benotzen wann / soss ze kontrolléieren dass foo déi richteg Zort ass, mä dës Method kann ze laang ginn. Dofir ass et besser eis "Kuerzschluss" ze huelen.
return (foo || []).length;Wann d'Variabel Foo eng gëeegent Längt huet, da gëtt dat zréck. Soss kréie mir 0.
Beispill 2
Hutt Dir Probleemer mam Zougang zu engem nestet Objet? Dir wësst vläicht net ob en Objet oder eng vun hiren Ënnerproperties existéiert, an dëst kann zu Probleemer féieren.
Zum Beispill wollte mir op d'Dateeigenschaften an dësem.state zougräifen, awer d'Donnéeën sinn net definéiert bis eise Programm eng Fetch-Ufro zréckkënnt.
Ofhängeg vu wou mir et benotzen, dëst.state.data ruffen kann d'Applikatioun verhënneren. Fir de Problem ze léisen, kënne mir dëst an engem bedingten Ausdrock wéckelen:
if (this.state.data) {
return this.state.data;
} else {
return 'Fetching Data';
}Eng besser Optioun wier den "oder" Bedreiwer ze benotzen.
return (this.state.data || 'Fetching Data');Mir kënnen de Code hei uewen net änneren fir && ze benotzen. Den 'Daten sichen' && this.state.data Bedreiwer wäert this.state.data zréckginn egal ob et ondefinéiert ass oder net.
Optional Kette
Et kéint ee proposéiere fir optional Ketten ze benotzen wann Dir probéiert eng Immobilie déif an eng Bamstruktur zréckzeginn. Also, d'Frozeechen Symbol? kann nëmme benotzt ginn fir eng Immobilie ze recuperéieren wann se net null ass.
Zum Beispill kënne mir d'Beispill hei uewen refaktoréieren fir this.state.data ze kréien?..(). Dat ass, Daten ginn nëmmen zréck wann de Wäert net null ass.
Oder, wann et wichteg ass, ob Staat definéiert ass oder net, mir kéinten this.state?.data zréckginn.
Konvertéieren an Boolean
TYPE Konversioun
Zousätzlech zu den normale boolesche Funktiounen richteg a falsch, behandelt JavaScript och all aner Wäerter als wouer oder falsch.
Bis anescht uginn, sinn all Wäerter am JavaScript wouer, ausser 0, "", null, ondefinéiert, NaN an natierlech falsch. Déi lescht si falsch.
Mir kënne ganz einfach tëscht deenen zwee wiesselen mam ! Bedreiwer, deen och den Typ op boolesch konvertéiert.
const isTrue = !0;
const isFalse = !1;
const alsoFalse = !!0;
console.log(true); // Result: true
console.log(typeof true); // Result: "boolean"Konvertéieren an String
TYPE Konversioun
Eng séier Konversioun vun engem ganzen Zuel op eng String kann wéi follegt gemaach ginn.
const val = 1 + "";
console.log(val); // Result: "1"
console.log(typeof val); // Result: "string"Konvertéieren an eng ganz Zuel
TYPE Konversioun
Mir maachen déi ëmgedréint Transformatioun esou.
let int = "15";
int = +int;
console.log(int); // Result: 15
console.log(typeof int); Result: "number"Dës Method kann och benotzt ginn fir de booleschen Datetyp op reegelméisseg numeresch Wäerter ze konvertéieren, wéi hei ënnendrënner:
console.log(+true); // Return: 1
console.log(+false); // Return: 0Et kënne Situatiounen sinn, wou + als Konkatenatiounsbedreiwer interpretéiert gëtt anstatt en Zousatzbetreiber. Fir dëst ze vermeiden, sollt Dir Tildes benotzen: ~~. Dëse Bedreiwer entsprécht -n-1. Zum Beispill, ~15 ass gläich wéi -16.
Zwee Tildes an enger Zeil benotzen negéiert d'Operatioun well - (- - n - 1) - 1 = n + 1 - 1 = n. An anere Wierder, ~-16 ass gläich wéi 15.
const int = ~~"15"
console.log(int); // Result: 15
console.log(typeof int); Result: "number"<Quick Powers
OPERATIOUNEN
Vun ES7 un, kënnt Dir den Exponentiatiounsbedreiwer ** als Ofkierzung fir Muechten benotzen. Dëst ass vill méi séier wéi mat Math.pow (2, 3). Et schéngt einfach, mä dëse Punkt ass an der Lëscht vun Techniken abegraff, well et net iwwerall ernimmt ass.
console.log(2 ** 3); // Result: 8Et sollt net mat dem ^ Symbol verwiesselt ginn, wat allgemeng fir Exponentiatioun benotzt gëtt. Awer a JavaScript ass dëst den XOR Bedreiwer.
Virun ES7 konnt d'** Ofkiirzung nëmme fir d'Kraaft vun der Basis 2 benotzt ginn mat dem bitwise lénksen Verréckelungsbedreiwer <<:
Math.pow(2, n);
2 << (n - 1);
2**n;Zum Beispill, 2 << 3 = 16 entsprécht 2 ** 4 = 16.
Float op ganz Zuel
OPERATIOUNEN / TYPE Konversioun
Wann Dir braucht e Schwämm zu engem Ganzt ëmgerechent, Dir kënnt Math.floor benotzen (), Math.ceil () oder Math.round (). Awer et gëtt e méi séiere Wee, dofir benotze mir |, dat ass den OR Bedreiwer.
console.log(23.9 | 0); // Result: 23
console.log(-23.9 | 0); // Result: -23Behuelen | hänkt haaptsächlech dovun of, ob Dir mat positiven oder negativen Zuelen ze dinn hutt, also ass dës Method nëmme gëeegent wann Dir zouversiichtlech sidd wat Dir maacht.
n | an 0 läscht alles no der Dezimalseparator, truncéiert de Schwämm op eng ganz Zuel.
Dir kënnt dee selwechte Roundeffekt mat ~~ kréien. No der forcéierter Konversioun zu engem ganzen Zuel bleift de Wäert onverännert.
Ewechzehuelen Trailer Zuelen
Den ODER Bedreiwer kann benotzt ginn fir all Zuel vun Zifferen aus enger Zuel ze läschen. Dëst bedeit datt mir keng Typen wéi hei brauchen ze konvertéieren:
let str = "1553";
Number(str.substring(0, str.length - 1));Amplaz schreiwen mer einfach:
console.log(1553 / 10 | 0) // Result: 155
console.log(1553 / 100 | 0) // Result: 15
console.log(1553 / 1000 | 0) // Result: 1Automatesch Verknëppung
KLASSEN
ES6 Pfeil Notatioune kënnen a Klassemethoden benotzt ginn, a Bindung ass implizéiert. Dat heescht, Dir kënnt Äddi soen op repetitive Ausdréck wéi 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>
</>
)
}
};Array Trimmen
ARRAYS
Wann Dir Wäerter aus enger Array muss strippe, ginn et méi séier Methoden wéi splice ().
Zum Beispill, wann Dir d'Gréisst vun der ursprénglecher Array kennt, kënnt Dir seng Längteigenschaft wéi follegt iwwerschreiden:
let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array.length = 4;
console.log(array); // Result: [0, 1, 2, 3]Awer et gëtt eng aner Method, a méi séier. Wann d'Geschwindegkeet fir Iech wichteg ass, hei sinn eis Choixen:
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]Dréckt de leschte Wäert(e) vun enger Array
ARRAYS
Dës Technik erfuerdert d'Benotzung vun der Slice () Method.
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]JSON Code formatéieren
Language
Dir hutt vläicht scho JSON.stringify benotzt. Wousst Dir datt et hëlleft Äre JSON ze formatéieren?
D'Stringify () Method hëlt zwee fakultativ Parameteren: eng Ersatzfunktioun, déi benotzt ka ginn fir den ugewisen JSON ze filteren, an e Raumwäert.
console.log(JSON.stringify({ alpha: 'A', beta: 'B' }, null, 't'));
// Result:
// '{
// "alpha": A,
// "beta": B
// }'Dat ass alles, ech hoffen datt all dës Techniken nëtzlech waren. Wéi eng Tricken kennt Dir? Schreift se an de Kommentaren.
Skillbox recommandéiert:
- Zwee-Joer praktesch Cours .
- Online Cours .
- Praktesch ee Joer Cours .
Source: will.com