فرقی نمی نماید که شما جدید به دنیای جاوا اسکریپت وارداتی باشید طراحی سایت در مشهد یا این که مدتها از آن به کار گیری کرده باشید، خصوصیت های متعددی به جاوا اسکریپت افزوده گردیده که شما بایستی آنهارا بیاموزید. در اینجا مهم‌ترین تغییرات و امکان هایی را که در چندین سال اخیر به جاوا اسکریپت ذیل تیتر خصوصیت های ES6 اضافه گردیده اند، با هم مرور میکنیم.
1. عملگر Spread (گسترش)
این عملگر یا این که اپراتور با سه نقطه یعنی ... نمایش داده میشود و هنگامی پیش از یک آرایه یا این که آبجکت قرار بگیرد، آن را به لیستی از مورد ها که با کاما از هم مستقل گردیده اند تبدیل می نماید. وسیع ترین کاربردهای این عملگر ترکیب دو آرایه یا این که دو آبجکت در هم و نیز پاس دادن یک آرایه تحت عنوان ورودی یک تابع مشتمل بر یکسری آرگومان میباشد:
//مخلوط دو آرایه
let arr1 = [ 'one', 'two'];
let arr2= [...arr1 , 'three', 'four']; // ["one", "two", "three", "four"]
//ترکیب خاصیت دو آبجکت
const person= {
name: 'Ali',
age:25
}
const personWithEmail = {
...person,
email: '[email protected]'
}
//به کار گیری در فراخوانی توابع
function dev(x, y, z) { }
var args = [0, 1, 2]
dev(...args)
2. پارامتر Rest (مانده)
پارامتر مانده یا این که Rest parameter به معنای گردآوری باقی مانده پارامترها در یک آرایه میباشد. در اینجا برعکس عملگر توسعه (Spread) دنبال گردآوری پارامتر ها در یک آرایه هستیم:
const movie = ["Abad va yek rooz", 8.3, 2016, "Payman Maadi", "Navid Mohammadzadeh","Parinaz Izadyar" ];
const [title, rating, year, ...actors] = movie;
console.log(title, rating, year, actors);
همان گونه که مراعات میکنید سه گزینه پایان آرایه movie در نمونه بالا در یک آرایه با اسم actors گردآوری گردیده اند. شما میتوانید به نیکی از پارامتر rest در ورودی توابع به کارگیری نمائید. اعتنا فرمایید که پارامتر rest مدام می بایست نهایی آرگومان ورودی یک تابع باشد. به این ترتیب کد پایین غلط میباشد:
function myFunction(arg1, ...rest, arg2) {
// error
}
در تحت یک نمونه دیگر از پارامتر مانده یا این که rest را میبینید:
function greeting(x, y, ...z) {
console.log(x, ' ', y); // salam ali
console.log(z); // ["rooz", "be", "kheir", "!"]
console.log(z[0]); // rooz
console.log(z.length); // 4
}
greeting("salam", "ali", "rooz", "be", "kheir", "!")
3. interpolation و فن های یکسری خطی
به تابع ذیل توجه فرمائید:
function getProductDescription = (name, price, description) {
return "Selected product is: n" +
" name: " + name + "n" +
" price: " + price + "n" +
" description: " + description
}
همانگونه که میبینید برای ساخت یک حرفه تعدادی خطی که در آن از متغیرهایی مستعمل شما بدون چاره می باشید از تعداد متعددی کاراکتر + و " استعمال نمایید و متغیرها را با بقیه فن ها concat فرمایید. برای رفع این اختلال و به کار گیری شل خیس متغیرها داخل یک حرفه دو عملگر بک تیک یعنی ` و {}$ ساخت گردیده اند که عملگرهای interpolation میباشند. تابع بالا را با تکنیک interpolation ویرایش میکنیم:
function getProductDescription = (name, price, description) {
return `Selected product is n :
name: ${name} n
price: ${price} n
description: ${description}`
}
توجه نمائید که چه طور حرفه ی دربردارنده متغیرها و نوشته های اثبات را میان دو بک تیک ` قرار داده ایم. به یاری interpolation کدهای شما خواناتر گردیده و از وسعت concat های مازاد معدود شود.
4. مختصرنویسی خاصیت آبجکت
در ES5 برای تعریف‌و‌تمجید خاصیت یک آبجکت بایستی از عملگر : دربین کلید و مقدار یک خصیصه استعمال می کردیم:
function createCoordinate(x, y) {
return {
x: x,
y: y
}
}
ولی در ES6 ، در شرایطی که که سمت چپ و راست عملکر : در یک خصیصه آبجکت یکی‌از باشد می توانیم به طور خلاصه به صورت تحت فعالیت کنیم:
function createCoordinate(x, y) {
return {
x,
y
}
}
5. خلاصه سازی تعریف و تمجید متد تحت عنوان خصیصه (property)
در جاوا اسکریپت خاصیت یا این که property های یک شیء میتوانند به یک متد اشاره نمایند. در ES5 برای تعریف و تمجید این خاصیت به صورت تحت کار می کردیم:
const math = {
add: function (a,b) { return a + b; },
sub: function (a,b) { return a - b; },
multiply: function (a,b) { return a * b; }
}
ولی در ES6 نیازی به تایپ کردن کلمه و واژه function وجود ندارد و خواهیم توانست به صورت ذیل کار کنیم:
const math = {
add(a,b) { return a + b; },
sub(a,b) { return a - b; },
multiply(a,b) { return a * b; }
}
6. Destructuring یا این که تخریب
از این خصوصیت می اقتدار برای استخراج الِمان های ما یحتاج از یک آرایه یا این که آبجکت و قرار دادن آنان در متغیرها استفاده نمود. به نمونه پایین اعتنا فرمایید:
const product = { name: 'Electric Circuits', type: 'book', price: 50,000};
const {name, type, price} = product ;
console.log(name, type, price);
در نمونه بالا آرم { } در خط دوم برای تخریب آبجکت product به عنصرها نخستین مستعمل میباشد. شما برای متغیرهای تازه میتوانید از مقادیر پیشفرض یا این که اسم مستعار (alias) هم استعمال فرمایید. مانند کد پایین:
const person = {
name: 'Hamid',
country: 'Iran'
};
const { name: fullname, country: place, age: years = 25 } = person;
console.log(`I am ${fullname} from ${place} and I am ${years} years old.`);
در نمونه بالا آبجکت person به امداد خصوصیت destructuring، تخریب شده‌است. متغیر name با اسم مستعار fullname و متغیر country با اسم مستعار place قابل دسترسی می باشند. نکته جذاب متغیر age با اسم مستعار years میباشد و زیرا آبجکت perosn این prop را ندارد، با مقدار پیشفرض 25 لبریز شده‌است.
برای تخریب آبجکت با خاصیت تو در تو و استخراج متغیرها نیز به طرز پایین فعالیت میکنیم:
const order= {
date: '1398/07/22',
user: 'ali alavi',
product: {
price: 12,000,000,
name:'Laptop'
}
};
const { user, product: {name, count = 1} } = order;
console.log(`${count} order with product name ${name} order has been placed.`);
به طرز دسترسی به خواص name از product در نمونه بالا اعتنا نمائید.
از این خصوصیت در آرایه ها هم می اقتدار بهره برد:
// old approach
const array = [1,2,3,4,5,6];
const a = array[0];
const c = array[2];
// array destructuring
const [x, ,y, ...others] = arr;
// x= 1
// y= 3
// others = [4,5,6]
در نمونه بالا توجه فرمائید که بعداز x، یک مکان خالی قرار داده ایم به این معنی که به اندیس 1 نیازی نداریم و y با اندیس 2 یعنی مقدار 3 لبریز میشود و سایر مقادیر به یاری پارامتر rest که در صدر با آن اشاره کرده بودیم در متغیر others ذخیره می‌شوند.
7. Arrow function
تا قبل از این توابع را در جاوا اسکپریپت صرفا با syntaxt پایین می دیدیم:
function doSomething (arg) {
// function logic here
}
در ES6 برای تایپ کردن تابع بالا قادر خواهیم بود از syntaxt پایین هم به کارگیری کنیم:
const doSomething = (arg) => {
// function logic here
}
این نوع از تریف توابع را arrow function میگویند. در صورتی منطق داخل تابع شما کوتاه بوده و تابع شما یه خرده را بر می گرداند میتوانید به صورت ذیل یک تابع تک خطی تمجید فرمایید:
//new arrow function syntax
const add = (a,b) => a + b
//old approach
function add (a,b) {
return a+b;
}
8. متدهای نو عمل با آرایه در ES6
در ES6 گروه ای از متدهای موثر فعالیت با آرایه ارائه شده‌است که فعالیت با آرایه، به ویژه یافت کردن یک یا این که چندین گزینه در آرایه را بسیار معمولی می نماید. با تمرکز به نمونه تحت و کامنت های بالای آن به راحتی این متدها را یاد خواهید گرفت:
const arr= [{ id: 1, name: 'Mohsen' }, { id: 2,name:'Ali',isActive:true }];
//برای یافت کردن یک مورد براساس یک شرط
arr.find(item => item.id === 2) // { id: 2,name:'Ali',isActive:true }
//برای یافت کردن ایندکس یک گزینه براساس یک شرط
arr.findIndex(item => item.id === 1) // 0
//برای نظارت کردن حضور یا این که عدم حضور یک آیت براساس یک شرط
arr.some(item => item.isActive) // true
توده بندی
به امداد مشخصات و امکان هایی که در ES6 اضافه گردیده گویش جاوا اسکریپت بیشتراز پیش بی نیاز گردیده و تایپ کردن کد جاوا اسکریپت سهل خیس و شادی بخش خیس شده‌است. با تمرین و به کارگیری از امکان های نو این لهجه کدهایی به مراتب زیباتر، کوتاه خیس و با قابلیت و امکان مراقبت و گسترش فراتر خواهید داشت
برچسب:
طراحی سایت در مشهد،
ادامه مطلب
بازدید:
