JavaScript-ის 12 ხრიკი, რომელსაც გაკვეთილების უმეტესობა გამოტოვებს

როდესაც JavaScript-ის სწავლა დავიწყე, პირველი რაც გავაკეთე იყო ხრიკების სია, რომლებიც დამეხმარა დროის დაზოგვაში. მე შევნიშნე ისინი სხვა პროგრამისტებისგან, სხვადასხვა საიტებზე და სახელმძღვანელოებში.

ამ სტატიაში მე გაჩვენებთ 12 შესანიშნავ გზას თქვენი JavaScript კოდის გასაუმჯობესებლად და დაჩქარებისთვის. უმეტეს შემთხვევაში, ისინი უნივერსალურია.

შეგახსენებთ: "Habr"-ის ყველა მკითხველისთვის - ფასდაკლება 10 რუბლიდან Skillbox-ის ნებისმიერ კურსზე ჩარიცხვისას "Habr" სარეკლამო კოდის გამოყენებით.

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 loop არაერთხელ ამოწმებს მასივის სიგრძეს ყოველი გამეორება.

ზოგჯერ ეს შეიძლება იყოს სასარგებლო, მაგრამ უმეტეს შემთხვევაში უფრო ეფექტურია მასივის სიგრძის ქეშირება, რაც მოითხოვს მასზე ერთ წვდომას. ჩვენ შეგვიძლია ამის გაკეთება სიგრძის ცვლადის განსაზღვრით, სადაც განვსაზღვრავთ 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-ზე ნაკლები";

მაგრამ ზოგჯერ სამიანი ოპერატორიც კი უფრო რთულია, ვიდრე საჭიროა. ჩვენ შეგვიძლია გამოვიყენოთ '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?..(). ანუ, მონაცემები ბრუნდება მხოლოდ იმ შემთხვევაში, თუ მნიშვნელობა არ არის null.

ან, თუ მნიშვნელობა აქვს განსაზღვრულია თუ არა სახელმწიფო, ჩვენ შეგვიძლია დავაბრუნოთ ეს.state?.data.

გადაიყვანეთ ლოგიკურად

ტიპის კონვერტაცია

გარდა ნორმალური ლოგიკური ფუნქციებისა, true და false, JavaScript ასევე განიხილავს ყველა სხვა მნიშვნელობას, როგორც სიმართლეს ან ყალბს.

სანამ სხვაგვარად არ იქნება აღნიშნული, JavaScript-ში ყველა მნიშვნელობა არის სიმართლე, გარდა 0, "", null, განუსაზღვრელი, 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

შეიძლება იყოს სიტუაციები, როდესაც + იქნება ინტერპრეტირებული, როგორც შეერთების ოპერატორი და არა დამატების ოპერატორი. ამის თავიდან ასაცილებლად, თქვენ უნდა გამოიყენოთ ტილდები: ~~. ეს ოპერატორი უდრის -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 აშორებს ყველაფერს ათწილადის გამყოფის შემდეგ, ათვლის ათწილადს მთელ რიცხვამდე.

თქვენ შეგიძლიათ მიიღოთ იგივე დამრგვალების ეფექტი ~~-ის გამოყენებით. მთელ რიცხვად იძულებითი გადაყვანის შემდეგ, მნიშვნელობა უცვლელი რჩება.

ბოლო ნომრების ამოღება

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 ისრის აღნიშვნები შეიძლება გამოყენებულ იქნას კლასის მეთოდებში და იგულისხმება სავალდებულო. ეს ნიშნავს, რომ შეგიძლიათ დაემშვიდობოთ განმეორებით გამონათქვამებს, როგორიცაა this.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-მდე".

წყარო: www.habr.com