12 አብዛኞቹ መማሪያዎች የማይሸፍኑባቸው የጃቫስክሪፕት ዘዴዎች

ጃቫ ስክሪፕት መማር ስጀምር መጀመሪያ ያደረግኩት ጊዜ ለመቆጠብ የሚረዱ ዘዴዎችን መዘርዘር ነው። ከሌሎች የፕሮግራም አዘጋጆች፣ በተለያዩ ድረ-ገጾች እና በመመሪያዎች ላይ አይቻቸዋለሁ።

በዚህ ጽሑፍ ውስጥ የጃቫ ስክሪፕት ኮድዎን ለማሻሻል እና ለማፋጠን 12 ምርጥ መንገዶችን አሳይሻለሁ። በአብዛኛዎቹ ሁኔታዎች ሁለንተናዊ ናቸው.

እኛ እናስታውስዎታለን- ለሁሉም የ "ሀብር" አንባቢዎች - የ "Habr" የማስተዋወቂያ ኮድን በመጠቀም በማንኛውም የ Skillbox ኮርስ ውስጥ ሲመዘገቡ የ 10 ሩብልስ ቅናሽ.

Skillbox ይመክራል፡ ተግባራዊ ኮርስ "ሞባይል ገንቢ PRO".

ልዩ እሴቶችን በማጣራት ላይ

አደራደር

የነገር አይነት በES6 ውስጥ ገብቷል፣ ከ...፣ ከስርጭት ኦፕሬተር ጋር፣ ልዩ የሆኑ እሴቶችን ብቻ የያዘ አዲስ ድርድር ለመፍጠር ልንጠቀምበት እንችላለን።

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

በተለመደው ሁኔታ, ተመሳሳይ ክዋኔን ለማከናወን ብዙ ተጨማሪ ኮድ ያስፈልጋል.

ይህ ዘዴ ጥንታዊ ዓይነቶችን ለያዙ ድርድሮች ይሰራል፡-ያልተገለጸ፣ ባዶ፣ ቡሊያን፣ string እና ቁጥር። ነገሮችን፣ ተግባራትን ወይም ተጨማሪ ድርድሮችን ከያዘ ድርድር ጋር እየሰሩ ከሆነ የተለየ አቀራረብ ያስፈልግዎታል።

በዑደቶች ውስጥ የመሸጎጫ ድርድር ርዝመት

ዑደቶች

ለ loops ሲማሩ መደበኛውን ሂደት ይከተሉ፡

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

ነገር ግን፣ በዚህ አገባብ፣ ሉፕ እያንዳንዱን ድግግሞሹን የድርድር ርዝመት ደጋግሞ ይፈትሻል።

አንዳንድ ጊዜ ይህ ጠቃሚ ሊሆን ይችላል, ነገር ግን በአብዛኛዎቹ ሁኔታዎች የድርድር ርዝመትን መሸጎጥ የበለጠ ቀልጣፋ ነው, ይህም አንድ መዳረሻ ያስፈልገዋል. ተለዋዋጭ iን በምንገልጽበት የርዝመት ተለዋዋጭን በመግለጽ ይህንን ማድረግ እንችላለን፡-

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

በመርህ ደረጃ ፣ ከላይ ካለው ጋር ተመሳሳይ ነው ፣ ግን የሉፕ መጠኑን በመጨመር ጉልህ የሆነ የጊዜ ቁጠባ እናገኛለን።

አጭር የወረዳ ደረጃ (የማክካርቲ ደረጃ)

ሁኔታዊ ኦፕሬተሮች

ተርነሪ ኦፕሬተር ቀላል (እና አንዳንድ ጊዜ ቀላል ያልሆኑ) ሁኔታዊ መግለጫዎችን ለመፃፍ ፈጣን እና ቀልጣፋ መንገድ ነው።

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 ትክክለኛው አይነት መሆኑን ለመፈተሽ ካለ መጠቀም ይችላሉ ነገርግን ይህ ዘዴ በጣም ረጅም ሊሆን ይችላል። ስለዚህ, የእኛን "አጭር ዙር" መውሰድ የተሻለ ነው.

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');

ለመጠቀም && ለመጠቀም ከላይ ያለውን ኮድ መለወጥ አንችልም። የ'Fetching Data' && this.state.data ኦፕሬተር ይህ.state.ዳታ ባይገለጽም ባይገለጽም ይመልሳል።

አማራጭ ሰንሰለት

አንድ ሰው ንብረቱን ወደ ዛፉ መዋቅር ለመመለስ በሚሞክርበት ጊዜ አማራጭ ሰንሰለት መጠቀምን ሊጠቁም ይችላል። ስለዚህ የጥያቄ ምልክት ምልክት? ንብረትን ለማምጣት ጥቅም ላይ ሊውል የሚችለው ውድቅ ካልሆነ ብቻ ነው።

