کانال تلگرام

متدهایی از جاوا اسکریپت که هر مبتدی و یا حرفه ای باید از آنها استفاده کند؟

تاریخ : ۱۱ آبان ۱۳۹۸
نویسنده : امیر حسین نصر
دسته بندی ها : جاوا اسکریپت

JavaScript زبانی است که نیازی به معرفی ندارد. با 69٪ جمعیت توانمند توسعه دهنده كه از این زبان در زندگی روزمره خود استفاده می كنند ، میتوانیم بگوییم جاوا اسکریپت یكی از محبوب ترین زبان های برنامه نویسی است.

methodjavascript

طبق نظرسنجی State of Developer Ecosystem 2019 که توسط JetBrains انجام شد ، جاوا اسکریپت و چارچوبهای آن در رده های برتر نظرسنجی قرار دارند. اگرچه ES7 یا ECMAScript 2016 از رده خارج شده است، اما اکثریت توسعه دهندگان هنوز هنگام نوشتن کد از ES6 یا ES5 استفاده می کنند. در این مقاله ، ما به برخی از مفیدترین متدهای JS موجود در نسخه ES 2016 می پردازیم.

آرایه ها

آرایه ها یکی از پرکاربردترین نوع داده ها در جاوا اسکریپت هستند و خوشبختانه ما متدهای بسیار مناسبی را برای انجام هرگونه عملیات در آرایه ها داریم.

متد ()find

چطور میتوان فهمید که آیا مقدار خاصی در یک مجموعه خاص وجود دارد یا نه، این کار یکی از اساسی ترین عملیاتی است که تقریباً در هر حالت باید روی یک آرایه انجام دهیم. متد find یک روش بسیار کوتاه و فوق العاده است که این کار را برای شما در جاوااسکریپت انجام می دهد ، با استفاده از این متد از نوشتن حلقه ها برای این کار معاف میشوید.

const numbers = [1, 2, 3, 4, 10];
numbers.find( x => x === 4 ); // returns 4
numbers.find( x => x > 5 ); // returns 10



const itemPresent = numbers.find( x => x === 4 );
return itemPresent ? true : false;

این متد در عبارات شرطی بسیار مفید است جایی که بخواهیم در صورت وجود مقداری در آرایه کاری انجام دهیم. اگر مقدار 4 در آرایه آورده شده در مثال بالا وجود داشته باشد ، مقدار بازگشتی در خط 8 برابر با true خواهد بود. همین کار را میتوانید بر روی اشیا نیز انجام دهید :

const people = [ 
{ name: 'test1', id: 1 , email: 'test1@test.com'},
{ name: 'test2', id: 2 , email: 'test2@test.com' },
{ name: 'test3', id: 3 , email: 'test3@test.com'},
{ name: 'test4', id: 4 , email: 'test3@test.com'}
];

const person2 = people.find( person => person.id === 2 ); 
console.log(person2); // { name: "test2", id: 2, email: "test2@test.com"}

متد ()findIndex

کاری که این متد برای شما انجام میدهد این است که در صورتی که مقدار مشخص شده در آرایه وجود داشته باشد، مقدار index آن بازگردانده خواهد شد، در غیر این صورت مقدار -1 برگشت میشود.

const numbers = [1, 2, 3, 4, 10];
numbers.findIndex( x => x === 4 ); // returns 3
numbers.find( x => x === 15);     // returns -1


نکته : متد های ()find و ()findIndex اولین عنصر یا موقعیت مقدار مشخص شده را برمیگردانند.

متد ()filter

این متد آرایه ای جدید با مقادیری را به شما میدهد که شرایط یا آزمون داده شده را برآورده می کند.

const numbers = [1, 2, 3, 4, 10];
const evenNumbers = numbers.filter( x => x % 2 === 0 ); 
console.log(evenNumbers); // returns [2, 4, 10]

همین متد با آرایه ای از اشیاء نیز میتواند به صورت زیر کار کند.

const items = [ 
{ name: 'item1', id: 1 , price: 200 },
{ name: 'test2', id: 2 , price: 300 },
{ name: 'test3', id: 3 , price: 400 },
{ name: 'test4', id: 4 , price: 500 }
];

const filteredItems = items.filter( item => item.price > 300 ); 
console.log(filteredItems); 

/* Output
[
  {
    "name": "test3",
    "id": 3,
    "price": 400
  },
  {
    "name": "test4",
    "id": 4,
    "price": 500
  }
] 
*/

متد ()includes

متد ()include پس از اینکه بررسی کرد، آرایه مورد نظر شامل عنصر مشخص شده هست یا نه، مقادیر true و یا false را برمیگرداند.

