Dema ku min dest bi fêrbûna JavaScriptê kir, yekem tiştê ku min kir ev bû ku navnîşek hîleyan çêkim ku ji min re bû alîkar ku wext xilas bikim. Min ew ji bernamenûsên din, li ser malperên cihê û di manualan de dîtin.
Di vê gotarê de, ez ê 12 awayên hêja nîşanî we bidim ku hûn koda JavaScript-a xwe çêtir û bilez bikin. Di pir rewşan de ew gerdûnî ne.
Em bînin bîra xwe: ji bo hemî xwendevanên "Habr" - dema ku hûn beşdarî qursek Skillbox-ê bi karanîna koda danasînê ya "Habr" têne qeyd kirin 10 rubleyan dakêşin.
Skillbox pêşniyar dike: Kursa pratîk .
Parzûnkirina nirxên yekta
ARRAYS
Tîpa Tişta Set di ES6-ê de hate nasandin, digel ..., operatorê belavkirî, em dikarin wê bikar bînin da ku rêzek nû ku tenê nirxên bêhempa dihewîne biafirînin.
const array = [1, 1, 2, 3, 5, 5, 1]
const uniqueArray = [...new Set(array)];
console.log(uniqueArray); // Result: [1, 2, 3, 5]Di rewşek normal de, ji bo pêkanîna heman operasyonê pir bêtir kod hewce ye.
Ev teknîk ji bo rêzikên ku celebên primitive hene: nedîyar, null, boolean, string û hejmar dixebite. Ger hûn bi arrayek ku hêman, fonksiyon an rêzikên pêvek vedihewîne re dixebitin, hûn ê hewceyê nêzîkbûnek cûda bin.
Dirêjahiya array cache li cycles
CYCLES
Dema ku hûn ji bo loopan fêr dibin, hûn prosedûra standard bişopînin:
for (let i = 0; i < array.length; i++){
console.log(i);
}Lêbelê, bi vê hevoksaziyê re, lûleya for dubare dirêjahiya rêzê her dubarekirinê kontrol dike.
Carinan ev dikare bikêr be, lê di pir rewşan de ew bikêrtir e ku meriv dirêjahiya rêzê cache bike, ku hewce dike ku meriv bigihîje wê. Em dikarin vê yekê bi danasîna guhêrbarek dirêj li cihê ku em guhêrbar i-yê diyar dikin, bi vî rengî bikin:
for (let i = 0, length = array.length; i < length; i++){
console.log(i);
}Di prensîbê de, hema hema wekî jorîn, lê bi zêdebûna mezinahiya lûkê em ê teserûfa demê girîng bistînin.
Rêjeya pêlava kurt (nirxandina McCarthy)
OPERATORÊN ŞERT
Operatorê sêalî rêyek bilez û bikêrhatî ye ji bo nivîsandina daxuyaniyên şertî yên hêsan (û carinan ne ewqas hêsan):
x> 100? "zêdetir ji 100": "kêmtir ji 100";
x> 100? (x>200? "zêdetir ji 200": "navbera 100-200"): "kêmtir ji 100";
Lê carinan tewra operatorê sêalî jî ji hewcedariyê tevlihevtir e. Em dikarin li şûna 'û' && û 'an' bi kar bînin || Operatorên Boolean ji bo ku hin îfadeyan bi rengek hê bêtir kurt binirxînin. Pir caran jê re "şirketa kurt" an "nirxa çerxa kurt" tê gotin.
Çawa ev karê
Em bibêjin ku em dixwazin tenê yek ji du an çend şertan vegerînin.
Bi karanîna && dê nirxa derewîn a yekem vegere. Ger her operandek rast binirxîne, wê hingê îfadeya paşîn a ku hatî nirxandin dê were vegerandin.
let one = 1, two = 2, three = 3;
console.log(one && two && three); // Result: 3
console.log(0 && null); // Result: 0Bikaranîna || dê yekem nirxa rastîn vegerîne. Ger her operand wekî xelet binirxîne, wê hingê nirxa nirxandina dawî dê were vegerandin.
let one = 1, two = 2, three = 3;
console.log(one || two || three); // Result: 1
console.log(0 || null); // Result: nullnimûne 1
Em bêjin em dixwazin dirêjiya guhêrbarekê vegerînin, lê em celebê wê nizanin.
Di vê rewşê de, hûn dikarin heke / din bikar bînin ku kontrol bikin ku foo celebê rast e, lê dibe ku ev rêbaz pir dirêj be. Ji ber vê yekê, çêtir e ku meriv "kurte-cirêma" xwe bigire.
return (foo || []).length;Ger guhêrbar dirêjiyek guncaw hebe, wê hingê ew ê were vegerandin. Wekî din em ê 0 bistînin.
nimûne 2
Pirsgirêkên we di gihîştina nestek hêlîn de hebûn? Dibe ku hûn nizanin ka tiştek an yek ji taybetmendiyên wê hene, û ev dikare bibe sedema pirsgirêkan.
Mînakî, me xwest ku em xwe bigihînin taybetmendiya daneyê di this.state de, lê heya ku bernameya me daxwaznameyek hilanîn venegerîne, dane nayê diyarkirin.
Li gorî cihê ku em wê bikar tînin, bi navê this.state.data dibe ku pêşî li destpêkirina sepanê bigire. Ji bo çareser kirina pirsgirêkê, em dikarin vê yekê bi bêjeyek şertî bipêçin:
if (this.state.data) {
return this.state.data;
} else {
return 'Fetching Data';
}Vebijarkek çêtir dê karanîna operatorê "an" be.
return (this.state.data || 'Fetching Data');Em nikarin koda jorîn biguherînin ku && bikar bînin. Operatorê 'Fetching Data' && this.state.data dê ev.state.data vegerîne bêyî ku ew ne diyarkirî be an na.
Zincîra Bijarî
Mirov dikare pêşniyar bike ku dema ku meriv hewil dide ku milkek kûr li avahiyek darê vegerîne, zincîra vebijarkî bikar bînin. Ji ber vê yekê, sembola nîşana pirsê? tenê heke ew ne betal be dikare ji bo wergirtina milkek were bikar anîn.
Mînakî, em dikarin mînaka li jor nûve bikin da ku ev.state.data?..(). Ango, heke nirx ne betal be, dane têne vegerandin.
Или, если важно, определено ли state или нет, мы могли бы вернуть this.state?.data.
Veguherînin Boolean
GUHERÎNA TÎPÊ
Ji bilî fonksiyonên boolean ên normal rast û xelet, JavaScript di heman demê de hemî nirxên din jî wekî rast an derewîn derman dike.
Heya ku wekî din neyê destnîşan kirin, hemî nirxên di JavaScript de rast in, ji bilî 0, "", null, nediyar, NaN û, bê guman, derewîn. Yên dawî derew in.
Em dikarin bi hêsanî di navbera her duyan de bi karanîna !-yê veguhezînin, ku ev jî tîpê vediguherîne boolean.
const isTrue = !0;
const isFalse = !1;
const alsoFalse = !!0;
console.log(true); // Result: true
console.log(typeof true); // Result: "boolean"Veguherîne string
GUHERÎNA TÎPÊ
Veguheztinek bilez ji jimareyek tevhejmarek ji rêzek dikare wekî jêrîn were kirin.
const val = 1 + "";
console.log(val); // Result: "1"
console.log(typeof val); // Result: "string"Veguheztin bo hejmar
GUHERÎNA TÎPÊ
Em veguherîna berevajî bi vî rengî pêk tînin.
let int = "15";
int = +int;
console.log(int); // Result: 15
console.log(typeof int); Result: "number"Ev rêbaz her weha dikare were bikar anîn da ku celebê daneya boolean veguherîne nirxên hejmarî yên birêkûpêk, wekî ku li jêr tê xuyang kirin:
console.log(+true); // Return: 1
console.log(+false); // Return: 0Dibe ku rewş hebin ku + dê ji bilî operatorek pêvekirinê wekî operatorek hevgirtinê were şîrove kirin. Ji bo ku hûn ji vê yekê dûr nekevin, divê hûn tildes bikar bînin: ~~. Ev operator bi -n-1 re hevwate ye. Ji bo nimûne, ~ 15 wekhev e -16.
Bikaranîna du tildeyan li pey hev operasyonê red dike ji ber - (- - n - 1) - 1 = n + 1 - 1 = n. Bi gotineke din, ~-16 bi 15 re ye.
const int = ~~"15"
console.log(int); // Result: 15
console.log(typeof int); Result: "number"<Quick Powers
OPERATIONS
Di ES7-ê de dest pê dike, hûn dikarin operatorê pêşkeftinê ** wekî kurteya hêzan bikar bînin. Ev ji karanîna Math.pow (2, 3) pir zûtir e. Ew hêsan xuya dike, lê ev xal di navnîşa teknîkan de tête navnîş kirin, ji ber ku ew li her derê nayê behs kirin.
console.log(2 ** 3); // Result: 8Pêdivî ye ku ew bi sembola ^ re, ku bi gelemperî ji bo pêşdebirinê tê bikar anîn, neyê tevlihev kirin. Lê di JavaScriptê de ev operator XOR e.
Berî ES7, kurtenivîsa ** tenê ji bo hêzên bingehê 2-ê bi karanîna operatorê veguheztina çepê ya bitwise dikare were bikar anîn <<:
Math.pow(2, n);
2 << (n - 1);
2**n;Mînakî, 2 << 3 = 16 hevwateya 2 ** 4 = 16 e.
Bihejînin heta hejmarê
OPERASYON / GUHERÎNA TÎPÊ
Heke hûn hewce ne ku floatek veguhezînin jimareyek tevahî, hûn dikarin Math.floor(), Math.ceil() an Math.round() bikar bînin. Lê rêyek zûtir heye, ji bo vê yekê em |, ango operatorê OR bikar tînin.
console.log(23.9 | 0); // Result: 23
console.log(-23.9 | 0); // Result: -23Behavior | bi giranî girêdayî ye ka hûn bi hejmarên erênî an neyînî re mijûl dibin, ji ber vê yekê ev rêbaz tenê guncan e heke hûn ji tiştê ku hûn dikin pê ewle bin.
n | 0 her tiştî li dû veqetandina dehiyê radike, float bi jimareyek bitewîne.
Hûn dikarin heman bandora dorpêçkirinê bi karanîna ~~ bistînin. Piştî guheztina bi zorê ji bo hejmareke tevahî, nirx nayê guhertin.
Rakirina hejmarên şopandinê
Operatorê OR dikare were bikar anîn da ku hejmarek jimarek ji hejmarekê jê bibe. Ev tê vê wateyê ku em ne hewce ne ku celebên mîna vir veguherînin:
let str = "1553";
Number(str.substring(0, str.length - 1));Di şûna wê de, em tenê dinivîsin:
console.log(1553 / 10 | 0) // Result: 155
console.log(1553 / 100 | 0) // Result: 15
console.log(1553 / 1000 | 0) // Result: 1Girêdana otomatîk
CLASES
Nîşaneyên tîrêjên ES6 dikarin di rêbazên polê de werin bikar anîn, û girêdan tête destnîşan kirin. Ev tê wê wateyê ku hûn dikarin xatirê xwe ji bêjeyên dubarekirî yên mîna vê bibêjin.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 trimming
ARRAYS
Heke hûn hewce ne ku nirxan ji rêzê derxînin, ji splice() rêbazên zûtir hene.
Mînakî, heke hûn mezinahiya rêzika orîjînal zanibin, hûn dikarin taybetmendiya dirêjahiya wê wekî jêrîn derbas bikin:
let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array.length = 4;
console.log(array); // Result: [0, 1, 2, 3]Lê rêbazek din heye, û zûtirîn. Ger bilez ji we re girîng e, li vir vebijarkên me hene:
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]Çapkirina nirx(ên) paşîn a arrayekê
ARRAYS
Ev teknîka bikaranîna rêbaza slice() hewce dike.
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]Formatkirina koda JSON
JSON
Dibe ku we berê JSON.stringify bikar anîbe. We dizanibû ku ew alîkariya formata JSON-a we dike?
Rêbaza stringify() du pîvanên vebijarkî digire: fonksiyonek cîhgir, ku dikare ji bo fîlterkirina JSON-ya hatî xuyang kirin were bikar anîn, û nirxek cîh.
console.log(JSON.stringify({ alpha: 'A', beta: 'B' }, null, 't'));
// Result:
// '{
// "alpha": A,
// "beta": B
// }'Ew hemî, ez hêvî dikim ku hemî van teknîkî kêrhatî bûn. Hûn bi çi hîleyan dizanin? Wan di şîroveyan de binivîsin.
Skillbox pêşniyar dike:
- Kursa pratîkî ya du-salî .
- Kursa serhêl .
- Kursa sala pratîk .
Source: www.habr.com