ProHoster > Blog > nouvèl sou entènèt > 12 ke trik nouvèl JavaScript ke pifò leson patikilye manke

12 ke trik nouvèl JavaScript ke pifò leson patikilye manke

12 ke trik nouvèl JavaScript ke pifò leson patikilye manke

Lè mwen te kòmanse aprann JavaScript, premye bagay mwen te fè se te fè yon lis ke trik nouvèl ki te ede m 'ekonomize tan. Mwen takte yo nan lòt pwogramasyon, sou sit diferan ak nan manyèl yo.

Nan atik sa a, mwen pral montre w 12 bon fason pou amelyore ak akselere kòd JavaScript ou. Nan pifò ka yo inivèsèl.

Nou raple: pou tout lektè "Habr" - yon rabè nan 10 rubles lè w ap enskri nan nenpòt kou Skillbox lè l sèvi avèk kòd pwomosyon "Habr".

Skillbox rekòmande: Kou pratik "Mobile Developer PRO".

Filtrage valè inik

ARRAYS

Kalite objè Set la te prezante nan ES6, ansanm ak..., operatè gaye, nou ka sèvi ak li pou kreye yon nouvo etalaj ki gen sèlman valè inik.

const array = [1, 1, 2, 3, 5, 5, 1]
const uniqueArray = [...new Set(array)];
 
console.log(uniqueArray); // Result: [1, 2, 3, 5]

Nan yon sitiyasyon nòmal, gen plis kòd ki nesesè pou fè menm operasyon an.

Teknik sa a travay pou etalaj ki gen kalite primitif: endefini, nil, boolean, fisèl ak nimewo. Si w ap travay ak yon etalaj ki gen objè, fonksyon, oswa etalaj adisyonèl, w ap bezwen yon apwòch diferan.

Longè etalaj kachèt an sik

SIK

Lè ou aprann bouk, ou swiv pwosedi estanda a:

for (let i = 0; i < array.length; i++){
  console.log(i);
}

Sepandan, ak sentaks sa a, bouk for la tcheke longè etalaj la pou chak iterasyon.

Pafwa sa a ka itil, men nan pifò ka yo li pi efikas nan kachèt longè etalaj la, ki pral mande pou yon sèl aksè a li. Nou ka fè sa lè nou defini yon varyab longè kote nou defini varyab i a, tankou sa a:

for (let i = 0, length = array.length; i < length; i++){
  console.log(i);
}

Nan prensip, prèske menm jan ak pi wo a, men lè nou ogmante gwosè a bouk nou pral jwenn ekonomi tan enpòtan.

Evalyasyon kout sikwi (Evalyasyon McCarthy)

OPERATÈ KONDISYONÈL

Operatè ternary a se yon fason rapid ak efikas pou ekri deklarasyon kondisyonèl senp (e pafwa pa tèlman senp):

x> 100? "plis pase 100": "mwens pase 100";
x> 100? (x>200? "plis pase 200": "ant 100-200"): "mwens pase 100";

Men pafwa menm operatè ternary a pi konplike pase sa nesesè. Nou ka itilize 'ak' && ak 'oswa' olye de || Operatè Boolean yo evalye sèten ekspresyon nan yon fason menm pi kout. Li souvan rele "koutèt kous" oswa "kout sikwi Rating".

Kijan travay sa a

Ann di nou vle retounen sèlman youn nan de oswa plis kondisyon.

Sèvi ak && ap retounen premye fo valè a. Si chak operand evalye a vre, Lè sa a, dènye ekspresyon evalye a ap retounen.

let one = 1, two = 2, three = 3;
console.log(one && two && three); // Result: 3
 
console.log(0 && null); // Result: 0

Sèvi ak || pral retounen premye valè vre. Si chak operand evalye a fo, Lè sa a, dènye valè evalye a pral retounen.

let one = 1, two = 2, three = 3;
console.log(one || two || three); // Result: 1
 
console.log(0 || null); // Result: null

1 Egzanp

