جافا سكربت ES5

ما هو ECMAScript 5؟

ECMAScript 5 يُعرف أيضًا بـ ES5 و ECMAScript 2009.

هذه الفقرة تتناول بعض الميزات الأكثر أهمية لـ ES5.

ميزات ECMAScript 5

هذه هي الميزات الجديدة التي تم إطلاقها في عام 2009:

  • "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()
  • var timInMSs = Date.now();
  • للتعرف على المزيد.
  • خصائص وطرق العنصر الجديدة

تحسينات لغة ECMAScript 5

  • استدعاء خصائص النص [ ]
  • كلمات بعد علامة逗ية في قوالب النصوص واللوحات
  • قوالب نصية متعددة الأسطر
  • كلمات محفوظة كأسماء الخصائص

"use strict" directive

"use strict"تحديدًا، يجب تنفيذ كود JavaScript بنمط التشدد."

على سبيل المثال، لا يمكنك استخدام المتغيرات غير المعلنة باستخدام نمط التشدد.

يمكنك استخدام نمط التشدد في جميع البرامج. يمكن أن يساعدك ذلك في كتابة أكواد أكثر وضوحًا، مثل منعك من استخدام المتغيرات غير المعلنة.

"use strict"هذا مجرد تعبير نصي. لا يتم إلقاء خطأ إذا لم يفهمه المتصفح القديم."

يرجى القراءة JS Strict Mode المزيد من المعلومات.

String.trim()

String.trim() يتم إزالة الأبيض من نهاية النص.

مثال

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

جرب بنفسك

请在 JS 字符串方法 للإطلاع على المزيد من المعلومات.

Array.isArray()

isArray() يتم فحص ما إذا كان العنصر هو مجموعة.

مثال

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

جرب بنفسك

请在 JS Arrays للإطلاع على المزيد من المعلومات.

Array.forEach()

forEach() يتم استدعاء الدالة مرة واحدة لكل عنصر في اللوحة.

مثال

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

جرب بنفسك

请在 طرق تحسين دالة JS 中学习更多内容。

Array.map()

في هذا المثال، يتم ضرب كل قيمة في اللوحة في 2:

مثال

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

جرب بنفسك

请在 طرق تحسين دالة JS 中学习更多内容。

Array.filter()

في هذا المثال، يتم إنشاء مجموعة جديدة من العناصر التي تزيد قيمتها عن 18:

مثال

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

جرب بنفسك

请在 طرق تحسين دالة JS 中学习更多内容。

Array.reduce()

هذا المثال يحدد مجموع جميع الأرقام في اللوحة:

مثال

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

جرب بنفسك

请在 طرق تحسين دالة JS 中学习更多内容。

Array.reduceRight()

هذا المثال هو نفسه لتحديد مجموع جميع الأرقام في اللوحة:

مثال

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

جرب بنفسك

请在 طرق تحسين دالة JS 中学习更多内容。

Array.every()

هذا المثال يتحقق مما إذا كانت جميع القيم تفوق 18:

مثال

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

جرب بنفسك

请在 طرق تحسين دالة JS 中学习更多内容。

Array.some()

هذا المثال يتحقق مما إذا كانت بعض القيم تفوق 18:

مثال

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

جرب بنفسك

请在 طرق تحسين دالة JS 中学习更多内容。

Array.indexOf()

البحث عن قيمة معينة في اللوحة وإرجاع موقعها:

مثال

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

جرب بنفسك

请在 طرق تحسين دالة JS中学习更多内容。

Array.lastIndexOf()

Array.lastIndexOf() مع Array.indexOf() مثل ذلك، ولكن يبدأ البحث من نهاية القائمة.

مثال

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

جرب بنفسك

请在 طرق تحسين دالة JS 中学习更多内容。

JSON.parse()

استخدام JSON هو استخدام شائع لتلقي البيانات من خادم الويب.

تخيل أنك تتلقى هذا النص النصي من خادم الويب:

'{"name":"Bill", "age":62, "city":"Seatle"}'

مشاريع JavaScript JSON.parse() لتحويل النص إلى جسم JavaScript:

