ECMAScript 5 - JavaScript 5

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو


ECMAScript 5 چیست؟

ECMAScript5 با نام‌های ES5 و ECMAScript 2009 نیز شناخته می‌شود. [۱]

این فصل به برخی از مهمترین قابلیت‌های نسخه ES5 اشاره می‌کند.

قابلیت های ECMAScript 5

موارد زیر قابلیت‌های جدیدی هستند که در سال ۲۰۰۹ منتشر شدند:

  • استفاده از حالت سخت گیرانه یا "use strict"
  • String.trim()
  • Array.isArray()
  • Array.forEach()
  • Array.map()
  • Array.filter()
  • Array.reduce()
  • Array.reduceRight()
  • Array.every()
  • Array.some()
  • Array.indexOf()
  • Array.lastIndexOf()
  • JSON.parse()
  • JSON.stringify()
  • Date.now()
  • ویژگی متدهای دریافت کننده (Getter) و تنظیم کننده (Setter)
  • متدهای ویژگی شیء جدید

برخی از تغییرات شیوه نوشتار (Syntax) در نسخه ECMAScript 5

  • دسترسی به ویژگی‌های رشته متنی به وسیلهٔ [ ]
  • استفاده از ویرگول یا کاما , در تعریف‌های آرایه و شیء
  • نوشتن رشته‌های متنی در چندین خط
  • کلمات رزرو شده به عنوان نام ویژگی‌ها

استفاده از حالت سخت گیرانه

"use strict" تعریف می‌کند که کدهای جاوا اسکریپت می‌بایست در “حالت سخت گیرانه” (use strict) اجرا شود.

با حالت سخت گیرانه برای مثال شما نمی‌توانید از متغیرهای تعریف نشده استفاده کنید.

شما می‌توانید از حالت سخت گیرانه (Strict mode) در تمامی برنامه‌هایتان استفاده کنید. این امر کمک می‌کند که کد تمیزتری بنویسید برای مثال، در حالت سخت گیرانه شما نمی‌توانید از متغیرهای تعریف نشده استفاده کنید.

"use strict" یک عبارت رشته متنی است. مرورگرهای قدیمی در صورتی این عبارت را متوجه نشوند خطا ایجاد نمی‌کنند.

می‌توانید مطالب بیشتری را دراین مورد در فصل حالت سخت‌گیرانه در جاوا اسکریپت بخوانید.

متد String.trim()

متد String.trim() فضاهای خالی را از دو طرف یک رشته متنی پاک می‌کند.

مثال

1var str = "       Hello World!        ";
2alert(str.trim());


مشاهدهٔ نتیجه


شما می‌توانید مطالب بیشتری را در مورد فصل متدهای داده‌های رشته‌ای یا متنی در جاوا اسکریپت، بخوانید.

متد Array.isArray()

متد isArray() بررسی می‌کند که یک شی یک آرایه است یا نه.

مثال

1function myFunction() {
2  var fruits = ["Banana", "Orange", "Apple", "Mango"];
3  var x = document.getElementById("demo");
4  x.innerHTML = Array.isArray(fruits);
5}


مشاهدهٔ نتیجه


شما می‌توانید مطالب بیشتری را در این مورد، در فصل آرایه‌های جاوا اسکریپت بخوانید.

متد Array.forEach()

متد forEach() یک متد را روی هر عنصر آرایه فراخوانی می‌کند.

مثال

1var txt = "";
2var numbers = [45, 4, 9, 16, 25];
3numbers.forEach(myFunction);
4
5function myFunction(value) {
6  txt = txt + value + "<br>";
7}


مشاهدهٔ نتیجه


می‌توانید مطالب بیشتری را در این مورد در فصل متدهای پیمایش آرایه در جاوا اسکریپت بخوانید.

متد Array.map()

در این مثال، هرآرایه را در عدد ۲ ضرب می‌کند:

مثال

1var numbers1 = [45, 4, 9, 16, 25];
2var numbers2 = numbers1.map(myFunction);
3
4function myFunction(value) {
5  return value * 2;
6}


مشاهدهٔ نتیجه


می‌توانید مطالب بیشتری را در این مورد در فصل متدهای پیمایش آرایه در جاوا اسکریپت بخوانید.

متد Array.filer()

این مثال یک آرایه جدید از عناصری که مقدار آنها از ۱۸ بیشتر است می‌سازد:

مثال

1var numbers = [45, 4, 9, 16, 25];
2var over18 = numbers.filter(myFunction);
3
4function myFunction(value) {
5  return value > 18;
6}


مشاهدهٔ نتیجه


