فرقي نمي نمايد كه شما جديد به دنياي جاوا اسكريپت وارداتي باشيد طراحي سايت در مشهد يا اين كه مدتها از آن به كار گيري كرده باشيد، خصوصيت هاي متعددي به جاوا اسكريپت افزوده گرديده كه شما بايستي آنهارا بياموزيد. در اينجا مهم‌ترين تغييرات و امكان هايي را كه در چندين سال اخير به جاوا اسكريپت ذيل تيتر خصوصيت هاي 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 اضافه گرديده گويش جاوا اسكريپت بيشتراز پيش بي نياز گرديده و تايپ كردن كد جاوا اسكريپت سهل خيس و شادي بخش خيس شده‌است. با تمرين و به كارگيري از امكان هاي نو اين لهجه كدهايي به مراتب زيباتر، كوتاه خيس و با قابليت و امكان مراقبت و گسترش فراتر خواهيد داشت
برچسب:
طراحي سايت در مشهد،
ادامه مطلب
بازدید:
