JavaScript-ի 12 հնարքներ, որոնք բաց են թողնում ձեռնարկների մեծ մասը

Երբ ես սկսեցի սովորել JavaScript, առաջին բանը, որ արեցի, հնարքների ցուցակ կազմելն էր, որոնք օգնեցին ինձ խնայել ժամանակը: Ես դրանք նկատել եմ այլ ծրագրավորողներից, տարբեր կայքերում և ձեռնարկներում:

Այս հոդվածում ես ձեզ ցույց կտամ 12 հիանալի միջոց՝ բարելավելու և արագացնելու ձեր JavaScript կոդը: Շատ դեպքերում դրանք ունիվերսալ են:

Հիշեցում. «Habr»-ի բոլոր ընթերցողների համար՝ 10 ռուբլի զեղչ «Habr» գովազդային կոդով Skillbox-ի ցանկացած դասընթացին գրանցվելիս:

Skillbox-ը խորհուրդ է տալիս. Գործնական դասընթաց «Mobile Developer PRO».

Եզակի արժեքների զտում

ԶԱՆԳՎԱԾՔՆԵՐ

Set օբյեկտի տեսակը ներդրվել է ES6-ում՝..., spread օպերատորի հետ միասին, մենք կարող ենք այն օգտագործել նոր զանգված ստեղծելու համար, որը պարունակում է միայն եզակի արժեքներ։

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

Նորմալ իրավիճակում նույն գործողությունը կատարելու համար շատ ավելի շատ կոդ է անհրաժեշտ։

Այս տեխնիկան աշխատում է պարզունակ տիպեր պարունակող զանգվածների համար՝ չսահմանված, զրոյական, բուլյան, տող և համար: Եթե ​​դուք աշխատում եք առարկաներ, գործառույթներ կամ լրացուցիչ զանգվածներ պարունակող զանգվածի հետ, ձեզ այլ մոտեցում է հարկավոր:

Քեշի զանգվածի երկարությունը ցիկլերով

ՑԻԿԼՆԵՐ

Երբ դուք սովորում եք օղակների համար, դուք հետևում եք ստանդարտ ընթացակարգին.

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

Այնուամենայնիվ, այս շարահյուսությամբ, for-ի օղակը բազմիցս ստուգում է զանգվածի երկարությունը յուրաքանչյուր կրկնություն:

Երբեմն դա կարող է օգտակար լինել, բայց շատ դեպքերում ավելի արդյունավետ է զանգվածի երկարությունը քեշ պահելը, որը կպահանջի մեկ մուտք դեպի այն: Մենք կարող ենք դա անել՝ սահմանելով երկարության փոփոխական, որտեղ մենք սահմանում ենք i փոփոխականը, այսպես.

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

Սկզբունքորեն, գրեթե նույնը, ինչ վերը նշվածը, բայց մեծացնելով հանգույցի չափը, մենք ժամանակի զգալի խնայողություն կստանանք:

Կարճ միացման վարկանիշ (McCarthy վարկանիշ)

ՊԱՅՄԱՆԱԿԱՆ ՕՊԵՐԱՏՈՐՆԵՐ

Երեքական օպերատորը պարզ (և երբեմն ոչ այնքան պարզ) պայմանական հայտարարություններ գրելու արագ և արդյունավետ միջոց է.

x> 100? «100-ից ավելի»՝ «100-ից պակաս»;
x> 100? (x>200? «ավելի քան 200»: «100-200-ի միջև»): «100-ից պակաս»;

Բայց երբեմն նույնիսկ եռակի օպերատորն ավելի բարդ է, քան պահանջվում է: Մենք կարող ենք օգտագործել «and» && և «or» փոխարեն || Բուլյան օպերատորներ՝ որոշ արտահայտություններ ավելի հակիրճ գնահատելու համար: Այն հաճախ կոչվում է «կարճ միացում» կամ «կարճ միացման վարկանիշ»:

Ինչպես է այն աշխատում

Ենթադրենք, ուզում ենք վերադարձնել երկու կամ ավելի պայմաններից միայն մեկը։

Օգտագործելով &&-ը կվերադարձնի առաջին կեղծ արժեքը: Եթե ​​յուրաքանչյուր օպերանդ գնահատվում է true, ապա վերջին գնահատված արտահայտությունը կվերադարձվի:

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

Օգտագործելով || կվերադարձնի առաջին իսկական արժեքը: Եթե ​​յուրաքանչյուր օպերանդ գնահատվում է false, ապա վերջին գնահատված արժեքը կվերադարձվի:

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

Օրինակ 1

Ենթադրենք, ուզում ենք վերադարձնել փոփոխականի երկարությունը, բայց չգիտենք դրա տեսակը։