می‌توانید مطالب بیشتری را در این مورد در فصل متدهای پیمایش آرایه در جاوا اسکریپت بخوانید.

متد Array.reduce()

این مثال حاصل مجموع تمامی اعداد درون یک آرایه را بدست می‌آورد:

مثال

1var numbers1 = [45, 4, 9, 16, 25];
2var sum = numbers1.reduce(myFunction);
3
4function myFunction(total, value) {
5  return total + value;
6}


مشاهدهٔ نتیجه


می‌توانید مطالب بیشتری را در این مورد در فصل متدهای پیمایش آرایه در جاوا اسکریپت بخوانید.

متد Array.reduceRight()

این مثال هم حاصل جمع تمامی اعداد درون آرایه را به دست می‌آورد:

مثال

1var numbers1 = [45, 4, 9, 16, 25];
2var sum = numbers1.reduceRight(myFunction);
3
4function myFunction(total, value) {
5  return total + value;
6}


مشاهدهٔ نتیجه


می‌توانید مطالب بیشتری را در این مورد در فصل متدهای پیمایش آرایه در جاوا اسکریپت بخوانید.

متد Array.every()

این مثال بررسی می‌کند که آیا تمامی مقادیر بزرگتر از هیجده هستند:

مثال

1var numbers = [45, 4, 9, 16, 25];
2var allOver18 = numbers.every(myFunction);
3
4function myFunction(value) {
5  return value > 18;
6}


مشاهدهٔ نتیجه


می‌توانید مطالب بیشتری را در این مورد در فصل متدهای پیمایش آرایه در جاوا اسکریپت بخوانید.

متد Array.some()

این مثال بررسی می‌کند که آیا برخی از عناصر آرایه بزرگتر از هیجده هستند:

مثال

1var numbers = [45, 4, 9, 16, 25];
2var allOver18 = numbers.some(myFunction);
3
4function myFunction(value) {
5  return value > 18;
6}


مشاهدهٔ نتیجه


می‌توانید مطالب بیشتری را در این مورد در فصل متدهای پیمایش آرایه در جاوا اسکریپت بخوانید.

متد Array.indexOf()

در آرایه به دنبال یک عنصر می‌گردد و اندیس یا موقعیت نتیجه را برمی‌گرداند:

مثال

1var fruits = ["Banana", "Orange", "Apple", "Mango"];
2var a = fruits.indexOf("Apple");


مشاهدهٔ نتیجه


می‌توانید مطالب بیشتری را در این مورد در فصل متدهای پیمایش آرایه در جاوا اسکریپت بخوانید.

متد Array.lastIndexOf()

متد Array.lastIndexOf() همانند متد Array.indexOf() است اما با تفاوت که جستجو را از آخر آرایه شروع می‌کند.

مثال

1var fruits = ["Banana", "Orange", "Apple", "Mango"];
2var a = fruits.lastIndexOf("Apple");


مشاهدهٔ نتیجه


می‌توانید مطالب بیشتری را در این مورد در فصل متدهای پیمایش آرایه در جاوا اسکریپت بخوانید.

متد JSON.parse()

یک استفاده رایج از JSON برای دریافت اطلاعات از یک وب سرور است.

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

'{"name":"John", "age":30, "city":"New York"}'

از متد JSON.parse() برای تبدیل یک متن به شی جاوا اسکریپت استفاده می‌شود.

var obj = JSON.parse('{"name":"John", "age":30, "city":"New York"}');


مشاهدهٔ نتیجه


شما می‌توانید مطالب بیشتری را در فصل آموزش JSON بیابید.

JSON.stringify()

یکی دیگر از استفاده‌های رایج از JSON ارسال اطلاعات به سمت وب سرور است.

زمانی که داده به سمت یک وب سرور ارسال می‌شود، داده می‌بایست یک رشته متنی باشد.

تصور کنید که ما این شی جاوا اسکریپت را داریم:

var obj = {"name":"John", "age":30, "city":"New York"};

از تابع JSON.stringify() برای تبدیل آن به یک رشته متنی استفاده کنید.

var myJSON = JSON.stringify(obj);

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

myjson اکنون یک رشته متنی است و آماده است که به سمت یک سرور ارسال شود.

مثال

1var obj = {"name":"John", "age":30, "city":"New York"};
2var myJSON = JSON.stringify(obj);
3document.getElementById("demo").innerHTML = myJSON;


مشاهدهٔ نتیجه


شما می‌توانید مطالب بیشتری را در فصل آموزش JSON بیابید.

متد Date.now()

