مقدمه
با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن ، در بخش قبلی به بررسی تاریخچه ی ظهور و توسعه ی جاوا اسکریپت و نسخه های متعددی که از آن در طول سال های مختلف انتشار یافته پرداختیم، همچنین در بخش قبلی به ویرایش های مهمی که از جاوا اسکریپت ارائه شده و توسط مرورگرهای مختلف پشتیبانی می شود پرداختیم، یکی از این ویرایش های ECMAScript 5 می باشد، که ما در ادامه ی این مبحث به معرفی ECMAScript 5 یا جاوا اسکریپت ۵ خواهیم پرداخت.
معرفی ECMAScript 5 یا جاوا اسکریپت ۵
در ادامه ی این مبحث شما را با هر یک از ویژگی ها و خصوصیات ارائه شده در ECMAScript 5 یا جاوا اسکریپت ۵ آشنا خواهیم کرد.
ECMAScript 5 یا جاوا اسکریپت ۵ چیست ؟
ECMAScript 5 همچنین به عنوان ES5 و ECMAScript 2009 نیز شناخته می شود.
خصوصیات و ویژگی های ECMAScript 5 یا جاوا اسکریپت ۵
خصوصیات جدیدی که در نسخه ی ۲۰۰۹ ارائه گردید :
- The “use strict” Directive
- ()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
- Property Getters and Setters
- New Object Property Methods
تغییرات همگام سازی در ECMAScript 5
- دسترسی به خصوصیات [ ] در رشته ها
- علامت زدن در آرایه و عبارات Object
- حروف رشته ای چند خطی
- کلمات ذخیره شده به عنوان نام خصوصیت
دستورالعمل “use strict”
دستور العمل “use strict” مشخص می کند که کدهای جاوا اسکریپت باید در قالب “strict mode” اجرا شوند.
به عنوان مثال با استفاده از حالت strict mode می توان از متغیرهای غیرقابل استفاده استفاده کرد.
شما می توانید از strict mode در تمام برنامه های خود استفاده کنید. این به شما کمک می کند تا کد cleaner را بنویسید، مانند جلوگیری از استفاده از متغیرهای غیرقانونی.
“use strict” فقط یک عبارت رشته ای است و در مرورگرهای قدیمی اگر آنها آن را درک نکنند، خطایی رخ نمی دهد.
()String.trim
()String.trim فضای خالی دو طرف یک رشته را حذف می کند.
مثال : حذف فضای خالی دو طرف رشته ها
| var str = " Hello World! "; alert(str.trim()); |
()Array.isArray
چک کنید که یک آبجکت یک آرایه است.
مثال : چک کردن اینکه ابجکت آرایه است یا خیر
| function myFunction() { var fruits = ["Banana", "Orange", "Apple", "Mango"]; var x = document.getElementById("demo"); x.innerHTML = Array.isArray(fruits); } |
()Array.forEach
متد ()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.filter
در مثال زیر یک آرایه ی جدید ایجاد می شود ک شامل مقادیر آرایه ی قدیمی که از ۱۸ بزرگتر باشد می باشد :
مثال : ایجاد آرایه ای از آرایه ی قدیمی
| 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
در این مثال بررسی می شود که آیا تمام مقادیر آرایه از ۱۸ بزرگتر هستند یا خیر :
مثال : محاسبه ی مقادیر بزرگتر از 18
| var numbers = [45, 4, 9, 16, 25]; var allOver18 = numbers.every(myFunction); function myFunction(value) { return value > 18; } |
()Array.some
در این مثال بررسی می شود که آیا برخی از مقادیر بزرگتر از ۱۸ هستند یا خیر :
مثال : اگر حتی یک مقدار آرایه از 18 بزرگتر باشد ، نتیجه درست است
| 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.indexOf می باشد، با این تفاوت که در این متد جستجو از انتهای آرایه شروع می شود:
مثال : جستجو از انتهای آرایه
| var fruits = ["Banana", "Orange", "Apple", "Mango"]; var a = fruits.lastIndexOf("Apple"); |
()JSON.parse
استفاده ی عمومی از JSON برای دریافت داده از یک web server است.
تصور کنید این رشته متن را از یک وب سرور دریافت کردید:
مثال :
| '{"name":"John", "age":30, "city":"New York"}' |
تابع ()JSON.parse در جاوا اسکریپت برای تبدیل text به یک آبجکت جاوا اسکریپت استفاده می شود.
مثال : متد JSON.parse
| var obj = JSON.parse('{"name":"John", "age":30, "city":"New York"}'); |
()JSON.stringify
یکی از استفاده های عمومی از JSON ارسال داده به یک web server است.
در زمان ارسال داده به یک web server این داده ها به رشته تبدیل می شوند.
تصور کنید ما این شی را در جاوا اسکریپت داریم:
مثال :
| 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; |
()Date.now
متد ()Date.now مقدار میلی ثانیه را به صفر و صفر می رساند (ژانویه ی ۱۹۷۰٫ ۰۰:۰۰:۰۰ UTC).
عملکرد ()Date.now همانند ()getTime در آبجکت Date می باشد.
خصوصیات Getters و Setters
ES5 به شما اجازه می دهد متد های آبجکت را با یک سینتکس تعریف کنید که مانند گرفتن یا تنظیم یک خصوصیت است.
این مثال یک getter برای خصوصیتی به نام fullName ایجاد می کند:
مثال : ایجاد یک getter
| // 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; |
این مثال یک تنظیم کننده و یک گیرنده برای خصوصیت زبان ایجاد می کند:
مثال : تنظیم setter و getter برای زبان
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | 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; |
این مثال از یک تنظیم کننده (setter) برای تأیید به روزرسانی پرونده های بزرگ زبان استفاده می کند:
مثال : تایید بروزرسانی های زبان
| 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; |
متدهای خصوصیت new Object
()Object.defineProperty یک متد آبجکت جدید در ES5 می باشد.
این به شما اجازه می دهد یک ویژگی آبجکت را تعریف کنید و یا یک مقدار خصوصیت و / یا metadata را تغییر دهید.
مثال : متد ()defineProperty
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | // 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; |
مثال زیر کد همان است، با این تفاوت که ویژگی زبان از شمارش را پنهان کند:
مثال : پنهان کردن ویژگی زبان از شمارش
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | // 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; |
این مثال یک تنظیم کننده (setter) و یک گیرنده (getter) برای محافظت از پرونده های بزرگ زبان را ایجاد می کند:
مثال : ایجاد setter و getter برای حفظ زبان
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | /// 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 بسیاری از متدهای جدید Object را برای جاوا اسکریپت اضافه کرد:
مثال :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | // 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) |
دسترسی به خصوصیات در رشته ها
متد charAt() کاراکتر را به صورت یک index مشخص شده در یک رشته برمی گرداند :
ECMAScript 5 اجازه دسترسی به خصوصیات را در رشته ها می دهد:
مثال : دسترسی خصوصیات به رشته ها در ECMAScript 5
| var str = "HELLO WORLD"; str[0]; // returns H |
نکته : دسترسی به خصوصیات در رشته ممکن است کمی غیر قابل پیش بینی باشد.
کاما ی دنباله دار
ECMAScript 5 اجازه می دهد که مقادیر متعدد را با کاما از هم تفکیک کنید :
مثال آبجکت :
مثال :
| person = { firstName: "John", lastName: " Doe", age: 46, } |
مثال آرایه :
مثال :
| points = [ 1, 5, 10, 25, 40, 100, ]; |
نکته : در Internet Explorer 8 اجازه ی استفاده از کاما به صورت مثال های فوق را ندارید!
مثال آبجکت :
مثال :
| // 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 به شما اجازه می دهد که مقادیر رشته ای با استفاده از بک اسلش ( \ ) در چندین خط شکسته شود :
\ method ممکن است پشتیبانی عمومی نداشته باشد.
مرورگرهای قدیمیتر ممکن است فضاهای اطراف بکسلش را به صورت متفاوت بررسی کنند.
برخی از مرورگرهای قدیمی فضاهای پشت \ character را پشتیبانی نمی کنند.
یک روش امن برای شکستن رشته ای از حروف الفبا، استفاده از رشته است:
کلمات رزرو شده به عنوان نام خصوصیات
ECMAScript 5 به عنوان نام خصوصیت استفاده از کلمات رزرو شده را مجاز می کند:
پشتیبانی مرورگرها از ES5
Chrome 23، IE 10 و Safari 6 اولین مرورگرهایی بودند که به طور کامل از ECMAScript 5 پشتیبانی می کردند:
| Chrome | IE10 / Edge | Firefox | Safari | Opera |
|---|
| Chrome 23 | IE10 / Edge | Firefox 21 | Safari 6 | Opera 15 |
| Sep 2012 | Sep 2012 | Apr 2013 | Jul 2012 | Jul 2013 |
کلام آخر
همانطور که در بخش قبلی در ابتدای بخش به بررسی نسخه های متعدد جاوا اسکریپت پرداخته بودیم، در ادامه ی مباحث به ویرایش های مهمی که تاکنون از جاوا اسکریپت انتشار یافته نیز اشاره کردیم، در این بخش نیز به بررسی و معرفی ECMAScript 5 یا جاوا اسکریپت ۵ که یکی از ویرایش های مهم جاوا اسکریپت است پرداختیم.
فروشگاه
فیلم های آموزشی
کتاب های آموزشی
مقالات آموزشی
وردپرس
