جافا سكريبت ES6
كان ECMAScript 2015 المراجعة الرئيسية الثانية لجافا سكريبت.
يُعرف ECMAScript 2015 أيضًا باسم ES6 و ECMAScript 6.
يصف هذا الفصل أهم ميزات ES6.
الميزات الجديدة في ES6
- الكلمة الرئيسية اسمحوا
- الكلمة الأساسية const
- وظائف السهم
- من أجل / من
- كائنات الخريطة
- تعيين الكائنات
- الطبقات
- وعود
- رمز
- المعلمات الافتراضية
- وظيفة بقية المعلمة
- السلسلة تتضمن ()
- String.startsWith ()
- String.endsWith ()
- Array.from ()
- مفاتيح المصفوفة ()
- العثور على صفيف ()
- صفيف FindIndex ()
- طرق الرياضيات الجديدة
- خصائص رقم جديدة
- طرق الأرقام الجديدة
- طرق عالمية جديدة
- مداخل الكائنات القابلة للتكرار
- وحدات جافا سكريبت
دعم المستعرض لـ ES6 (2015)
كان Safari 10 و Edge 14 أول متصفحات تدعم ES6 بالكامل:
| Chrome 58 | Edge 14 | Firefox 54 | Safari 10 | Opera 55 |
| Jan 2017 | Aug 2016 | Mar 2017 | Jul 2016 | Aug 2018 |
السماح جافا سكريبت
تتيح لك الكلمة الأساسية إعلان letمتغير بنطاق كتلة.
مثال
var x = 10;
// Here x is 10
{
let x = 2;
// Here x is 2
}
// Here x is 10
اقرأ المزيد عنها letفي الفصل: JavaScript Let .
JavaScript const
تسمح constلك الكلمة الأساسية بتعريف ثابت (متغير JavaScript بقيمة ثابتة).
تشبه الثوابت متغيرات السماح ، باستثناء أنه لا يمكن تغيير القيمة.
مثال
var x = 10;
// Here x is 10
{
const x = 2;
// Here x is 2
}
// Here x is 10
اقرأ المزيد عنها constفي الفصل: JavaScript Const .
وظائف السهم
تسمح وظائف السهم ببناء جملة قصير لكتابة تعبيرات الوظائف.
لا تحتاج إلى functionالكلمة الأساسية returnوالكلمة الرئيسية
والأقواس المتعرجة .
مثال
// ES5
var x = function(x, y) {
return x * y;
}
// ES6
const x = (x, y) => x * y;
وظائف الأسهم ليس لها وظائف خاصة بها this. فهي ليست مناسبة تمامًا لتعريف طرق الكائن .
لا يتم رفع وظائف الأسهم. يجب تحديدها قبل استخدامها.
يعد الاستخدام const
أكثر أمانًا من الاستخدام var، لأن تعبير الدالة يكون دائمًا قيمة ثابتة.
يمكنك حذف returnالكلمة الأساسية والأقواس المتعرجة فقط إذا كانت الوظيفة عبارة عن جملة واحدة. لهذا السبب ، قد يكون من الجيد الاحتفاظ بها دائمًا:
مثال
const x = (x, y) => { return x * y };
تعرف على المزيد حول وظائف السهم في الفصل: JavaScript Arrow Function .
من أجل / من الحلقة
تتكرر عبارة JavaScript for/ofعبر قيم الكائنات القابلة للتكرار.
for/of يتيح لك تكرار هياكل البيانات القابلة للتكرار مثل المصفوفات والسلاسل النصية والخرائط وقوائم العقد وغير ذلك.
الحلقة for/ofلها الصيغة التالية:
for (variable of iterable) {
// code block to be executed
}
متغير - لكل تكرار يتم تخصيص قيمة الخاصية التالية للمتغير. يمكن التصريح عن
المتغيرconst بـ ، letأو ، أو var.
قابل للتكرار - كائن له خصائص متكررة.
التكرار على مصفوفة
مثال
const cars = ["BMW", "Volvo", "Mini"];
let text = "";
for (let x of cars) {
text += x + " ";
}
التكرار على سلسلة
مثال
let language = "JavaScript";
let text = "";
for (let x of language) {
text += x + " ";
}
تعرف على المزيد في الفصل: حلقة JavaScript Loop For / In / Of .
كائنات خريطة جافا سكريبت
القدرة على استخدام كائن كمفتاح هي ميزة خريطة مهمة.
مثال
// Create Objects
const apples = {name: 'Apples'};
const bananas = {name: 'Bananas'};
const oranges = {name: 'Oranges'};
// Create a new Map
const fruits = new Map();
// Add new Elements to the Map
fruits.set(apples, 500);
fruits.set(bananas, 300);
fruits.set(oranges, 200);
تعرف على المزيد حول كائنات الخريطة في الفصل: خريطة JavaScript () .
تعيين كائنات جافا سكريبت
مثال
// Create a Set
const letters = new Set();
// Add some values to the Set
letters.add("a");
letters.add("b");
letters.add("c");
تعرف على المزيد حول تعيين الكائنات في الفصل: JavaScript Set () .
فئات JavaScript
فئات JavaScript هي قوالب لكائنات JavaScript.
استخدم الكلمة الأساسية classلإنشاء فصل دراسي.
أضف دائمًا طريقة باسم constructor():
بناء الجملة
class ClassName {
constructor() { ... }
}
مثال
class Car {
constructor(name, year) {
this.name = name;
this.year = year;
}
}
ينشئ المثال أعلاه فئة تسمى "سيارة".
يحتوي الفصل على خاصيتين أوليتين: "الاسم" و "السنة".
فئة JavaScript ليست كائنًا.
إنه قالب لكائنات جافا سكريبت.
باستخدام الفصل
عندما يكون لديك فصل ، يمكنك استخدام الفصل لإنشاء كائنات:
مثال
const myCar1 = new Car("Ford", 2014);
const myCar2 = new Car("Audi", 2019);
تعرف على المزيد حول الفئات في الفصل: فئات JavaScript .
وعود جافا سكريبت
الوعد هو كائن جافا سكريبت يربط بين "كود الإنتاج" و "كود الاستهلاك".
قد يستغرق "إنتاج الكود" بعض الوقت ويجب أن ينتظر "رمز الاستهلاك" النتيجة.
الوعد النحوي
const myPromise = new Promise(function(myResolve, myReject) {
// "Producing Code" (May take some time)
myResolve(); // when successful
myReject(); // when error
});
// "Consuming Code" (Must wait for a fulfilled Promise).
myPromise.then(
function(value) { /* code if successful */ },
function(error) { /* code if some error */ }
);
مثال باستخدام الوعد
const myPromise = new Promise(function(myResolve, myReject) {
setTimeout(function() { myResolve("I love You !!"); }, 3000);
});
myPromise.then(function(value) {
document.getElementById("demo").innerHTML = value;
});
تعرف على المزيد حول الوعود في الفصل: وعود JavaScript .
نوع الرمز
رمز JavaScript هو نوع بيانات بدائي مثل Number أو String أو Boolean.
إنه يمثل معرفًا "مخفيًا" فريدًا لا يمكن لأي رمز آخر الوصول إليه عن طريق الخطأ.
على سبيل المثال ، إذا أراد المبرمجون المختلفون إضافة خاصية person.id إلى كائن شخص ينتمي إلى كود طرف ثالث ، فيمكنهم مزج قيم بعضهم البعض.
باستخدام Symbol () لإنشاء معرفات فريدة ، يحل هذه المشكلة:
مثال
const person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor: "blue"
};
let id = Symbol('id');
person[id] = 140353;
// Now person[id] = 140353
// but person.id is still undefined
الرموز دائمًا فريدة من نوعها.
إذا قمت بإنشاء رمزين بنفس الوصف ، فسيكون لهما قيم مختلفة.
Symbol("id") == Symbol("id") // false
قيم المعلمات الافتراضية
يسمح ES6 بأن يكون لمعلمات الوظيفة قيم افتراضية.
مثال
function myFunction(x, y = 10) {
// y is 10 if not passed or undefined
return x + y;
}
myFunction(5); // will return 15
وظيفة بقية المعلمة
تسمح المعلمة rest (...) للدالة بمعالجة عدد غير محدد من الوسائط كمصفوفة:
مثال
function sum(...args) {
let sum = 0;
for (let arg of args) sum += arg;
return sum;
}
let x = sum(4, 9, 16, 25, 29, 100, 66, 77);
السلسلة تتضمن ()
يعيد includes()التابع trueإذا كانت السلسلة تحتوي على قيمة محددة ، وإلا false:
مثال
let text = "Hello world, welcome to the universe.";
text.includes("world") // Returns true
String.startsWith ()
يعود هذا startsWith()الأسلوب true
إذا بدأت السلسلة بقيمة محددة ، وإلا false:
مثال
let text = "Hello world, welcome to the universe.";
text.startsWith("Hello") // Returns true
String.endsWith ()
يعود هذا endsWith()الأسلوب true
إذا كانت السلسلة النصية تنتهي بقيمة محددة ، وإلا false:
مثال
var text = "John Doe";
text.endsWith("Doe") // Returns true
Array.from ()
The Array.from() method returns an Array object from any object with a length
property or any iterable object.
Example
Create an Array from a String:
Array.from("ABCDEFG") // Returns [A,B,C,D,E,F,G]
Array keys()
The keys() method returns an Array Iterator object with the keys of an array.
Example
Create an Array Iterator object, containing the keys of the array:
const fruits = ["Banana", "Orange", "Apple", "Mango"];
const keys = fruits.keys();
let text = "";
for (let x of keys) {
text += x + "<br>";
}
Array find()
The find() method returns the value of the first array element that passes a
test function.
This example finds (returns the value of ) the first element that is larger than 18:
Example
const numbers = [4, 9, 16, 25, 29];
let first =
numbers.find(myFunction);
function myFunction(value, index, array) {
return
value > 18;
}
Note that the function takes 3 arguments:
- The item value
- The item index
- The array itself
Array findIndex()
The findIndex() method returns the index of the first array element that
passes a test function.
This example finds the index of the first element that is larger than 18:
Example
const numbers = [4, 9, 16, 25, 29];
let first =
numbers.findIndex(myFunction);
function myFunction(value, index, array) {
return
value > 18;
}
Note that the function takes 3 arguments:
- The item value
- The item index
- The array itself
New Math Methods
ES6 added the following methods to the Math object:
Math.trunc()Math.sign()Math.cbrt()Math.log2()Math.log10()
The Math.trunc() Method
Math.trunc(x) returns the integer part of x:
Example
Math.trunc(4.9); // returns 4
Math.trunc(4.7); // returns 4
Math.trunc(4.4); // returns 4
Math.trunc(4.2); // returns 4
Math.trunc(-4.2); // returns -4
The Math.sign() Method
Math.sign(x) returns if x is negative, null or positive:
Example
Math.sign(-4); // returns -1
Math.sign(0); // returns 0
Math.sign(4); // returns 1
The Math.cbrt() Method
Math.cbrt(x) returns the cube root of x:
Example
Math.cbrt(8); // returns 2
Math.cbrt(64); // returns 4
Math.cbrt(125); // returns 5
The Math.log2() Method
Math.log2(x) returns the base 2 logarithm of x:
Example
Math.log2(2); // returns 1
The Math.log10() Method
Math.log10(x) returns the base 10 logarithm of x:
Example
Math.log10(10); // returns 1
New Number Properties
ES6 added the following properties to the Number object:
EPSILONMIN_SAFE_INTEGERMAX_SAFE_INTEGER
Example
let x = Number.EPSILON;
Example
let x = Number.MIN_SAFE_INTEGER;
Example
let x = Number.MAX_SAFE_INTEGER;
New Number Methods
ES6 added 2 new methods to the Number object:
Number.isInteger()Number.isSafeInteger()
The Number.isInteger() Method
The Number.isInteger() method returns true if the argument is an integer.
Example
Number.isInteger(10); // returns true
Number.isInteger(10.5); // returns false
The Number.isSafeInteger() Method
A safe integer is an integer that can be exactly represented as a double precision number.
The Number.isSafeInteger() method returns true if the argument is a safe integer.
Example
Number.isSafeInteger(10); // returns true
Number.isSafeInteger(12345678901234567890); // returns false
Safe integers are all integers from -(253 - 1) to +(253 - 1).
This is safe: 9007199254740991. This is not safe: 9007199254740992.
New Global Methods
ES6 added 2 new global number methods:
isFinite()isNaN()
The isFinite() Method
The global isFinite() method returns false if the argument is Infinity or NaN.
Otherwise it returns true:
Example
isFinite(10/0); // returns false
isFinite(10/1); // returns true
The isNaN() Method
The global isNaN() method returns true if the argument is NaN. Otherwise it returns false:
Example
isNaN("Hello"); // returns true