බොහෝ නිබන්ධන මග හැරෙන ජාවාස්ක්‍රිප්ට් උපක්‍රම 12

මම ජාවාස්ක්‍රිප්ට් ඉගෙන ගන්නට පටන් ගත් විට, මම මුලින්ම කළේ කාලය ඉතිරි කර ගැනීමට උපකාරී වූ උපක්‍රම ලැයිස්තුවක් සෑදීමයි. මම ඒවා වෙනත් ක්‍රමලේඛකයන්ගෙන්, විවිධ අඩවිවල සහ අත්පොත්වල දුටුවෙමි.

මෙම ලිපියෙන්, මම ඔබට ඔබේ JavaScript කේතය වැඩිදියුණු කිරීමට සහ වේගවත් කිරීමට විශිෂ්ට ක්‍රම 12ක් පෙන්වන්නම්. බොහෝ අවස්ථාවලදී ඒවා විශ්වීය වේ.

අපි ඔබට මතක් කරමු: "Habr" හි සියලුම පාඨකයින් සඳහා - "Habr" ප්‍රවර්ධන කේතය භාවිතයෙන් ඕනෑම Skillbox පාඨමාලාවකට ලියාපදිංචි වන විට රූබල් 10 ක වට්ටමක්.

Skillbox නිර්දේශ කරයි: ප්රායෝගික පාඨමාලාව "ජංගම සංවර්ධක PRO".

අද්විතීය අගයන් පෙරීම

අරා

Set object වර්ගය ES6 හි හඳුන්වා දෙන ලදී, ..., පැතිරීමේ ක්‍රියාකරු සමඟ, අපට එය අද්විතීය අගයන් පමණක් අඩංගු නව අරාවක් නිර්මාණය කිරීමට භාවිතා කළ හැකිය.

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 loop විසින් එක් එක් පුනරාවර්තනය සඳහා අරාවේ දිග නැවත නැවතත් පරීක්ෂා කරයි.

සමහර විට මෙය ප්රයෝජනවත් විය හැක, නමුත් බොහෝ අවස්ථාවලදී එය අරාවේ දිග හැඹිලි කිරීම වඩා කාර්යක්ෂම වේ, ඒ සඳහා එක් ප්රවේශයක් අවශ්ය වනු ඇත. 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ට අඩු";

නමුත් සමහර අවස්ථාවලදී ත්රිත්ව ක්රියාකරු පවා අවශ්ය ප්රමාණයට වඩා සංකීර්ණ වේ. ඒ වෙනුවට අපට 'සහ' && සහ 'හෝ' භාවිතා කළ හැක || සමහර ප්‍රකාශන වඩාත් සංක්ෂිප්ත ආකාරයකින් ඇගයීමට බූලියන් ක්‍රියාකරුවන්. එය බොහෝ විට "කෙටි පරිපථය" හෝ "කෙටි පරිපථ ශ්රේණිගත කිරීම" ලෙස හැඳින්වේ.

කොහොමද මේ වැඩ කරන්නේ

අපි කියමු අපට කොන්දේසි දෙකකින් හෝ වැඩි ගණනකින් එකක් පමණක් ආපසු ලබා දීමට අවශ්‍ය බව.

&& භාවිතා කිරීමෙන් පළමු ව්‍යාජ අගය ලබා දෙනු ඇත. සෑම ක්‍රියාවක්ම සත්‍ය ලෙස ඇගයීමට ලක් කරන්නේ නම්, අවසාන ප්‍රකාශනය ඇගයීමට ලක් කෙරේ.

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

භාවිතා කිරීම || පළමු සත්‍ය අගය ලබා දෙනු ඇත. සෑම ක්‍රියාවක්ම අසත්‍ය ලෙස ඇගයීමට ලක් කරන්නේ නම්, අවසාන ඇගයීම් අගය ආපසු ලබා දෙනු ඇත.

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

උදාහරණයක් 1

අපි හිතමු අපට විචල්‍යයක දිග නැවත ලබා දීමට අවශ්‍යයි, නමුත් අපි එහි වර්ගය නොදන්නෙමු.

මෙම අවස්ථාවේදී, foo නිවැරදි වර්ගය දැයි පරීක්ෂා කිරීමට ඔබට if/else භාවිතා කළ හැක, නමුත් මෙම ක්‍රමය දිග වැඩි විය හැක. එමනිසා, අපගේ "කෙටි පරිපථය" ගැනීම වඩා හොඳය.