const cars = ['BMW', 'Toyota', 'Tesla', 'Audi'];
console.log(cars.includes('Toyota'));  // true
console.log(cars.includes('mercedes')); // false

عملگر گسترش

عملگر گسترش یک عملگر کاربری است که برای چندین منظور استفاده می شود برای مثال کپی کردن یک آرایه یا به هم پیوستن دو آرایه.

const cars = ['BMW', 'Toyota', 'Tesla', 'Audi'];
let newCarsArray = [...cars]; 
console.log(newCarsArray); 

// ['BMW', 'Toyota', 'Tesla', 'Audi']

const array1 = [1,2,3]; 
const array2 = [4,5];
const array3 = [...arr1,...arr2];
console.log(array3); 
// [ 1, 2, 3, 4, 5 ]

رشته ها

اکنون اجازه دهید نگاهی به برخی از متداول ترین متد های رشته ای موجود در جاوا اسکریپت بیندازیم. نکته مهمی که باید در اینجا ذکر شود این است که همه این متد ها به بزرگ یا کوچک بودن حروف حساس هستند، بنابراین در استفاده از چنین سناریوهایی احتیاط کنید.

متد ()startsWith

بله درست حدس زده اید این متد به شما می گوید که آیا رشته ای با یک زیر رشته مشخص شروع میشود و یا خیر.

const str = 'Hello world, welcome to the javascript.';
console.log(str.startsWith('Hello')); // true
console.log(str.startsWith('Help'));  // false

متد ()endsWith

بدیهی است که در مقابل متد توضیح داده شده در بالا متد endsWith را نیز داشته باشیم. در این متد اگر رشته ای با یک زیر رشته خاص خاتمه یابد مقدار true برگردانده میشود.

const str = 'Hello world, welcome to the javascript.';
console.log(str.endsWith('javascript.')); // true
console.log(str.endsWith('hello'));       // false

متد ()includes

اگر رشته ای شامل یک زیر رشته مشخص باشد، بررسی این کار توسط متد includes انجام میشود. مقدار بازگشتی این متد مقدار true و یا false خواهد بود.

var str = "Hello world, welcome to the universe.";
console.log(str.includes("world")); // true
console.log(str.includes("test"));  // false

اشیا

در جاوا اسکریپت، اشیاء پادشاه هستند. اگر اشیاء را می فهمید ، جاوا اسکریپت را هم می فهمید. همه چیز در JS می تواند به عنوان یک شیء در نظر گرفته شود. اما در این مورد، ما درباره متدهایی صحبت خواهیم کرد که روی اشیا به کار برده میشوند.

ایجاد و کپی کردن اشیا

از متد ()Object.assign می توان برای کپی کردن تمام مقادیر قابل شمارش مشخصه های یک یا چند شی استفاده کرد.

const dest1 = { a: 1};
const source = { b: 2, c: 3};
Object.assign(dest,source);
console.log(dest); // {a: 1, b: 2, c: 3}



const dest2 = { aa: 1};
const source1 = { bb: 2, cc: 3};
const source2 = { dd: 4, ee: 5};
Object.assign(dest2, source1,source2);
console.log(dest2);  // {aa: 1, bb: 2, cc: 3, dd: 4, ee: 5}

از این متد همچنین می توان برای کلون کردن یک شی موجود در شی جدید استفاده کرد.

const original = { a: 1};
const copyObject = Object.assign({},original);
console.log(copyObject); // { a: 1};

اگر با اشیاء تو در تو درگیر هستید ، باید توجه داشته باشید که ()Object.assign فقط یک کپی کم عمق ایجاد می کند  که خصوصیات سطح بالا را کپی می کند ، اما شیء تو در تو بین شی اصلی و شیء کپی شده مشترک است ، یعنی ارجاعی به شی اصلی کپی میشود. یكی از سریعترین راهها برای رفع این نقص در JS ، استفاده از JSON است.

let source = 
{ 
  a: 1,
  b: { 
    c: 2,
  },
};
let destObj = JSON.parse(JSON.stringify(obj));

مثال بالا یک کپی از شی اصلی را با تمام خصوصیات تو در تو (البته به جز متد ها) را به ما می دهد و این نسخه را بدون مراجعه به شی اصلی ایجاد می کند. بنابراین هرگونه تغییر در شیء جدید در Object اصلی منعکس نمی شود.

نکته پایانی : برخی از این متدها ممکن است در مرورگرهای قدیمی مانند IE کار نکنند. پس در زمان استفاده از این متد ها سازگاری مرورگر های مختلف را برای آنها بررسی کنید.

#متدهای_جاوااسکریپت
۰ نظر

مقالات پیشنهادی

مشاهده همه مقالات
ثبت دیدگاه

برای ارسال دیدگاه لازم است ابتدا وارد سایت شوید