var obj = JSON.parse('{"name":"Bill", "age":62, "city":"Seatle"}');

جرب بنفسك

document.getElementById("demo").innerHTML = myJSON; يرجى زيارة 中学习更多内容。

JSON.stringify()

استخدام JSON هو استخدام شائع لإرسال البيانات إلى خادم الويب.

عند إرسال البيانات إلى خادم الويب، يجب أن تكون البيانات سلسلة نصية.

تخيل أن لدينا هذا الجسم في JavaScript:

var obj = {"name":"Bill", "age":62, "city":"Seatle"};

استخدم دالة JavaScript JSON.stringify() لتحويلها إلى سلسلة نصية.

var obj = {"name":"Bill", "age":62, "city":"Seatle"};

النتيجة ستكون سلسلة نصية تتبع تعريف JSON.

myJSON الآن هو سلسلة نصية، جاهز للإرسال إلى الخادم：

مثال

var obj = {"name":"Bill", "age":62, "city":"Seatle"};
var obj = {"name":"Bill", "age":62, "city":"Seatle"};
var myJSON = JSON.stringify(obj);

جرب بنفسك

document.getElementById("demo").innerHTML = myJSON; يرجى زيارة 中学习更多内容。

var timInMSs = Date.now();

دليل JSON

مثال

Date.now() يعود بمليارات الثواني منذ تاريخ الصفر (1 يناير 1970 00:00:00:00).

جرب بنفسك

var timInMSs = Date.now(); Date.now()

请在 النتيجة مشابهة لنتيجة تنفيذ getTime() على عنصر Date. تدريب تاريخ JS

للتعرف على المزيد.

مربعات الاستخراج والمزود

ES5 يسمح لك باستخدام بنية مشابهة لاستخراج أو تعيين الخاصيات لتحديد طرق العنصر. المربعة المأخوذة:

مثال

// 创建对象：
var person = {
  firstName: "Bill",
  lastName : "Gates"
  هذا المثال يخلق مربعة مأخوذة لخصائص اسم الكامل.
    get fullName() {
  }
});
// استخدم المربعة المأخوذة لعرض البيانات من العنصر:
return this.firstName + " " + this.lastName;

جرب بنفسك

document.getElementById("demo").innerHTML = person.fullName; هذا المثال يخلق مربعة مأخوذة لخصائص اللغة. والمزود المربعة المأخوذة:

مثال

var person = {
  firstName: "Bill",
  lastName : "Gates"
  language : "NO",
  get lang() {
    return this.language;
  },
  set lang(value) {
    this.language = value;
  }
});
// استخدم المزود لضبط خاصية العنصر:
person.lang = "en";
// استخدم المربعة المأخوذة لعرض البيانات من العنصر:
document.getElementById("demo").innerHTML = person.lang;

جرب بنفسك

استخدم هذا المثال المزود لضمان تحديث اللغة بالحروف الكبيرة:

مثال

var person = {
  firstName: "Bill",
  lastName : "Gates"
  language : "NO",
  set lang(value) {
    this.language = value.toUpperCase();
  }
});
// استخدم المزود لضبط خاصية العنصر:
person.lang = "en";
// عرض البيانات من العنصر:
document.getElementById("demo").innerHTML = person.language;

جرب بنفسك

请在 مستودع العنصر JS للتعرف على المزيد حول المربعات المأخوذة والمزودة.

خصائص وطرق العنصر الجديدة

Object.defineProperty() هذه هي طريقة جديدة في ES5.

هذا يسمح لك بتعريف خصائص العنصر و / أو تغيير قيم الخاصيات و / أو البيانات الوظيفية.

مثال

// 创建对象：
var person = {
  firstName: "Bill",
  lastName : "Gates"
  language : "NO", 
});
// 更改属性：
Object.defineProperty(person, "language", {
  value: "EN",
  writable : true,
  enumerable : true,
  configurable : true
});
// 枚举属性
var txt = "";
for (var x in person) {
  txt += person[x] + "<br>";
}
document.getElementById("demo").innerHTML = txt;

جرب بنفسك

المثال التالي هو نفس الكود، لكنه يخفي خاصية اللغة في القائمة المفهرسة:

