Pan ddechreuais i ddysgu JavaScript, y peth cyntaf wnes i oedd gwneud rhestr o driciau a helpodd fi i arbed amser. Sylwais arnynt gan raglenwyr eraill, ar wahanol safleoedd ac mewn llawlyfrau.
Yn yr erthygl hon, byddaf yn dangos i chi 12 ffordd wych o wella a chyflymu eich cod JavaScript. Yn y rhan fwyaf o achosion maent yn gyffredinol.
Rydym yn atgoffa: i holl ddarllenwyr "Habr" - gostyngiad o 10 rubles wrth gofrestru ar unrhyw gwrs Skillbox gan ddefnyddio'r cod hyrwyddo "Habr".
Mae Skillsbox yn argymell: Cwrs ymarferol .
Hidlo gwerthoedd unigryw
ARrays
Cyflwynwyd y math o wrthrych Set yn ES6, ynghyd â'r gweithredwr lledaenu..., gallwn ei ddefnyddio i greu amrywiaeth newydd sy'n cynnwys gwerthoedd unigryw yn unig.
const array = [1, 1, 2, 3, 5, 5, 1]
const uniqueArray = [...new Set(array)];
console.log(uniqueArray); // Result: [1, 2, 3, 5]Mewn sefyllfa arferol, mae angen llawer mwy o god i gyflawni'r un llawdriniaeth.
Mae'r dechneg hon yn gweithio ar gyfer araeau sy'n cynnwys mathau cyntefig: heb ei ddiffinio, nwl, boolean, llinyn a rhif. Os ydych chi'n gweithio gydag arae sy'n cynnwys gwrthrychau, swyddogaethau, neu araeau ychwanegol, bydd angen dull gwahanol arnoch chi.
Hyd yr arae storfa mewn cylchoedd
CYLCHOEDD
Pan fyddwch chi'n dysgu am ddolenni, rydych chi'n dilyn y weithdrefn safonol:
for (let i = 0; i < array.length; i++){
console.log(i);
}Fodd bynnag, gyda'r gystrawen hon, mae'r ddolen for yn gwirio hyd yr arae bob iteriad dro ar ôl tro.
Weithiau gall hyn fod yn ddefnyddiol, ond yn y rhan fwyaf o achosion mae'n fwy effeithlon storio hyd yr arae, a fydd yn gofyn am un mynediad iddo. Gallwn wneud hyn trwy ddiffinio newidyn hyd lle rydym yn diffinio'r newidyn i, fel hyn:
for (let i = 0, length = array.length; i < length; i++){
console.log(i);
}Mewn egwyddor, bron yr un fath â'r uchod, ond trwy gynyddu maint y ddolen byddwn yn cael arbedion amser sylweddol.
Sgôr cylched byr (graddfa McCarthy)
GWEITHREDWYR AMODOL
Mae'r gweithredwr teiran yn ffordd gyflym ac effeithlon o ysgrifennu datganiadau amodol syml (ac weithiau ddim mor syml):
x> 100? “mwy na 100”: “llai na 100”;
x> 100? (x>200?": "rhwng 200-100": "llai na 200";
Ond weithiau mae hyd yn oed y gweithredwr teiran yn fwy cymhleth na'r hyn sy'n ofynnol. Gallwn ddefnyddio 'a' && a 'neu' yn lle || Gweithredwyr Boole i werthuso rhai ymadroddion mewn ffordd hyd yn oed yn fwy cryno. Fe'i gelwir yn aml yn "gylched byr" neu'n "raddfa cylched byr".
Sut mae hwn
Gadewch i ni ddweud ein bod am ddychwelyd dim ond un o ddau neu fwy o amodau.
Bydd defnyddio && yn dychwelyd y gwerth ffug cyntaf. Os yw pob operand yn gwerthuso i fod yn wir, yna bydd y mynegiad olaf a werthuswyd yn cael ei ddychwelyd.
let one = 1, two = 2, three = 3;
console.log(one && two && three); // Result: 3
console.log(0 && null); // Result: 0Gan ddefnyddio || yn dychwelyd y gwir werth cyntaf. Os yw pob operand yn gwerthuso i ffug, yna bydd y gwerth gwerthuso diwethaf yn cael ei ddychwelyd.
let one = 1, two = 2, three = 3;
console.log(one || two || three); // Result: 1
console.log(0 || null); // Result: nullEnghraifft 1
Gadewch i ni ddweud ein bod am ddychwelyd hyd newidyn, ond nid ydym yn gwybod ei fath.
Yn yr achos hwn, gallwch ddefnyddio os/arall i wirio mai foo yw'r math cywir, ond gall y dull hwn fod yn rhy hir. Felly, mae'n well cymryd ein “cylched byr”.
return (foo || []).length;Os oes gan y foo newidyn hyd addas, yna bydd hwnnw'n cael ei ddychwelyd. Fel arall byddwn yn cael 0.
Enghraifft 2
Ydych chi wedi cael trafferth cael mynediad at wrthrych nythu? Efallai nad ydych yn gwybod a yw gwrthrych neu un o'i is-eiddo yn bodoli, a gall hyn arwain at broblemau.
Er enghraifft, roeddem am gael mynediad i'r eiddo data yn this.state, ond nid yw data wedi'i ddiffinio nes bod ein rhaglen yn dychwelyd cais nôl.
Yn dibynnu ar ble rydym yn ei ddefnyddio, gall ffonio this.state.data atal y rhaglen rhag cychwyn. I ddatrys y broblem, gallem lapio hyn mewn mynegiant amodol:
if (this.state.data) {
return this.state.data;
} else {
return 'Fetching Data';
}Opsiwn gwell fyddai defnyddio'r gweithredwr "neu".
return (this.state.data || 'Fetching Data');Ni allwn newid y cod uchod i ddefnyddio &&. Bydd y gweithredwr 'Cael Data' && this.state.data yn dychwelyd y data.state.data hwn ni waeth a yw'n anniffiniedig ai peidio.
Cadwyn ddewisol
Efallai y bydd rhywun yn awgrymu defnyddio cadwyno dewisol wrth geisio dychwelyd eiddo yn ddwfn i strwythur coeden. Felly, y symbol marc cwestiwn? dim ond os nad yw'n null y gellir ei ddefnyddio i adalw eiddo.
Er enghraifft, gallem ailffactorio'r enghraifft uchod i gael y.data.state.?..(). Hynny yw, dim ond os nad yw'r gwerth yn null y dychwelir data.
Neu, os yw'n bwysig a yw cyflwr wedi'i ddiffinio ai peidio, gallem ddychwelyd data hwn.state?..
Trosi i Boolean
TRAWSNEWID MATH
Yn ogystal â'r swyddogaethau boolean arferol yn wir ac yn anghywir, mae JavaScript hefyd yn trin pob gwerth arall fel gwirionedd neu ffug.
Hyd nes y nodir yn wahanol, mae'r holl werthoedd yn JavaScript yn wirionedd, ac eithrio 0, "", null, heb ei ddiffinio, NaN ac, wrth gwrs, yn ffug. Mae'r olaf yn ffug.
Gallwn newid yn hawdd rhwng y ddau gan ddefnyddio'r gweithredwr !, sydd hefyd yn trosi'r math i boolean.
const isTrue = !0;
const isFalse = !1;
const alsoFalse = !!0;
console.log(true); // Result: true
console.log(typeof true); // Result: "boolean"Trosi i llinyn
TRAWSNEWID MATH
Gellir gwneud trawsnewidiad cyflym o gyfanrif i linyn fel a ganlyn.
const val = 1 + "";
console.log(val); // Result: "1"
console.log(typeof val); // Result: "string"Trosi i gyfanrif
TRAWSNEWID MATH
Rydyn ni'n perfformio'r trawsnewidiad cefn fel hyn.
let int = "15";
int = +int;
console.log(int); // Result: 15
console.log(typeof int); Result: "number"Gellir defnyddio'r dull hwn hefyd i drosi'r math o ddata boolean i werthoedd rhifol rheolaidd, fel y dangosir isod:
console.log(+true); // Return: 1
console.log(+false); // Return: 0Efallai y bydd sefyllfaoedd lle bydd + yn cael ei ddehongli fel gweithredwr cydgadwynu yn hytrach na gweithredwr ychwanegu. Er mwyn osgoi hyn, dylech ddefnyddio tildes: ~~. Mae'r gweithredwr hwn yn cyfateb i -n-1. Er enghraifft, mae ~15 yn hafal i -16.
Mae defnyddio dau tild yn olynol yn negyddu'r gweithrediad oherwydd - ( - - n - 1) - 1 = n + 1 - 1 = n. Mewn geiriau eraill, mae ~-16 yn hafal i 15.
const int = ~~"15"
console.log(int); // Result: 15
console.log(typeof int); Result: "number"<Quick Powers
GWEITHREDIADAU
Gan ddechrau yn ES7, gallwch ddefnyddio'r gweithredwr esbonyddol ** fel llaw fer ar gyfer pwerau. Mae hyn yn llawer cyflymach na defnyddio Math.pow(2, 3). Mae'n ymddangos yn syml, ond mae'r pwynt hwn wedi'i gynnwys yn y rhestr o dechnegau, gan nad yw'n cael ei grybwyll ym mhobman.
console.log(2 ** 3); // Result: 8Ni ddylid ei gymysgu â'r symbol ^, a ddefnyddir yn gyffredin ar gyfer esboniad. Ond yn JavaScript dyma'r gweithredwr XOR.
Cyn ES7, dim ond ar gyfer pwerau sylfaen 2 y gellid defnyddio'r llwybr byr ** gan ddefnyddio gweithredwr sifft chwith bitwise <<:
Math.pow(2, n);
2 << (n - 1);
2**n;Er enghraifft, mae 2 << 3 = 16 yn cyfateb i 2 ** 4 = 16.
Arnofio i gyfanrif
GWEITHREDIADAU / TRAWSNEWID MATH
Os oes angen trosi fflôt yn gyfanrif, gallwch ddefnyddio Math.floor(), Math.ceil() neu Math.round(). Ond mae ffordd gyflymach, ar gyfer hyn rydym yn defnyddio |, hynny yw, y gweithredwr NEU.
console.log(23.9 | 0); // Result: 23
console.log(-23.9 | 0); // Result: -23Ymddygiad | yn dibynnu i raddau helaeth ar a ydych chi'n delio â rhifau positif neu negyddol, felly mae'r dull hwn yn addas dim ond os ydych chi'n hyderus yn yr hyn rydych chi'n ei wneud.
n | Mae 0 yn tynnu popeth ar ôl y gwahanydd degol, gan flaendorri'r fflôt i gyfanrif.
Gallwch gael yr un effaith dalgrynnu gan ddefnyddio ~~. Ar ôl trosi gorfodol i gyfanrif, nid yw'r gwerth wedi newid.
Cael gwared ar rifau llusgo
Gellir defnyddio'r gweithredwr OR i dynnu unrhyw nifer o ddigidau o rif. Mae hyn yn golygu nad oes angen i ni drosi mathau fel yma:
let str = "1553";
Number(str.substring(0, str.length - 1));Yn lle hynny rydyn ni'n ysgrifennu:
console.log(1553 / 10 | 0) // Result: 155
console.log(1553 / 100 | 0) // Result: 15
console.log(1553 / 1000 | 0) // Result: 1Cysylltu'n awtomatig
DOSBARTHIADAU
Gellir defnyddio nodiannau saeth ES6 mewn dulliau dosbarth, ac awgrymir rhwymiad. Mae hyn yn golygu y gallwch chi ffarwelio ag ymadroddion ailadroddus fel 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>
</>
)
}
};Arae trimio
ARrays
Os oes angen i chi dynnu gwerthoedd o arae, mae yna ddulliau cyflymach na sbleis ().
Er enghraifft, os ydych chi'n gwybod maint yr arae wreiddiol, gallwch chi ddiystyru ei eiddo hyd fel a ganlyn:
let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array.length = 4;
console.log(array); // Result: [0, 1, 2, 3]Ond mae yna ddull arall, ac un cyflymach. Os mai cyflymder yw'r hyn sy'n bwysig i chi, dyma ein dewisiadau:
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]Argraffu gwerth(au) olaf arae
ARrays
Mae'r dechneg hon yn gofyn am ddefnyddio'r dull 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]Fformatio cod JSON
JSON
Efallai eich bod eisoes wedi defnyddio JSON.stringify. Oeddech chi'n gwybod ei fod yn helpu i fformatio'ch JSON?
Mae'r dull stringify () yn cymryd dau baramedr dewisol: swyddogaeth amnewid, y gellir ei defnyddio i hidlo'r JSON a ddangosir, a gwerth gofod.
console.log(JSON.stringify({ alpha: 'A', beta: 'B' }, null, 't'));
// Result:
// '{
// "alpha": A,
// "beta": B
// }'Dyna i gyd, rwy'n gobeithio bod yr holl dechnegau hyn yn ddefnyddiol. Pa driciau ydych chi'n gwybod? Ysgrifennwch nhw yn y sylwadau.
Mae Skillsbox yn argymell:
- Cwrs ymarferol dwy flynedd .
- Cwrs ar-lein .
- Cwrs blwyddyn ymarferol .
Ffynhonnell: hab.com