Markii aan bilaabay barashada JavaScript, waxa ugu horreeya ee aan sameeyo waxay ahayd liis tabo ah oo iga caawiyay inaan waqti badbaadiyo. Waxaan ka soo arkay barnaamijyo kale, goobo kala duwan iyo buug-gacmeedyo.
Maqaalkan, waxaan ku tusi doonaa 12 hab oo wanagsan oo aad ku wanaajiso oo aad ku dedejiso koodka JavaScript. Inta badan kiisaska waa caalami.
Waxaan xusuusineynaa: dhammaan akhristayaasha "Habr" - qiimo dhimis ah 10 rubles marka la qorayo koorso kasta oo Skillbox ah iyadoo la adeegsanayo koodhka xayeysiinta "Habr".
Skillbox waxay ku talinaysaa: Koorso wax ku ool ah .
Shaandhaynta qiyamka gaarka ah
ARRAYS
Nooca shayga Set waxa lagu soo bandhigay ES6, oo ay weheliso..., hawlwadeenka faafinta, waxaanu u isticmaali karnaa inaanu abuurno hannaan cusub oo ka kooban qiimayaal gaar ah oo keliya.
const array = [1, 1, 2, 3, 5, 5, 1]
const uniqueArray = [...new Set(array)];
console.log(uniqueArray); // Result: [1, 2, 3, 5]Xaalad caadi ah, kood badan ayaa loo baahan yahay si loo sameeyo isla qalliin la mid ah.
Farsamadani waxay u shaqaysaa habab ka kooban noocyo hore: aan la qeexin, waxba, boolean, xadhig iyo lambar. Haddii aad la shaqaynayso hannaan ka kooban walxo, hawlo, ama qalabyo dheeraad ah, waxaad u baahan doontaa hab ka duwan.
Dhererka khasnadaha shaxanka wareegyada
WAREEGTADA
Markaad barato loops, waxaad raacdaa nidaamka caadiga ah:
for (let i = 0; i < array.length; i++){
console.log(i);
}Si kastaba ha ahaatee, iyadoo la adeegsanayo syntax-ka, loop-ka si isdaba-joog ah ayaa u hubinaya dhererka shaxanka dib-u-eegis kasta.
Mararka qaarkood tani waxay noqon kartaa mid faa'iido leh, laakiin inta badan kiisaska way ka waxtar badan tahay in la kaydiyo dhererka diyaarinta, taas oo u baahan doonta hal marin. Waxaan tan ku samayn karnaa innagoo qeexnayna doorsoomaha dhererka halkaas oo aan ku qeexno doorsoomaha i, sida tan:
for (let i = 0, length = array.length; i < length; i++){
console.log(i);
}Mabda 'ahaan, ku dhawaad ββla mid ah kuwa kor ku xusan, laakiin kordhinta cabbirka loop-ka waxaan heli doonaa kayd waqti muhiim ah.
Qiimaynta wareegga gaaban (qiimaynta McCarthy)
Hawl-wadeeno shuruudaysan
Hawlwadeenka ternary waa hab degdeg ah oo hufan oo lagu qoro weedho shuruudaysan oo fudud (mararka qaarkoodna aan sahlanayn):
x> 100? "in ka badan 100": "in ka yar 100";
x> 100? (x>200? "in ka badan 200": "inta u dhaxaysa 100-200"): "in ka yar 100";
Laakin mararka qaarkood xitaa shaqaalaha ternary ayaa ka dhib badan inta loo baahan yahay. Waxaan isticmaali karnaa 'iyo' && iyo 'ama' beddelkeeda || Hawlwadeennada Boolean si ay u qiimeeyaan tibaaxaha qaarkood si ka sii kooban. Inta badan waxaa loo yaqaan "wareegga gaaban" ama "qiimaynta wareegga gaaban".
Sidee tani u shaqaysaa
Aynu nidhaahno waxaan rabnaa inaan soo celinno hal ama in ka badan shuruudood.
Isticmaalka && waxay soo celin doontaa qiimaha beenta ah ee ugu horreeya. Haddii hawl wadeen kasta uu ku qiimeeyo run, markaas tibaaxaha ugu dambeeya ee la qiimeeyay waa la soo celin doonaa.
let one = 1, two = 2, three = 3;
console.log(one && two && three); // Result: 3
console.log(0 && null); // Result: 0Isticmaalka || soo celin doona qiimaha ugu horreeya ee runta ah. Haddii operand kastaa u qiimeeyo been, markaas qiimihii ugu dambeeyay ee la qiimeeyay waa la soo celin doonaa.
let one = 1, two = 2, three = 3;
console.log(one || two || three); // Result: 1
console.log(0 || null); // Result: nulltusaale ahaan 1
Aynu nidhaahno waxaanu doonaynaa inaanu soo celino dhererka doorsoomayaasha, laakiin ma garanayno nooca uu yahay.
Xaaladdan oo kale, waxaad isticmaali kartaa haddii / kale si aad u hubiso in foo uu yahay nooca saxda ah, laakiin habkani wuxuu noqon karaa mid aad u dheer. Sidaa darteed, way fiicantahay in la qaato "wareegga gaaban".
return (foo || []).length;Haddii foorku uu leeyahay dherer ku habboon, markaa taasi waa la soo celin doonaa. Haddii kale waxaan heli doonaa 0.
tusaale ahaan 2
Dhibaato ma kala kulantay gelitaanka shay buul leh? Waxaa laga yaabaa inaadan garanayn inuu shay ama mid ka mid ah hantidiisa hoose jiro, taasina waxay keeni kartaa dhibaatooyin.
Tusaale ahaan, waxaan rabnay inaan galno hantida xogta ee this.state, laakiin xogta lama qeexin ilaa barnaamijkeenu soo celiyo codsiga keensashada.
Iyadoo ku xiran meesha aan isticmaalno, wacitaanka this.state.data ayaa laga yaabaa inay ka hortagto codsiga inuu bilaabo. Si loo xalliyo dhibaatada, waxaan tan ku duubi karnaa odhaah shuruudaysan:
if (this.state.data) {
return this.state.data;
} else {
return 'Fetching Data';
}Ikhtiyaarka ugu fiican ayaa noqon doona in la isticmaalo "ama" hawlwadeenka.
return (this.state.data || 'Fetching Data');Ma bedeli karno koodka sare si aan u isticmaalno &&. Hawlwadeenka xogta 'Fetching Data' && this.state.
Silsilad ikhtiyaari ah
Mid ayaa laga yaabaa inuu soo jeediyo adeegsiga silsiladda ikhtiyaarka ah marka la isku dayayo in lagu soo celiyo hanti qoto dheer oo qaab dhismeedka geed ah. Haddaba, calaamadda su'aasha? waxaa loo isticmaali karaa in lagu soo celiyo hanti kaliya haddii aysan ahayn mid buray.
Tusaale ahaan, waxaan dib u habeyn karnaa tusaalaha sare si aan u helno this.state.data?...(). Taasi waa, xogta waxaa la soo celinayaa kaliya haddii qiimihiisu aanu waxba ka jirin.
Ama, haddii ay muhiim tahay in gobolka la qeexay iyo in kale, waxaan soo celin karnaa this.state?.xogta.
U beddelo Boolean
NOOCA BEDELKA
Marka lagu daro shaqooyinka boolean ee caadiga ah run iyo been, JavaScript sidoo kale waxay ula dhaqmaan dhammaan qiyamka kale sida run ama been.
Ilaa si kale loo xuso, dhammaan qiyamka JavaScript waa run, marka laga reebo 0, "", null, undefined, NaN iyo, dabcan, been abuur ah. Kuwa dambe waa been abuur.
Waxaan si fudud u kala bedeli karnaa labada anagoo adeegsanayna !
const isTrue = !0;
const isFalse = !1;
const alsoFalse = !!0;
console.log(true); // Result: true
console.log(typeof true); // Result: "boolean"U beddel xadhig
NOOCA BEDELKA
Beddel degdeg ah oo laga bilaabo halbeeg loona beddelo xadhig waxa loo samayn karaa sidan soo socota.
const val = 1 + "";
console.log(val); // Result: "1"
console.log(typeof val); // Result: "string"U beddel tirada
NOOCA BEDELKA
Waxaan samaynaa isbeddelka soo socda sida tan.
let int = "15";
int = +int;
console.log(int); // Result: 15
console.log(typeof int); Result: "number"Habkan waxa kale oo loo isticmaali karaa in nooca xogta boolean loogu beddelo qiimayaasha tirada caadiga ah, sida hoos ku cad:
console.log(+true); // Return: 1
console.log(+false); // Return: 0Waxaa jiri kara xaalado marka + loo tarjumi doono hawl wadeen isku xidhid halkii ay ka ahaan lahayd hawlwadeen dheeri ah. Si taas looga fogaado, waa inaad isticmaashaa tilde: ~~. Hawlwadeenkani waxa uu u dhigmaa -n-1. Tusaale ahaan, ~15 waxay la mid tahay -16.
Isticmaalka laba tilmood oo isku xigta waxay burinaysaa hawlgalka sababtoo ah - (- - n - 1) - 1 = n + 1 - 1 = n. Si kale haddii loo dhigo, ~-16 waxay la mid tahay 15.
const int = ~~"15"
console.log(int); // Result: 15
console.log(typeof int); Result: "number"<Quick Powers
HAWLGALYADA
Laga bilaabo ES7, waxaad isticmaali kartaa hawlwadeenka jibbaarada ** sida gacanta gaaban ee awoodaha. Tani aad ayey uga dhakhso badan tahay isticmaalka Math.pow(2, 3). Waxay u muuqataa mid fudud, laakiin qodobkan waxaa lagu daraa liiska farsamooyinka, maadaama aan meel kasta lagu sheegin.
console.log(2 ** 3); // Result: 8Waa inaan lagu khaldin calaamadda ^, taas oo inta badan loo isticmaalo jibbaarada. Laakiin JavaScript kani waa hawlwadeenka XOR.
ES7 ka hor, ** gaaban waxa loo isticmaali karaa oo kaliya awoodaha saldhiga 2 iyadoo la isticmaalayo hawl wadeenka shaqada bidix ee bitwise <<:
Math.pow(2, n);
2 << (n - 1);
2**n;Tusaale ahaan, 2 << 3 = 16 waxay u dhigantaa 2 ** 4 = 16.
Ku dul sabbayn ilaa isku xidhka
HOWLADA/BEDDELKA NOOCA
Haddii aad u baahan tahay inaad sabbayso u beddesho isugeyn, waxaad isticmaali kartaa Math.floor(), Math.ceil() ama Xisaab.round(). Laakin waxaa jira dariiq dheereeya, tan waxaan u isticmaalnaa |, yacni, hawlwadeenka OR.
console.log(23.9 | 0); // Result: 23
console.log(-23.9 | 0); // Result: -23Dhaqanka | Waxay inta badan ku xiran tahay inaad la tacaaleyso tirooyinka togan ama kuwa taban, markaa habkani wuxuu ku habboon yahay kaliya haddii aad ku kalsoon tahay waxaad samaynayso.
n | 0 waxa uu meesha ka saarayaa wax kasta ka dib kala qaybiyaha jajab tobanlaha, isaga oo ku gooyay sabbaynta ilaa halbeeg.
Waxaad ku heli kartaa saameyn isku mid ah adigoo isticmaalaya ~~. Ka dib markii si qasab ah loogu beddelo halbeeg, qiimihiisu waxba iskama beddelin.
Ka saarida nambarada raadraaca
Hawlwadeenka OR waxa loo isticmaali karaa in laga saaro tiro kasta oo nambar ah nambar. Tani waxay ka dhigan tahay inaanan u baahnayn inaan beddelno noocyada sida halkan:
let str = "1553";
Number(str.substring(0, str.length - 1));Taa beddelkeeda waxaan si fudud u qornaa:
console.log(1553 / 10 | 0) // Result: 155
console.log(1553 / 100 | 0) // Result: 15
console.log(1553 / 1000 | 0) // Result: 1Xiriir toos ah
FASALKA
Calaamadaha fallaadha ES6 waxaa loo isticmaali karaa hababka fasalka, iyo xidhidhiyaha ayaa la maldahan yahay. Tani waxay la macno tahay in aad macsalaamayn karto tibaaxaha soo noqnoqda ee sidan oo kale ah.myMethod = this.myMethod.bind(tan)!
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>
</>
)
}
};Hannaan gooyn
ARRAYS
Haddii aad u baahan tahay inaad ka saarto qiyamka array, waxaa jira habab ka dhaqso badan marka loo eego splice ().
Tusaale ahaan, haddii aad taqaano cabbirka shaxanka asalka ah, waxaad u tirtiri kartaa hantideeda dhererka sida soo socota:
let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array.length = 4;
console.log(array); // Result: [0, 1, 2, 3]Laakiin waxaa jira hab kale, iyo mid ka dheereeya. Haddii xawaaraha uu yahay waxa adiga kugu khuseeya, halkan waa xulashooyinkayada:
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]Daabacaada qiimaha ugu dambeeya ee shaxda
ARRAYS
Farsamadani waxay u baahan tahay isticmaalka habka jeexjeexa.
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]Habaynta koodka JSON
JSON
Waxaa laga yaabaa inaad horey u isticmaashay JSON.stringify. Ma ogtahay inay kaa caawinayso qaabaynta JSON kaaga?
Habka stringify() wuxuu qaataa laba xuduudood oo ikhtiyaari ah: shaqada beddelka, kaas oo loo isticmaali karo sifaynta JSON soo bandhigtay, iyo qiimaha booska.
console.log(JSON.stringify({ alpha: 'A', beta: 'B' }, null, 't'));
// Result:
// '{
// "alpha": A,
// "beta": B
// }'Taasi waa dhan, waxaan rajeynayaa in dhammaan farsamooyinkan ay ahaayeen kuwo waxtar leh. Waa maxay xeeladaha aad taqaan? Ku qor faallooyinka
Skillbox waxay ku talinaysaa:
- Koorso wax ku ool ah oo laba sano ah .
- Koorso onlayn ah .
- Koorsada sanadka ee wax ku oolka ah .
Source: www.habr.com