Այս դեպքում դուք կարող եք օգտագործել if/else՝ ստուգելու համար, որ foo-ն ճիշտ տեսակն է, բայց այս մեթոդը կարող է չափազանց երկար լինել: Հետևաբար, ավելի լավ է վերցնել մեր «կարճ միացումը»:

return (foo || []).length;

Եթե ​​փոփոխական foo-ն ունի համապատասխան երկարություն, ապա այն կվերադարձվի: Հակառակ դեպքում մենք կստանանք 0:

Օրինակ 2

Խնդիրներ ունեցե՞լ եք՝ մուտք գործելու մեջ տեղադրված օբյեկտ: Դուք կարող եք չգիտեք, թե արդյոք գոյություն ունի օբյեկտ կամ դրա ենթահատկություններից մեկը, և դա կարող է հանգեցնել խնդիրների:

Օրինակ, մենք ցանկանում էինք մուտք գործել տվյալների հատկություն this.state-ում, սակայն տվյալները չեն սահմանվում այնքան ժամանակ, քանի դեռ մեր ծրագիրը չի վերադարձնել fetch հարցումը:

Կախված նրանից, թե որտեղ ենք այն օգտագործում, այս.state.data կոչումը կարող է խանգարել հավելվածի մեկնարկին: Խնդիրը լուծելու համար մենք կարող ենք սա փաթեթավորել պայմանական արտահայտությամբ.

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

Ավելի լավ տարբերակ կլինի «կամ» օպերատորի օգտագործումը:

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

Մենք չենք կարող փոխել վերը նշված կոդը՝ &&-ն օգտագործելու համար: «Տվյալների բեռնում» && this.state.data օպերատորը կվերադարձնի this.state.data-ն՝ անկախ այն հանգամանքից, թե դա անորոշ է, թե ոչ:

Ընտրովի շղթա

Կարելի է առաջարկել օգտագործել կամընտիր շղթայական կապ, երբ փորձում եք գույքը վերադարձնել ծառի կառուցվածքի խորքում: Այսպիսով, հարցական նշանը. կարող է օգտագործվել սեփականություն ստանալու համար միայն այն դեպքում, եթե այն զրոյական չէ:

Օրինակ՝ մենք կարող ենք վերափոխել վերը նշված օրինակը՝ ստանալով this.state.data?..(): Այսինքն՝ տվյալները վերադարձվում են միայն այն դեպքում, եթե արժեքը զրոյական չէ։

Կամ, եթե կարևոր է, արդյոք նահանգը սահմանված է, թե ոչ, մենք կարող ենք վերադարձնել this.state?.data:

Փոխարկել բուլյան

ՏԵՍԱԿԻ ՓՈԽԱՐԿՈՒՄ

Բացի «true» և «false» նորմալ բուլյան ֆունկցիաներից, JavaScript-ը նաև բոլոր մյուս արժեքները վերաբերվում է որպես ճշմարտացի կամ կեղծ:

Քանի դեռ այլ բան նշված չէ, JavaScript-ում բոլոր արժեքները ճշմարիտ են, բացառությամբ 0-ի, «», null, undefined, NaN և, իհարկե, false: Վերջիններս կեղծ են։

Մենք հեշտությամբ կարող ենք անցնել երկուսի միջև՝ օգտագործելով !-ի օպերատորը, որը նաև տիպը փոխակերպում է բուլյան:

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

Փոխարկել լարային

ՏԵՍԱԿԻ ՓՈԽԱՐԿՈՒՄ

Ամբողջ թվից տողի արագ փոխարկումը կարող է կատարվել հետևյալ կերպ.

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

Փոխակերպել ամբողջ թվի

ՏԵՍԱԿԻ ՓՈԽԱՐԿՈՒՄ

Մենք կատարում ենք հակադարձ վերափոխումը այսպես.

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

Այս մեթոդը կարող է օգտագործվել նաև բուլյան տվյալների տեսակը սովորական թվային արժեքների փոխակերպելու համար, ինչպես ցույց է տրված ստորև.

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

Կարող են լինել իրավիճակներ, երբ +-ը կմեկնաբանվի որպես կապակցման օպերատոր, այլ ոչ թե որպես ավելացման օպերատոր: Դրանից խուսափելու համար դուք պետք է օգտագործեք tildes՝ ~~: Այս օպերատորը համարժեք է -n-1-ին: Օրինակ, ~15-ը հավասար է -16-ի:

Երկու տիլդ անընդմեջ օգտագործելը ժխտում է գործողությունը, քանի որ - (- - n - 1) - 1 = n + 1 - 1 = n: Այսինքն՝ ~-16-ը հավասար է 15-ի։

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

<Quick Powers

