مقدمة
Ecmascript 6 هو المعيار التالي لجافا سكريبت وهو في التطوير السريع. الهدف من ECMASCRIPT 6 هو تمكين جافا سكريبت لاستخدامها لكتابة التطبيقات المعقدة ومكتبات الوظائف والمولدات الأوتوماتيكية الرمز (مولدات الرمز). إن أحدث المتصفحات بالفعل تدعم جزئيًا بناء جملة ECMASCRIPT 6. ECMASCRIPT 6 هو حاليًا معيار الصناعة ، وشعبيتها أسرع بكثير من ES5. السبب الرئيسي هو أن المتصفحات الحديثة تدعم ES6 بسرعة كبيرة ، وخاصة متصفحات Chrome و Firefox ، والتي تدعم بالفعل معظم الميزات في ES6.
1.
دعنا يسمح بإنشاء نطاقات على مستوى الكتلة. يوصي ES6 باستخدام وظائف LET IN لتحديد المتغيرات بدلاً من VAR:
var a = 2 ؛ {دع a = 3 ؛ console.log (a) ؛ // 3} console.log (a) ؛ // 2هناك طريقة أخرى لإعلان المتغيرات التي تكون صالحة أيضًا في نطاق مستوى الكتلة وهي Const ، والتي يمكن أن تعلن ثابتًا. في ES6 ، يشبه الثابت الذي أعلنه Const المؤشر ، الذي يشير إلى مرجع ، مما يعني أن هذا "const" ليس ثابتًا ، مثل:
{const arr = [5،6] ؛ arr.push (7) ؛ console.log (arr) ؛ // [5،6،7] arr = 10 ؛ // typeerror}هناك بضع نقاط يجب ملاحظة:
دعنا لا تحتوي المتغيرات المعلنة على الكلمة الرئيسية على ميزة الرفع
تصريحات Let and const صالحة فقط في أقرب كتلة (داخل الأقواس المجعد)
عند استخدام إعلان const الثابت ، استخدم متغيرات كبيرة ، مثل: capital_casing
يجب تعيين CIST عند الإعلان
2. وظائف السهم
في ES6 ، تعد وظيفة السهم شكلًا قصيرًا من الدالة ، باستخدام قوسين للف المعلمات ، تليها => ، تليها جسم الوظيفة:
var getPrice = function () {return 4.55 ؛} ؛ // التنفيذ مع Arrow FunctionVar getPrice = () => 4.55 ؛تجدر الإشارة إلى أن وظيفة GetPrice Arrow في الكستناء أعلاه تستخدم جسم وظيفي موجز ، والذي لا يتطلب بيان التقاعد. يستخدم الكستناء أدناه جسم وظيفة طبيعي:
دع arr = ['Apple' ، 'Banana' ، 'Orange'] ؛ دع الإفطار = arr.map (fruit => {return fruit + 's' ؛}) ؛ console.log (الإفطار) ؛ // التفاح برتقال البرتقالبالطبع ، لا تتعلق وظائف الأسهم فقط بإحداث الكود ، ولكن في الوظيفة ، يشير هذا الربط دائمًا إلى الكائن نفسه. للحصول على التفاصيل ، يمكنك إلقاء نظرة على الكستناء التالي:
وظيفة person () {this.age = 0 ؛ setInterval (crowup function () {// في الوضع غير المخطط ، تشير هذه الدالة crowup () إلى كائن النافذة this.age ++ ؛} ، 1000) ؛} var person = new person () ؛غالبًا ما نحتاج إلى استخدام متغير لحفظه ثم الرجوع إليه في وظيفة النمو:
وظيفة person () {var self = this ؛ self.age = 0 ؛ setInterval (وظيفة crowup () {self.age ++ ؛} ، 1000) ؛}واستخدام وظائف السهم يمكن أن يحفظ هذه المشكلة:
وظيفة person () {this.age = 0 ؛ setInterval (() => {// | this | point to person object this.age ++ ؛} ، 1000) ؛} var person = new person () ؛3. قيمة المعلمة الافتراضية
يتيح لك ES6 تعيين القيم الافتراضية لمعلمات الوظائف:
دع getFinalPrice = (السعر ، الضريبة = 0.7) => السعر + السعر * الضريبة ؛ getFinalPrice (500) ؛ // 850
4. مشغل الانتشار/الراحة
يشير مشغل الانتشار / الراحة إلى ... ، سواء كان انتشارًا أو يعتمد الباقي على السياق.
عند استخدامه في مؤلف ، فهو مشغل انتشار:
وظيفة foo (x ، y ، z) {console.log (x ، y ، z) ؛} دع arr = [1،2،3] ؛ foo (... arr) ؛ // 1 2 3عند استخدامه لنقل الوسيطة ، يكون مشغل REST:
وظيفة foo (... args) {console.log (args) ؛} foo (1 ، 2 ، 3 ، 4 ، 5) ؛ // [1 ، 2 ، 3 ، 4 ، 5]5. تمديد الكائن المعجمي
يسمح ES6 بإعلان بناء الجملة المختصرة عند إعلان حرفي الكائن لتهيئة طرق تعريف متغيرات ووظائف السمات ، ويسمح بعمليات الحساب في خصائص الكائن:
وظيفة getCar (جعل ، النموذج ، القيمة) {return {// abbreviation variable make ، // مكافئ لجعل: جعل النموذج ، // مكافئًا للموديل: قيمة النموذج ، // مكافئة للقيمة: value // يمكن احتساب السمة باستخدام expressions ['make' }} ؛} دع السيارة = getCar ('Barret' ، 'Lee' ، 40000) ؛ // الإخراج: {// make: 'barret' ، // model: 'lee' ، // value: 40000 ، // makebarret: true ، // depreciate: function () //}6. حرفي ثنائي وأوكتال
يدعم ES6 الحرفي الثنائي والأوكتالي ، والتي يمكن تحويلها إلى قيم ثنائية عن طريق إضافة 0O أو 0O أمام الرقم:
دع ovalue = 0o10 ؛ console.log (ovalue) ؛ // 8 دع bvalue = 0b10 ؛ // استخدم `0b` أو` 0b` console.log (bvalue) ؛ // 2
7. الكائن وتدمير المصفوفة
يمكن أن يتجنب التفكيك توليد المتغيرات الوسيطة عند تعيين الكائن:
دالة foo () {return [1،2،3] ؛} دع arr = foo () ؛ // [1،2،3] دع [a ، b ، c] = foo () ؛ console.log (a ، b ، c) ؛ // 1 2 3 function bar () {return {x: 4 ، y: 5 ، z: 6} ؛} دع {x: x ، y: y ، z: z} = bar () ؛ console.log (x ، y ، z) ؛ // 4 5 68. كائن فائق
يسمح ES6 باستخدام الطريقة الفائقة في الكائنات:
var parent = {foo () {console.log ("Hello from the Parent") ؛ }} var child = {foo () {super.foo () ؛ console.log ("مرحبًا من الطفل") ؛ }} object.setPrototypeof (الطفل ، الوالد) ؛ child.foo () ؛ // مرحبًا من الوالد // مرحبًا من الطفل9. بناء جملة القالب والفاصل
هناك طريقة موجزة للغاية لتجميع مجموعة من الأوتار والمتغيرات في ES6.
يستخدم $ {...} لتقديم متغير
`كفاصل
دع user = 'barret' ؛ console.log (`hi $ {user}!`) ؛ // مرحبا باريت!10. ل ... من VS ل ... في
من أجل ... من يستخدم لاجتياز التكرار ، مثل الصفيف:
دع الأسماء المستعارة = ['di' ، 'boo' ، 'punkeye'] ؛ الأسماء.
ل ... يستخدم لاجتياز الخصائص في كائن:
دع الأسماء المستعارة = ['di' ، 'boo' ، 'punkeye'] ؛ الأسماء.
11. خريطة وضعف خريطة
هناك مجموعتان جديدان لهيكل البيانات في ES6: MAP و Peatmmap. في الواقع ، يمكن اعتبار كل كائن خريطة.
يتكون كائن من أزواج متعددة المفاتيح. في الخريطة ، يمكن استخدام أي نوع كمفتاح الكائن ، مثل:
var mymap = new map () ؛ var keystring = "a string" ، keyobj = {} ، keyfunc = function () {} ؛ // قم بتعيين القيمة mymap.set (عبوة المفاتيح ، "ترتبط القيمة بـ" سلسلة ") ؛ mymap.set (keyobj ، "القيمة ترتبط بـ keyobj") ؛ mymap.set (keyfunc ، "القيمة مرتبطة بـ KeyFunc") ؛ mymap.size ؛ // 3 // احصل على القيمة mymap.get (صراخ المفاتيح) ؛ // "القيمة ترتبط بـ" سلسلة "" mymap.get (keyobj) ؛ // "القيمة ترتبط بـ" سلسلة "" mymap.get (keyobj) ؛ // "القيمة ترتبط بـ" سلسلة "" mymap.get (keyobj) ؛ // "القيمة المرتبطة بـ KeyObj" mymap.get (keyfunc) ؛ // "القيمة المرتبطة بـ Keyfunc"خريطة ضعيفة
Pearmmap هي خريطة ، ولكن جميع مفاتيحها هي مراجع ضعيفة ، مما يعني أن الأمور في خريطة ضعيفة لا يتم النظر فيها عند جمع القمامة ، ولا داعي للقلق بشأن تسرب الذاكرة عند استخدامها.
شيء آخر يجب ملاحظته هو أن جميع مفاتيح الخريطة الضعيفة يجب أن تكون كائنات. إنه يحتوي على أربع طرق فقط: حذف (مفتاح) ، ولديه (مفتاح) ، والحصول على (مفتاح) ومجموعة (مفتاح ، Val):
دع w = new DefenMapap () ؛ W.Set ('a' ، 'b') ؛ // uncicted typeerror: قيمة غير صالحة تستخدم كمفتاح خريطة ضعيفة var o1 = {} ، o2 = function () {} ، o3 = window ؛ W.Set (O1 ، 37) ؛ W.Set (O2 ، "Azerty") ؛ W.Set (O3 ، غير محدد) ؛ W.Get (O3) ؛ // غير محدد ، لأن هذه هي القيمة المحددة W.Has (O1) ؛ // truew.delete (O1) ؛ W.Has (O1) ؛ // خطأ شنيع12. مجموعة وضعف
الكائن المحدد هو مجموعة من القيم غير المتكررة ، وسيتم تجاهل القيم المكررة. يمكن أن تكون أنواع القيمة البدائية والأنواع المرجعية:
دع myset = مجموعة جديدة ([1 ، 1 ، 2 ، 2 ، 3 ، 3]) ؛ myset.size ؛ // 3myset.has (1) ؛ // truemyset.add ('strings') ؛ myset.add ({a: 1 ، b: 2}) ؛يمكنك اجتياز تعيين الكائنات من خلال foreach و ... من:
myset.foreach ((item) => {console.log (item) ؛ // 1 // 2 // 3 // 'STRINGS' // object {a: 1 ، b: 2}}) ؛ لـ (دع قيمة myset) {console.log (value) ؛ // 1 // 2 // 3 // 'strings' // object {a: 1 ، b: 2}}SET أيضا لديها الأساليب حذف () و clear ().
ضعيفة
على غرار الخريطة الضعيفة ، يتيح لك كائن مجموعة الضعف حفظ المراجع الضعيفة للكائنات في مجموعة ، ولا يُسمح إلا بالظهور مرة واحدة فقط: الكائنات في مجموعة ضعيفة:
var ws = new prefetset () ؛ var obj = {} ؛ var foo = {} ؛ ws.add (window) ؛ ws.add (obj) ؛ ws.has (نافذة) ؛ // truews.has (foo) ؛ // false ، لم تتم إضافة foo بنجاح ws.delete (نافذة) ؛ // حذف كائن النافذة من مجموعة WS.HAs (نافذة) ؛ // تم حذف كائن نافذة13. الفصل
هناك بناء جملة فئة في ES6. تجدر الإشارة إلى أن الفئة هنا ليست نموذجًا جديدًا لميراث كائن جديد ، فهو مجرد تعبير عن السكر النحوي لسلسلة النموذج الأولي.
يتم تعريف طرق وخصائص المنشئ في الوظيفة باستخدام الكلمة الرئيسية الثابتة:
Class Task {Constructor () {console.log ("Task instanted!") ؛ } showid () {console.log (23) ؛ } static loadall () {console.log ("تحميل جميع المهام ..") ؛ }} console.log (typeof task) ؛ // functionlet task = new Task () ؛ // "Task instanted!" task.showid () ؛ // 23task.loadall () ؛ // "تحميل جميع المهام .."الميراث و supersets في الفصل:
Class Car {Constructor () {console.log ("إنشاء سيارة جديدة") ؛ }} class porsche يمتد السيارة {constructor () {super () ؛ console.log ("إنشاء Porsche") ؛ }} دع C = جديد Porsche () ؛ // إنشاء سيارة جديدة // إنشاء بورشهيتيح تمديد الفئة الفرعية أن ترث فئة الأصل. تجدر الإشارة إلى أنه يجب تنفيذ وظيفة Super () في وظيفة المنشئ للكاسورة الفرعية.
بالطبع ، يمكنك أيضًا استدعاء أساليب فئة الأصل في أساليب الفئة الفرعية ، مثل Super.ParentMethodName ().
اقرأ المزيد عن الفصل هنا.
هناك بضع نقاط جديرة بالملاحظة:
لن يكون إعلان الفصل هو الرفع. إذا كنت ترغب في استخدام فئة ، فيجب عليك تحديده قبل استخدامه ، وإلا فسيتم طرح خطأ مرجعية.
لا يتطلب تحديد الوظائف في الفئات استخدام الكلمات الرئيسية للوظيفة
14. الرمز
الرمز هو نوع بيانات جديد تكون قيمه فريدة من نوعها وغير قابلة للتغيير. الغرض من الرمز المقترح في ES6 هو إنشاء معرف فريد ، لكن لا يمكنك الوصول إلى هذا المعرف:
var sym = symbol ("بعض الوصف الاختياري") ؛ console.log (typeof sym) ؛ // رمزلاحظ أنه لا يمكن استخدام المشغل الجديد أمام الرمز.
إذا تم استخدامه كخاصية كائن ، فستكون هذه الخاصية لا توصف:
var o = {val: 10 ، [symbol ("random")]: "أنا رمز" ،} ؛ console.log (object.getownPropertyNames (o)) ؛ // فالإذا كنت ترغب في الحصول على خاصية رمز الكائن ، فأنت بحاجة إلى استخدام Object.getOntOndPropertySymbols (O).
15. التكرار
يسمح التكرار بالوصول إلى عنصر من مجموعة البيانات في كل مرة يتم فيها الوصول إلى عنصر. عندما يشير المؤشر إلى العنصر الأخير من مجموعة البيانات ، يخرج التكرار. يوفر الدالة التالية () للتكرار عبر تسلسل ، والذي يعيد كائن يحتوي على سمات القيمة والقيمة.
في ES6 ، يمكنك تعيين Traverser افتراضي للكائن من خلال Symbor.iterator. بغض النظر عن متى يحتاج الكائن إلى اجتيازه ، يمكن أن تُرجع طريقة ITERATOR التي تنفذ طريقة ITERATOR إلى التكرار للحصول على القيمة.
الصفيف هو مؤلف افتراضي:
var arr = [11،12،13] ؛ var itr = arr [symbor.iterator] () ؛ itr.next () ؛ // {value: 11 ، int: false} itr.next () ؛ // {value: 12 ، int: false} itr.next () ؛ // {value: 13 ، int: false} itr.next () ؛ // {value: غير محدد ، تم: True}يمكنك تخصيص ايتراتور لكائن من خلال [symbor.iterator] ().
16. المولدات
وظيفة المولد هي ميزة جديدة لـ ES6 ، والتي تسمح للدالة بإرجاع كائن قابل للتجاوز لإنشاء قيم متعددة.
قيد الاستخدام ، سترى بناء الجملة * وعائد الكلمات الرئيسية الجديدة:
الدالة *InfinitEnumbers () {var n = 1 ؛ بينما (صواب) {griven n ++ ؛ }} var numbers = InfinitEnumbers () ؛ // إرجاع أرقام كائن ithable.next () ؛ // {value: 1 ، int: false} number.next () ؛ // {value: 2 ، int: false} number.next () ؛ // {value: 3 ، int: false}في كل مرة يتم تنفيذ العائد ، تصبح القيمة التي تم إرجاعها القيمة التالية للمؤلف.
17. الوعود
ES6 لديه دعم أصلي للوعد. الوعد هو كائن ينتظر التنفيذ غير المتزامن. عند الانتهاء من تنفيذها ، ستصبح حالتها حلها أو رفضها.
var p = New Promise (function (حل ، رفض) {if (/ * inction */) {// تم الوفاء به بنجاح حل (/ * value */) ؛} آخر {// خطأ ، رفض رفض (/ * Quision */) ؛}}) ؛كل وعد له طريقة. ثم ، والتي تقبل معلمتين. الأول هو التعامل مع رد اتصال الحالة التي تم حلها ، والآخر هو التعامل مع رد اتصال الحالة المرفوضة:
P.Then ((Val) => console.log ("Promise Resolved" ، Val) ، (err) => console.log ("Promise Rejected" ، err)) ؛ما سبق هو مقدمة للبدء السريع لـ ECMASCRIPT 6 المترجمة للجميع. يمكن للأصدقاء الذين يحتاجون إليها التعلم والإشارة إليها.