متد Date.now() زمان سپری شده از تاریخ صفر (یعنی یک ژانویه سال ۱۹۷۰ ساعت ۰۰:۰۰:۰۰ براساس UTC) را به صورت میلی ثانیه برمی‌گرداند.

مثال

var timInMSs = Date.now();


مشاهدهٔ نتیجه


متد Date.now() شبیه به متد Date است که برای شی فراهم شده‌است.

شما می‌توانید مطالب بیشتری را در فصل اشیاء تاریخ و زمان در جاوا اسکریپت بیابید.

ویژگی متدهای دریافت کننده (Getters) و متدهای تنظیم کننده (Setters)

نسخه ES5 به شما این اجازه را می‌دهد که برای شی متدهایی با یک شیوه نوشتار که شبیه به ویژگی گرفتن (getter) یا تنظیم کردن (setting) یک ویژگی است، تعریف کنید.

این مثال یک دریافت کننده (getter) برای یک ویژگی با نام fullName تعریف کرده‌است:

مثال

 1// Create an object:
 2var person = {
 3  firstName: "John",
 4  lastName : "Doe",
 5  get fullName() {
 6    return this.firstName + " " + this.lastName;
 7  }
 8};
 9
10// Display data from the object using a getter:
11document.getElementById("demo").innerHTML = person.fullName;


مشاهدهٔ نتیجه


این مثال یک متد دریافت کننده (getter) و یک متد تنظیم کننده (setter) برای ویژگی زبان ایجاد می‌کند:

مثال

 1var person = {
 2  firstName: "John",
 3  lastName : "Doe",
 4  language : "NO",
 5  get lang() {
 6    return this.language;
 7  },
 8  set lang(value) {
 9    this.language = value;
10  }
11};
12
13// Set an object property using a setter:
14person.lang = "en";
15
16// Display data from the object using a getter:
17document.getElementById("demo").innerHTML = person.lang;


مشاهدهٔ نتیجه


این مثال از یک متد تنظیم کننده برای امن‌سازی به روز رسانی ویژگی زبان (language) با حروف بزرگ استفاده می‌کند.

 1var person = {
 2  firstName: "John",
 3  lastName : "Doe",
 4  language : "NO",
 5  set lang(value) {
 6    this.language = value.toUpperCase();
 7  }
 8};
 9
10// Set an object property using a setter:
11person.lang = "en";
12
13// Display data from the object:
14document.getElementById("demo").innerHTML = person.language;


مشاهدهٔ نتیجه


شما می‌توانید مطالب بیشتری را در مورد متدهای دریافت کننده یا تنظیم کننده در فصل دسترسی به اشیاء در جاوا اسکریپت بخوانید.

متدهای ویژگی های جدید شیء

متد Object.defineProperty() یک شیء متد جدید در ES5 است.

این متد به شما اجازه می‌دهد که یک ویژگی جدید شی تعریف کنید یا مقدار ویژگی یا متا دیتاها را تغییر دهید.

مثال

 1// Create an Object:
 2var person = {
 3  firstName: "John",
 4  lastName : "Doe",
 5  language : "NO",
 6};
 7
 8// Change a Property:
 9Object.defineProperty(person, "language", {
10  value: "EN",
11  writable : true,
12  enumerable : true,
13  configurable : true
14});
15
16// Enumerate Properties
17var txt = "";
18for (var x in person) {
19  txt += person[x] + "<br>";
20}
21document.getElementById("demo").innerHTML = txt;


مشاهدهٔ نتیجه


مثال بعدی کدی مشابه دارد، با این تفاوت که این مثال ویژگی language را از enum گذاری محفوظ می‌دارد:

مثال

 1// Create an Object:
 2var person = {
 3  firstName: "John",
 4  lastName : "Doe",
 5  language : "NO",
 6};
 7
 8// Change a Property:
 9Object.defineProperty(person, "language", {
10  value: "EN",
11  writable : true,
12  enumerable : false,
13  configurable : true
14});
15
16// Enumerate Properties
17var txt = "";
18for (var x in person) {
19  txt += person[x] + "<br>";
20}
21document.getElementById("demo").innerHTML = txt;


مشاهدهٔ نتیجه


این مثال برای تبدیل امن مقادیر بروز ویژگی language به مقادیری با حروف بزرگ یک متد تنظیم کننده (setter) و یک متد گرفتن داده (getter) تعریف کرده‌است:

مثال

 1/// Create an Object:
 2var person = {
 3  firstName: "John",
 4  lastName : "Doe",
 5  language : "NO"
 6};
 7
 8// Change a Property:
 9Object.defineProperty(person, "language", {
10  get : function() { return language },
11  set : function(value) { language = value.toUpperCase()}
12});
13
14// Change Language
15person.language = "en";
16
17// Display Language
18document.getElementById("demo").innerHTML = person.language;