ԳՈՐԾԱՌՆՈՒԹՅՈՒՆՆԵՐ

Սկսած ES7-ից, դուք կարող եք օգտագործել ընդլայնման օպերատորը ** որպես հզորությունների սղագրություն: Սա շատ ավելի արագ է, քան Math.pow(2, 3) օգտագործումը: Թվում է, թե պարզ է, բայց այս կետը ներառված է տեխնիկայի ցանկում, քանի որ այն ամենուր չի նշվում:

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

Այն չպետք է շփոթել ^ նշանի հետ, որը սովորաբար օգտագործվում է հզորացման համար։ Բայց JavaScript-ում սա XOR օպերատորն է:

Մինչև ES7, ** դյուրանցումը կարող էր օգտագործվել միայն 2-րդ բազային հզորությունների համար՝ օգտագործելով բիթային ձախ հերթափոխի օպերատորը <<:

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

Օրինակ, 2 << 3 = 16-ը համարժեք է 2 ** 4 = 16-ի:

Լողալ դեպի ամբողջ թիվ

ԳՈՐԾԱՌՆՈՒԹՅՈՒՆՆԵՐ / ՏԵՍԱԿՆԵՐԻ ՓՈԽԱՐԿՈՒՄ

Եթե ​​Ձեզ անհրաժեշտ է float-ը վերածել ամբողջ թվի, կարող եք օգտագործել Math.floor(), Math.ceil() կամ Math.round(): Բայց կա ավելի արագ ճանապարհ, դրա համար մենք օգտագործում ենք |, այսինքն՝ OR օպերատորը։

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

Վարքագիծ | մեծապես կախված է նրանից, թե դուք գործ ունեք դրական կամ բացասական թվերի հետ, ուստի այս մեթոդը հարմար է միայն այն դեպքում, եթե վստահ եք ձեր արածի մեջ:

n | 0-ը հեռացնում է ամեն ինչ տասնորդական բաժանարարից հետո՝ կտրելով float-ը ամբողջ թվի:

Դուք կարող եք ստանալ նույն կլորացման էֆեկտը՝ օգտագործելով ~~: Ամբողջ թվի հարկադիր փոխարկումից հետո արժեքը մնում է անփոփոխ:

Հետևյալ համարների հեռացում

OR օպերատորը կարող է օգտագործվել թվից ցանկացած թվանշան հեռացնելու համար: Սա նշանակում է, որ մենք կարիք չունենք փոխակերպելու այնպիսի տեսակներ, ինչպիսիք են այստեղ.

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

Փոխարենը մենք պարզապես գրում ենք.

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

Ավտոմատ կապ

ԴԱՍԵՐ

ES6 սլաքների նշումները կարող են օգտագործվել դասի մեթոդներում, և պարտադիր է: Սա նշանակում է, որ դուք կարող եք հրաժեշտ տալ նման կրկնվող արտահայտություններին.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>
      </>
    )
  }
};

Զանգվածի կտրում

ԶԱՆԳՎԱԾՔՆԵՐ

Եթե ​​Ձեզ անհրաժեշտ է զանգվածից հանել արժեքները, կան ավելի արագ մեթոդներ, քան splice():

Օրինակ, եթե դուք գիտեք սկզբնական զանգվածի չափը, կարող եք վերացնել դրա երկարության հատկությունը հետևյալ կերպ.

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

Բայց կա մեկ այլ մեթոդ և ավելի արագ: Եթե ​​արագությունը ձեզ համար կարևոր է, ահա մեր ընտրանքները.

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]

Զանգվածի վերջին արժեք(ներ)ի տպում

ԶԱՆԳՎԱԾՔՆԵՐ
Այս տեխնիկան պահանջում է օգտագործել 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]

JSON կոդի ձևաչափում

JSON

Հնարավոր է, դուք արդեն օգտագործել եք JSON.stringify: Գիտեի՞ք, որ այն օգնում է ֆորմատավորել ձեր JSON-ը:

Stringify() մեթոդը վերցնում է երկու կամընտիր պարամետր՝ փոխարինող ֆունկցիա, որը կարող է օգտագործվել ցուցադրված JSON-ը զտելու համար և բացատ արժեք:

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

Այսքանը, հուսով եմ, որ այս բոլոր տեխնիկաները օգտակար էին: Ի՞նչ հնարքներ գիտեք: Գրեք դրանք մեկնաբանություններում։

Skillbox-ը խորհուրդ է տալիս.

• Երկու տարվա գործնական դասընթաց «Ես PRO վեբ ծրագրավորող եմ».
• Առցանց դասընթաց «C# մշակող 0-ից».
• Գործնական տարվա դասընթաց «PHP ծրագրավորող 0-ից մինչև PRO».

Source: www.habr.com