Ann di nou vle retounen longè yon varyab, men nou pa konnen kalite li.

Nan ka sa a, ou ka itilize si/lòt pou tcheke ke foo se bon kalite, men metòd sa a ka twò lontan. Se poutèt sa, li pi bon yo pran "kout sikwi" nou an.

return (foo || []).length;

Si foo a varyab gen yon longè apwopriye, Lè sa a, li pral retounen. Sinon nou pral jwenn 0.

2 Egzanp

Èske w te gen pwoblèm pou jwenn aksè nan yon objè anbrike? Ou ka pa konnen si yon objè oswa youn nan sous-pwopriyete li yo egziste, e sa ka mennen nan pwoblèm.

Pou egzanp, nou te vle jwenn aksè nan pwopriyete a done nan this.state, men done yo pa defini jiskaske pwogram nou an retounen yon demann chache.

Tou depan de kote nou itilize li, rele this.state.data ka anpeche aplikasyon an kòmanse. Pou rezoud pwoblèm nan, nou ta ka vlope sa a nan yon ekspresyon kondisyonèl:

if (this.state.data) {
  return this.state.data;
} else {
  return 'Fetching Data';
}

Yon pi bon opsyon ta dwe sèvi ak "oswa" operatè a.

return (this.state.data || 'Fetching Data');

Nou pa ka chanje kòd ki anwo a pou itilize &&. Operatè 'Fetching Data' && this.state.data ap retounen this.state.data kèlkeswa si li pa defini oswa ou pa.

Si ou vle chèn

Youn ta ka sijere lè l sèvi avèk chenn opsyonèl lè w ap eseye retounen yon pwopriyete byen fon nan yon estrikti pye bwa. Se konsa, senbòl la mak kesyon? ka itilize pou rekipere yon pwopriyete sèlman si li pa nil.

Pou egzanp, nou ta ka refactor egzanp ki anwo a pou jwenn this.state.data?..(). Sa vle di, done yo retounen sèlman si valè a pa nil.

Oswa, si li enpòtan si wi ou non eta defini oswa ou pa, nou ta ka retounen this.state?.data.

Konvèti nan Boolean

KONVÈSYON TIP

Anplis de fonksyon nòmal booleyen vre ak fo, JavaScript tou trete tout lòt valè kòm verite oswa fo.

Jiska ke yo te note otreman, tout valè nan JavaScript yo se verite, eksepte 0, "", nil, endefini, NaN ak, nan kou, fo. Lèt yo se fo.

Nou ka byen fasil chanje ant de yo lè l sèvi avèk operatè a !, ki tou konvèti kalite a nan boolean.

const isTrue  = !0;
const isFalse = !1;
const alsoFalse = !!0;
 
console.log(true); // Result: true
console.log(typeof true); // Result: "boolean"

Konvèti an fisèl

KONVÈSYON TIP

Yon konvèsyon rapid soti nan yon nonb antye relatif nan yon fisèl ka fè jan sa a.

const val = 1 + "";
 
console.log(val); // Result: "1"
console.log(typeof val); // Result: "string"

Konvèti nan nonb antye relatif

KONVÈSYON TIP

Nou fè transfòmasyon ranvèse a tankou sa a.

let int = "15";
int = +int;
 
console.log(int); // Result: 15
console.log(typeof int); Result: "number"

Metòd sa a ka itilize tou pou konvèti kalite done boolean an nan valè nimerik regilye, jan yo montre anba a:

console.log(+true);  // Return: 1
console.log(+false); // Return: 0

Ka gen sitiyasyon kote + pral entèprete kòm yon operatè konkatènasyon olye ke yon operatè adisyon. Pou evite sa, ou ta dwe itilize tildes: ~~. Operatè sa a ekivalan a -n-1. Pa egzanp, ~15 egal a -16.

Sèvi ak de tilde nan yon ranje anile operasyon an paske - (- - n - 1) - 1 = n + 1 - 1 = n. Nan lòt mo, ~-16 egal a 15.