مشاهدهٔ نتیجه


ECMAScript 5 متدهای جدیدی به شیء در جاوا اسکریپت اضافه کرده‌است:

متدهای جدید شیء در ES5

 1// Adding or changing an object property
 2Object.defineProperty(object, property, descriptor)
 3
 4// Adding or changing many object properties
 5Object.defineProperties(object, descriptors)
 6
 7// Accessing Properties
 8Object.getOwnPropertyDescriptor(object, property)
 9
10// Returns all properties as an array
11Object.getOwnPropertyNames(object)
12
13// Returns enumerable properties as an array
14Object.keys(object)
15
16// Accessing the prototype
17Object.getPrototypeOf(object)
18
19// Prevents adding properties to an object
20Object.preventExtensions(object)
21// Returns true if properties can be added to an object
22Object.isExtensible(object)
23
24// Prevents changes of object properties (not values)
25Object.seal(object)
26// Returns true if object is sealed
27Object.isSealed(object)
28
29// Prevents any changes to an object
30Object.freeze(object)
31// Returns true if object is frozen
32Object.isFrozen(object)

می‌توانید مطالب بیشتری را در فصل شیء در ECMAScript5 می‌توانید بیابید.

دسترسی به ویژگی ها در رشته های متنی

متد charAt() یک کاراکتر را در موقعیت یا اندیس به خصوصی در یک رشته متنی برمی‌گرداند:

مثال

1var str = "HELLO WORLD";
2str.charAt(0);            // returns H


مشاهدهٔ نتیجه


نسخه ECMAScript 5 به شما ۵ حالت از دسترسی روی رشته‌های متنی را ارائه می‌دهد:

مثال

1var str = "HELLO WORLD";
2str[0];                   // returns H


مشاهدهٔ نتیجه


نتیجه دسترسی به ویژگی‌ها روی یک رشته متنی می‌تواند کمی غیرقابل پیش‌بینی باشد.

نکته نکته: در این‌باره می توانید در فصل متدهای داده‌های متنی و رشته‌ای مطالب بیشتری را بخوانید.

استفاده از ویرگول ها

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

مثال شیء

1person = {
2  firstName: "John",
3  lastName: " Doe",
4  age: 46,
5}

مثال آرایه

1points = [
2  1,
3  5,
4  10,
5  25,
6  40,
7  100,
8];

هشدار !!!

اینترنت اکسپلورر نسخه ۸ از هم فرو می‌پاشد یا اصطلاحاً Crash می‌کند.

جیسون استفاده از ویرگول , را برای به پایان بردن تعریف جیسون اجازه نمی‌دهد.

اشیاء در جیسون

1// Allowed:
2var person = '{"firstName":"John", "lastName":"Doe", "age":46}'
3JSON.parse(person)
4
5// Not allowed:
6var person = '{"firstName":"John", "lastName":"Doe", "age":46,}'
7JSON.parse(person)

آرایه ها در جیسون

1// Allowed:
2points = [40, 100, 1, 5, 25, 10]
3
4// Not allowed:
5points = [40, 100, 1, 5, 25, 10,]

نوشتن رشته های متنی در چندین خط

ECMAScript 5 به شما اجازه می‌دهد که در صورتی که از \ در انتهای عبارات متنی خود استفاده کنید، آنها را در چندین خط بنویسید.

مثال

1"Hello \
2Dolly!";


مشاهدهٔ نتیجه


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

مرورگرهای قدیمی ممکن است معنی فاصله‌های اطراف \ را به طور متفاوتی درک کنند.

برخی از مرورگرهای قدیمی‌تر نیز ممکن است که اجازه استفاده از فضای خالی در پشت کاراکتر \ را ندهند.

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

مثال

1"Hello " +
2"Dolly!";


مشاهدهٔ نتیجه


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

ECMAScript 5 به شما اجازه می‌دهد که از کلمات رزرو شده برای نام ویژگی‌های شی استفاده کنید:

مثال شیء

var obj = {name: "John", new: "yes"}


مشاهدهٔ نتیجه


سازگاری مروگرها با ES5 (ECMAScript 5)

Chrome.gif Edge.gif Firefox.gif Safari.gif Opera.gif
Chrome 23 IE10/Edge Firefox 21 Safari 6 Opera 15
سپتامبر ۲۰۱۲ سپتامبر ۲۰۱۲ آوریل ۲۰۱۳ ژوئیه ۲۰۱۲ ژوئیه ۲۰۱۳

منابع آموزشی