جافا سكريبت ES5
كان ECMAScript 2009 ، المعروف أيضًا باسم ES5 ، أول مراجعة رئيسية لـ JavaScript.
يصف هذا الفصل أهم ميزات ES5.
ميزات ES5
- "استخدام صارم"
- وصول سلسلة [ رقم ]
- سلاسل متعددة الأسطر
- String.trim ()
- Array.isArray ()
- صفيف لكل ()
- خريطة المصفوفة ()
- مرشح المصفوفة ()
- صفيف تقليل ()
- مصفوفة تقليل اليمين ()
- صفيف كل ()
- صفيف بعض ()
- فهرس المصفوفة ()
- صفيف lastIndexOf ()
- JSON.parse ()
- JSON.stringify ()
- Date.now ()
- التاريخ إلى ISOString ()
- التاريخ حتى JSON ()
- حاصلون على الممتلكات وواضعوها
- الكلمات المحجوزة كأسماء خصائص
- طرق الكائن
- تعريف الكائن الخاصية ()
- Function.bind ()
- الفواصل اللاحقة
دعم المتصفح
ES5 مدعوم بالكامل في جميع المتصفحات الحديثة:
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Yes | 9.0 | Yes | Yes | Yes | Yes |
توجيه "الاستخدام الصارم"
"use strict" يحدد وجوب تنفيذ تعليمات JavaScript البرمجية في "الوضع المتشدد".
باستخدام الوضع المتشدد ، يمكنك ، على سبيل المثال ، عدم استخدام متغيرات غير معرّفة.
يمكنك استخدام الوضع المتشدد في جميع برامجك. يساعدك على كتابة كود أنظف ، مثل منعك من استخدام متغيرات غير معرّفة.
"use strict"هو مجرد تعبير سلسلة. لن تتسبب المتصفحات القديمة في حدوث خطأ إذا لم يفهموا ذلك.
اقرأ المزيد في JS Strict Mode .
الوصول إلى الممتلكات على سلاسل
تُرجع charAt()الطريقة الحرف في فهرس (موضع) محدد في سلسلة:
مثال
var str = "HELLO WORLD";
str.charAt(0); // returns H
يسمح ES5 بالوصول إلى الخاصية على السلاسل:
مثال
var str = "HELLO WORLD";
str[0]; // returns H
قد يكون الوصول إلى الخاصية على السلسلة غير متوقع بعض الشيء.
اقرأ المزيد في JS String Methods .
سلاسل على خطوط متعددة
يسمح ES5 بسلسلة حرفية عبر عدة أسطر إذا تم تخطيها بشرطة مائلة للخلف:مثال
"Hello \
Dolly!";
قد لا تحظى الطريقة \ بدعم عالمي.
قد تتعامل المتصفحات القديمة مع المسافات حول الشرطة المائلة للخلف بشكل مختلف.
لا تسمح بعض المتصفحات القديمة بمسافات خلف الحرف \.
الطريقة الأكثر أمانًا لتفكيك سلسلة حرفية هي استخدام إضافة سلسلة:
مثال
"Hello " +
"Dolly!";
الكلمات المحجوزة كأسماء خاصية
يسمح ES5 بالكلمات المحجوزة كأسماء خصائص:
مثال على الكائن
var obj = {name: "John", new: "yes"}
تقليم السلسلة ()
تزيل الطريقة trim()المسافة البيضاء من جانبي السلسلة.
مثال
var str = " Hello World! ";
alert(str.trim());
اقرأ المزيد في JS String Methods .
Array.isArray ()
يتحقق هذا isArray()الأسلوب مما إذا كان الكائن عبارة عن مصفوفة.
مثال
function myFunction() {
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = document.getElementById("demo");
x.innerHTML = Array.isArray(fruits);
}
اقرأ المزيد في JS Arrays .
صفيف لكل ()
تستدعي forEach()الطريقة دالة مرة واحدة لكل عنصر مصفوفة.
مثال
var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);
function myFunction(value) {
txt = txt + value + "<br>";
}
تعرف على المزيد في طرق تكرار صفيف JS .
خريطة المصفوفة ()
هذا المثال يضرب كل قيمة صفيف في 2:
مثال
var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);
function myFunction(value) {
return value * 2;
}
تعرف على المزيد في طرق تكرار صفيف JS .
مرشح المصفوفة ()
ينشئ هذا المثال مصفوفة جديدة من عناصر بقيمة أكبر من 18:
مثال
var numbers = [45, 4, 9, 16, 25];
var over18 =
numbers.filter(myFunction);
function myFunction(value) {
return value > 18;
}
تعرف على المزيد في طرق تكرار صفيف JS .
صفيف تقليل ()
يجد هذا المثال مجموع كل الأرقام في المصفوفة:
مثال
var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction);
function myFunction(total, value) {
return total + value;
}
تعرف على المزيد في طرق تكرار صفيف JS .
مصفوفة تقليل اليمين ()
يجد هذا المثال أيضًا مجموع كل الأرقام في المصفوفة:
مثال
var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduceRight(myFunction);
function myFunction(total, value) {
return total + value;
}
تعرف على المزيد في طرق تكرار صفيف JS .
صفيف كل ()
يتحقق هذا المثال مما إذا كانت جميع القيم أكبر من 18:
مثال
var numbers = [45, 4, 9, 16, 25];
var allOver18 =
numbers.every(myFunction);
function myFunction(value) {
return
value > 18;
}
تعرف على المزيد في طرق تكرار صفيف JS .
صفيف بعض ()
يتحقق هذا المثال مما إذا كانت بعض القيم تزيد عن 18:
مثال
var numbers = [45, 4, 9, 16, 25];
var allOver18 =
numbers.some(myFunction);
function myFunction(value) {
return
value > 18;
}
تعرف على المزيد في طرق تكرار صفيف JS .
فهرس المصفوفة ()
ابحث في مصفوفة عن قيمة عنصر وقم بإرجاع موضعها.
مثال
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var a = fruits.indexOf("Apple");
تعرف على المزيد في طرق تكرار صفيف JS .
صفيف lastIndexOf ()
lastIndexOf()هو نفسه indexOf()، لكن عمليات البحث من نهاية المصفوفة.
مثال
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var a = fruits.lastIndexOf("Apple");
تعرف على المزيد في طرق تكرار صفيف JS .
JSON.parse ()
الاستخدام الشائع لـ JSON هو تلقي البيانات من خادم الويب.
تخيل أنك تلقيت هذه السلسلة النصية من خادم ويب:
'{"name":"John", "age":30, "city":"New York"}'
تُستخدم وظيفة JavaScript JSON.parse()لتحويل النص إلى كائن JavaScript:
var obj = JSON.parse('{"name":"John", "age":30, "city":"New
York"}');
اقرأ المزيد في برنامجنا التعليمي JSON .
JSON.stringify ()
الاستخدام الشائع لـ JSON هو إرسال البيانات إلى خادم الويب.
عند إرسال البيانات إلى خادم ويب ، يجب أن تكون البيانات عبارة عن سلسلة.
تخيل أن لدينا هذا الكائن في JavaScript:
var obj = {name:"John", age:30, city:"New York"};
استخدم وظيفة JavaScript 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() returns the number of milliseconds since zero date (January 1.
1970 00:00:00 UTC).
Example
var timInMSs = Date.now();
Date.now() returns the same as getTime() performed on a Date object.
Learn more in JS Dates.
Date toISOString()
The toISOString() method converts a Date object to a string, using the ISO standard format:
Example
const d = new Date();
document.getElementById("demo").innerHTML = d.toISOString();
Date toJSON()
toJSON() converts a Date object into a string, formatted as a JSON date.
JSON dates have the same format as the ISO-8601 standard: YYYY-MM-DDTHH:mm:ss.sssZ:
Example
d = new Date();
document.getElementById("demo").innerHTML = d.toJSON();
Property Getters and Setters
ES5 lets you define object methods with a syntax that looks like getting or setting a property.
This example creates a getter for a property called fullName:
Example
// 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;
This example creates a setter and a getter for the language property:
Example
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;
This example uses a setter to secure upper case updates of language:
Example
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;
Learn more about Gettes and Setters in JS Object Accessors
Object.defineProperty()
Object.defineProperty() is a new Object method in ES5.
It lets you define an object property and/or change a property's value and/or metadata.
Example
// 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;
Next example is the same code, except it hides the language property from enumeration:
Example
// 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;
This example creates a setter and a getter to secure upper case updates of language:
Example
/// 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;
E5 Object Methods
ES5 added a lot of new Object Methods to JavaScript:
Managing Objects
// Create object with an existing object as prototype
Object.create(parent, donor)
// Adding or changing an object property
Object.defineProperty(object, property, descriptor)
// Adding or changing object properties
Object.defineProperties(object, descriptors)
// Accessing Properties
Object.getOwnPropertyDescriptor(object, property)
// Returns all properties as an array
Object.getOwnPropertyNames(object)
// Accessing the prototype
Object.getPrototypeOf(object)
// Returns enumerable properties as an array
Object.keys(object)
Protecting Objects
// 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)
Learn more in Object ECMAScript5.
Trailing Commas
ES5 allows trailing commas in object and array definitions:
Object Example
person = {
firstName: "John",
lastName: "
Doe",
age: 46,
}
Array Example
points = [
1,
5,
10,
25,
40,
100,
];
WARNING !!!
JSON does not allow trailing commas.
JSON Objects:
//
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)
JSON Arrays:
//
Allowed:
points = [40, 100, 1, 5, 25, 10]
// Not allowed:
points =
[40, 100, 1, 5, 25, 10,]