JavaScript-ի 12 հնարքներ, որոնք բաց են թողնում ձեռնարկների մեծ մասը
Երբ ես սկսեցի սովորել JavaScript, առաջին բանը, որ արեցի, հնարքների ցուցակ կազմելն էր, որոնք օգնեցին ինձ խնայել ժամանակը: Ես դրանք նկատել եմ այլ ծրագրավորողներից, տարբեր կայքերում և ձեռնարկներում:
Այս հոդվածում ես ձեզ ցույց կտամ 12 հիանալի միջոց՝ բարելավելու և արագացնելու ձեր JavaScript կոդը: Շատ դեպքերում դրանք ունիվերսալ են:
Հիշեցում.«Habr»-ի բոլոր ընթերցողների համար՝ 10 ռուբլի զեղչ «Habr» գովազդային կոդով Skillbox-ի ցանկացած դասընթացին գրանցվելիս:
Set օբյեկտի տեսակը ներդրվել է ES6-ում՝..., spread օպերատորի հետ միասին, մենք կարող ենք այն օգտագործել նոր զանգված ստեղծելու համար, որը պարունակում է միայն եզակի արժեքներ։
Նորմալ իրավիճակում նույն գործողությունը կատարելու համար շատ ավելի շատ կոդ է անհրաժեշտ։
Այս տեխնիկան աշխատում է պարզունակ տիպեր պարունակող զանգվածների համար՝ չսահմանված, զրոյական, բուլյան, տող և համար: Եթե դուք աշխատում եք առարկաներ, գործառույթներ կամ լրացուցիչ զանգվածներ պարունակող զանգվածի հետ, ձեզ այլ մոտեցում է հարկավոր:
Քեշի զանգվածի երկարությունը ցիկլերով
ՑԻԿԼՆԵՐ
Երբ դուք սովորում եք օղակների համար, դուք հետևում եք ստանդարտ ընթացակարգին.
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 վարկանիշ)
ՊԱՅՄԱՆԱԿԱՆ ՕՊԵՐԱՏՈՐՆԵՐ
Երեքական օպերատորը պարզ (և երբեմն ոչ այնքան պարզ) պայմանական հայտարարություններ գրելու արագ և արդյունավետ միջոց է.
Բայց երբեմն նույնիսկ եռակի օպերատորն ավելի բարդ է, քան պահանջվում է: Մենք կարող ենք օգտագործել «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 կոչումը կարող է խանգարել հավելվածի մեկնարկին: Խնդիրը լուծելու համար մենք կարող ենք սա փաթեթավորել պայմանական արտահայտությամբ.
Ավելի լավ տարբերակ կլինի «կամ» օպերատորի օգտագործումը:
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: Վերջիններս կեղծ են։
Մենք հեշտությամբ կարող ենք անցնել երկուսի միջև՝ օգտագործելով !-ի օպերատորը, որը նաև տիպը փոխակերպում է բուլյան:
Կարող են լինել իրավիճակներ, երբ +-ը կմեկնաբանվի որպես կապակցման օպերատոր, այլ ոչ թե որպես ավելացման օպերատոր: Դրանից խուսափելու համար դուք պետք է օգտագործեք tildes՝ ~~: Այս օպերատորը համարժեք է -n-1-ին: Օրինակ, ~15-ը հավասար է -16-ի:
Երկու տիլդ անընդմեջ օգտագործելը ժխտում է գործողությունը, քանի որ - (- - n - 1) - 1 = n + 1 - 1 = n: Այսինքն՝ ~-16-ը հավասար է 15-ի։
Սկսած 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 օպերատորը։
Վարքագիծ | մեծապես կախված է նրանից, թե դուք գործ ունեք դրական կամ բացասական թվերի հետ, ուստի այս մեթոդը հարմար է միայն այն դեպքում, եթե վստահ եք ձեր արածի մեջ:
n | 0-ը հեռացնում է ամեն ինչ տասնորդական բաժանարարից հետո՝ կտրելով float-ը ամբողջ թվի:
Դուք կարող եք ստանալ նույն կլորացման էֆեկտը՝ օգտագործելով ~~: Ամբողջ թվի հարկադիր փոխարկումից հետո արժեքը մնում է անփոփոխ:
Հետևյալ համարների հեռացում
OR օպերատորը կարող է օգտագործվել թվից ցանկացած թվանշան հեռացնելու համար: Սա նշանակում է, որ մենք կարիք չունենք փոխակերպելու այնպիսի տեսակներ, ինչպիսիք են այստեղ.
let str = "1553";
Number(str.substring(0, str.length - 1));
ES6 սլաքների նշումները կարող են օգտագործվել դասի մեթոդներում, և պարտադիր է: Սա նշանակում է, որ դուք կարող եք հրաժեշտ տալ նման կրկնվող արտահայտություններին.myMethod = this.myMethod.bind(this):