ES6 for humans
1.0.0
؟ الدليل الكامل متاح الآن على Amazon
let ، و const و block تحديد النطاق let يتيح لك إنشاء إعلانات مرتبطة بأي كتلة ، تسمى كتلة الكتلة. بدلاً من استخدام var ، والذي يوفر نطاق الوظيفة ، يوصى باستخدام متغيرات الكتلة المنهارة ( let أو const ) في ES6.
var a = 2 ;
{
let a = 3 ;
console . log ( a ) ; // 3
let a = 5 ; // TypeError: Identifier 'a' has already been declared
}
console . log ( a ) ; // 2 شكل آخر من أشكال الإعلان الذي تم سكيره الكتلة هو const ، الذي يخلق الثوابت. في ES6 ، يمثل const إشارة مستمرة إلى القيمة. بمعنى آخر ، قد تتغير محتويات Object Array ، يتم منع إعادة تقييم المتغير فقط. هذا مثال بسيط:
{
const b = 5 ;
b = 10 ; // TypeError: Assignment to constant variable
const arr = [ 5 , 6 ] ;
arr . push ( 7 ) ;
console . log ( arr ) ; // [5,6,7]
arr = 10 ; // TypeError: Assignment to constant variable
arr [ 0 ] = 3 ; // value is mutable
console . log ( arr ) ; // [3,6,7]
}بعض الأشياء التي يجب وضعها في الاعتبار:
let و const من الرفع التقليدي للمتغيرات والوظائف. يتم رفع كلا let const ، ولكن لا يمكن الوصول إليهما قبل إعلانهما ، بسبب المنطقة الميتة الزمنيةlet نطرق و const إلى أقرب كتلة مغلقة.const PI = 3.14 )const مع إعلانها.const let ، إلا إذا كنت تخطط لإعادة تعيين المتغير. وظائف السهم هي تدوين قصير اليدين لوظائف الكتابة في ES6. يتكون تعريف وظيفة السهم من قائمة المعلمات ( ... ) ، تليها العلامة => وجسم الوظيفة. بالنسبة لوظائف الحجة الواحدة ، قد يتم حذف الأقواس.
// Classical Function Expression
function addition ( a , b ) {
return a + b ;
} ;
// Implementation with arrow function
const addition = ( a , b ) => a + b ;
// With single argument, no parentheses required
const add5 = a => 5 + a ; لاحظ أنه في المثال أعلاه ، يتم تنفيذ وظيفة سهم addition مع "الجسم الموجز" والتي لا تحتاج إلى بيان إرجاع صريح. لاحظ حذف { } بعد => .
فيما يلي مثال على "الجسم" المعتاد. بما في ذلك أغلفة الدعامة المجعد.
const arr = [ 'apple' , 'banana' , 'orange' ] ;
const breakfast = arr . map ( fruit => {
return fruit + 's' ;
} ) ;
console . log ( breakfast ) ; // ['apples', 'bananas', 'oranges']ها! هناك المزيد ...
وظائف السهم لا تجعل الرمز أقصر فقط. ترتبط ارتباطًا وثيقًا this السلوك الملزم.
سلوك وظائف السهم مع this الكلمة الرئيسية يختلف من وظائف الوظائف العادية. تحدد كل وظيفة في JavaScript this السياق ولكن وظائف السهم تلتقط this القيمة لأقرب سياق مغلق. تحقق من الرمز التالي:
function Person ( ) {
// The Person() constructor defines `this` as an instance of itself.
this . age = 0 ;
setInterval ( function growUp ( ) {
// In non-strict mode, the growUp() function defines `this`
// as the global object, which is different from the `this`
// defined by the Person() constructor.
this . age ++ ;
} , 1000 ) ;
}
var p = new Person ( ) ; في ECMascript 3/5 ، تم إصلاح هذه المشكلة عن طريق تعيين القيمة في this إلى متغير يمكن إغلاقه.
function Person ( ) {
const self = this ;
self . age = 0 ;
setInterval ( function growUp ( ) {
// The callback refers to the `self` variable of which
// the value is the expected object.
self . age ++ ;
} , 1000 ) ;
}كما ذكر أعلاه ، تلتقط وظائف السهم هذه القيمة لأقرب سياق مغلق ، وبالتالي فإن الكود التالي يعمل كما هو متوقع ، حتى مع وظائف الأسهم المتداخلة.
function Person ( ) {
this . age = 0 ;
setInterval ( ( ) => {
setTimeout ( ( ) => {
this . age ++ ; // `this` properly refers to the person object
} , 1000 ) ;
} , 1000 ) ;
}
let p = new Person ( ) ;اقرأ المزيد عن "المعجمية هذا" في وظائف السهم هنا
يتيح لك ES6 تعيين المعلمات الافتراضية في تعريفات الوظائف. هنا توضيح بسيط.
const getFinalPrice = ( price , tax = 0.7 ) => price + price * tax ;
getFinalPrice ( 500 ) ; // 850 ... يشار إلى المشغل على أنه مشغل انتشار أو راحة ، اعتمادًا على كيفية استخدامه وأين.
عند استخدامه مع أي شيء ، فإنه يعمل على "نشره" في عناصر فردية:
const makeToast = ( breadType , topping1 , topping2 ) => {
return `I had ${ breadType } toast with ${ topping1 } and ${ topping2 } ` ;
} ; const ingredients = [ 'wheat' , 'butter' , 'jam' ] ;
makeToast ( ... ingredients ) ;
// "I had wheat toast with butter and jam"
makeToast ( ... [ 'sourdough' , 'avocado' , 'kale' ] ) ;
// "I had sourdough toast with avocado and kale"يعد الانتشار أيضًا رائعًا لتشكيل كائن جديد من كائنات (كائنات) أخرى:
const defaults = { avatar : 'placeholder.jpg' , active : false }
const userData = { username : 'foo' , avatar : 'bar.jpg' }
console . log ( { created : '2017-12-31' , ... defaults , ... userData } )
// {created: "2017-12-31", avatar: "bar.jpg", active: false, username: "foo"}يمكن أيضًا تشكيل المصفوفات الجديدة بشكل صريح:
const arr1 = [ 1 , 2 , 3 ] ;
const arr2 = [ 7 , 8 , 9 ] ;
console . log ( [ ... arr1 , 4 , 5 , 6 , ... arr2 ] ) // [1, 2, 3, 4, 5, 6, 7, 8, 9] الاستخدام الشائع الآخر لـ ... هو جمع جميع الحجج معًا في صفيف. يشار إلى هذا مشغل "REST".
function foo ( ... args ) {
console . log ( args ) ;
}
foo ( 1 , 2 , 3 , 4 , 5 ) ; // [1, 2, 3, 4, 5]يسمح ES6 بإعلان حرفي الكائن من خلال توفير بناء جملة مختصرة لتهيئة الخصائص من المتغيرات وتحديد طرق الوظيفة. كما أنه يتيح القدرة على الحصول على مفاتيح خاصية محسوبة في التعريف الحرفي الكائن.
function getCar ( make , model , value ) {
return {
// with property value shorthand
// syntax, you can omit the property
// value if key matches variable
// name
make , // same as make: make
model , // same as model: model
value , // same as value: value
// computed values now work with
// object literals
[ 'make' + make ] : true ,
// Method definition shorthand syntax
// omits `function` keyword & colon
depreciate ( ) {
this . value -= 2500 ;
}
} ;
}
let car = getCar ( 'Kia' , 'Sorento' , 40000 ) ;
console . log ( car ) ;
// {
// make: 'Kia',
// model:'Sorento',
// value: 40000,
// makeKia: true,
// depreciate: function()
// } ES6 لديه دعم جديد للأدعية الثنائية والثنائية. من شأن إنفاق رقم مع 0o أو 0O تحويله إلى قيمة ثماني. إلقاء نظرة على الكود التالي:
let oValue = 0o10 ;
console . log ( oValue ) ; // 8
let bValue = 0b10 ; // 0b or 0B for binary
console . log ( bValue ) ; // 2يساعد التدمير في تجنب الحاجة إلى متغيرات درجة الحرارة عند التعامل مع الكائن والصفائف.
function foo ( ) {
return [ 1 , 2 , 3 ] ;
}
let arr = foo ( ) ; // [1,2,3]
let [ a , b , c ] = foo ( ) ;
console . log ( a , b , c ) ; // 1 2 3 function getCar ( ) {
return {
make : 'Tesla' ,
model : 'g95' ,
metadata : {
vin : '123abc' ,
miles : '12000'
}
} ;
}
const { make , model } = getCar ( ) ;
console . log ( make , model ) ; // Tesla g95
const { make , metadata : { miles } } = getCar ( ) ;
console . log ( make , miles ) ; // Tesla 12000
يسمح ES6 باستخدام طريقة super في الكائنات (غير الطبيعية) مع النماذج الأولية. فيما يلي مثال بسيط:
const parent = {
foo ( ) {
console . log ( "Hello from the Parent" ) ;
}
}
const child = {
foo ( ) {
super . foo ( ) ;
console . log ( "Hello from the Child" ) ;
}
}
Object . setPrototypeOf ( child , parent ) ;
child . foo ( ) ; // Hello from the Parent
// Hello from the Childيقدم ES6 طريقة أسهل لإضافة عمليات استيفاء يتم تقييمها تلقائيًا.
`${ ... }` يستخدم لتقديم المتغيرات.` كمحدد. let user = 'Kevin' ;
console . log ( `Hi ${ user } !` ) ; // Hi Kevin!for...of التكرار على الأشياء التي لا يمكن أن تكون ، مثل الصفيف. const nicknames = [ 'di' , 'boo' , 'punkeye' ] ;
nicknames . size = 3 ;
for ( let nickname of nicknames ) {
console . log ( nickname ) ;
}
// di
// boo
// punkeyefor...in التكرار على جميع خصائص التعداد للكائن. const nicknames = [ 'di' , 'boo' , 'punkeye' ] ;
nicknames . size = 3 ;
for ( let nickname in nicknames ) {
console . log ( nickname ) ;
}
// 0
// 1
// 2
// size يقدم ES6 مجموعة جديدة من هياكل البيانات تسمى Map و WeakMap . الآن ، نستخدم في الواقع الخرائط في JavaScript طوال الوقت. في الواقع يمكن اعتبار كل كائن Map .
يتم صنع كائن من المفاتيح (السلاسل دائمًا) والقيم ، بينما في Map ، يمكن استخدام أي قيمة (كلا الكائنين والقيم البدائية) إما كمفتاح أو قيمة. ألقِ نظرة على هذا الرمز:
const myMap = new Map ( ) ;
const keyString = "a string" ,
keyObj = { } ,
keyFunc = ( ) => { } ;
// setting the values
myMap . set ( keyString , "value associated with 'a string'" ) ;
myMap . set ( keyObj , "value associated with keyObj" ) ;
myMap . set ( keyFunc , "value associated with keyFunc" ) ;
myMap . size ; // 3
// getting the values
myMap . get ( keyString ) ; // "value associated with 'a string'"
myMap . get ( keyObj ) ; // "value associated with keyObj"
myMap . get ( keyFunc ) ; // "value associated with keyFunc"خريطة ضعيفة
الخريطة WeakMap هي الخريطة التي تتم فيها الرجوع إلى المفاتيح بشكل ضعيف ، والتي لا تمنع مفاتيحها من أن تكون قد تم جمعها. هذا يعني أنه لا داعي للقلق بشأن تسرب الذاكرة.
شيء آخر يجب ملاحظته هنا- في WeakMap بدلاً من Map يجب أن يكون كل مفتاح كائنًا .
تحتوي WeakMap فقط على أربع طرق delete(key) ، has(key) ، get(key) set(key, value) .
const w = new WeakMap ( ) ;
w . set ( 'a' , 'b' ) ;
// Uncaught TypeError: Invalid value used as weak map key
const o1 = { } ,
o2 = ( ) => { } ,
o3 = window ;
w . set ( o1 , 37 ) ;
w . set ( o2 , "azerty" ) ;
w . set ( o3 , undefined ) ;
w . get ( o3 ) ; // undefined, because that is the set value
w . has ( o1 ) ; // true
w . delete ( o1 ) ;
w . has ( o1 ) ; // falseالكائنات المحددة هي مجموعات من القيم الفريدة. يتم تجاهل القيم المكررة ، حيث يجب أن تحتوي المجموعة على جميع القيم الفريدة. يمكن أن تكون القيم أنواعًا بدائية أو مراجع كائن.
const mySet = new Set ( [ 1 , 1 , 2 , 2 , 3 , 3 ] ) ;
mySet . size ; // 3
mySet . has ( 1 ) ; // true
mySet . add ( 'strings' ) ;
mySet . add ( { a : 1 , b : 2 } ) ; يمكنك التكرار عبر مجموعة إدراج باستخدام طريقة forEach أو for...of الحلقة.
mySet . forEach ( ( item ) => {
console . log ( item ) ;
// 1
// 2
// 3
// 'strings'
// Object { a: 1, b: 2 }
} ) ;
for ( let value of mySet ) {
console . log ( value ) ;
// 1
// 2
// 3
// 'strings'
// Object { a: 1, b: 2 }
} تحتوي المجموعات أيضًا على طرق delete() و clear() .
ضعيفة
على غرار WeakMap ، يتيح لك كائن WeakSet تخزين كائنات ضعيفة في المجموعة. كائن في WeakSet يحدث مرة واحدة فقط ؛ إنها فريدة من نوعها في مجموعة Depets.
const ws = new WeakSet ( ) ;
const obj = { } ;
const foo = { } ;
ws . add ( window ) ;
ws . add ( obj ) ;
ws . has ( window ) ; // true
ws . has ( foo ) ; // false, foo has not been added to the set
ws . delete ( window ) ; // removes window from the set
ws . has ( window ) ; // false, window has been removedيقدم ES6 بناء جملة فئة جديدة. شيء واحد يجب ملاحظته هنا هو أن فئة ES6 ليست نموذج ميراث جديد موجه نحو الكائن. إنها بمثابة السكر النحوي على ميراث جافا سكريبت القائم على النموذج الأولي.
طريقة واحدة للنظر إلى فئة في ES6 هي مجرد بناء جملة جديد للعمل مع النماذج الأولية ووظائف المنشئ التي نستخدمها في ES5.
الوظائف المحددة باستخدام الكلمة الرئيسية static تنفيذ وظائف ثابتة/فئة على الفصل.
class Task {
constructor ( ) {
console . log ( "task instantiated!" ) ;
}
showId ( ) {
console . log ( 23 ) ;
}
static loadAll ( ) {
console . log ( "Loading all tasks.." ) ;
}
}
console . log ( typeof Task ) ; // function
const task = new Task ( ) ; // "task instantiated!"
task . showId ( ) ; // 23
Task . loadAll ( ) ; // "Loading all tasks.."يمتد ويمتد في الفصول الدراسية
النظر في الرمز التالي:
class Car {
constructor ( ) {
console . log ( "Creating a new car" ) ;
}
}
class Porsche extends Car {
constructor ( ) {
super ( ) ;
console . log ( "Creating Porsche" ) ;
}
}
let c = new Porsche ( ) ;
// Creating a new car
// Creating Porsche extends يسمح لطبقة الطفل بالوراثة من فئة الوالدين في ES6. من المهم أن نلاحظ أن المُنشئ المشتق يجب أن يطلق عليه super() .
أيضًا ، يمكنك استدعاء طريقة فئة Parent في أساليب فئة الطفل باستخدام super.parentMethodName()
اقرأ المزيد عن الفصول الدراسية هنا
بعض الأشياء التي يجب وضعها في الاعتبار:
function عند تحديد الوظائف داخل تعريف الفئة. Symbol هو نوع بيانات فريد وغير قابل للتغيير تم تقديمه في ES6. الغرض من الرمز هو إنشاء معرف فريد ولكن لا يمكنك أبدًا الوصول إلى هذا المعرف.
إليك كيفية إنشاء رمز:
const sym = Symbol ( "some optional description" ) ;
console . log ( typeof sym ) ; // symbol لاحظ أنه لا يمكنك استخدام new مع Symbol(…) .
إذا تم استخدام رمز كخاصية/مفتاح كائن ، فسيتم تخزينه بطريقة خاصة لن يظهر العقار في تعداد طبيعي لخصائص الكائن.
const o = {
val : 10 ,
[ Symbol ( "random" ) ] : "I'm a symbol" ,
} ;
console . log ( Object . getOwnPropertyNames ( o ) ) ; // val لاسترداد خصائص رمز الكائن ، استخدم Object.getOwnPropertySymbols(o)
يقوم جهاز التكرار بالوصول إلى العناصر من مجموعة واحدة تلو الأخرى ، مع تتبع موقعه الحالي ضمن هذا التسلسل. يوفر طريقة next() التي تُرجع العنصر التالي في التسلسل. تقوم هذه الطريقة بإرجاع كائن مع خصائصين: تم القيام به والقيمة.
ES6 لديه Symbol.iterator الذي يحدد التكرار الافتراضي لكائن. عندما يحتاج كائن إلى التكرار (كما هو الحال في بداية A for .. من حلقة) ، يتم استدعاء طريقة ITERATOR الخاصة به بدون وسيطات ، ويتم استخدام التكرار الذي تم إرجاعه للحصول على القيم المراد تكرارها.
دعونا نلقي نظرة على صفيف ، وهو أمر لا يُنسى ، والمؤلف الذي يمكن أن ينتج عنه لاستهلاك قيمه:
const arr = [ 11 , 12 , 13 ] ;
const itr = arr [ Symbol . iterator ] ( ) ;
itr . next ( ) ; // { value: 11, done: false }
itr . next ( ) ; // { value: 12, done: false }
itr . next ( ) ; // { value: 13, done: false }
itr . next ( ) ; // { value: undefined, done: true } لاحظ أنه يمكنك كتابة أعمدة مخصصة عن طريق تحديد obj[Symbol.iterator]() مع تعريف الكائن.
وظائف المولد هي ميزة جديدة في ES6 تسمح للدالة بإنشاء العديد من القيم مع مرور الوقت عن طريق إرجاع كائن يمكن تكراره لسحب القيم من الوظيفة القيمة الأولى في كل مرة.
تُرجع دالة المولد كائنًا ثابتًا عندما يتم استدعاؤه. يتم كتابته باستخدام بناء الجملة * الجديد وكذلك الكلمة yield الجديدة التي تم تقديمها في ES6.
function * infiniteNumbers ( ) {
let n = 1 ;
while ( true ) {
yield n ++ ;
}
}
const numbers = infiniteNumbers ( ) ; // returns an iterable object
numbers . next ( ) ; // { value: 1, done: false }
numbers . next ( ) ; // { value: 2, done: false }
numbers . next ( ) ; // { value: 3, done: false }في كل مرة يتم استدعاء العائد ، تصبح القيمة المحنطة القيمة التالية في التسلسل.
لاحظ أيضًا أن المولدات تحسب قيمها التي تم إنتاجها عند الطلب ، مما يسمح لهم بتمثيل التسلسلات المكلفة بكفاءة ، أو حتى التسلسلات غير المحدودة.
ES6 لديه دعم أصلي للوعود. الوعد هو كائن ينتظر إكمال عملية غير متزامنة ، وعندما تكمل هذه العملية ، يتم الوفاء بالوعد (حل) أو رفضه.
الطريقة القياسية لإنشاء وعد هي استخدام new Promise() الذي يقبل المعالج الذي يعطى وظيفتين كمعلمات. المعالج الأول (المسمى عادة resolve ) هو وظيفة للاتصال مع القيمة المستقبلية عندما تكون جاهزة ؛ والمعالج الثاني (المسمى عادةً reject ) هو وظيفة للاتصال برفض الوعد إذا لم يتمكن من حل القيمة المستقبلية.
const p = new Promise ( ( resolve , reject ) => {
if ( /* condition */ ) {
resolve ( /* value */ ) ; // fulfilled successfully
} else {
reject ( /* reason */ ) ; // error, rejected
}
} ) ; كل وعد له طريقة تسمى then تأخذ زوج من عمليات الاسترجاعات. يتم استدعاء رد الاتصال الأول إذا تم حل الوعد ، بينما يتم استدعاء الثانية إذا تم رفض الوعد.
p . then ( ( val ) => console . log ( "Promise Resolved" , val ) ,
( err ) => console . log ( "Promise Rejected" , err ) ) ; سيؤدي إرجاع قيمة من then إلى نقل القيمة إلى القيمة التالية then رد الاتصال.
const hello = new Promise ( ( resolve , reject ) => { resolve ( "Hello" ) } ) ;
hello . then ( ( str ) => ` ${ str } World` )
. then ( ( str ) => ` ${ str } !` )
. then ( ( str ) => console . log ( str ) ) // Hello World!عند إرجاع الوعد ، سيتم نقل القيمة التي تم حلها للوعد إلى رد الاتصال التالي لسلسلةها بفعالية معًا. هذه تقنية بسيطة لتجنب "Callback Hell".
const p = new Promise ( ( resolve , reject ) => { resolve ( 1 ) } ) ;
const eventuallyAdd1 = ( val ) => new Promise ( ( resolve , reject ) => { resolve ( val + 1 ) } ) ;
p . then ( eventuallyAdd1 )
. then ( eventuallyAdd1 )
. then ( ( val ) => console . log ( val ) ) ; // 3
