آموزش جاوااسکریپت استاندارد ECMA6

آشنایی با استاندارد JavaScript ECMA6

اکمااسکریپت چیست؟

اکما اسکریپن یک استاندارد برای زبان‌های اسکریپتی می‌باشد که بر مبنای جاوا اسکریپت است که برای سمت کابری استفاده می‌شود. عزیزانی که علاقه‌مند به یادگیری این استاندارد هستند توجه کنند که بایستی با زبان جاوااسکریپت آشنایی داشته باشند. برای اطلاعات بیشتر در مورد ECMAscript به صفحه‌ی ویکی پدیای آن مراجعه کنید.

متغییر ها  و پارامترها :

Let :

به کمک let  می تونیم متغییرها را تعریف کنیم ، خوب قبلا هم می تونستیم این کار انجام بدیم اون هم با دستور var   ، پس چه نیازی به let هست ؟؟؟

دستور var  محدودیت هایی دشت ، var فقط دو اسکوپ ساپورت می کنه .

1-گلوبال اسکوپ

2- فانکشن اسکوپ

اما بلاک اسکوپ ساپورت نمی کنه

ecma6pic1

در تصویر بالا قرمز گلوبال اسکوپ ، فانکشن اسکوپ ، بلاک اسکوپ را می بینید.

همان طور که می بینید x با var تعریف شده است و var، x را در فانکشن اسکوپ تعریف کرده ، به همین دلیل return  به راحتی خارج از if به x دسترسی داره ، حالا اگر ما بخواهیم x به صورت بلاک اسکوپ تعریف بشه باید به جای var از let  استفاده کنیم ، در این حالت return  دیگه به x دسترسی نداره و باید return را به درون  if ببریم تا بتوانه از x استفاده کنه.

مثال : به کد زیر دقت کنید:

var salam = function (flag) {

 if (flag) {
 var x = 3;
 }
 return x;

};
document.write(salam(true));

در کد بالا وقتی فلگ را true قرار دهیم عدد 3 چاپ خواهد شد ، اگر فلگ را false قرار دهم ، undefined  چاپ می شود .  خوب حالا بیاید از let استفاده کنیم .

var salam = function (flag) {

 if (flag) {
 let x = 3;
 }
 return x;

};
document.write(salam(false));

در این حالت این پیغام در کنسول چاپ می شه:

ecma6pic2

X در بلاک اسکوپ تعریف شده و خارج از بلاک if  وجود نداره پس چه فلگ را false قرار دهید  چه true با همین پیام روبرو خواهید شد ، در نتیجه return باید به درون بلاک if  بره به این شکل

var salam = function (flag) {

 if (flag) {
 let x = 3;
 return x;
 }
 
};
document.write(salam(true));

نتیجه اجرای کد بالا چاپ شدن عدد 3  خواهد بود .

Const  :

از const برای ایجاد متغییرهایی استفاده می کنیم که می خواهیم مقدار آنها ثابت باشد و هیچ وقت تغییر نکند.

const MY_NUMBER = 102;
MY_NUMBER = 22 ;

document.write(MY_NUMBER);

اگر کد بالا را اجرا کنید با خطای Assignment to constant variable. روبه رو خواهید شد ، نمی توانید به MY_NUMBER مقدار جدیدی بدهید.

Destructuring  :

ممکنه destructoring  را در زبان های مانند پایتون دیده باشید ، destructuring به شما این امکان میده تا طبق پترن خاصی به متغییرها داده هایی را بدهید ، مثال :

let x = 3, y = 103;

[x, y] = [y, x];

alert(x + " " + y);

در مثال بالا من متغییری به نام x و y ساختم ، دقت کنید که در خط و سط من آرایه جدید نساختم بلکه فقط دارم مقدار y را به x و x را به y می دهم . دقت کنید که چیزی که درسمت راست این مقداردهی می بینید یک آرایه است اما چیزی که در سمت چپ وجود دارد آرایه نیست  و آن را به این دلیل داخل [] قرار دارم چون دارم یک آرایه را destructuring  می کنم (تخریب می کنم)

بیاید چند نمونه دیگه ببینیم :

var desExample = function () {
 return [3, 2];
};

let [x,y] = desExample();


alert(x + " " + y);

در مثال بالا مقادیر را از فانکشن می گیرم و مقدار دهی می کنم .

اگر آرایه ما 3 مقدار داشته باشد چه ؟

var desExample = function () {
 return [7,3, 2];
};

let [,x,y] = desExample();


alert(x + " " + y);

در مثال بالا اگر بخواهم عدد 7 هم نمایش داده شود می توانم یک متغییر دیگر برای آن ایجاد کنم در غیر این صورت کافیست یک کاما بگذارم و برای 7 هیچ متغییری تعریف نکنم.

در مورد آبجکت ها به شکل عمل کنیم ؟

let darkoobweb = function () {

 return {
 firstName: "Pouria",
 lastName: "Parhami",
 address: "Mashhad"
 };
};
let {
 firstName: firstName,
 address:address
} = darkoobweb();

alert(firstName);