مثال

// 创建对象：
var person = {
  firstName: "Bill",
  lastName : "Gates"
  language : "NO", 
});
// 更改属性：
Object.defineProperty(person, "language", {
  value: "EN",
  writable : true,
  enumerable : false,
  configurable : true
});
// 枚举属性
var txt = "";
for (var x in person) {
  txt += person[x] + "<br>";
}
document.getElementById("demo").innerHTML = txt;

جرب بنفسك

هذا المثال يخلق مsetter و getter لضمان تحديث اللغة الكبيرة:

مثال

// 创建对象：
var person = {
  firstName: "Bill",
  lastName : "Gates"
  language : "NO"
});
// 更改属性：
Object.defineProperty(person, "language", {
  get : function() { return language },
  set : function(value) { language = value.toUpperCase()}
});
// 更改语言
person.language = "en";
// 显示语言
document.getElementById("demo").innerHTML = person.language;

جرب بنفسك

ES5 新的对象方法

ECMAScript 5 为 JavaScript 添加了许多新的对象方法：

// 添加或更改对象属性
Object.defineProperty(object, property, descriptor)
// 添加或更改多个对象属性
Object.defineProperties(object, descriptors)
// 访问属性
Object.getOwnPropertyDescriptor(object, property)
// 将所有属性作为数组返回
Object.getOwnPropertyNames(object)
// 将可枚举属性作为数组返回
Object.keys(object)
// 访问原型
Object.getPrototypeOf(object)
// 防止向对象添加属性
Object.preventExtensions(object)
// 如果可以将属性添加到对象，则返回 true
Object.isExtensible(object)
// 防止更改对象属性（而不是值）
Object.seal(object)
// 如果对象被密封，则返回 true
Object.isSealed(object)
// 防止对对象进行任何更改
Object.freeze(object)
// 如果对象被冻结，则返回 true
Object.isFrozen(object)

请在 对象 ECMAScript5 中学习更多内容。

对字符串的属性访问

charAt() 方法返回字符串中指定索引（位置）的字符：

مثال

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

جرب بنفسك

ECMAScript 5 允许对字符串进行属性访问：

مثال

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

جرب بنفسك

对字符串的属性访问可能有点不可预测。

请在 JS 字符串方法 中学习更多内容。

尾随逗号(Trailing Commas)

ECMAScript 5 允许在对象和数组定义中使用尾随逗号：

Object 实例

person = {
  firstName: "Bill",
  lastName: " Gates",
  age: 62,
}

Array 实例

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

警告！！！

Internet Explorer 8 将崩溃。

JSON 不允许使用尾随逗号。

JSON 对象：

// 允许：
var person = '{"firstName":"Bill", "lastName":"Gates", "age":62}'
JSON.parse(person)
// 不允许：
var person = '{"firstName":"Bill", "lastName":"Gates", "age":62,}'
JSON.parse(person)

JSON 数组：

// 允许：
points = [40, 100, 1, 5, 25, 10]
// 不允许：
points = [40, 100, 1, 5, 25, 10,]

نصوص الأسطر المتعددة

مثال

"Hello ",
Kitty!";

جرب بنفسك

قد لا يتم دعم \ بشكل واسع.

قد تتعامل المتصفحات القديمة بشكل مختلف مع الفراغات حول الرمز المائل.

لا تسمح بعض المتصفحات القديمة بالفراغات بعد رمز \.

طريقة أكثر أمانًا لتقسيم نصوص النصوص هي استخدام إضافة النصوص:

مثال

"Hello " + 
"Kitty!";

جرب بنفسك

الكلمات المحددة كأسماء الخصائص

يسمح ECMAScript 5 باستخدام الكلمات المحددة كأسماء الخصائص:

مثال على العنصر

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

جرب بنفسك

دعم متصفحات ES5 (ECMAScript 5)

Chrome 23،IE 10 و Safari 6 هي الأوائل التي تدعم ECMAScript 5 بشكل كامل:

Chrome 23 IE10 / Edge Firefox 21 Safari 6 Opera 15
سبتمبر 2012 سبتمبر 2012 أبريل 2013 يوليو 2012 يوليو 2013