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() فضاهای خالی را از دو طرف یک رشته متنی پاک می‌کند.

مثال[ویرایش | ویرایش]

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


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


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

متد Array.isArray()[ویرایش | ویرایش]

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

مثال[ویرایش | ویرایش]

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


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


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

متد Array.forEach()[ویرایش | ویرایش]

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

مثال[ویرایش | ویرایش]

var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);

function myFunction(value) {
  txt = txt + value + "<br>";
}


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


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

متد Array.map()[ویرایش | ویرایش]

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

مثال[ویرایش | ویرایش]

var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);

function myFunction(value) {
  return value * 2;
}


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


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

متد Array.filer()[ویرایش | ویرایش]

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

مثال[ویرایش | ویرایش]

var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);

function myFunction(value) {
  return value > 18;
}


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


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

متد Array.reduce()[ویرایش | ویرایش]

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

مثال[ویرایش | ویرایش]

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction);

function myFunction(total, value) {
  return total + value;
}


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


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

متد Array.reduceRight()[ویرایش | ویرایش]

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

مثال[ویرایش | ویرایش]

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduceRight(myFunction);

function myFunction(total, value) {
  return total + value;
}


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


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

متد Array.every()[ویرایش | ویرایش]

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

مثال[ویرایش | ویرایش]

var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.every(myFunction);

function myFunction(value) {
  return value > 18;
}


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


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

متد Array.some()[ویرایش | ویرایش]

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

مثال[ویرایش | ویرایش]

var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.some(myFunction);

function myFunction(value) {
  return value > 18;
}


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


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

متد Array.indexOf()[ویرایش | ویرایش]

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

مثال[ویرایش | ویرایش]

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


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


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

متد Array.lastIndexOf()[ویرایش | ویرایش]

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

مثال[ویرایش | ویرایش]

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var 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 اکنون یک رشته متنی است و آماده است که به سمت یک سرور ارسال شود.

مثال[ویرایش | ویرایش]

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


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


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

متد Date.now()[ویرایش | ویرایش]

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

مثال[ویرایش | ویرایش]

var timInMSs = Date.now();


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


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

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

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

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

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

مثال[ویرایش | ویرایش]

// Create an object:
var person = {
  firstName: "John",
  lastName : "Doe",
  get fullName() {
    return this.firstName + " " + this.lastName;
  }
};

// Display data from the object using a getter:
document.getElementById("demo").innerHTML = person.fullName;


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


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

مثال[ویرایش | ویرایش]

var person = {
  firstName: "John",
  lastName : "Doe",
  language : "NO",
  get lang() {
    return this.language;
  },
  set lang(value) {
    this.language = value;
  }
};

// Set an object property using a setter:
person.lang = "en";

// Display data from the object using a getter:
document.getElementById("demo").innerHTML = person.lang;


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


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

var person = {
  firstName: "John",
  lastName : "Doe",
  language : "NO",
  set lang(value) {
    this.language = value.toUpperCase();
  }
};

// Set an object property using a setter:
person.lang = "en";

// Display data from the object:
document.getElementById("demo").innerHTML = person.language;


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


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

متدهای ویژگی های جدید شیء[ویرایش | ویرایش]

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

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

مثال[ویرایش | ویرایش]

// Create an Object:
var person = {
  firstName: "John",
  lastName : "Doe",
  language : "NO",
};

// Change a Property:
Object.defineProperty(person, "language", {
  value: "EN",
  writable : true,
  enumerable : true,
  configurable : true
});

// Enumerate Properties
var txt = "";
for (var x in person) {
  txt += person[x] + "<br>";
}
document.getElementById("demo").innerHTML = txt;


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


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

مثال[ویرایش | ویرایش]

// Create an Object:
var person = {
  firstName: "John",
  lastName : "Doe",
  language : "NO",
};

// Change a Property:
Object.defineProperty(person, "language", {
  value: "EN",
  writable : true,
  enumerable : false,
  configurable : true
});

// Enumerate Properties
var txt = "";
for (var x in person) {
  txt += person[x] + "<br>";
}
document.getElementById("demo").innerHTML = txt;


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


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

مثال[ویرایش | ویرایش]

/// Create an Object:
var person = {
  firstName: "John",
  lastName : "Doe",
  language : "NO"
};

// Change a Property:
Object.defineProperty(person, "language", {
  get : function() { return language },
  set : function(value) { language = value.toUpperCase()}
});

// Change Language
person.language = "en";

// Display Language
document.getElementById("demo").innerHTML = person.language;


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


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

متدهای جدید شیء در ES5[ویرایش | ویرایش]

// Adding or changing an object property
Object.defineProperty(object, property, descriptor)

// Adding or changing many object properties
Object.defineProperties(object, descriptors)

// Accessing Properties
Object.getOwnPropertyDescriptor(object, property)

// Returns all properties as an array
Object.getOwnPropertyNames(object)

// Returns enumerable properties as an array
Object.keys(object)

// Accessing the prototype
Object.getPrototypeOf(object)

// Prevents adding properties to an object
Object.preventExtensions(object)
// Returns true if properties can be added to an object
Object.isExtensible(object)

// Prevents changes of object properties (not values)
Object.seal(object)
// Returns true if object is sealed
Object.isSealed(object)

// Prevents any changes to an object
Object.freeze(object)
// Returns true if object is frozen
Object.isFrozen(object)

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

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

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

مثال[ویرایش | ویرایش]

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


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


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

مثال[ویرایش | ویرایش]

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


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


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

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

استفاده از ویرگول ها[ویرایش | ویرایش]

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

مثال شیء[ویرایش | ویرایش]

person = {
  firstName: "John",
  lastName: " Doe",
  age: 46,
}

مثال آرایه[ویرایش | ویرایش]

points = [
  1,
  5,
  10,
  25,
  40,
  100,
];

هشدار !!!

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

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

اشیاء در جیسون[ویرایش | ویرایش]

// Allowed:
var person = '{"firstName":"John", "lastName":"Doe", "age":46}'
JSON.parse(person)

// Not allowed:
var person = '{"firstName":"John", "lastName":"Doe", "age":46,}'
JSON.parse(person)

آرایه ها در جیسون[ویرایش | ویرایش]

// Allowed:
points = [40, 100, 1, 5, 25, 10]

// Not allowed:
points = [40, 100, 1, 5, 25, 10,]

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

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

مثال[ویرایش | ویرایش]

"Hello \
Dolly!";


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


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

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

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

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

مثال[ویرایش | ویرایش]

"Hello " +
"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
سپتامبر ۲۰۱۲ سپتامبر ۲۰۱۲ آوریل ۲۰۱۳ ژوئیه ۲۰۱۲ ژوئیه ۲۰۱۳

منابع آموزشی[ویرایش]