JavaScript ikasten hasi nintzenean, egin nuen lehenengo gauza denbora aurrezten lagundu zidaten trikimailu zerrenda bat egitea izan zen. Beste programatzaile batzuengandik ikusi ditut, gune ezberdinetan eta eskuliburuetan.
Artikulu honetan, zure JavaScript kodea hobetzeko eta bizkortzeko 12 modu bikain erakutsiko dizkizut. Kasu gehienetan unibertsalak dira.
Gogoratzen dugu: "Habr" irakurle guztientzat - 10 errubloko deskontua "Habr" promozio-kodea erabiliz Skillbox-eko edozein ikastarotan izena ematean.
Skillbox-ek gomendatzen du: Ikastaro praktikoa .
Balio bereziak iragaztea
MATRIZEAK
Ezarri objektu mota ES6-n sartu zen,..., spread operadorearekin batera, balio bakarrak dituen array berri bat sortzeko erabil dezakegu.
const array = [1, 1, 2, 3, 5, 5, 1]
const uniqueArray = [...new Set(array)];
console.log(uniqueArray); // Result: [1, 2, 3, 5]Egoera normal batean, askoz kode gehiago behar da eragiketa bera egiteko.
Teknika honek mota primitiboak dituzten arrayetarako funtzionatzen du: definitu gabea, nulua, boolearra, katea eta zenbakia. Objektuak, funtzioak edo array osagarriak dituen array batekin lanean ari bazara, beste ikuspegi bat beharko duzu.
Cache-matrizearen luzera zikloetan
ZIKLOAK
Begiztak ikasten dituzunean, prozedura estandarra jarraitzen duzu:
for (let i = 0; i < array.length; i++){
console.log(i);
}Hala ere, sintaxi honekin, for begiztak behin eta berriz egiaztatzen du matrizearen luzera iterazio bakoitzean.
Batzuetan erabilgarria izan daiteke, baina kasu gehienetan eraginkorragoa da array-aren luzera cachean jartzea, eta horretarako sarbide bakarra beharko du. Hau egin dezakegu luzera aldagai bat definituz non i aldagaia definitzen dugun, honela:
for (let i = 0, length = array.length; i < length; i++){
console.log(i);
}Printzipioz, ia aurrekoaren berdina, baina begizta tamaina handituz denbora aurrezpen handia lortuko dugu.
Zirkuitu laburren balorazioa (McCarthy balorazioa)
OPERADOR BALDINTZATUAK
Eragile ternarioa baldintzazko adierazpen sinpleak (eta batzuetan ez hain sinpleak) idazteko modu azkar eta eraginkorra da:
x> 100? Β«100 baino gehiagoΒ»: Β«100 baino gutxiagoΒ»;
x> 100? (x>200? "200 baino gehiago": "100-200 artean"): "100 baino gutxiago";
Baina batzuetan operadore ternarioa ere behar baino konplikatuagoa da. Horren ordez 'eta' && eta 'edo' erabil ditzakegu || Eragile boolearrak zenbait adierazpen are modu zehatzago batean ebaluatzeko. Sarritan "zirkuitu laburra" edo "zirkuitu laburren balorazioa" esaten zaio.
Nola egiten du lan
Demagun baldintza bi edo gehiagotatik bakarra itzuli nahi dugula.
&& erabiliz gero, lehen balio faltsua itzuliko da. Eragiketa bakoitzak egiatzat ematen badu, ebaluatutako azken adierazpena itzuliko da.
let one = 1, two = 2, three = 3;
console.log(one && two && three); // Result: 3
console.log(0 && null); // Result: 0|| erabiliz lehen benetako balioa itzuliko du. Eragiketa bakoitzak faltsutzat jotzen badu, azken ebaluatutako balioa itzuliko da.
let one = 1, two = 2, three = 3;
console.log(one || two || three); // Result: 1
console.log(0 || null); // Result: nullAdibidez 1
Demagun aldagai baten luzera itzuli nahi dugula, baina ez dakigu haren mota.
Kasu honetan, if/else erabil dezakezu foo mota egokia dela egiaztatzeko, baina metodo hau luzeegia izan daiteke. Horregatik, hobe da gure βzirkuitu laburraβ hartzea.
return (foo || []).length;Foo aldagaiak luzera egokia badu, hori itzuliko da. Bestela 0 lortuko dugu.
Adibidez 2
Arazorik izan al duzu habiaratutako objektu batera sartzeko? Agian ez dakizu objektu bat edo bere azpipropietateetako bat dagoen ala ez, eta horrek arazoak sor ditzake.
Adibidez, this.state-ko datuen propietatea atzitu nahi genuen, baina datuak ez dira definitzen gure programak eskuratze eskaera bat itzultzen duen arte.
Erabiltzen dugun tokiaren arabera, this.state.data deitzeak aplikazioa abiaraztea eragotzi dezake. Arazoa konpontzeko, baldintzazko adierazpen batean bil genezake:
if (this.state.data) {
return this.state.data;
} else {
return 'Fetching Data';
}Aukera hobe bat "or" operadorea erabiltzea izango litzateke.
return (this.state.data || 'Fetching Data');Ezin dugu goiko kodea aldatu && erabiltzeko. 'Datuak eskuratzen' && this.state.data operadoreak this.state.data itzuliko du zehaztu gabe dagoen ala ez kontuan hartu gabe.
Aukerako katea
Batek iradoki dezake aukerako kateatzea erabiltzea zuhaitz-egitura batean propietate bat itzultzen saiatzean. Beraz, galdera ikurra? propietate bat berreskuratzeko erabil daiteke nulua ez bada bakarrik.
Esate baterako, goiko adibidea birfaktorizatu genezake. egoera.datuak?..() hau lortzeko. Hau da, datuak balio nulua ez bada soilik itzultzen dira.
Edo, egoera definituta dagoen ala ez axola badu, hau.egoera?.datuak itzul genitzake.
Bihurtu boolearera
MOTA BIHURKETA
Egiazko eta gezurrezko funtzio boolear arruntez gain, JavaScript-ek beste balio guztiak egiazkoak edo faltsutzat hartzen ditu.
Bestela adierazi arte, JavaScript-en balio guztiak egiazkoak dira, 0, "", nulua, definitu gabea, NaN eta, jakina, faltsua izan ezik. Azken hauek faltsuak dira.
Erraz alda dezakegu bien artean ! eragilea erabiliz, eta horrek ere mota boolear bihurtzen du.
const isTrue = !0;
const isFalse = !1;
const alsoFalse = !!0;
console.log(true); // Result: true
console.log(typeof true); // Result: "boolean"Bihurtu kate
MOTA BIHURKETA
Zenbaki oso batetik kate batera bihurtze azkarra honela egin daiteke.
const val = 1 + "";
console.log(val); // Result: "1"
console.log(typeof val); // Result: "string"Bihurtu zenbaki oso batera
MOTA BIHURKETA
Alderantzizko eraldaketa honela egiten dugu.
let int = "15";
int = +int;
console.log(int); // Result: 15
console.log(typeof int); Result: "number"Metodo hau datu-mota boolearra zenbakizko balio arruntetara bihurtzeko ere erabil daiteke, behean erakusten den moduan:
console.log(+true); // Return: 1
console.log(+false); // Return: 0Egoerak egon daitezke, non + kateatze-operadore gisa interpretatuko den gehikuntza-operadore gisa baino. Hori ekiditeko, tildeak erabili behar dituzu: ~~. Eragile hau -n-1-ren baliokidea da. Adibidez, ~15 -16ren berdina da.
Bi tilde jarraian erabiltzeak eragiketa ezeztatzen du - (- - n - 1) - 1 = n + 1 - 1 = n delako. Beste era batera esanda, ~-16 15en berdina da.
const int = ~~"15"
console.log(int); // Result: 15
console.log(typeof int); Result: "number"<Quick Powers
ERAGIKETAK
ES7-n hasita, ** esponentziazio-operadorea erabil dezakezu potentziaren laburdura gisa. Hau Math.pow(2, 3) erabiltzea baino askoz azkarragoa da. Erraza dirudi, baina puntu hau tekniken zerrendan sartzen da, ez baita nonahi aipatzen.
console.log(2 ** 3); // Result: 8Ez da nahastu behar ^ sinboloarekin, esponentziaziorako erabili ohi dena. Baina JavaScript-en XOR operadorea da.
ES7 baino lehen, ** lasterbidea 2. oinarriko potentziarako soilik erabil zitekeen bit-en ezkerreko desplazamendu-eragilea erabiliz <<:
Math.pow(2, n);
2 << (n - 1);
2**n;Adibidez, 2 << 3 = 16 2 ** 4 = 16-ren baliokidea da.
Flota ezazu zenbaki oso batera
ERAGIKETAK / MOTA BIHURKETA
Float bat zenbaki oso batean bihurtu behar baduzu, Math.floor(), Math.ceil() edo Math.round() erabil ditzakezu. Baina bada modu azkarrago bat, horretarako |, hau da, OR operadorea erabiltzen dugu.
console.log(23.9 | 0); // Result: 23
console.log(-23.9 | 0); // Result: -23Portaera | Zenbaki positiboekin edo negatiboekin ari zaren ala ezaren araberakoa da, beraz, metodo hau egokia da egiten ari zarenarekin konfiantza baduzu.
n | 0-k bereizle hamartarren ondorengo guztia kentzen du, flotatzailea zenbaki oso batean moztuz.
Biribilketa efektu bera lor dezakezu ~~ erabiliz. Zenbaki oso batera derrigortu ondoren, balioak aldatu gabe jarraitzen du.
Azken zenbakiak kentzea
OR operadorea zenbaki batetik edozein zifra kentzeko erabil daiteke. Horrek esan nahi du ez ditugula hemen bezalako motak bihurtu behar:
let str = "1553";
Number(str.substring(0, str.length - 1));Horren ordez, besterik gabe idazten dugu:
console.log(1553 / 10 | 0) // Result: 155
console.log(1553 / 100 | 0) // Result: 15
console.log(1553 / 1000 | 0) // Result: 1Lotura automatikoa
KLASEAK
ES6 gezi-notazioak klase-metodoetan erabil daitezke, eta lotura inplizitua dago. Horrek esan nahi du honelako esamolde errepikakorrei agur esan diezaiekezula.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 moztea
MATRIZEAK
Array batetik balioak kendu behar badituzu, splice() baino metodo azkarragoak daude.
Adibidez, jatorrizko matrizearen tamaina ezagutzen baduzu, bere luzera propietatea baliogabetu dezakezu honela:
let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array.length = 4;
console.log(array); // Result: [0, 1, 2, 3]Baina bada beste metodo bat, eta azkarragoa. Zuretzako abiadura bada garrantzitsua, hona hemen gure aukerak:
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]Array baten azken balioa(k) inprimatzea
MATRIZEAK
Teknika honek slice() metodoa erabiltzea eskatzen du.
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 kodea formateatzen
JSON
Baliteke dagoeneko JSON.stringify erabili izana. Ba al zenekien zure JSON formateatzen laguntzen duela?
Stringify() metodoak aukerako bi parametro hartzen ditu: ordezko funtzio bat, bistaratzen den JSON iragazteko erabil daitekeena, eta zuriunearen balio bat.
console.log(JSON.stringify({ alpha: 'A', beta: 'B' }, null, 't'));
// Result:
// '{
// "alpha": A,
// "beta": B
// }'Hori dena, espero dut teknika hauek guztiak baliagarriak izan zirela. Zein trikimailu ezagutzen dituzu? Idatzi itzazu iruzkinetan.
Skillbox-ek gomendatzen du:
- Bi urteko ikastaro praktikoa .
- Lineako ikastaroa .
- Ikastaro praktikoa .
Iturria: www.habr.com