const int = ~~"15"
console.log(int); // Result: 15
console.log(typeof int); Result: "number"

<Quick Powers

OPERASYON

Kòmanse nan ES7, ou ka itilize operatè a eksponantisyon ** kòm yon koutim pou pouvwa. Sa a pi vit pase lè l sèvi avèk Math.pow(2, 3). Li sanble senp, men pwen sa a enkli nan lis la nan teknik, paske li pa mansyone tout kote.

console.log(2 ** 3); // Result: 8

Li pa ta dwe konfonn ak senbòl ^ a, ki se souvan itilize pou eksponantisyon. Men, nan JavaScript sa a se operatè a XOR.

Anvan ES7, ** chemen kout la te kapab itilize sèlman pou pouvwa baz 2 lè l sèvi avèk operatè chanjman bò gòch <<:

Math.pow(2, n);
2 << (n - 1);
2**n;

Pa egzanp, 2 << 3 = 16 ekivalan a 2 ** 4 = 16.

Flote nan nonb antye relatif

OPERASYON / KONVERSYON TIP

Si ou bezwen konvèti yon flote nan yon nonb antye relatif, ou ka itilize Math.floor(), Math.ceil() oswa Math.round(). Men, gen yon fason pi rapid, pou sa a nou itilize |, se sa ki, operatè a OR.

console.log(23.9 | 0);  // Result: 23
console.log(-23.9 | 0); // Result: -23

Konpòtman | depann lajman de si w ap fè fas ak nimewo pozitif oswa negatif, kidonk metòd sa a se sèlman apwopriye si w gen konfyans nan sa w ap fè.

n | 0 retire tout bagay apre separasyon desimal la, tronke flote a nan yon nonb antye relatif.

Ou ka jwenn menm efè awondi lè l sèvi avèk ~~. Apre konvèsyon fòse nan yon nonb antye relatif, valè a rete san okenn chanjman.

Retire nimewo final yo

Ou ka itilize operatè OSWA pou retire nenpòt kantite chif nan yon nimewo. Sa vle di nou pa bezwen konvèti kalite tankou isit la:

let str = "1553";
Number(str.substring(0, str.length - 1));

Olye de sa, nou tou senpleman ekri:

console.log(1553 / 10   | 0)  // Result: 155
console.log(1553 / 100  | 0)  // Result: 15
console.log(1553 / 1000 | 0)  // Result: 1

Lyen otomatik

KLAS

Notasyon flèch ES6 yo ka itilize nan metòd klas yo, epi lier yo enplike. Sa vle di ou ka di orevwa ak ekspresyon repetitif tankou sa a.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>
      </>
    )
  }
};

Taye etalaj

ARRAYS

Si ou bezwen retire valè nan yon etalaj, gen metòd pi rapid pase episur ().

Pa egzanp, si ou konnen gwosè etalaj orijinal la, ou ka pase sou pwopriyete longè li yo jan sa a:

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array.length = 4;
 
console.log(array); // Result: [0, 1, 2, 3]

Men, gen yon lòt metòd, ak yon sèl pi vit. Si vitès se sa ki enpòtan pou ou, men chwa nou yo:

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]

Enpresyon dènye valè (yo) nan yon etalaj

ARRAYS
Teknik sa a mande pou yo sèvi ak metòd la tranch ().

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]

Fòma kòd JSON

JSON

Ou ka deja itilize JSON.stringify. Èske w te konnen li ede fòma JSON ou a?

Metòd stringify() pran de paramèt opsyonèl: yon fonksyon ranplasman, ki ka itilize pou filtre JSON ki parèt la, ak yon valè espas.

console.log(JSON.stringify({ alpha: 'A', beta: 'B' }, null, 't'));
 
// Result:
// '{
//     "alpha": A,
//     "beta": B
// }'

Sa a tout, mwen espere ke tout teknik sa yo te itil. Ki trik ou konnen? Ekri yo nan kòmantè yo.

Skillbox rekòmande:

Sous: www.habr.com

Add nouvo kòmantè