Nuair a thosaigh mé ag foghlaim JavaScript, ba é an chéad rud a rinne mé ná liosta cleasanna a dhéanamh a chabhraigh liom am a shábháil. Chonaic mé iad ó ríomhchláraitheoirí eile, ar shuímh éagsúla agus i lámhleabhair.
San Airteagal seo, taispeánfaidh mé duit 12 bealaí iontacha chun do chód JavaScript a fheabhsú agus a luasú. I bhformhór na gcásanna tá siad uilíoch.
Meabhraímid: do léitheoirí uile "Habr" - lascaine de 10 rúbal nuair a chláraíonn siad in aon chúrsa Scilbox ag baint úsáide as an gcód bolscaireachta "Habr".
Molann Skillbox: Cúrsa praiticiúil .
Luachanna uathúla a scagadh
ARRAIGEAN
Tugadh isteach an cineál réad Set in ES6, in éineacht leis an..., oibreoir leata, is féidir linn é a úsáid chun sraith nua a chruthú nach bhfuil ann ach luachanna uathúla.
const array = [1, 1, 2, 3, 5, 5, 1]
const uniqueArray = [...new Set(array)];
console.log(uniqueArray); // Result: [1, 2, 3, 5]I gcás gnáth, tá i bhfad níos mó cód ag teastáil chun an oibríocht chéanna a dhéanamh.
Oibríonn an teicníocht seo le haghaidh eagair ina bhfuil cineálacha primitive: neamhshainithe, null, boolean, téad agus uimhir. Má tá tú ag obair le sraith ina bhfuil rudaí, feidhmeanna, nó eagair bhreise, beidh cur chuige difriúil uait.
Fad an eagair taisce i dtimthriallta
Rothair
Nuair a fhoghlaimíonn tú le haghaidh lúb, leanann tú an nós imeachta caighdeánach:
for (let i = 0; i < array.length; i++){
console.log(i);
}Leis an gcomhréir seo, áfach, seiceálann an for lúb fad an eagair gach atriallta arís agus arís eile.
Uaireanta is féidir é seo a bheith úsáideach, ach i bhformhór na gcásanna tá sé níos éifeachtaí fad an eagar a thaisceadh, rud a mbeidh rochtain amháin ag teastáil uaidh. Is féidir linn é seo a dhéanamh trí athróg faid a shainmhíniú nuair a shainímid an athróg i, mar seo:
for (let i = 0, length = array.length; i < length; i++){
console.log(i);
}I bprionsabal, beagnach mar an gcéanna thuas, ach tríd an méid lúb a mhéadú gheobhaidh muid coigilteas suntasach ama.
Rátáil gearrchiorcaid (rátáil McCarthy)
OIBRITHE COINNÍOLLACHA
Is bealach tapa agus éifeachtach é an t-oibreoir trínártha chun ráitis choinníollacha shimplí (agus uaireanta nach bhfuil chomh simplí sin) a scríobh:
x> 100? “níos mó ná 100”: “níos lú ná 100”;
x> 100? (x>200?" níos mó ná 200": "idir 100-200"): "níos lú ná 100";
Ach uaireanta bíonn an t-oibreoir trínártha níos casta ná mar is gá. Is féidir linn ‘agus’ && agus ‘nó’ a úsáid ina ionad || Oibreoirí Boole chun nathanna áirithe a mheas ar bhealach níos gonta fós. Is minic a dtugtar "ciorcad gearr" nó "rátáil gearrchiorcad" air.
Conas a oibríonn seo
Ligean le rá ba mhaith linn a thabhairt ar ais ach ceann amháin de dhá cheann nó níos mó coinníollacha.
Má úsáidtear && seolfar an chéad luach bréagach ar ais. Má dhéantar meastóireacht ar gach operand go fíor, ansin cuirfear ar ais an slonn deiridh a ndearnadh meastóireacht air.
let one = 1, two = 2, three = 3;
console.log(one && two && three); // Result: 3
console.log(0 && null); // Result: 0Ag baint úsáide as || tabharfaidh sé an chéad luach fíor ar ais. Más rud é go meastar go bhfuil gach operand bréagach, cuirfear an luach measta deiridh ar ais.
let one = 1, two = 2, three = 3;
console.log(one || two || three); // Result: 1
console.log(0 || null); // Result: nullSampla 1
Ligean le rá ba mhaith linn fad athróg a thabhairt ar ais, ach níl a fhios againn cén cineál.
Sa chás seo, is féidir leat a úsáid má tá / eile a sheiceáil go bhfuil foo an cineál ceart, ach d'fhéadfadh an modh seo a bheith ró-fhada. Mar sin, tá sé níos fearr a ghlacadh ar ár "ciorcad gearr".
return (foo || []).length;Má tá fad oiriúnach ag an bhfoo athróg, cuirfear é sin ar ais. Seachas sin gheobhaidh muid 0.
Sampla 2
An raibh fadhbanna agat rochtain a fháil ar réad neadaithe? B'fhéidir nach bhfuil a fhios agat an bhfuil rud ann nó ceann dá fho-airíonna, agus is féidir fadhbanna a bheith mar thoradh air seo.
Mar shampla, bhíomar ag iarraidh rochtain a fháil ar an maoin sonraí in this.state, ach ní shainmhínítear sonraí go dtí go gcuireann ár gclár iarratas beir ar ais.
Ag brath ar an áit a n-úsáidimid é, d'fhéadfadh sé go gcuirfí cosc ar an bhfeidhmchlár trí ghlaoch ar this.state.data. Chun an fhadhb a réiteach, d’fhéadfaimis é seo a chuimsiú i slonn coinníollach:
if (this.state.data) {
return this.state.data;
} else {
return 'Fetching Data';
}Rogha níos fearr ná an t-oibreoir "nó" a úsáid.
return (this.state.data || 'Fetching Data');Ní féidir linn an cód thuas a athrú chun && a úsáid. Seolfaidh an t-oibreoir ‘Fetching Data’ && this.state.data na sonraí seo.state.data ar ais beag beann ar cibé an bhfuil sé neamhshainithe nó nach bhfuil.
Slabhra roghnach
B’fhéidir go molfadh duine úsáid a bhaint as slabhraíocht roghnach agus tú ag iarraidh maoin a thabhairt ar ais go domhain i struchtúr crann. Mar sin, an comhartha ceiste? is féidir é a úsáid chun maoin a fháil ar ais ach amháin mura bhfuil sé ar neamhní.
Mar shampla, d’fhéadfaimis an sampla thuas a athmhacrú chun this.state.data?..(). Is é sin, ní sheoltar sonraí ar ais ach amháin mura bhfuil an luach ar neamhní.
Nó, má tá sé tábhachtach cibé an bhfuil an stát sainithe nó nach bhfuil, d'fhéadfaimis sonraí this.state?.
Tiontaigh go Boole
COMHTHÚ CINEÁL
Chomh maith leis na gnáthfheidhmeanna boolean fíor agus bréagach, déileálann JavaScript freisin le gach luach eile mar fhírinneach nó bréagach.
Go dtí go dtugtar a mhalairt faoi deara, tá gach luach i JavaScript fíor ach amháin 0," "", null, neamhshainithe, NaN agus, ar ndóigh, bréagach. Tá an dara ceann bréagach.
Is féidir linn aistriú go héasca idir an dá ag baint úsáide as an oibreoir !, a athraíonn an cineál go Boole freisin.
const isTrue = !0;
const isFalse = !1;
const alsoFalse = !!0;
console.log(true); // Result: true
console.log(typeof true); // Result: "boolean"Tiontaigh go teaghrán
COMHTHÚ CINEÁL
Is féidir tiontú tapa ó shlánuimhir go teaghrán a dhéanamh mar seo a leanas.
const val = 1 + "";
console.log(val); // Result: "1"
console.log(typeof val); // Result: "string"Tiontaigh go slánuimhir
COMHTHÚ CINEÁL
Déanaimid an claochlú droim ar ais mar seo.
let int = "15";
int = +int;
console.log(int); // Result: 15
console.log(typeof int); Result: "number"Is féidir an modh seo a úsáid freisin chun an cineál sonraí boolean a thiontú go luachanna uimhriúla rialta, mar a thaispeántar thíos:
console.log(+true); // Return: 1
console.log(+false); // Return: 0D’fhéadfadh cásanna a bheith ann ina ndéanfar + a léirmhíniú mar oibreoir comhtháite seachas mar oibreoir breisithe. Chun é seo a sheachaint, ba chóir duit tildes a úsáid: ~~. Tá an t-oibreoir seo comhionann le -n-1. Mar shampla, tá ~15 cothrom le -16.
Má úsáidtear dhá tilde as a chéile déantar an oibríocht a dhiúltú toisc - (- - n - 1) - 1 = n + 1 - 1 = n. I bhfocail eile, tá ~-16 cothrom le 15.
const int = ~~"15"
console.log(int); // Result: 15
console.log(typeof int); Result: "number"<Quick Powers
OIBRÍOCHTAÍ
Ag tosú le ES7, is féidir leat an t-oibreoir easpónantúcháin** a úsáid mar ghearrshaol le haghaidh cumhachtaí. Tá sé seo i bhfad níos tapúla ná úsáid a bhaint as Math.pow(2, 3). Dealraíonn sé simplí, ach tá an pointe seo san áireamh sa liosta teicnící, ós rud é nach bhfuil sé luaite i ngach áit.
console.log(2 ** 3); // Result: 8Níor cheart é a mheascadh leis an tsiombail ^, a úsáidtear go coitianta le haghaidh léiriú. Ach i JavaScript is é seo an t-oibreoir XOR.
Roimh ES7, níorbh fhéidir an t-aicearra ** a úsáid ach amháin le haghaidh cumhachtaí bonn 2 ag baint úsáide as an oibreoir seala clé bitwise <<:
Math.pow(2, n);
2 << (n - 1);
2**n;Mar shampla, tá 2 << 3 = 16 comhionann le 2 ** 4 = 16 .
Snámh go slánuimhir
OIBRÍOCHTAÍ / CONVERSION CINEÁL
Más gá duit snámhán a thiontú go slánuimhir, is féidir leat Math.floor(), Math.ceil() nó Math.round() a úsáid. Ach tá bealach níos tapúla ann, chun é seo a úsáid againn |, is é sin, an t-oibreoir NÓ.
console.log(23.9 | 0); // Result: 23
console.log(-23.9 | 0); // Result: -23Iompar | ag brath go mór ar cibé an bhfuil tú ag déileáil le huimhreacha dearfacha nó diúltacha, mar sin níl an modh seo oiriúnach ach amháin má tá tú muiníneach as an méid atá á dhéanamh agat.
n | 0 baintear gach rud tar éis an deighilteoir deachúil, teascadh an snámhán go slánuimhir.
Is féidir leat an éifeacht shlánaithe chéanna a fháil trí ~~ a úsáid. Tar éis tiontú éigeantach go slánuimhir, fanann an luach gan athrú.
Uimhreacha rian a bhaint
Is féidir an t-oibreoir OR a úsáid chun aon líon digití a bhaint as uimhir. Ciallaíonn sé seo nach gá dúinn cineálacha mar seo a thiontú:
let str = "1553";
Number(str.substring(0, str.length - 1));Ina áit sin scríobhaimid go simplí:
console.log(1553 / 10 | 0) // Result: 155
console.log(1553 / 100 | 0) // Result: 15
console.log(1553 / 1000 | 0) // Result: 1Nascáil uathoibríoch
RANGANNA
Is féidir nodairí saigheada ES6 a úsáid i modhanna ranga, agus tá ceangal intuigthe. Ciallaíonn sé seo gur féidir leat slán a fhágáil le habairtí athchleachtach mar 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>
</>
)
}
};Bearradh eagar
ARRAIGEAN
Más gá duit luachanna a bhaint as eagar, tá modhanna níos tapúla ann ná splice ().
Mar shampla, má tá méid an eagar bunaidh ar eolas agat, is féidir leat a chuid maoine faid a shárú mar seo a leanas:
let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array.length = 4;
console.log(array); // Result: [0, 1, 2, 3]Ach tá modh eile, agus ceann níos tapúla. Más é an luas atá tábhachtach duit, seo ár roghanna:
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]An luach(na) luach deiridh d'eagar a phriontáil
ARRAIGEAN
Éilíonn an teicníc seo an modh slice() a úsáid.
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]Cód JSON á fhormáidiú
JSON
Seans gur bhain tú úsáid as JSON.stringify cheana féin. An raibh a fhios agat go gcabhraíonn sé le do JSON a fhormáidiú?
Glacann an modh stringify() dhá pharaiméadar roghnacha: feidhm athsholáthair, is féidir a úsáid chun an JSON a thaispeántar a scagadh, agus luach spáis.
console.log(JSON.stringify({ alpha: 'A', beta: 'B' }, null, 't'));
// Result:
// '{
// "alpha": A,
// "beta": B
// }'Sin é go léir, tá súil agam go raibh na teicnící seo go léir úsáideach. Cad iad na cleasanna atá ar eolas agat? Scríobh iad sna tuairimí.
Molann Skillbox:
- Cúrsa praiticiúil dhá bhliain .
- Cúrsa ar líne .
- Cúrsa bliana praiticiúla .
Foinse: will.com