return (foo || []).length;

foo විචල්‍යයට සුදුසු දිගක් තිබේ නම්, එය ආපසු ලබා දෙනු ඇත. එසේ නොමැතිනම් අපට 0 ලැබේ.

උදාහරණයක් 2

කැදලිගත වස්තුවකට ප්‍රවේශ වීමේදී ඔබට ගැටලු ඇති වී තිබේද? වස්තුවක් හෝ එහි උප ගුණාංගයක් තිබේදැයි ඔබ නොදන්නවා විය හැකි අතර, මෙය ගැටළු වලට තුඩු දිය හැකිය.

උදාහරණයක් ලෙස, අපට this.state හි දත්ත දේපල වෙත ප්‍රවේශ වීමට අවශ්‍ය විය, නමුත් අපගේ වැඩසටහන ලබා ගැනීමේ ඉල්ලීමක් ලබා දෙන තෙක් දත්ත නිර්වචනය නොවේ.

අප එය භාවිතා කරන ස්ථානය අනුව, this.state.data ඇමතීමෙන් යෙදුම ආරම්භ වීම වැළැක්විය හැකිය. ගැටළුව විසඳීම සඳහා, අපට මෙය කොන්දේසි සහිත ප්‍රකාශනයකින් ආවරණය කළ හැකිය:

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

වඩා හොඳ විකල්පයක් වනුයේ "හෝ" ක්රියාකරු භාවිතා කිරීමයි.

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

&& භාවිතා කිරීමට අපට ඉහත කේතය වෙනස් කළ නොහැක. 'දත්ත ලබා ගැනීම' && this.state.data ක්‍රියාකරු මෙම.state.data නිර්වචනය නොකළද නැද්ද යන්න නොසලකා ආපසු ලබා දෙනු ඇත.

විකල්ප දාමය

ගස් ව්‍යුහයකට ගැඹුරින් දේපලක් ආපසු ලබා දීමට උත්සාහ කරන විට විකල්ප දම්වැල් භාවිතා කිරීමට කෙනෙකුට යෝජනා කළ හැකිය. ඉතින්, ප්‍රශ්න ලකුණ සංකේතය? දේපල නැවත ලබා ගැනීමට භාවිතා කළ හැක්කේ එය ශුන්‍ය නොවේ නම් පමණි.

උදාහරණයක් ලෙස, this.state.data?..() ලබා ගැනීමට අපට ඉහත උදාහරණය නැවත සකස් කළ හැක. එනම්, දත්ත ආපසු ලබා දෙන්නේ අගය ශුන්‍ය නොවේ නම් පමණි.

නැතහොත්, රාජ්‍යය නිර්වචනය කර තිබේද නැද්ද යන්න වැදගත් නම්, අපට this.state?.data ආපසු ලබා දිය හැක.

බූලියන් බවට පරිවර්තනය කරන්න

වර්ගය පරිවර්තනය

සාමාන්‍ය බූලියන් ශ්‍රිතවලට අමතරව සත්‍ය සහ අසත්‍ය, ජාවාස්ක්‍රිප්ට් අනෙකුත් සියලුම අගයන් සත්‍ය හෝ අසත්‍ය ලෙස සලකයි.

වෙනත් ආකාරයකින් සටහන් කරන තුරු, 0, "", null, undefined, NaN සහ, ඇත්ත වශයෙන්ම, අසත්‍ය හැර, JavaScript හි සියලුම අගයන් සත්‍ය වේ. දෙවැන්න බොරු ය.

! ක්‍රියාකරු භාවිතයෙන් අපට පහසුවෙන් දෙක අතර මාරු විය හැක, එය වර්ගය බූලියන් බවට පරිවර්තනය කරයි.

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 ට පෙර, ** කෙටිමඟ භාවිතා කළ හැක්කේ bitwise left shift operator භාවිතා කරන 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(මෙය)!

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]

අරාවක අවසාන අගය(ය) මුද්‍රණය කිරීම

අරා
මෙම තාක්ෂණය සඳහා ස්ලයිස් () ක්රමය භාවිතා කිරීම අවශ්ය වේ.

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 වෙබ් සංවර්ධකයෙක්".
• මාර්ගගත පාඨමාලාව "0 සිට C# සංවර්ධකයා".
• ප්‍රායෝගික වසර පාඨමාලාව "0 සිට PRO දක්වා PHP සංවර්ධකයා".

මූලාශ්රය: www.habr.com