Doe't ik JavaScript begon te learen, wie it earste wat ik die in list meitsje mei trúkjes dy't my holpen tiid te besparjen. Ik seach se fan oare programmeurs, op ferskate siden en yn hantliedingen.
Yn dit artikel sil ik jo 12 geweldige manieren sjen litte om jo JavaScript-koade te ferbetterjen en te fersnellen. Yn 'e measte gefallen binne se universele.
Wy herinnerje: foar alle lêzers fan "Habr" - in koarting fan 10 roebel by it ynskriuwen fan in Skillbox-kursus mei de promoasjekoade "Habr".
Skillbox advisearret: Praktyske kursus .
Unike wearden filterje
ARRAYS
It objekttype Set waard yntrodusearre yn ES6, tegearre mei de ..., spriedingsoperator, kinne wy it brûke om in nije array te meitsjen dy't allinich unike wearden befettet.
const array = [1, 1, 2, 3, 5, 5, 1]
const uniqueArray = [...new Set(array)];
console.log(uniqueArray); // Result: [1, 2, 3, 5]Yn in normale situaasje is folle mear koade nedich om deselde operaasje út te fieren.
Dizze technyk wurket foar arrays dy't primitive typen befetsje: undefined, null, boolean, string en nûmer. As jo wurkje mei in array dy't objekten, funksjes of ekstra arrays befettet, hawwe jo in oare oanpak nedich.
Lengte fan cache-array yn syklusen
CYCLES
As jo leare foar loops, folgje jo de standertproseduere:
for (let i = 0; i < array.length; i++){
console.log(i);
}Mei dizze syntaksis kontroleart de for-loop lykwols de lingte fan 'e array by elke iteraasje.
Soms kin dit nuttich wêze, mar yn 'e measte gefallen is it effisjinter om de lingte fan' e array te cache, wat ien tagong ta it nedich is. Wy kinne dit dwaan troch in lingte fariabele te definiearjen wêr't wy de fariabele i definiearje, lykas dit:
for (let i = 0, length = array.length; i < length; i++){
console.log(i);
}Yn prinsipe hast itselde as hjirboppe, mar troch it fergrutsjen fan de loopgrutte sille wy signifikante tiidbesparring krije.
Kortslutingswurdearring (McCarthy-wurdearring)
CONDITIONAL OPERATORS
De ternêre operator is in flugge en effisjinte manier om ienfâldige (en soms net sa ienfâldich) betingsten te skriuwen:
x> 100? "mear as 100": "minder as 100";
x> 100? (x>200? "mear as 200": "tusken 100-200": "minder dan 100";
Mar soms sels de ternêre operator is komplisearre as nedich. Wy kinne 'en' && en 'of' ynstee brûke || Booleaanske operators om bepaalde útdrukkingen op in noch koartere manier te evaluearjen. It wurdt faaks "koartsluting" of "koartslutingswurdearring" neamd.
Hoe docht dit wurk
Litte wy sizze dat wy mar ien fan twa of mear betingsten wolle weromjaan.
It brûken fan && sil de earste falske wearde weromjaan. As elke operand evaluearret nei wier, dan sil de lêste evaluearre ekspresje weromjûn wurde.
let one = 1, two = 2, three = 3;
console.log(one && two && three); // Result: 3
console.log(0 && null); // Result: 0Mei || sil weromkomme de earste wiere wearde. As elke operand evaluearret as falsk, dan sil de lêste evaluearre wearde weromjûn wurde.
let one = 1, two = 2, three = 3;
console.log(one || two || three); // Result: 1
console.log(0 || null); // Result: nullfoarbyld 1
Litte wy sizze dat wy de lingte fan in fariabele wolle weromjaan, mar wy witte it type net.
Yn dit gefal kinne jo as / oars brûke om te kontrolearjen dat foo it goede type is, mar dizze metoade kin te lang wêze. Dêrom is it better om ús "koartsluting" te nimmen.
return (foo || []).length;As de fariabele foo in gaadlike lingte hat, dan komt dat werom. Oars krije wy 0.
foarbyld 2
Hawwe jo problemen mei tagong ta in nested objekt? Jo kinne net witte oft in foarwerp of ien fan syn subeigenskippen bestiet, en dit kin liede ta problemen.
Bygelyks, wy woenen tagong ta de gegevens eigendom yn this.state, mar gegevens binne net definiearre oant ús programma jout in opheljen fersyk.
Ofhinklik fan wêr't wy it brûke, kin it oproppen fan this.state.data foarkomme dat de applikaasje begjint. Om it probleem op te lossen, kinne wy dit yn in betingste útdrukking ynpakke:
if (this.state.data) {
return this.state.data;
} else {
return 'Fetching Data';
}In bettere opsje soe wêze om de "of" operator te brûken.
return (this.state.data || 'Fetching Data');Wy kinne de koade hjirboppe net feroarje om && te brûken. De 'Fetching Data' && this.state.data-operator sil this.state.data weromjaan, nettsjinsteande oft it net definiearre is of net.
Opsjonele ketting
Men kin foarstelle om opsjonele ketting te brûken as jo besykje in pân djip yn in beamstruktuer werom te jaan. Dus, it fraachteken symboal? kin allinich brûkt wurde om in pân werom te heljen as it net nul is.
Wy kinne bygelyks it foarbyld hjirboppe refaktorearje om this.state.data?..() te krijen. Dat is, gegevens wurde allinich weromjûn as de wearde net nul is.
Of, as it fan belang is oft steat is definiearre of net, wy koenen werom this.state?.data.
Konvertearje nei Boolean
TYPE KONVERTERING
Neist de normale Booleaanske funksjes wier en falsk, behannelet JavaScript ek alle oare wearden as wier of falsk.
Oant oars oanjûn, binne alle wearden yn JavaScript wier, útsein 0, "", null, undefined, NaN en, fansels, falsk. De lêsten binne falsk.
Wy kinne maklik tusken de twa wikselje mei de operator !, dy't it type ek konvertearret nei Booleaansk.
const isTrue = !0;
const isFalse = !1;
const alsoFalse = !!0;
console.log(true); // Result: true
console.log(typeof true); // Result: "boolean"Konvertearje nei string
TYPE KONVERTERING
In flugge konverzje fan in hiel getal nei in tekenrige kin dien wurde as folget.
const val = 1 + "";
console.log(val); // Result: "1"
console.log(typeof val); // Result: "string"Konvertearje nei integer
TYPE KONVERTERING
Wy fiere de omkearde transformaasje sa út.
let int = "15";
int = +int;
console.log(int); // Result: 15
console.log(typeof int); Result: "number"Dizze metoade kin ek brûkt wurde om it Booleaanske gegevenstype te konvertearjen nei reguliere numerike wearden, lykas hjirûnder werjûn:
console.log(+true); // Return: 1
console.log(+false); // Return: 0D'r kinne situaasjes wêze wêr't + ynterpretearre wurde sil as in gearhingoperator ynstee fan in tafoegingsoperator. Om dit te foarkommen, moatte jo tildes brûke: ~~. Dizze operator is lykweardich oan -n-1. Bygelyks, ~15 is lyk oan -16.
It brûken fan twa tildes op in rige negearret de operaasje omdat - (- - n - 1) - 1 = n + 1 - 1 = n. Mei oare wurden, ~-16 is lyk oan 15.
const int = ~~"15"
console.log(int); // Result: 15
console.log(typeof int); Result: "number"<Quick Powers
OPERASJES
Begjinnend yn ES7, kinne jo de eksponentiaasjeoperator ** brûke as in koarting foar machten. Dit is folle flugger as it brûken fan Math.pow(2, 3). It liket ienfâldich, mar dit punt is opnommen yn 'e list fan techniken, om't it net oeral neamd wurdt.
console.log(2 ** 3); // Result: 8It moat net betize wurde mei it symboal ^, dat ornaris brûkt wurdt foar eksponentiaasje. Mar yn JavaScript is dit de XOR-operator.
Foar ES7 koe de ** fluchtoets allinich brûkt wurde foar krêften fan basis 2 mei de bitwize loftsskiftoperator <<:
Math.pow(2, n);
2 << (n - 1);
2**n;Bygelyks, 2 << 3 = 16 is lykweardich oan 2 ** 4 = 16.
Float nei in hiel getal
OPERASJIES / TYPE CONVERSION
As jo moatte omsette in float nei in hiel getal, kinne jo brûke Math.floor (), Math.ceil () of Math.round (). Mar d'r is in fluggere manier, hjirfoar brûke wy |, dat is de OR-operator.
console.log(23.9 | 0); // Result: 23
console.log(-23.9 | 0); // Result: -23Gedrach | hinget foar in grut part op oft jo te krijen hawwe mei positive of negative getallen, dus dizze metoade is allinnich geskikt as jo binne wis op wat jo dogge.
n | 0 ferwideret alles nei de desimale skieding, en truncate de float nei in hiel getal.
Jo kinne itselde rûningseffekt krije mei ~~. Nei twongen konverzje nei in hiel getal, bliuwt de wearde net feroare.
Fuortsmite trailing nûmers
De OR-operator kin brûkt wurde om elk oantal sifers fan in nûmer te ferwiderjen. Dit betsjut dat wy gjin typen hoege te konvertearjen lykas hjir:
let str = "1553";
Number(str.substring(0, str.length - 1));Ynstee dêrfan skriuwe wy gewoan:
console.log(1553 / 10 | 0) // Result: 155
console.log(1553 / 100 | 0) // Result: 15
console.log(1553 / 1000 | 0) // Result: 1Automatyske keppeling
KLASSEN
ES6-pylknotaasjes kinne brûkt wurde yn klassemetoaden, en bining wurdt ymplisearre. Dit betsjut dat jo ôfskie kinne nimme fan repetitive útdrukkingen lykas 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
As jo wearden moatte strippe fan in array, binne d'r rappere metoaden dan splice ().
As jo bygelyks de grutte fan 'e orizjinele array kenne, kinne jo de lingte-eigenskip as folgjend oerskriuwe:
let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array.length = 4;
console.log(array); // Result: [0, 1, 2, 3]Mar d'r is in oare metoade, en in flugger. As snelheid is wat wichtich is foar jo, hjir binne ús keuzes:
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]It printsjen fan de lêste wearde(n) fan in array
ARRAYS
Dizze technyk fereasket it brûken fan de metoade 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]JSON-koade opmaak
JSON
Jo hawwe miskien al brûkt JSON.stringify. Wisten jo dat it helpt om jo JSON te formatteren?
De metoade stringify() nimt twa opsjonele parameters: in ferfangerfunksje, dy't brûkt wurde kin om de werjûn JSON te filterjen, en in romtewearde.
console.log(JSON.stringify({ alpha: 'A', beta: 'B' }, null, 't'));
// Result:
// '{
// "alpha": A,
// "beta": B
// }'Dat is alles, ik hoopje dat al dizze techniken nuttich wiene. Hokker trúkjes witte jo? Skriuw se yn 'e kommentaren.
Skillbox advisearret:
- Twa jier praktyske kursus .
- Online kursus .
- Praktyske jierkursus .
Boarne: www.habr.com