به یاد داشته باشید ، آنچه سمت راست کلون است ، متغییریست که من تعریف کرده ام می توانید نام آن را هر چه که می خواهید بگذارید ، سمت چپ پراپرتی آبجکت من است.

let darkoobweb = function () {

 return {
 firstName: "Pouria",
 lastName: "Parhami",
 address: "Mashhad"
 };
};
let {
 firstName: hello,
 address:address
} = darkoobweb();

alert(hello);

و اگر کمی پیچیده تر باشد مانند شکل زیر عمل می کنیم .

let darkoobweb = function () {

 return {
 firstName: "Pouria",
 lastName: "Parhami",
 yourAddress: {
 address: "Mashhad"
 }
 };
};
let {
 firstName: hello,
 yourAddress:{address:address}
} = darkoobweb();

alert(hello + " " + address);

اگر متغییرشما هم نام با پراپرتی آبجکت شما است ، می توانید به این شکل کد را بنویسید، یک شرت کد.

let darkoobweb = function () {

 return {
 firstName: "Pouria",
 lastName: "Parhami",
 yourAddress: {
 address: "Mashhad"
 }
 };
};
let {
 firstName,
 yourAddress:{address}
} = darkoobweb();

alert(firstName + " " + address);

مقادیر پیشفرض :

حتما فانکشنی داشته اید که باید به آن مقداری پاس داده شود ، اما این کار صورت نمی گرفته و فانکشن شما undefined بر می گردانده ، قبلا به این شکل عمل می کردیم :

var darkoobweb = function (name) {
 name = name || "Pouria";
 return name;

};

alert(darkoobweb());

در ECMA6 برای رفع این مشکل به این شکل عمل می کنیم .

 

var darkoobweb = function (name="Pouria") {

return name;

};

alert(darkoobweb());

Rest Parameters :

حتما تا به حال چنین کدی نوشته اید :

let sum = function () {
 
 let result = 0;
 for(let i=0;i<arguments.length;i++){
 result +=arguments[i];
 }
 return result;
};

let result = sum(1,1,3);
alert(result);

فانکشنی برای جمع اعداد اما نمی دانیم چند عدد به ما داده خواهد شد ، بهتر است به جای استفاده از arguments از rest parameters استفاده کنیم ، arguments در واقع چیزی شبیه آرایه است اما یک آرایه نسیت.

 

let darkoobweb = function (name, ...numbers) {

let result = 0;
 numbers.forEach(function (n) {
 result += n;
 });
 return name + " " + result;

};
let result = darkoobweb("Pouria", 2, 2, 3);
alert(result);

همان طور که در کد بالا می بینید ، برای تعریف rest paramet ها کافیست … و یک نام برای آن بنویسیم.

Templates :

حتما به یاد دارید که برای اتصال رشته ها از علامت + استفاده می کردیم ، در ECMA6 روش دیگری نیز وجود دارد که می توان از آن در شرایط مختلف استفاده کرد.

let darkoobweb = function (name) {

return
Hello,${name}

; }; let result = darkoobweb(“Pouria”); alert(result);

در مثال بالا کلمه Hello با pouria به هم متصل می شوند ، یک مثال دیگر:

let category = "music";
let id =98;

let url = http://apiserver/{category}/${id}
;
alert(url);

مثالی دیگر :

let upper = function (string, ...values) {

let result = "";
for (var i = 0; i < string.length; i++) {
result += string[i];
if (i < values.length) {
result += values[i];
}
}
return result.toUpperCase();
};
var x = 1, y = 3, result = upper${x}+${y} is ${x + y}
;
alert(result);

در کد بالا string این خواهد بود strings =[“”,”+”,”is”,””]; و values = [1,3,4];
با استفاده از تمپلیت ها می توانید تگ های کاستمایز شده ای ایجاد کنید که در آینده به کمک شما بیان ،
مثل :

$a.{className}[href=~'//${domain}/']

برای دیدن مثال های بیشتر برای درک این مفهوم Template Literals را در گوگل سرچ کنید

کلاس :
در گذشته کلاس را به این شکل ایجاد می کردیم :

var Darkoobweb = function () {

};
Darkoobweb.prototype ={
myAddress:function () {
return "Mashhad";
}
};
var e = new Darkoobweb();
alert(e.myAddress());

اما در ECMA6 می توانیم از کلمه کلیدی class برای ایجاد کلاس استفاده کنیم:

class Pouria{
family(){
return "Parhami";
}
}
var myClass = new Pouria();
alert(myClass.family());

خوب بیاد برای کلاس پوریا یک فانکشن دیگر هم بنویسیم :

class Pouria {

family() {
return "Parhami";
}

work() {
return "Programer";
}
}
let myClass = new Pouria();
alert(The family is ${myClass.family()} and work is ${myClass.work()}
);

Constructor :

حتما می دانید کانستراکتور چیست ، در ECMA6 به این شکل از کانستراکتور استفاده می کنیم :

