12টি জাভাস্ক্রিপ্ট কৌশল যা বেশিরভাগ টিউটোরিয়াল মিস করে

আমি যখন জাভাস্ক্রিপ্ট শেখা শুরু করি, তখন প্রথম কাজটি করেছিলাম কৌশলগুলির একটি তালিকা তৈরি করা যা আমাকে সময় বাঁচাতে সাহায্য করেছিল। আমি সেগুলিকে অন্যান্য প্রোগ্রামারদের কাছ থেকে, বিভিন্ন সাইটে এবং ম্যানুয়ালগুলিতে দেখেছি৷

এই নিবন্ধে, আমি আপনাকে আপনার জাভাস্ক্রিপ্ট কোড উন্নত এবং গতি বাড়ানোর 12টি দুর্দান্ত উপায় দেখাব। বেশিরভাগ ক্ষেত্রেই তারা সর্বজনীন।

আমরা মনে করিয়ে দিচ্ছি: "Habr"-এর সকল পাঠকদের জন্য - "Habr" প্রচারমূলক কোড ব্যবহার করে যেকোনো Skillbox কোর্সে নথিভুক্ত করার সময় 10 রুবেল ছাড়।

Skillbox সুপারিশ করে: ব্যবহারিক কোর্স "মোবাইল ডেভেলপার প্রো".

অনন্য মান ফিল্টারিং

অ্যারে

সেট অবজেক্ট টাইপটি 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);
}

যাইহোক, এই সিনট্যাক্সের সাথে, ফর লুপ বারবার প্রতিটি পুনরাবৃত্তির অ্যারের দৈর্ঘ্য পরীক্ষা করে।

কখনও কখনও এটি দরকারী হতে পারে, তবে বেশিরভাগ ক্ষেত্রে এটি অ্যারের দৈর্ঘ্য ক্যাশে করা আরও দক্ষ, যার জন্য এটিতে একটি অ্যাক্সেসের প্রয়োজন হবে। আমরা একটি দৈর্ঘ্য ভেরিয়েবল সংজ্ঞায়িত করে এটি করতে পারি যেখানে আমরা পরিবর্তনশীল 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 সঠিক টাইপ চেক করতে 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');

আমরা && ব্যবহার করতে উপরের কোডটি পরিবর্তন করতে পারি না। 'Fetching Data' && this.state.data অপারেটর এই.state.data ফেরত দেবে তা অনির্ধারিত হোক বা না হোক।

ঐচ্ছিক চেইন

গাছের কাঠামোর গভীরে একটি সম্পত্তি ফেরত দেওয়ার চেষ্টা করার সময় কেউ ঐচ্ছিক চেইনিং ব্যবহার করার পরামর্শ দিতে পারে। তাহলে প্রশ্নবোধক চিহ্ন? একটি সম্পত্তি পুনরুদ্ধার করতে ব্যবহার করা যেতে পারে শুধুমাত্র যদি এটি শূন্য না হয়।

উদাহরণস্বরূপ, আমরা this.state.data?...() পেতে উপরের উদাহরণটি রিফ্যাক্টর করতে পারি। অর্থাৎ, মানটি শূন্য না হলেই ডেটা ফেরত দেওয়া হয়।

অথবা, যদি রাজ্য সংজ্ঞায়িত করা হয় বা না হয় তা গুরুত্বপূর্ণ, আমরা এই.state?.ডেটা ফেরত দিতে পারি।

বুলিয়ানে রূপান্তর করুন

টাইপ রূপান্তর

সাধারণ বুলিয়ান ফাংশন সত্য এবং মিথ্যা ছাড়াও, জাভাস্ক্রিপ্ট অন্যান্য সমস্ত মানকে সত্য বা মিথ্যা হিসাবে বিবেচনা করে।

অন্যথায় উল্লেখ না করা পর্যন্ত, জাভাস্ক্রিপ্টের সমস্ত মান সত্য, 0, "", নাল, অনির্ধারিত, NaN এবং অবশ্যই মিথ্যা। পরেরটি মিথ্যা।

অপারেটর ব্যবহার করে আমরা সহজেই দুটির মধ্যে সুইচ করতে পারি, যা টাইপটিকে বুলিয়ানে রূপান্তর করে।

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

এটিকে ^ চিহ্নের সাথে বিভ্রান্ত করা উচিত নয়, যা সাধারণত ব্যাখ্যার জন্য ব্যবহৃত হয়। কিন্তু জাভাস্ক্রিপ্টে এটি XOR অপারেটর।

ES7 এর আগে, ** শর্টকাটটি কেবলমাত্র বিটওয়াইজ বাম শিফট অপারেটর ব্যবহার করে বেস 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 তীরচিহ্নগুলি ক্লাস পদ্ধতিতে ব্যবহার করা যেতে পারে এবং বাইন্ডিং নিহিত। এর মানে আপনি 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]

একটি অ্যারের শেষ মান(গুলি) মুদ্রণ করা হচ্ছে

অ্যারে
এই কৌশলটির জন্য স্লাইস() পদ্ধতি ব্যবহার করা প্রয়োজন।

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 ফর্ম্যাট করতে সাহায্য করে?

স্ট্রিংফাই() পদ্ধতিতে দুটি ঐচ্ছিক পরামিতি লাগে: একটি প্রতিস্থাপনকারী ফাংশন, যা প্রদর্শিত JSON ফিল্টার করতে ব্যবহার করা যেতে পারে এবং একটি স্থান মান।

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

এই সব, আমি আশা করি যে এই সব কৌশল দরকারী ছিল. আপনি কি কৌশল জানেন? মন্তব্যে তাদের লিখুন.

Skillbox সুপারিশ করে:

• দুই বছরের ব্যবহারিক কোর্স "আমি একজন প্রো ওয়েব ডেভেলপার".
• অনলাইন কোর্স "0 থেকে C# বিকাশকারী".
• ব্যবহারিক বছরের কোর্স "0 থেকে PRO পর্যন্ত পিএইচপি বিকাশকারী".

উত্স: www.habr.com