ለምሳሌ፣ ይህን.state.data?...() ለማግኘት ከላይ ያለውን ምሳሌ ልናስተካክለው እንችላለን። ያም ማለት መረጃው የሚመለሰው እሴቱ ባዶ ካልሆነ ብቻ ነው።

ወይም፣ ግዛት ይገለጻል ወይም አይገለጽም አስፈላጊ ከሆነ ይህን.state?.. ውሂብ ልንመልሰው እንችላለን።

ወደ ቡሊያን ቀይር

TYPE ልወጣ

ከመደበኛው ቡሊያን ተግባር በተጨማሪ እውነት እና ሀሰት፣ጃቫስክሪፕት ሁሉንም ሌሎች እሴቶችን እንደ እውነት ወይም ውሸት አድርጎ ይመለከታቸዋል።

ሌላ እስካልተገለጸ ድረስ በጃቫ ስክሪፕት ውስጥ ያሉ ሁሉም እሴቶች እውነት ናቸው፣ ከ0፣ ""፣ null፣ undefined፣ NaN እና በእርግጥ ሐሰት። የኋለኞቹ ውሸት ናቸው።

የ! ኦፕሬተርን በመጠቀም በቀላሉ በሁለቱ መካከል መቀያየር እንችላለን፣ይህም አይነቱን ወደ ቡሊያን ይቀይራል።

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

ወደ ሕብረቁምፊ ቀይር

TYPE ልወጣ

ከኢንቲጀር ወደ ሕብረቁምፊ ፈጣን መለወጥ እንደሚከተለው ሊከናወን ይችላል።

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

ወደ ኢንቲጀር ቀይር

TYPE ልወጣ

የተገላቢጦሽ ለውጥን እንደዚህ እናደርጋለን.

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

በተለምዶ ለትርጓሜ ጥቅም ላይ ከሚውለው ^ ምልክት ጋር መምታታት የለበትም። በጃቫስክሪፕት ግን ይህ የXOR ኦፕሬተር ነው።

ከES7 በፊት የ** አቋራጩ ቢትwise የግራ ፈረቃ ኦፕሬተርን በመጠቀም ለመሠረት 2 ኃይላት ብቻ ሊያገለግል ይችላል <<፡

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

ለምሳሌ 2 << 3 = 16 ከ 2 ** 4 = 16 ጋር እኩል ነው።

ወደ ኢንቲጀር መንሳፈፍ

ኦፕሬሽኖች / አይነት መቀየር

ተንሳፋፊን ወደ ኢንቲጀር መቀየር ካስፈለገዎት Math.floor()፣ Math.ceil() ወይም Math.round() መጠቀም ይችላሉ። ግን ፈጣኑ መንገድ አለ፣ ለዚህም |፣ ማለትም፣ OR ኦፕሬተርን እንጠቀማለን።

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

ባህሪ | በአብዛኛው የተመካው በአዎንታዊ ወይም አሉታዊ ቁጥሮች ላይ ነው, ስለዚህ ይህ ዘዴ ተስማሚ የሚሆነው እርስዎ በሚያደርጉት ነገር ላይ እርግጠኛ ከሆኑ ብቻ ነው.

n | 0 ከአስርዮሽ መለያያ በኋላ ሁሉንም ነገር ያስወግዳል ፣ ተንሳፋፊውን ወደ ኢንቲጀር ይቆርጣል።

~~ን በመጠቀም ተመሳሳይ የማዞሪያ ውጤት ማግኘት ይችላሉ። በግዳጅ ወደ ኢንቲጀር ከተለወጠ በኋላ እሴቱ ሳይለወጥ ይቆያል።

የመከታተያ ቁጥሮችን በማስወገድ ላይ

የ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>
      </>
    )
  }
};

የድርድር ማሳጠር

አደራደር

ዋጋዎችን ከአንድ ድርድር ማላቀቅ ከፈለጉ ከስፕላስ () የበለጠ ፈጣን ዘዴዎች አሉ።

ለምሳሌ፣ የመጀመሪያውን ድርድር መጠን ካወቁ፣ የርዝመቱን ንብረቱን በሚከተለው መልኩ መሻር ይችላሉ።

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 ድር ገንቢ ነኝ".
• የመስመር ላይ ኮርስ "C# ገንቢ ከ 0".
• ተግባራዊ ዓመት ኮርስ "PHP ገንቢ ከ 0 ወደ PRO".

ምንጭ: hab.com