class Pouria {

constructor(name){
this.myName = name;
}

getName() {
return this.myName;
}

getWork() {
return "Programer";
}
}
let obj1 = new Pouria("Pouria");
let obj2 = new Pouria("Hooman");
alert(The obj1 name is ${obj1.getName()} and obj2 name is ${obj2.getName()}
);

getters and setters :

از گتر و ستر به این شکل استفاده می کنیم :

class Pouria {

constructor(name){
this.name = name;
}

get name() {
return this.myName;
}
set name(newName){
this.myName = newName;
}

getWork() {
return "Programer";
}
}
let obj1 = new Pouria("Pouria");
let obj2 = new Pouria("Hooman");

alert(The obj1 name is ${obj1.name} and obj2 name is ${obj2.name}`);

obj1.name = "Parastoo";
alert("Set new name "+obj1.name);

inheritace وراثت :

برای اینکه یک کلاس از کلاس دیگر ارث ببرد (inheritace)از extends استفاده می کنیم مانند کد زیر:

class Shakhs {

constructor(name) {
 this.name = name;
 }

get name() {
 return this.myName;
 }

set name(newName) {
 this.myName = newName;
 }

}
class Karmand extends Shakhs{
 kar() {
 return
${this.name} kar mikonad

;
}
}

let shakhs = new Shakhs(“Pouria”);
let karmand = new Karmand(“Hooman”);

alert(shakhs.name);
alert(karmand.name);
alert(karmand.kar());

super class :

برای استفاده از سوپر کلاس کافیست از super استفاده کنید مانند کد زیر:

class Karmand extends Shakhs {

constructor(name, magham) {

super(name);
 this.magham = magham;
 }

get magham() {
 return this.newMagham;
 }

set magham(newMagham) {
 this.newMagham = newMagham;
 }

kar() {
 return
${this.name} kar mikonad

;
}
}

let karmand = new Karmand(“Hooman”, “Modir”);

alert(karmand.name);
alert(karmand.magham);

override :

برای اورراید کردم متد کافیست به شکل زیر عکل کنید :

class Shakhs {

constructor(name) {
 this.name = name;
 }

get name() {
 return this.myName;
 }

set name(newName) {
 this.myName = newName;
 }

kar() {
 return "havij bi kar kast";
 }
}
class Karmand extends Shakhs {

constructor(name, magham) {

super(name);
 this.magham = magham;
 }

get magham() {
 return this.newMagham;
 }

set magham(newMagham) {
 this.newMagham = newMagham;
 }

kar() {
 return "man kar daram";
 }
}

let karmand = new Karmand("Hooman", "Modir");
let shakhs = new Shakhs("Havij");

alert(karmand.kar());
alert(shakhs.kar());

می بینید که متد کار کردن در شخص و جود دارد و کارمند آن را اورراید کرده است .

Arrow Functions :

Arrow function چیست ؟ با لامبدا در پایتون آشناهستید ؟ اArrow function شبیه همان است .
قبلا به این شکل یک فانکشن برای مجموع دو عدد می نوشتیم :

let majmu = function (x, y) {
 alert(x+y);
};

majmu(2,4);

حال می توانیم به این شکل بنویسیم :
let majmu = (x, y) =&amp;gt; x + y;

alert(majmu(5,2));

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

let zarb = x =&amp;gt; x * x;
alert(zarb(3));

اگر پارامتری نداشته باشیم :
let hichi =() =&amp;gt;4;
alert(hichi());

Iterables and iterators :

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

let sum = 0;
let numbers = [1, 2, 3, 4];
for (let i = 0; i &lt; numbers.length; i++) {
sum += numbers[i];
}
alert(sum);

sum = 0;
for (let i in numbers) {
sum += numbers[i];
}
alert(sum);

حال به این روش نیز می توانیم اعداد را جمع کنیم :

sum=0;
let iterator = numbers[Symbol.iterator]();
let next = iterator.next();
while (!next.done) {
sum += next.value;
next = iterator.next();
}

alert(sum);

روش بعدی استفاده از for of می باشد :
از for of زمانی استفاده می کنیم که فقط می خواهیم مقادیر را iterate کنیم ، نه کلید ها نه ایندکس فقط
مقادیر.

sum = 0;

for (let n of numbers) {

sum += n;

}
alert(sum);

برای درک بهتر این موضوع آرایه را یه [4,2,3,4] تغییر دهید و به حلقه for بالا console.log(n); را اضافه کنید ، حال اگر به کنسول نگاه کنید می بینید که 4,2,3,4 چاپ می شود نه 0,1,2,3 فکر کنم حالا بهتر متوجه شدید.

let sum = 0;
let numbers = [4, 2, 3, 4];
for (let n of numbers) {

sum += n;
console.log(n);

}
alert(sum);

چگونه خومان آبجکت iterator بسازیم ؟
بیاید ببینیم پست این عمل let iterator = new numbers(); let next = iterator.next(); چه چیزی قرار دارد من ابتدا کدی که کمی پیچیده است و نشونتون میدم بعدا کد ساده :

class Dustam {
constructor() {
this.dustha = [];
}

ezafeKardaneDust(...names) {
this.dustha = this.dustha.concat(names);
}

[Symbol.iterator]() {
return new ArrayIterator(this.dustha);
}
}
class ArrayIterator {
constructor(array) {
this.array = array;
this.index = 0;
}

next() {
var result = {value: undefined, done: true};
if (this.index &lt; this.array.length) {
result.value = this.array[this.index];
result.done = false;
this.index += 1;
}
return result;
}
}

let shomarande = 0;
let dustam = new Dustam();

dustam.ezafeKardaneDust("Hooman","Ahkan","Maryam","Negar");
for (let dustaneMan of dustam) {
shomarande += 1;
}

alert(shomarande);

خوب اما توضیح کد :
در ابتدا می بینید که کلاسی به نام Dustam دارم و این کلاس یک کالکشن از dustha را می گیره ، همچنین فانکشنی داریم که هروقت بخوایم می تونیم دوستانی را با استفاده از اون اضافه کنیم .
و برای تست من یک آبجکت از Dustam ساختم و به وسیله فانکشن ezafeKardaneDust تعدادی از دوستام و اضافه کردم و بعد از آن از حلقه for of برای بدست آوردن تعداد دوستام استفاده کردم
من به یک iterable function هم نیاز دارم و آن را با کلمه کلیدی [Symbol.iterator] ایجاد کردم درون آن باید فانکشن next استفاده شود و همچنین باید بفهمیم فلگ done در چه وضعیتی است خوب برای این کار من یک کلاس ساختم و در داخل [Symbole.iterator]قرار دادم ،و این کلاس را ریترن می کنم ، در داخل این کلاس آرایه را می گیریم و سپس فانکشن next را می نویسیم ، اولین باری که next صدا زده بشه باید اولین ایتم را از آرایه بردارد داخل آبجکت بزاره و به caller بده (درمورد caller بعد صحت خواهیم کرد) آبجکت باید پراپرتی Value و فلگ done را داشته باشد پس من اونو هم ساختم و سپس result را به ریترن کردم.

فانکشن Generators :

فانکشنی است که یک iterator تولید می کنه و همین طور در generator باید از کلمه کلیدی به نام yield استفاده کنید .
برای ساخت یک generator function از علامت * استفاده می کنیم سپس از yield برای فرستادن چندین values استفاده می کنیم.

let numbers = function*() {

yield 1;
yield 2;
yield 3;

};
let sum = 0;
let iterator = numbers();
let next = iterator.next();
while (!next.done) {
sum += next.value;
next = iterator.next();
}

alert(sum);

چیزی که yield را قابل توجه می کنه اینه که هر دفعه از yield استفاده میشه فانکشن مقدار جدید می سازه ، می تونیم مقادیر مختلفی را با yield برگردونیم چون آبجکت جنیریتور مثل یک کار خونه برای iterator عمل می کنه ، ابجکت iterator با دستور next به yield ها دسترسی پیدا می کنه .
وقتی اولین next اجرا می شه به اولین yield اشاره داریم ، درون حلقه next به yield بعدی اشاره می کنه و به همین ترتیب
من حتی می تونم برای generator پارامتر ورودی تعریف کنیم :

let numbers = function*(start, end) {

for (let i = start; i <= end; i++) {
yield i;
}
};
let sum = 0;
let iterator = numbers(1,5);
let next = iterator.next();
while (!next.done) {
sum += next.value;
next = iterator.next();
}

alert(sum);

حالا بیاید مثال مبحث قبلی را با استفاده از generator بنویسیم :

class Dustam {
 constructor() {
 this.dustha = [];
 }

 ezafeKardaneDust(...names) {
 this.dustha = this.dustha.concat(names);
 }

 *[Symbol.iterator]() {
 for(let e of this.dustha){
 console.log(e);
 yield e;
 }
 }
}


let shomarande = 0;
let dustam = new Dustam();

dustam.ezafeKardaneDust("Hooman", "Ahkan", "Maryam", "Negar");
for (let dustaneMan of dustam) {
 shomarande += 1;
}

alert(shomarande);

می بینید ، به همین راحتی ، حالا تعداد خط کدهای کمتری هم نوشتیم .
اگر بخواهم نتیجه را فیلتر کنم چطور؟ مثلا دوستانی که حرف اول اسم آنها با A شروع می شود؟

class Dustam {
constructor() {
this.dustha = [];
}

ezafeKardaneDust(...names) {
this.dustha = this.dustha.concat(names);
}

*[Symbol.iterator]() {
for (let e of this.dustha) {
console.log(e);
yield e;
}
}
}
let filter = function *(items, hastNist) {
for (let item of items) {
if (hastNist(item)) {
yield item;
}
}
};

let shomarande = 0;
let dustam = new Dustam();

dustam.ezafeKardaneDust("Hooman", "Ahkan", "Amirreza", "Negar");
for (let dustaneMan of filter(dustam, e =>e[0] == "A")) {
shomarande += 1;
}

alert(shomarande);

Comprehensions :

اگر با python آشنایی داشته باشید با این مفهوم هم آشنا هستید ، بیاد در مثال ببینیم :

let numbers = [];
for(let n of[1,2,3]){
numbers.push(n*n);
}
alert(numbers);

کد بالا بسیار آشناست و نتیجه آن 1,4,9 می شود ، حالا comprehension را ببینید:

var numbers = [for (n of [1, 2, 3])n * n];
alert(numbers);

نتیجه 1,4,9 خواهد بود.
بیاید در مثال دوستان از comprehension استفاده کنیم :

class Dustam {
constructor() {
this.dustha = [];
}

ezafeKardaneDust(...names) {
this.dustha = this.dustha.concat(names);
}

*[Symbol.iterator]() {
for (let e of this.dustha) {
console.log(e);
yield e;
}
}
}
let filter = function *(items, hastNist) {
yield*(for (item of items) if (hastNist(item))item);
};

let shomarande = 0;
let dustam = new Dustam();

dustam.ezafeKardaneDust("Hooman", "Ahkan", "Amirreza", "Negar");
for (let dustaneMan of filter(dustam, e =>e[0] == "A")) {
shomarande += 1;
}

alert(shomarande);

آبجکت ها در ECMA6 :

Number :

به کد و توضیحات دقت کنید :

var octal = 0o71; // adade Octal
var bin = 0b1101; // adade binery
var octNum = Number("0o71"); // reshte be octal
var binNum = Number("0b101"); // reshte be binery

در کد بالا می بینید که برای تعریف یک عدد اکتال از 0 وo و برای عدد باینری از 0 و b استفاده می کنیم .

عدد اینتیجر را باید به این شکل تشخیص دهید :

alert("integer ast ? "+Number.isInteger(1));
alert("integer ast ? "+Number.isInteger(1.0));
alert("integer ast ? "+Number.isInteger(1.5));

همان طور که خواهید دید 1.0 اینتیجر است اما 1.5 نیست.
وقتی از isNaN و isFinite استفاده می کنید مراقب باشید ،آنها در هنگام استفاده شدن با Number جواب های متفاوتی به شما نشان می دهند.

alert(isFinite("1"));
alert(Number.isFinite("1"));
alert("isNaN "+isNaN("NaN"));

Math :

دوستان عزیز پیشنهاد می کنم حتما در مورد آبجکت های ریاضیECMA6 خودتون هم تحقیق کنید
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math

تابع هذلولوی یا Hyperbolic function :

alert(Math.acosh(1));
alert(Math.asinh(0));
alert(Math.atanh(0));
alert(Math.cosh(0));
alert(Math.sinh(0));
alert(Math.tanh(0));

توابع متفرقه :

alert(Math.cbrt(27));
alert(Math.clz32(5));
alert(Math.log1p(35));
alert(Math.log10(100));
alert(Math.log2(32));
alert(Math.expm1(35));
alert(Math.hypot(3,4));
alert(Math.fround(2.888));

درکد بالا به ترتیب مکعب ریشه عدد ، تعداد صفر بیت در 32 بیتی باینری یک عدد ، تابع لگاریتم طبیعی (پایه e) 1 + یک عدد را برمی گرداند ، تابع پایه 10 لگاریتم یک عدد را برمی گرداند ، تابع پایه 2 لگاریتم یک عدد را برمی گرداند، EX – 1، که در آن x آرگمان ااست و E پایه لگاریتم طبیعی ، تابع ریشه دوم مجموع مربعات از آرگمانهای آن باز می گردد ، نزدیکترین تک دقتی نمایندگی شناور یک عدد.

Sign و trunc :

alert(Math.sign(10));
alert(Math.sign(0));
alert(Math.sign(-10));
alert(Math.trunc(2.8));
alert(Math.trunc(-2.8));

sign نشان می دهد عدد مثبت است یا منفی یا صفر است.

آرایه Array :

Find :

فرض کنید آرایه ای به نام array داریم که دارای [1,2,8]است ، اگر بخواهیم عدد بزرگتر از 7 را بیابیم چه باید کرد ؟ به این شکل از دستور find استفاده می کنیم.

var array = [1, 3, 8].find(item => item > 7);
alert(array);

findIndex :
اگر بخواهیم ایندکس آن را بیابیم چطور ؟
var array = [1, 5, 10].findIndex(item=>item > 3);
alert(array);

Fill :

فرض کنید بخواهیم آرایه array را با a پرکنیم ، برای این کار از دستور fill استفاده می کنیم.

var array = [1,2,3,4,5];
alert(array.fill('a'));

و اگر بخواهم به جای عدد 3 a قرار دهم :

var array = [1,2,3,4,5];

alert(array.fill('a',2,3));

در کد بالا گفتیم ، a را بجای ایندکس 2 قرار بده و از ایندکس 3 خودش چاپ کن.

CopyWithin :

فرض کنید آرایه ای به شکل [1,2,3,4] داریم و می خواهیم به این شکل در بیاید [1,2,1,2] برای این کار از دستور copywithin به شکل زیر استفاده می کنیم :

var array = [1,2,3,4];
alert(array.copyWithin(2,0));

اول باید تارگت را مشخص کنیم ، ایندکسی که کپی گرفتن من تا آنجا باشد، برای ما ایندکس 2 یعنی عدد 3 و سپس مشخص می کنیم از کدام ایندکس کپی گرفتن شروع شود ، برای ما ایندکس 0 یعنی عدد 1

arrayOf :

اگر بخاطر داشته باشید ما نمی توانستیم آرایه را به این شکل تعریف کنیم var array = new array(3); چون در نتیجه چنین چیزی برای ما ایجاد می شود [, ,] حال اگر بخواهیم آرایه ما فقط عدد 3 را داشته باشد چه باید کرد ؟ از Array.of به شکل زیر استفاده کنید.

var ofArray = Array.of(3);
alert(ofArray);

حالا من دارای آرایه ای به طول یک و مقدار 3 هستم.

ArrayFrom :

اگر از کد زیر استفاده کنید undefined به شما بر می گرداند

var array = document.querySelectorAll("div");
array.forEach(); // undefiend

برای حل این مشکل از Array.from به شکل زیر استفاده کنید:

var arrayFrom = Array.from(array);
arrayFrom.forEach();

entries :

اگر بخواهیم ایندکس و ومقدار اولین ورودی را ببینیم :

var a =["Shahtut","Anar","Angur"];
var vorudi = a.entries();

alert(vorudi.next().value);

keys :

اگر بخواهیم فقط ایندکس را ببینیم :

var a = ["Shahtut", "Anar", "Angur"];
var keys = a.keys();

alert(keys.next().value);

Array Comprehensions :

قبلا با مفهوم Comprehensions آشنا شدید حالا بیاید در آرایه از آنها استفاده کنیم ، به مثال های زیر دقت کنید ، مثال ها ساده هستند و بعد از اجرا شما متوجه چگونگی عملکرد آنها می شوید.

var array = [for (i of [1, 2, 3])i];
alert(array[2]);//[1,2,3]

var array2 = [for (i of [1, 2, 3])i * i];
alert(array2);//[1,4,9]

var array3 = [for(i of[1, 2, 3])if (i < 3) i];
alert(array3);//[1,2]

var array4 = [for (name of["Pouria", "Hooman", "Ashkan"])
for (family of ["Parhami", "Moein", "Sianat"])
(
${name} ${family}

)];
alert(array4);

آبجکت set :

برای ساخت یونیک لیست از set استفاده می کنیم :

var set = new Set();
set.add("salam");
alert(set.size);

می تونیم یک آبجکت بهش بدیم :

var set = new Set();
var key = {};
set.add(key);
alert(set.has(key));

has به ما می گوید آیا چیزی که به دنبال آن هستیم در set وجود دارد یا نه .

var set = new Set([1,2,3]);
alert(set.has(2));

نمی توانیم یک ایتم را دوباربه set اضافه کنیم :

var set = new Set();
var key = {};
set.add(key);
set.add(key);
alert(set.size);

سایز ما یک خواهد بود نه دو
برای پاک کردن تمام مقادیر set از دستور clear استفاده می کنیم.

var set = new Set();
set.add(1);
set.add(2);
set.add(3);
set.clear();
alert(set.size);

[/javascrip]

برای حذف یک ایتم از delete اسفاده می کنیم:

[javascript]
var set = new Set();
set.add(1);
set.add(2);
set.delete(1);
alert(set.size + " "+set.has(2));

برای ایتریت کردن set :

var set = new Set();
set.add("Pouria");
set.add("Parastoo");
set.add("Hooman");

var count = 0;
set.forEach(item => count++);
alert(count);

با استفاده از for of :
var set = new Set([1,2,3]);
var count = 0;
for(var item of set){
count++;
}
alert(count);

entries در set :

var set = new Set();
set.add("1");

var avalinVorodi = set.entries().next().value;
alert(avalinVorodi);

var set = new Set();
set.add("1");

var values = set.values().next().value;
alert(values);

var set = new Set();
set.add("1");
set.add("2");
set.add("3");

var set2= new Set(set.values());
alert(set2.size);

Map :

برای نگه داری داده هایی که دارای یک کلید و یک مقدار هستند استفاده می شود.

var map = new Map();
map.set("sen",20);
alert(map.get("sen"));

می توان یک آبجکت را به عنوان کلید داد :

var map = new Map();
var hooman = {"name": "Hooman"};
map.set(hooman, 27);
alert(map.get(hooman));

می توان از Array استفاده کرد :

var map = new Map([["name","Pouria"],["sen",27],["zaban","farsi"]]);
alert(map.has("sen"));

اگر از یک کلید استفاده کنید مقدار آن override می شود:

var map = new Map();
var key = {};
map.set(key,"salam");
map.set(key,"khodafez");

alert(map.get(key));

برای پاک کردن همه موارد از clear میتوان استفاده کرد:

var map = new Map();
map.set(1,"a");
map.set(2,"b");
map.set(3,"c");
map.clear();

برای پاک کردن یک مورد از delete :

var map = new Map();

var key1= {};
var key2={};

map.set(key1,"hello");
map.set(key2,"bye");
map.delete(key2);

استفاده از forEach :

var map = new Map([["name","Pouria"],["sen",27],["ketab","falsafe"]]);
var count = 0;
map.forEach(function (value, key) {
count++;
});
alert(count);

استفاده از for of :

var map = new Map([["name","Pouria"],["sen",27],["ketab","falsafe"]]);
var count = 0;
for(var[key,value]of map){
count++;
}
alert(count);

entries :
var map = new Map();
map.set("name", "Hooman");
var item = map.entries();
var first = item.next().value;
alert(first[0] + " " + first[1]);

var map = new Map();
map.set(22, "Hooman");
var meghdar = map.values();
var first = meghdar.next().value;
alert(first);

var map =new Map();
map.set(27,"Hooman");
var keys = map.keys();
var firstKey = keys.next().value;
alert(firstKey);

Object.is :

.is مانند === عمل میکند .

alert(Object.is(1,"1"));
alert(Object.is(NaN,NaN));

Object.assign :

یک آبجکت را یه آبجکت دیگری اساین می کند اختصاص می دهد .

var derakht = {
sib: function (target) {
target.maze = "khoshmaze";
}
};
var person = {};

var chidan = {
gheychi: function (target) {
target.khordan = "khordam";
}
};

Object.assign(derakht,chidan);
derakht.gheychi(person);
alert(person.khordan);

در مثل بالا آبجکت درخت و چیدن را اساین کردیم به ترتیب درخت نیز فانکشن چیدن را خواد داشت و می تواند از آن استفاده کند.
کدهای کوتاه شده در آبجکت ها :
حتما به یاد دارید که به این شکل میتوانستیم یک آبجکت بسازیم :

var nam = "roz";
var rang = "ghermez";
var gol = {
nam :nam , rang: rang
};

[javascript]

اگر نام پراپرتی و مقدار شما یکی است ، کافیست یک بار آن را بنویسید :

[javascript]
var nam = "roz";
var rang = "ghermez";
var gol = {
nam , rang
};

alert(gol.nam+" "+gol.rang);

اگر آبجکت ما دارای فانکشن بود به این شکل می نوشتیم :

var ensan ={
esmetoBego:function(){
return "Hooman";
}
};

alert(ensan.esmetoBego());

و حالا می توانیم به این شکل بنویسیم :

var ensan ={
esmetoBego(){
return "Hooman";
}
};

alert(ensan.esmetoBego());

اما در مورد پراپرتی ها :

function golForoshi(nameGol, rangeGol) {
var obj ={};
obj[nameGol] = rangeGol;
return obj;
}

حال می توانیم به این شکل بنویسیم :

function golForoshi(nameGol, rang) {
return {
[nameGol]: rang
}
}

var golForoshiMan = golForoshi('color','surati');

alert(golForoshiMan.color);

proxies :

به زبان ساده با استفاده از proxies می توانیم رفتار های کاستم شده ای را خلق کنیم ، برای درک بهتر به مثال زیر توجه کنید :

var ensan = {
sen: 27,
rangeCheshm: "sabz",
zendeAst: true
};

var proxyEnsan = new Proxy(ensan, {
get: function (target, property) {
if (property === " rangeCheshm") {
return target[property] + "che khoshgeeel";
}else{
return target[property];
}
}
});

alert(proxyEnsan.sen);
alert(proxyEnsan.rangeCheshm);

در کد بالا می بینید که من آبجکتی به نام انسان دارم و انسان دارای سن رنگ چشم و رنده بودن است
سپس یک پروکسی جدید ساختم ، اسم آبجکت مورد نظر خودمو بهش دادم و get تعریف کردم در get گفتم اگر پراپرتی رنگ چشم درخواست شد مقدار پراپرتی را با چه خوشگله متصل کن و برگردان در غیر این صورت مقدار همان پراپرتی را بر گردان .
همان طور که از get می شه استفاده کرد از set هم می تونیم استفاده کنیم به شکل زیر :

var ensan = {
sen: 27,
rangeCheshm: "sabz",
zendeAst: true
};

var proxyEnsan = new Proxy(ensan, {
set: function (target, property, value) {
if(property === "zendeAst" && value === false){
console.log("akheeeeey tefli");
}else{
target[property] =value;
}
}
});

proxyEnsan.color = "ghermez";
proxyEnsan.zendeAst = false;

دقیقا همون مثال اما ایندفه با set .
حتما تا به حال چنین چیزی نوشته اید :

var ensan = {

sen: 27,
rangeCheshm: "sabz",
zendeAst: true,
zaban: function (target) {
return "man ba " + target.name + " almani harf mizanam";
}
};

var hadafeMan = {name: "Hooman"};
hadafeMan.harfzadan = ensan.zaban;
alert(hadafeMan.harfzadan(hadafeMan));

حالا می خوام کاری کنم که پراپرتی zaban فقط از طریق ابجکت ensan کارکند :

var ensan = {

sen: 27,
rangeCheshm: "sabz",
zendeAst: true,
zaban: function (target) {
return "man ba " + target.name + " almani harf mizanam";
}
};

ensan.zaban = new Proxy(ensan.zaban,{
apply: function (target, context,args) {
if(context!== ensan){
return "oh oh ki ba to harf mizane";
}else{
return target.apply(context,args);
}
}
});

var hadafeMan = {name: "Hooman"};
hadafeMan.harfzadan = ensan.zaban;
alert(hadafeMan.harfzadan(hadafeMan));
alert(ensan.zaban(hadafeMan));

در کد بالا proxy جدیدی ساختم و گفتم اگر آبجکت ensan نبود مقدار ohoh ki bato harf mizane چاپ شه در غیر این صورت متن داخل داخل پراپرتی zaban برگردادنده بشه.

ماژول :

در زمان نگارش این آموزش ماژول هنوز توسط مرورگرها ساپورنمی شود و بایدازtraceur compiler,bable استفاده کنید.

بیاید اولین ماژول خودمون در  ECMA6 بنویسیم :

export class Karmand {

constructor(name) {
this.nameKarmand = name;
}

get name() {
return this.nameKarmand;
}

karkardan() {
return
${this.nameKarmand} kar mikone

;
}
}

در کد بالا من یک کلاس دارم یک کلاس معمولی برای اینکه این کلاس را منتشر کنیم از کلمه کلیدی export قبل از class استفاده کرده ام این کلاس در پوشه module و فایل  karmand.js قرار دارد

حالا در فایل html یا فایل js دیگر این  کلاس را import می کنیم :

import {Karmand} from "./module/Karmand";

var man = new Karmand("Pouria");
document.write(man.karkardan());

در داخل یک ماژول می تونیم چیزهای متفاوت زیادی export کنیم .

export class Karmand {

 constructor(name) {
 this.nameKarmand = name;
 }

 get name() {
 return this.nameKarmand;
 }

 karkardan() {
 return
${this.nameKarmand} kar mikone

;
}
}

export let log = function (karmand) {

console.log(karmand.name);

};

export let AfzayeshSalane = 0.04;
export let modelKarmand = new Karmand(“Hooman”);

و حالا import kardan  این بار در صفحه html

<!DOCTYPE html>
<html lang="en">
<head>

 <meta charset="UTF-8">
 <title>ECMA 6</title>

 <script type="module">
 import {Karmand, log ,modelKarmand }
 from "./module/Karmand";

 log(modelKarmand);
 alert(modelKarmand);
 var pouria = new Karmand("Pouria");
 console.log(pouria.karkardan());


 </script>

</head>
<body>

</body>

<script src="test.js"></script>
</html>

مخفی کردن جزییات :

برای مخفی کردن جزییات (فانکشن و..) کافیست آنها را export نکنید ، حالا اگر بخواهیم name در مثال قبل را مخفی کنیم چطور ؟

let symbolName = Symbol();

export class Karmand {

 constructor(name) {
 this[symbolName] = name;
 }

 get name() {
 return this[symbolName];
 }

 karkardan() {
 return
${this.nameKarmand} kar mikone

;
}
}

export let log = function (karmand) {

console.log(karmand.name);

};

export let AfzayeshSalane = 0.04;
export let modelKarmand = new Karmand(“Hooman”);

همان طور که می بینید از Symbol استفاده می کنیم ، به این ترتیب اگر چنین کدی زده شود :

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>

 <script type="module">
 import {Karmand, log ,modelKarmand }
 from "./module/karmand";

 log(modelKarmand);
 alert(modelKarmand);
 var pouria = new Karmand("Pouria");
 pouria.name("jj");
 console.log(pouria.karkardan());


 </script>


</head>
<body>

</body>
</html>

نام تغییر نمی کند.

آیا می تونیم از یه ماژول در یک ماژول دیگه استفاده کینم ؟ بله

فایلی به نام sherkat.js می سازم و karmand.js را درون آن  import  می کنیم :

import {Karmand} from "./module/karmand";

export class Sherkat {
 estekhdam(...names) {
 this.karmandan = names.map(n => new Karmand(n));
 }
 anjameKar(){
 return [for (e of this.karmandan) e.anjameKar()];
 }

سپس فایلی به نام main.js می سازم و sherkat.js را در آن import  میکنم :

import {Sherkat} from "./sherkat";

let shekat = new Sherkat();
shekat.estekhdam("Pouria","Parastoo","Hooman","Shabbo");
document.write(shekat.anjameKar());

دست آخر در فایل html :

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>

 <script type="module">
 import "./main";
 </script>

</head>
<body>

</body>
</html>

امیدوارم تونسته باشیم کمی شما عزیزان را با ECMA6 آشنا کنیم ، پیشنهاد می کنم در مورد Traceur تحقیق کنید این traceur یک کامپایلر است که ECMA6 را به ECMA5 تبدیل می کند و این امکان را به شما می دهد تا کدهای js خود را با استاندارد ECMA6 بنویسید   این هم آدرس تریسیر آنلاین

http://google.github.io/traceur-compiler/demo/repl.html#

و این هم توضیحات تریسر:

https://github.com/google/traceur-compiler/wiki/Getting-Started

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.