كطفل يحب كتابة الكود يدويًا، أعتقد أنه يجب كتابة الكود بنفسي حتى أحفظه عن ظهر قلب بشكل أفضل، لذلك سأقدم اليوم ميزات ES6 ~ ES12. إذا كانت لديك نقاط عمياء في استخدام ES، أو لا تعرف الكثير عن الميزات الجديدة ، فأعتقد أن هذه المقالة يجب أن تكون قادرة على مساعدتك جيدًا ~

من أجل فهم أفضل، سنشرح ذلك في وضع الحالة ، لذا للحصول على فهم أفضل، وفي الوقت نفسه، تدعم الحالة أيضًا تصحيح الأخطاء في وضع المطور، وآمل أن تتمكن من دعمها ~

ECMAScript

ECMAScript هي لغة برمجة نصية موحدة من قبل Ecma International (رابطة مصنعي الكمبيوتر الأوروبية سابقًا) من خلال ECMA -262. ويمكن القول أيضًا أن هناك إصدارين فقط من JavaScript كمعيار

في عالم المبرمجين: ES5 و ES6 ، ويقال إن ES6 تم إصداره فعليًا في عام 2015، وهو أيضًا الوقت الذي بدأ فيه عصر الواجهة الأمامية الكبير رسميًا. وهذا يعني أن عام 2015 يستخدم كحدود، قبل عام 2015، كان يطلق عليه ES5 ، وبعد عام 2016، تم تسميته بشكل جماعي ES6

للحصول على معلومات حول ميزات ES6 ، يمكنك قراءة "مقدمة لمعايير ES6".

إعلان

المعلم Ruan Yifeng

ES6

Let & const

الفرق بين Let وconst وvar:

• المتغيرات المعلنة بواسطة var موجودة في ترقية المتغير، في حين أن Let وconst ليس لديهما مشكلة ترقية المتغير. ترقية المتغير: ما إذا كان من الممكن استدعاء المتغير قبل
• الإعلان عن var، لا يوجد نطاق على مستوى الكتلة،
• يمكن لـ Let و const الإعلان عن المتغيرات بشكل متكرر، ولا يُسمح بإعلان Let و const بشكل متكرر في النطاق ، و const يعلن عن متغيرات للقراءة فقط، ويجب تعيين قيمة له.

بالإضافة إلى ذلك، عندما يتم الإعلان عن كائن باستخدام const ، يمكن تغيير خصائص الكائن، لأن: obj المعلن بواسطة const يحفظ فقط العنوان المرجعي الخاص به . طالما بقي العنوان دون تغيير، فلن يكون هناك خطأ

في التدمير. يمكن

لتدمير مصفوفة

• استخراج
• القيم من المصفوفة بالترتيب، وتعيين القيم للمتغيرات وفقًا للمواضع المقابلة تنتمي الطريقة إلى مطابقة الأنماط
• ويمكن تفكيكها باستخدام ... لتمثيل جميع العناصر المتبقية
• إذا لم يكن المصفوفة الأصلية بها، فيمكن تعيين القيمة المقابلة، إذا لم يتم تعيينها، فلن يتم undefined

[. أ، ب، ج] = [1، 2، 3]
 console.log(أ، ب، ج) // 1 2 3
 
 دع [أ، ج] = [1، 2، 3]
 console.log(أ, , ج) // 1 3
 
 دع [أ، ب، ...ج] = [1، 2، 3، 4، 5]
 console.log(أ، ب، ج) // 1 2 [3، 4، 5]
 
 دع [أ، ب، ...ج] = [1]
 console.log(أ، ب، ج) // 1 غير محدد []
 
 دع [أ = 1، ب = أ] = []
 const.log(أ، ب) // 1 1
 
 دع [أ = 1، ب = أ] = [2]
 const.log(a, b) // 2 2

بنية الكائن

• ليست مرتبة، ويلزم فقط أن يكون للمتغير واسم السمة نفس الاسم
• إذا لم يتم تكرار أسماء سمات المتغير والكائن ، ستكون قيمة المتغير undefined
• ملاحظة : البعض الآخر يعادل الاسم المستعار

Let { a, b } = { a: 1, b: 2 };
 console.log(أ, ب);
 
 دع { أ } = { ب: 2 }؛
 console.log(a);// غير محدد
 
 دع { أ، ب = 2 } = { أ: 1 }؛
 console.log(أ, ب);
 
 دع { أ: ب = 2 } = { أ: 1 };
 console.log(a); // المتغير a غير موجود console.log(b); // 1

تدمير السلاسل

• يمكن أيضًا تفكيك السلاسل، وهو ما يعادل تحويلها إلى كائنات تشبه المصفوفة
• مع سمة length . يمثل الرقم

Let [a, b, c, d, e] = "hello"
 console.log(a, b, c, d, e) // مرحبًا
 
 دع { الطول } = "مرحبًا"
 console.log(length) // 5

تدمير الأرقام والقيم المنطقية

• طالما أن الكائن أو المصفوفة ليست ميتة، فسيتم تحويلها إلى كائن أولاً، لذلك يتم تحويل الأنواع الرقمية والأنواع المنطقية أيضًا إلى كائنات

Let { toString: s } = 123;
 console.log(s === Number.prototype.toString) // صحيح
 
 دع { toString: s } = صحيح؛
 console.log(s === Boolean.prototype.toString) // يمكن تفكيك معلمات الوظيفة بشكل صحيح

،

• أو يمكن أن تكون القيمة الافتراضية
• غير
• محددة
• طريقتان لتحديد القيمة الافتراضية. إحداهما لتحديد المتغيرات، والأخرى لتحديد المعلمات، وستحصل على إجابات مختلفة:

Let arr = [[1,2], [3, 4]]
 Let res = arr.map([a, b] => a + b)
 console.log(res) // [3، 7]
 
 دع arr = [1، غير محدد، 2]
 Let res = arr.map((a = 'test') => a);
 console.log(res) // [1، 'اختبار'، 2]
 
 دع func = ({x, y} = {x: 0, y: 0}) => {
    العودة [س، ص]
 }
 console.log(func(1, 2)) // [غير محدد، غير محدد]
 console.log(func()) // [0, 0]
 console.log(func({})) // [غير محدد، غير محدد]
 console.log(func({x: 1})) // [1، غير محدد]
 
 
 دع func = ({x=0, y=0}) => {
    العودة [س، ص]
 }
 
 console.log(func({x:1,y:2})) // [1, 2]
 console.log(func()) // خطأ
 console.log(func({})) // [0, 0]
  console.log(func({x: 1})) // [1, 0]

التوسع المنتظم

في الواقع نقطة معرفة صعبة للغاية لفهمها، إذا تمكن شخص ما من إتقانها بالكامل، فهي حقًا قوية جدًا هنا أولاً وقبل كل شيء،

تم تقسيمها إلى نمطين: JS分格وشبكة perl 分格

شبكة JS: RegExp()

Let re = new RegExp('a'); // ابحث عما إذا كانت هناك سلسلة
 Let re = new RegExp('a', 'i'); // الأول هو كائن البحث، والثاني هو خيار

نمط بيرل: / القاعدة/الخيار، ويمكن أن يتبعه عدة بغض النظر عن الترتيب

Let re = /a/; //اكتشف ما إذا كان هناك سلسلة
 Let re = /a/i;// الأول هو الكائن المراد البحث عنه، والثاني هو الخيار،

نقدم هنا اختبارًا للتعبير العادي عبر الإنترنت (مع التعبيرات العادية الشائعة):

امتداد سلسلة

• Unicode :大括号包含أحرف Unicode
• codePointAt() : إرجاع نقطة الرمز المقابلة للحرف، المقابلة لـ fromCharCode()
• String.fromCharCode() : إرجاع نقطة الرمز المقابلة كحرف، تتوافق مع codePointAt()
• String.raw() : إرجاع الحرف نتيجة استبدال كافة المتغيرات في السلسلة والهروب من الخطوط المائلة
• تبدأ مع () : إرجاع قيمة منطقية تشير إلى ما إذا كانت سلسلة المعلمة في رأس السلسلة الأصلية.
• endWith() : تُرجع قيمة منطقية تشير إلى ما إذا كانت سلسلة المعلمة موجودة في نهاية السلسلة الأصلية.
• تكرار () : تقوم الطريقة بإرجاع سلسلة جديدة، مما يعني تكرار السلسلة الأصلية n مرات
• : for-of
• include () : تُرجع قيمة منطقية، تشير إلى ما إذا تم العثور على سلسلة المعلمة.
• TrimStart () : الطريقة تزيل المسافات من بداية السلسلة. TrimLeft() هو اسم مستعار لهذه الطريقة.
• TrimEnd() : الأسلوب يزيل أحرف المسافة البيضاء من نهاية السلسلة. TrimRight() هو اسم مستعار لهذه الطريقة.

//Unicode
 console.log("a", "u0061"); // أأ
 console.log("d", "u{4E25}"); // d السماح بدقة str = 'Domesy'
 
 //كود بوينت أت ()
 console.log(str.codePointAt(0)) // 68
 
 //String.fromCharCode()
 console.log(String.fromCharCode(68)) // د
 
 //سلسلة. الخام ()
 console.log(String.raw`Hin${1 + 2}`); // Hin3
 console.log(`Hin${1 + 2}`); // مرحبًا 3
 
 دع str = 'دوميسي'
 
 //يبدأ مع()
 console.log(str.startsWith("D")) // صحيح
 console.log(str.startsWith("s")) // خطأ

 //ينتهي مع()
 console.log(str.endsWith("y")) // صحيح
 console.log(str.endsWith("s")) // خطأ
 
 //repeat(): سيتم تقريب المعلمة التي تم تمريرها تلقائيًا إلى أعلى إذا كانت سلسلة، فسيتم تحويلها إلى رقم console.log(str.repeat(2)) // DomesyDomesy.
 console.log(str.repeat(2.9)) // DomesyDomesy
 
 // الاجتياز: من أجل
  ل(دع رمز str){
    console.log(code) // إرجاع D مرة واحدة
  }
  
  // يشمل ()
  console.log(str.includes("s")) // صحيح
  console.log(str.includes("a")) // خطأ
  
  // تقليم البداية ()
  سلسلة const = "مرحبًا بالعالم!";
  console.log(string.trimStart()); // "مرحبا بالعالم!"
  console.log(string.trimLeft()); // "مرحبا بالعالم!"
  
  // تقليم ()
  سلسلة const = "مرحبًا بالعالم!";
  console.log(string.trimEnd()); // "مرحبا بالعالم!"
  console.log(string.trimRight()); // "مرحبًا بالعالم!"

أخرى

في سطر واحد أو عدة أسطر، استخدم `

Let str = `Dome
    سي`
 console.log(str) // سيتم التفاف الخطوط تلقائيًا //Dome
 //

قالب تسمية sy:

const str = {
     الاسم: "دودو الصغير"،
     المعلومات: "مرحبا بالجميع"
 }

console.log(`${str.info}, أنا `${str.name}`) // مرحبًا بالجميع، أنا Xiao Dudu

Array ملحق

• Array.of() : تحويل مجموعة من القيم إلى مصفوفة وإرجاع مصفوفة جديدة، بغض النظر عن عدد الوسائط أو نوعها.
• CopyWithin () : انسخ الأعضاء في الموضع المحدد إلى مواضع أخرى وأعد المصفوفة الأصلية
• find () : قم بإرجاع القيمة المؤهلة الأولى
• findIndex () : قم بإرجاع مفاتيح الفهرس المؤهلة الأولى
• () : اجتياز أسماء المفاتيح وإرجاع كائن traverser ، والتي يمكن استخدامها في حلقة for-
• ofvalues() : نفس استخدام المفاتيح()، ولكنها تعبر قيم المفاتيح().
• نفس استخدام المفاتيح ( )، ولكنها تعبر قيمة المفتاح أزواج.
• Array.from() : إنشاء نسخة مصفوفة جديدة من كائن يشبه المصفوفة أو كائن قابل للتكرار.
• fill() : يملأ المصفوفة بالعناصر المحددة ويعيد المصفوفة الأصلية
• include() : يحدد ما إذا كان سيتم تضمين عنصر معين ويعيد قيمة منطقية، وهو صالح أيضًا لـ NaN، ولكن لا يمكن تحديد موضعه

. 1، 2، 3، 4، 5]

 //مصفوفة()
 دع arr1 = Array.of(1, 2, 3);
 console.log(arr1) // [1، 2، 3]
 
 //copyWithin(): ثلاث معلمات (الهدف، البداية = 0، النهاية = this.length)
 // الهدف: موضع الهدف // البداية: موضع البداية، والذي يمكن حذفه ويمكن أن يكون رقمًا سالبًا.
 // end: موضع النهاية، يمكن حذفه، ويمكن أن يكون رقمًا سالبًا، والموضع الفعلي هو end-1.
 console.log(arr.copyWithin(0, 3, 5)) // [4, 5, 3, 4, 5]
 
 //يجد()
 console.log(arr.find((item) => item > 3 )) // 4
 
 //العثور على الفهرس ()
 console.log(arr.findIndex((item) => item > 3 )) // 3
 
 //مفاتيح()
 لـ (دع فهرس arr.keys()) {
     console.log(index); // إرجاع 0 1 2 3 4 في المرة الواحدة
 }
 
 // قيم()
 لـ (دع فهرس arr.values()) {
     console.log(index); // إرجاع 1 2 3 4 5 في كل مرة
 }
 
 // الإدخالات ()
 لـ (دع فهرس arr.entries()) {
     console.log(index); // إرجاع [0, 1] [1, 2] [2, 3] [3, 4] [4, 5] مرة واحدة
 }
 
  دع آر = [1، 2، 3، 4، 5]
 
 // Array.from(): يمكن أن يكون الاجتياز مصفوفة زائفة، مثل سلسلة أو بنية المجموعة أو عقدة العقدة Let arr1 = Array.from([1, 3, 5], (item) => {
     البند المرتجع * 2 ؛
 })
 console.log(arr1) // [2، ​​6، 10] 
 
 // fill(): ثلاث معلمات (الهدف، البداية = 0، النهاية = this.length)
 // الهدف: موضع الهدف // البداية: موضع البداية، والذي يمكن حذفه ويمكن أن يكون رقمًا سالبًا.
 // end: موضع النهاية، يمكن حذفه، ويمكن أن يكون رقمًا سالبًا، والموضع الفعلي هو end-1.
 console.log(arr.fill(7)) // [7, 7, 7, 7, 7]
 console.log(arr.fill(7, 1, 3)) // [1, 7, 7, 4, 5]
 
 دع آر = [1، 2، 3، 4]
 
 // يشمل ()
 console.log(arr.includes(3)) // صحيح
 console.log([1, 2, NaN].includes(NaN)); // صحيح

عوامل التوسيع

الأخرى

// وظيفتها هي توسيع المصفوفة Let arr = [3, 4, 5]
 console.log(...arr) // 3 4 5
 
 دع arr1 = [1، 2، ...arr]
 console.log(...arr1) // 1 2 3 4 5

ملحق الكائن

• Object.getPrototypeOf() : إرجاع كائن النموذج الأولي للكائن
• Object.setPrototypeOf() : تعيين كائن النموذج الأولي للكائن
• proto : إرجاع أو تعيين كائن النموذج الأولي للكائن
• Object .getOwnPropertyNames()
• : يُرجع مصفوفة من مفاتيح الخصائص غير الرمزية للكائن نفسه . Object.getOwnPropertySymbols() : يُرجع مصفوفة من مفاتيح الخصائص غير الرمزية للكائن نفسه
• . : إرجاع مصفوفة من كافة مفاتيح الخصائص الخاصة بالكائن نفسه.
• Object.is() : تحديد ما إذا كانت العناوين المشار إليها بواسطة المصفوفات مختلفة، لذا طالما أنها مقارنة مصفوفة، فيجب أن تكون خاطئة الاجتياز
• : for-in
• Object.keys() : يُرجع اسم السمة
• Object.assi() : يُستخدم لتعيين جميع العناصر القابلة للتعداد، انسخ قيمة السمة من كائن مصدر واحد أو أكثر إلى الكائن الهدف وأعد الكائن الهدف هذه المرة، سيتغير الكائن الهدف أيضًا

//Object.is()
console.log(Object.is('abc', 'abc')) // صحيح
console.log(Object.is([], [])) // خطأ 

// اجتياز: ل-في
Let obj = { الاسم: 'Domesy'، القيمة: 'React' }

ل(دع المفتاح في obj){
    console.log(key); // قم بإرجاع قيمة اسم قيمة السمة بدورها
    console.log(obj[key]); // إرجاع قيم السمات بالتسلسل Domesy React
}

//Object.keys()
console.log(Object.keys(obj)) // ['الاسم'، 'القيمة']

 //كائن.تعيين ()
 الهدف الثابت = { أ: 1، ب: 2 }؛
 مصدر ثابت = { ب: 4، ج: 5 }؛
 
 نتيجة ثابتة = Object.assis(الهدف، المصدر)
 
 console.log(result) // {أ: 1، ب: 4، ج: 5}
 console.log(target) // {a: 1, b: 4, c: 5}

تعبيرات موجزة

أخرى

Let a = 1;
  دع ب = 2؛
  دع الكائن = { أ، ب }
  console.log(obj) // { أ: 1، ب: 2 }
  
  دع الطريقة = {
      مرحبًا() {
          console.log('مرحبا')
      }
  }
  console.log(method.hello()) //

تعبير سمة الترحيب: استخدم المتغيرات أو التعبيرات مباشرة لتحديد مفتاح الكائن

Let a = "b"
 دع الكائن = {
     [أ]: "ج"
 }
 console.log(obj) // {b : "c"}

عامل التوسيع...

• يضيف العديد من الوظائف الإضافية في ES9 ، مثل دمج السلاسل والتخلص منها، وما إلى ذلك.

// وظيفته هي توسيع المصفوفة Let { a , b , ...c } = { أ: 1، ب: 2، ج: 3، د: 4}؛
 console.log(c) // {ج: 3، د: 4}
 
 دع obj1 = { ج: 3 }
 دع obj = { أ: 1، ب: 2، ...obj1}
 console.log(obj) // { a: 1, b: 2, c: 3}

رقمي ممتد

• : يبدأ بـ 0b أو 0B ، يشير إلى ثنائي
• ثماني : يبدأ بـ 00 أو 0O ، يشير إلى ثنائي
• Number.isFinite() : مستخدم للتحقق مما إذا كانت القيمة محدودة، تُرجع قيمة منطقية
• Number.isNaN() : تُستخدم للتحقق مما إذا كانت القيمة NaN، وتُرجع قيمة منطقية
• Number.isInteger() : تُستخدم للتحقق مما إذا كانت القيمة عددًا صحيحًا، وتُرجع قيمة منطقية value
• Number.isSafeInteger() : تستخدم للتحقق مما إذا كانت القيمة "عددًا صحيحًا آمنًا"، وإرجاع قيمة منطقية
• Math.cbrt() : إرجاع المكعب و
• Math.abrt() : إرجاع المكعب و
• Math.cbrt( ) : إرجاع المكعب و
• Math .clz32() : إرجاع الشكل الصحيح غير الموقع للقيمة 32 بت
• Math.imul() : إرجاع ضرب القيمتين
• Math.fround() : إرجاع الشكل الفردي 32 بت. صيغة النقطة العائمة الدقيقة للقيمة
• Math.hypot() : إرجاع الكل الجذر التربيعي لمجموع مربعات القيم
• Math.expm1() : إرجاع e^n - 1
• Math.log1p() : إرجاع الطبيعي لوغاريتم 1 + n (Math.log(1 + n))
• Math.log10() : إرجاع اللوغاريتم الطبيعي لـ 1 + n لوغاريتم n بالأساس 2
• Math.log2() : إرجاع لوغاريتم n بالأساس 2
• Math.trunc() : إزالة الجزء العشري من الرقم، مع ترك الجزء الصحيح فقط
• Math.sign() : إرجاع正数为1 ،负数为-1 ،正零0 ،负零-0 ، NaN
• Math.abrt() : إرجاع الجذر التكعيبي
• Math.sinh() : إرجاع جيب التمام الزائدي
• Math.cosh() : إرجاع جيب التمام الزائدي
• Math.tanh () : إرجاع الظل الزائدي
• Math.asinh() : إرجاع جيب التمام
الزائدي
• جيب التمام الزائدي العكسي
• Math.acosh() : إرجاع جيب التمام الزائدي العكسي
• Math.atanh() : إرجاع الظل الزائدي العكسي
• Number.parseInt() : إرجاع العدد الصحيح للقيمة الجزء، هذه الطريقة تعادل parseInt
• Number.parseFloat() : إرجاع جزء النقطة العائمة من القيمة، وهذه الطريقة تعادل parseFloat

//Binary console.log(0b101) // 5
 console.log(0o151) //105
 
 //Number.isFinite()
 console.log(Number.isFinite(7)); // صحيح
 console.log(Number.isFinite(true)); // خطأ
 
 //رقم.isNaN()
 console.log(Number.isNaN(NaN));
 console.log(Number.isNaN("true" / 0)); // صحيح
 console.log(Number.isNaN(true)); // خطأ
 
 //Number.isInteger()
 console.log(Number.isInteger(17)); // صحيح
 console.log(Number.isInteger(17.58)); // خطأ
 
 //Number.isSafeInteger()
 console.log(Number.isSafeInteger(3));
 console.log(Number.isSafeInteger(3.0)); // صحيح
 console.log(Number.isSafeInteger("3")); // خطأ
 console.log(Number.isSafeInteger(3.1)); // خطأ
 
  //الرياضيات.trunc()
 console.log(Math.trunc(13.71)); // 13
 console.log(Math.trunc(0)); // 0
 console.log(Math.trunc(true)); // 1
 console.log(Math.trunc(false)); 
 
 //الرياضيات
 console.log(Math.sign(3)); // 1
 console.log(Math.sign(-3)); // -1
 console.log(Math.sign(0)); // 0
 console.log(Math.sign(-0));
 console.log(Math.sign(NaN));
 console.log(Math.sign(true)); // 1
 console.log(Math.sign(false)); // 0
 
 //الرياضيات.ابرت()
 console.log(Math.cbrt(8)); // 2
 
  //Number.parseInt()
 console.log(Number.parseInt("6.71")); // 6
 console.log(parseInt("6.71")); // 6
 
 //Number.parseFloat()
 console.log(Number.parseFloat("6.71@")); // 6.71
 console.log(parseFloat("6.71@")); // 6.71

• فاصلة زائدة لمعلمة الدالة: السماح للمعلمة الأخيرة للدالة بالحصول على
• فاصلة زائدة للمعلمة
بشكل

افتراضي
 وظيفة المرح (س، ص = س) {
    console.log(x, y)
 }
 الدالة fun1(ج، ص = س){
    console.log(c,x,y)
 }
 متعة(2);//2 2
 fun1(1); //1 1 1

الأخرى

(عامل التوسيع...)

الدالة fun(...arg){
   console.log(arg) // [1، 2، 3، 4]
 }
 
 

• يتم تعريف

وظيفة السهم

fun(1,2,3,4)

Let Arrow = (v) => v + 2
 console.log(arrow(1)) // 3

الفرق بين وظائف السهم والوظائف العادية

• يختلف في أسلوب وظائف السهم والوظائف العادية والوظائف العادية هي وظائف محددة.
• لا تحتوي المجموعة على مفاتيح، بل قيم فقط، ويمكن اعتبار أن المفاتيح والقيم هي نفسها
• . في الواقع، لا تحتوي دالة السهم على هذه الوظيفة العادية الأولى وظيفة.
• لا تحتوي وظائف السهم على وسيطاتها الخاصة. يؤدي الوصول إلى الوسائط في دالة السهم في الواقع إلى الحصول على القيمة الموجودة في بيئة التنفيذ المحلية الخارجية (الدالة).
• لن يؤثر الاتصال والتطبيق والربط على اتجاه ذلك.
• يشير هذا الخاص بوظيفة السهم إلى السياق ، لكن هذا الخاص بالوظيفة العادية لا يشير إلى السياق. Add bind(this) عند الحاجة.

Set

Set هي بنية بيانات جديدة في ES6، تشبه المصفوفة. لكن قيمة العضو فريدة ولا توجد

إعلانات قيمة متكررة: const set = new Set()

السمات:

• الحجم : يُرجع عدد القيم في كائن المجموعة

الطريقة:

• add() : يضيف عنصرًا إلى نهاية الكائن Set. إرجاع حذف كائن المجموعة
• () : إزالة العناصر الموجودة في المجموعة التي تساوي هذه القيمة، وإرجاع صحيح إذا كان هناك أي منها، وإلا فسيتم إرجاع خطأ
• واضح () : مسح جميع عناصر المجموعة
• has () : ما إذا كانت هذه القيمة موجودة أم لا، إذا كان الأمر كذلك، وإلا فإن
• المفاتيح الخاطئة () : كائن المكرر بقيم السمات
• value () : كائن المكرر بإدخالات قيم السمات
• () : كائن المكرر بقيم السمات وقيم
• السمات
forEach() : التكرار على كل عنصر

على وجه التحديد ملاحظة:

• العبور هو كائن iterator بترتيب الإدراج،
• لن تخضع القيمة المضافة إلى المجموعة في شكل [مفتاح، قيمة] لتحويل النوع، لذلك 1 و"1". " هما قيمتان مختلفتان
• . داخل المجموعة، يتم تمريرهما === للحكم، أي أن كائنين لا يمكن أن يكونا متماثلين أبدًا لأن العناوين مختلفة.
• والفرق الوحيد هو NaN

Let list = new Set()
 
 //يضيف()
 قائمة.إضافة("1")
 إضافة قائمة(1)
 وحدة التحكم (القائمة) // المجموعة (2) {1، "1"}
 
 //مقاس
 وحدة التحكم (list.size) // 2
 
 //يمسح()
 قائمة.حذف("1")
 وحدة التحكم (القائمة) // المجموعة (1) {1}
 
 //لديه()
 list.has(1) // صحيح
 list.has(3) // خطأ
 
 //واضح()
 قائمة واضحة ()
 وحدة التحكم (قائمة) // مجموعة (0) {}
 
 دع آر = [{المعرف: 1}، {المعرف: 2}، {المعرف: 3}]
 قائمة السماح = مجموعة جديدة (arr)
 
 //مفاتيح()
 لـ (السماح بمفتاح list.keys()) {
    console.log(key); // اطبع هذا: {id: 1} {id: 2} {id: 3}
 }
 
 //قيم()
 لـ (دع مفتاح القائمة. القيم ()) {
    console.log(key); // اطبع هذا: {id: 1} {id: 2} {id: 3}
 }
 
 //الإدخالات()
 لـ (السماح ببيانات list.entries()) {
    console.log(data); // اطبع هذا: [{id: 1},{id: 1}] [{id: 2},{id: 2}] [{id: 3},{id: 3 } ]
 }
 
 //forEach
 list.forEach((العنصر) => {
    console.log(item)// اطبع هذا: {id: 1} {id: 2} {id: 3}
 });

التطبيق:

إلغاء تكرار المصفوفة،

هناك

• شيء واحد يجب ملاحظته وهو أن new Set لا يمكنها إزالة الكائنات.

غير محدد، null، null، NaN، NaN،'NaN'، 0، 0، 'a'، 'a']؛
 
 console.log([...مجموعة جديدة(arr)]) 
 // أو console.log(Array.from(new Set(arr)))
 // [1, 'صحيح', صحيح, 15, خطأ, غير محدد, null, NaN, 'NaN', 0, 'a']

يمكن العثور على الاتحاد والتقاطع والفرق

Let a = new Set([1, 2 , 3])
 دع ب = مجموعة جديدة([2، 3، 4])
 
 //Union console.log(new Set([...a, ...b])) // Set(4) {1, 2, 3, 4}
 
 //تقاطع console.log(new Set([...a].filter(v => b.has(v)))) // Set(2) {2, 3}
 
 // مجموعة الفرق new Set([...a].filter(v => !b.has(v))) // Set(1) {1}

مجموعة التعيين

Let set = new Set([1,2, 3])
 console.log(new Set([...set].map(v => v * 2))) // Set(3) {2, 4, 6}

WeakSet

: نفس بنية Set، لكن العضو يمكن الإعلان عن القيم فقط

للكائن: const set = new WeakSet()

الطريقة:

• add() : أضف عنصرًا إلى نهاية كائن WeakSet. قم بإرجاع مثيل
• الحذف () : قم بإزالة العنصر الموجود في WeakSet الذي يساوي هذه القيمة،
• has () : سواء كانت هذه القيمة موجودة، إذا كانت موجودة، فهي صحيحة، وإلا فهي خاطئة.

ملاحظة:

• كائنات أعضاء WeakSet كلها مراجع ضعيفة، أي أن آلية جمع البيانات المهملة لا تأخذ في الاعتبار تطبيق الكائن. ببساطة ،
• ميزة كائنات WebSet التي لا يمكن اجتيازها هي أنه عند حذف المثيل، لن يكون هناك تسرب للذاكرة.

فهرس توصية

الخريطة

الخريطة عبارة عن بنية بيانات جديدة في ES6، وهي كائن مشابه المفتاح هو إعلان قيمة من أي نوع

: const map = new Map()

attributes:

• المُنشئ : المُنشئ، يُرجع
• حجم الخريطة: يُرجع عدد القيم في مثيل الخريطة

الطريقة:

• set() : يضيف زوجًا من القيمة الرئيسية بعد ذلك الخريطة، تُرجع المثيل
• get() : تُرجع القيمة الرئيسية
• للحذف() : قم بإزالة العناصر الموجودة في الخريطة التي تساوي هذه القيمة، وإرجاع صحيح إذا كان هناك أي منها، وإلا قم بإرجاع خطأ
• واضح() : امسح جميع عناصر الخريطة الخريطة
• لها () : ما إذا كانت هذه القيمة موجودة، إذا كانت موجودة، فهي صحيحة، وإلا فهي
• مفاتيح خاطئة () : كائن العبور مع
• قيم مفاتيح السمات () : كائن العبور مع
• إدخالات قيم السمات () : كائن العبور مع مفاتيح السمات وقيم السمات
• forEach () : يجتاز كل عنصر

ملاحظة خاصة:

• بالنسبة إلى المراجع إلى نفس الكائن، تعتبر
• مفاتيح بنفس المفتاح وسيتم الكتابة فوقها

Let Map = new Map()
 
 //تعيين()
 Map.set('أ', 1)
 Map.set('ب', 2)
 console.log(map) // الخريطة(2) {'a' => 1, 'b' => 2}
 
 //يحصل
 Map.get("أ") // 1
 
 //مقاس
 console.log(map.size) // 2
 
 //يمسح()
 Map.delete("a") // صحيح
 console.log(map) // الخريطة(1) {'b' => 2}
 
 //لديه()
 Map.has('b') // صحيح
 Map.has(1) // خطأ
 
 //واضح()
 خريطة واضحة ()
 console.log(map) // الخريطة(0) {}
 
 دع arr = [["a"، 1]، ["b"، 2]، ["c"، 3]]
 دع الخريطة = خريطة جديدة (arr)
 
 //مفاتيح()
 لـ (السماح بمفتاح Map.keys()) {
    console.log(key); // اطبع هذا: abc
 }
 
 //قيم()
 لـ (اسمحوا بقيمة Map.values()) {
    console.log(value); // اطبع هذا: 1 2 3
 }
 
 //الإدخالات()
 لـ (السماح ببيانات Map.entries()) {
    console.log(data); // اطبع هذا: ["a"، 1] ["b"، 2] ["c"، 3]
 }
 
 //forEach
 Map.forEach((العنصر) => {
    console.log(item)// اطبع هذا: 1 2 3
 });

WeakMap

: وبنية الخريطة، ولكن لا يمكن

الإعلان عن قيم الأعضاء إلا للكائنات: const set = new WeakMap()

الطريقة:

• set() : إضافة أزواج قيمة المفتاح، وإرجاع المثيلات
• get() : مفتاح الإرجاع-
• حذف
• أزواج القيمة
()
• : إذا كانت هذه القيمة موجودة، فهي صحيحة.

الرمز (النوع الأصلي)

الرمز هو نوع بيانات بدائي تم تقديمه في ES6، والذي يمثل独一无二

: const sy = Stmbol()

المعلمات: سلسلة (اختيارية)

الطريقة:

• الرمز.for() : قم بإنشاء Symbol值موصوفة بواسطة المعلمات هذه المعلمة موجودة، قم بإرجاع Symbol值الأصلية (ابحث أولاً ثم قم بالإنشاء، مسجل في البيئة العالمية)
• Simplicity.keyFor() : إرجاع وصف Symbol值المسجلة (يمكن إرجاع key Symbol.for() فقط)
• Object.getOwnPropertySymbols() : إرجاع مصفوفة من جميع Symbol值المستخدمة كأسماء خصائص في الكائن

// Declare Let a = الرمز();
 دع ب = الرمز ()؛
 console.log(a === b);
 
 //الرمز.for()
 دع c = الرمز.for("domesy");
 دع d = الرمز.for("domesy");
 console.log(c === d);
 
 //Symbol.keyFor()
 const e = الرمز.for("1");
 console.log(Symbol.keyFor(e)); // 1
 
 //الرمز.وصف
 دع الرمز = الرمز("es");
 console.log(symbol.description);
 console.log(Symbol("es") === الرمز("es")); // false
 console.log(symbol === رمز);
 console.log(symbol.description === "es"); //

يستخدم الوكيل الحقيقي لتعديل السلوك الافتراضي لعمليات معينة، وهو ما يعادل إجراء تغييرات على مستوى اللغة، لذلك فهو نوع من "التعريف

"

") أي أنه

يمكن فهم البرمجة في لغة برمجة بهذه الطريقة. الوكيل هو طبقة من拦截يتم تعيينها قبل الكائن الهدف. يجب على العالم الخارجي أن يمر عبر طبقة الاعتراض هذه إذا أراد الوصول إليها. لذلك، يتم توفير آلية لتصفية وتصفية الوصول من العالم الخارجي.

يمكن فهم الوكيل هنا كإعلان代理器

: const proxy = new Proxy(target, handler)

• target :
• معالج الكائن الذي تم اعتراضه: يحدد

طريقة الاعتراض:

• get() : يعترض قراءة سمات الكائن
• set() : خصائص إعداد الكائن المعترض ، تُرجع قيمة منطقية
• has() : تعترض عملية PropKey في الوكيل، وترجع قيمة منطقية
• ownKeys() : تعترض اجتياز خاصية الكائن، وترجع مصفوفة
• deleteProperty() : تعترض عملية حذف الوكيل[propKey]، وترجع قيمة منطقية القيمة ()
• تطبيق () : اعتراض استدعاءات الوظائف، واستدعاء العمليات وتطبيقها،
• البناء () : اعتراض الأمر الجديد، وإرجاع كائن: اعتراض الأمر الجديد، وإرجاع كائن،

Let obj = {
  الاسم: 'دوميسي'،
  الوقت: '27-01-2022'،
  القيمة: 1
 }
 
 السماح للبيانات = وكيل جديد (obj، {
     //يحصل()
     الحصول على (الهدف، المفتاح) {
         هدف الإرجاع[مفتاح].replace("2022"، '2015')
     },
     
     //تعيين()
     مجموعة (الهدف، المفتاح، القيمة) {
        إذا (مفتاح === "الاسم") {
           العودة (الهدف [مفتاح] = القيمة)؛
        } آخر {
           هدف العودة [المفتاح]؛
         }
     },
     
     // لديه()
    لديه (الهدف، المفتاح) {
        إذا (مفتاح === "الاسم") {
            هدف العودة [المفتاح]؛
        } آخر {
            عودة كاذبة.
        }
    },
    //حذف الخاصية()
    حذف الخاصية (الهدف، المفتاح) {
        إذا (key.indexOf("_") > -1) {
            حذف الهدف[مفتاح]؛
            عودة صحيحة؛
        } آخر {
            هدف العودة [المفتاح]؛
        }
    },
    // المفاتيح الخاصة ()
    المفاتيح الخاصة (الهدف) {
        return Object.keys(target).filter((item) => item != "time");
    },
 })
 
 console.log(data.time) // 27-01-2015
 
 وقت البيانات = '2020'
 اسم البيانات = "رد فعل"
 console.log(data) // الوكيل {الاسم: 'React'، الوقت: '2022-01-27'، القيمة: 1}
 
 // اعتراض لديه ()
 console.log("الاسم" في البيانات) // صحيح
 console.log("الوقت" في البيانات) // خطأ
 
 // حذف حذف الخاصية ()
 حذف data.time؛
 
 // اجتياز المفاتيح الخاصة ()
 console.log(Object.keys(data)); //['الاسم', 'القيمة']

 //يتقدم()
 دع المبلغ = (...الوسائط) => {
    دع الأسطوانات = 0؛
    args.forEach((العنصر) => {
        الأسطوانات += البند؛
    });
    رقم الإرجاع؛
 };

 مجموع = وكيل جديد (مجموع، {
    تطبيق (الهدف، ctx، ​​الحجج) {
        هدف الإرجاع(...الوسائط) * 2;
    },
 });
 
 console.log(sum(1, 2)); // 6
 console.log(sum.call(null, 1, 2, 3)); // 12
 console.log(sum.apply(null, [1, 2, 3])); // 12
 
 // المنشئ ()
 دع المستخدم = الفئة {
    منشئ (الاسم) {
        this.name = name;
    }
 }
 المستخدم = الوكيل الجديد (المستخدم، {
    بناء (الهدف، الحجج، نيوتارجيت) {
        إرجاع هدف جديد(...args);
    },
  });
 console.log(new User("domesy")); // User {name: 'domesy'}

إن Reflect

Reflect يشبه Proxy، إلا أنه يحافظ على السلوك الافتراضي Object

• ويستبدل بعض أساليب كائن الكائن التي من الواضح أنها داخلي للغة (مثل Object.defineProperty) ووضعه على كائن Reflect.
• في هذه المرحلة، يتم نشر بعض الأساليب على كائنات Object وReflect. في المستقبل، سيتم نشر أساليب جديدة فقط على كائنات Reflect
• لتعديل نتائج الإرجاع لبعض أساليب Object لجعلها أكثر منطقية.

,

• desc) خطأ
• لتحويل عملية الكائن إلى سلوك وظيفي

وأساليب الوكيل تتوافق مع واحد لواحد، لذلك لن نقدمها هنا

الفصل

: تجريد فئة من الأشياء ذات الخصائص المشتركة (بناء جملة السكر)

التعريف الأساسي للمنشئ () والمثيل الذي تم إنشاؤه

فئة الأصل {.
     منشئ (الاسم = 'es6') {
         this.name = name
     }
 }
 السماح للبيانات = الوالد الجديد ("domesy")
 console.log(data) // الأصل { الاسم: 'domesy'}

يمتد إلى

فئة الأصل {
     منشئ (الاسم = 'es6') {
         this.name = name
     }
 }
 
 // فئة الميراث العادية يمتد الطفل إلى الأصل {}
 console.log(new Child()) // الطفل { الاسم: 'es6'} 
 
 // تمرير فئة المعلمات Child Extends Parent {
    منشئ (الاسم = "الطفل") {
        سوبر (الاسم)؛
        this.type = "child";
    }
 }
 console.log(new Child('domesy')) // Child { name: 'domesy', type: 'child'}

getter وsetter

• أكثر أهمية وغالبًا ما يتم استخدامهما لتغليف واجهة برمجة التطبيقات
• get and set السمات، وليس

فئة الطريقة الأصل {
     منشئ (الاسم = 'es6') {
         this.name = name
     }
     // جيتر
     الحصول على اسم () {
         إرجاع "sy" + this.name
     } 
     // واضعة
     تعيين اسم المجموعة (القيمة) {
         this.name = value
     }
 }
 
 السماح للبيانات = الوالد الجديد ()
 console.log(data.getName) // syes6
 
 data.setName = 'دوميسي'
 console.log(data.getName) //

طريقة ثابتة ثابتة

• لا يمكن استدعاء الطريقة الثابتة على مثيل للفئة، ولكن يجب استدعاؤها من خلال الفئة نفسها

class Parent {
     اسم الحصول الثابت = (الاسم) => {
         العودة `مرحبا! ${الاسم}`
     }
 }
 
 console.log(Parent.getName('domesy')) // مرحبًا!

الخصائص الثابتة

المزعجة الأصل

{}
 Parent.type = "اختبار";
 
 console.log(Parent.type); //test

Promise

Promise هو حل مشكلة "جحيم رد الاتصال" ويمكن أن يجعل معالجة العمليات غير المتزامنة أنيقة للغاية.

يمكن أن يدعم Promise طلبات متزامنة متعددة ويحصل على البيانات في الطلبات المتزامنة. لا يمكن القول بأن Promise Promise

تعريف غير متزامن: حالة الكائن تحتوي على نتائج عملية غير متزامنة

:

• معلق: [معلق]
• تم استيفاء الحالة الأولية: [التنفيذ]
تم رفض
• العملية
• : [تم الرفض] فشلت العملية

ملاحظة:

• سيحدد الوعد الطريقة التي سيتم تنفيذها بناءً على الحالة
• . عند إنشاء مثيل للوعد، تكون الحالة معلقة بشكل افتراضي. إذا كانت الحالة غير المتزامنة غير طبيعية، فسيتم رفضها
• انتقال الحالة أحادي الاتجاه ولا رجعة فيه ، ولا يمكن إعادة الحالة المحددة (المستوفاة/المرفوضة) إلى الحالة الأولية (معلقة)، ويمكن أن تكون فقط من المعلقة إلى المستوفاة أو المرفوضة

الاستخدام الأساسي

// التعريف العادي Let ajax = ( رد الاتصال) => {
     console.log('≈')
     setTimeout(() => {
         رد الاتصال && callback.call();
     }، 1000)
 } 
 اياكس (() => {
     console.log ("المهلة")
 })
 // أولاً ستتم طباعته لبدء التنفيذ، ثم ستتم طباعة المهلة بعد 1 ثانية.
 
 //يعد
 دع اياكس = () => {
    console.log("بدء التنفيذ");
    إرجاع وعد جديد ((حل، رفض) => {
        setTimeout(() => {
            حل()؛
        }, 1000);
    });
 };
 اياكس(). ثم(() => {
    console.log("المهلة"); 
 });
 // أولاً ستتم طباعته لبدء التنفيذ، ثم ستتم طباعة المهلة بعد 1 ثانية.
 
 //ثم()
 دع اياكس = () => {
    console.log("بدء التنفيذ");
    إرجاع وعد جديد ((حل، رفض) => {
        setTimeout(() => {
            حل()؛
        }, 1000);
    });
 };
 اياكس ()
 .ثم(() => {
     إرجاع وعد جديد ((حل، رفض) => {
        setTimeout(() => {
            حل()؛
        }، 2000)؛
    });
 })
 .ثم(() => {
     console.log("المهلة")
 })
 // أولاً سيتم كتابته لبدء التنفيذ، ثم سيتم كتابة المهلة بعد 3ث (1+2)
 
 // يمسك()
 دع اياكس = (رقم) => {
    console.log("بدء التنفيذ");
    إرجاع وعد جديد ((حل، رفض) => {
        إذا (عدد > 5) {
            حل()؛
        } آخر {
            رمي خطأ جديد("حدث خطأ");
        }
    });
 };
 
 اياكس(6)
 .ثم (وظيفة () {
    console.log("timeout"); // سيبدأ التنفيذ أولاً، ثم ستتم طباعة المهلة بعد ثانية واحدة
 })
 .catch(وظيفة (يخطئ) {
    console.log("catch"، يخطئ)؛
 });
 
  اياكس(3)
 .ثم (وظيفة () {
    console.log("المهلة"); 
 })
 .catch(وظيفة (يخطئ) {
    console.log("catch"); // سيبدأ التنفيذ أولاً، ثم يلتقط بعد 1 ثانية.
 });

Promise.all()

• يتم استخدام العملية الدفعية Promise.all(arr) لحزم مثيلات وعد متعددة في مثيل
• Promise
• جديد كائن الوعد ، أو يمكن أن يكون هناك قيم
• أخرى
• . فشل الوعد ، وقيمة الإرجاع هي أول نتيجة فاشلة

.
     إرجاع وعد جديد (حل ، رفض) => {
        دع img = document.createElement ("img") ؛
        img.src = src ؛
        img.onload = function () {
                حل (IMG) ؛
        };
        img.onerror = function (err) {
                رفض (خطأ) ؛
        };
    });
 }
 
 const showimgs = (imgs) => {
     imgs.foreach ((IMG) => {
         document.body.appendchild (IMG) ؛
     })
 }
 
 الوعد. ([[
    LOADIMG ("https://ss0.baidu.com/7po3dsag_xi4khgko9wtanf6hhy/zhidao/Item/71cf3bc79f3df8dcc651159cd11728b46102889.jpg") ،
    LOADIMG ("https://ss0.baidu.com/7po3dsag_xi4khgko9wtanf6hhy/zhidao/Item/71cf3bc79f3df8dcc651159cd11728b46102889.jpg") ،
    LOADIMG ("https://ss0.baidu.com/7po3dsag_xi4khgko9wtanf6hhy/zhidao/Item/71cf3bc79f3df8dcc651159cd11728b46102889.jpg") ،
 

)

. ثم (showimgs

)

• ؛

{
    إرجاع وعد جديد (حل ، رفض) => {
       دع img = document.createElement ("img") ؛
       img.src = src ؛
       img.onload = function () {
               حل (IMG) ؛
       };
       img.onerror = function (err) {
               رفض (خطأ) ؛
       };
   });
}

const showimgs = (imgs) => {
   دع p = document.createElement ("p") ؛
   P.AppendChild (IMG) ؛
   document.body.appendchild (p) ؛
}

الوعد.
   LOADIMG ("https://ss0.baidu.com/7po3dsag_xi4khgko9wtanf6hhy/zhidao/Item/71cf3bc79f3df8dcc651159cd11728b46102889.jpg") ،
   LOADIMG ("https://ss0.baidu.com/7po3dsag_xi4khgko9wtanf6hhy/zhidao/Item/71cf3bc79f3df8dcc651159cd11728b46102889.jpg") ،
   LOADIMG ("https://ss0.baidu.com/7po3dsag_xi4khgko9wtanf6hhy/zhidao/Item/71cf3bc79f3df8dcc651159cd11728b46102889.jpg") ،
] ثم (

• showimgs
• )

؛

• لا تعكس الوظائف والأخطاء التي يتم إلقاؤها في الداخل
• كيف يتم تنفيذ الوعد الخارجي داخليًا. على وشك الانتهاء)

مولد

: نعم يمكن استخدامها للسيطرة على التكرار أيضًا حل البرمجة غير المتزامن الذي يطلق عليه الحالات الداخلية

• المتعددة

.

• done البرنامج value
• done value

ذلك

• )
• يتم
• استخدامه恢复تنفيذ البرنامج.

     العائد "أ" ؛
     العائد "ب" ؛
     العودة "ج"
 }
 
 دع مولد = data () ؛
 console.log (generator.next ()) // {value: 'a' ، inst: false} 
 console.log (generator.next ()) // {value: 'b' ، inst: false} 
 console.log (generator.next ()) // {value: 'c' ، done: true} 
 console.log (generator.next ()) // {value: غير محدد ، تم: True}

Iterator

iterator هي واجهة توفر آلية وصول موحدة لمختلف هياكل البيانات. طالما أن أي بنية بيانات تنشر واجهة التكرار ، يمكنه إكمال عملية اجتياز (أي ، معالجة جميع أعضاء بنية البيانات بالتسلسل).

وظائف التكرار:

• أولاً
• ، توفر واجهة وصولًا موحدة وبسيطة لمختلف هياكل البيانات
• بحيث يمكن ترتيب أعضاء بنية البيانات بترتيب معين.
• بشكل رئيسي من أجل ... من الاستهلاك
• إلى ترتيب اجتياز: وافقت المحركات المختلفة على كيفية تكرار الخصائص ، وبالتالي توحيد السلوك ES11

ملاحظة:

• في ES6 ، تحتوي بعض هياكل البيانات على واجهة التكرار أصلاً (مثل المصفوفات) ، وهذا هو ، بدون أي معالجة يمكن اجتيازها من أجل ... من الحلقة ، ولكن لا يمكن للبعض (مثل
• Set数组Map结构某些类似数组的对象Map结构.
• مثال على إضافة واجهة Iterator إلى كائن.

// استخدم أساسًا Let arr = ["Hello" ، "World"] ؛
 دع الخريطة = arr [symbor.iterator] () ؛
 console.log (map.next ()) ؛
 console.log (map.next ()) ؛
 console.log (map.next ()) ؛
 
 // من أجل حلقة ، دع arr = ["Hello" ، "World"] ؛
 ل (دع قيمة arr) {
    console.log (القيمة) ؛
 }
 
 // معالجة الكائن دع OBJ = {
     ابدأ: [1 ، 5 ، 2] ،
     النهاية: [7 ، 9 ، 6] ،
     [Symbol.iterator](){
         دع الفهرس = 0 ؛
         دع arr = this.start.concat (this.end)
         يعود {
             التالي(){
                 if (index <arr.length) {
                     يعود {
                         القيمة: arr [index ++] ،
                         تم: خطأ
                     }
                 }آخر{
                     يعود {
                         القيمة: arr [index ++] ،
                         تم: صحيح
                     }
                 }
             }
         }
     }
 }
 لـ (دع مفتاح OBJ) {
    Console.log (مفتاح) ؛
 }

زينة الديكور

رمز

• core-decorators
• @ سلوك الفصل.

     Target.Name = "Domesy"
 }
 
 @اسم
 اختبار الفئة {}
 
 Console.log (Test.Name) //

modularization

في الأيام الأولى ، كانت طريقة شائعة لاستخدام وظائف التنفيذ الفورية لتحقيق

Modularization من استخدام المعيار:

• حل تعارضات التسمية
• توفر قابلية إعادة الاستخدام
• وتحسين

حلول الصيانة الرمزية:

• شائعة : بالنسبة للخوادم (التبعيات الديناميكية)
• AMD : بالنسبة للمتصفحات (التبعيات الديناميكية ، نادرًا ما تستخدم)
• CMD : بالنسبة للمتصفحات (التبعيات الديناميكية ، نادرًا ما تستخدم)
• UMD : تستخدم للبروسرات. والخوادم (التبعيات الديناميكية)
• ESM : تستخدم للمتصفحات والخوادم (التبعيات الثابتة)

تصدير تصدير وحدة التصدير

• بشكل افتراضي export default Index
• تصدير تصدير الفهرس الافتراضي وحده: `تصدير const name = 'domesy'
• التصدير على الطلب (موصى به):` التصدير) {name ، value ، id} '
• تم إعادة تسمية التصدير: export { name as newName }

استيراد وحدة الاستيراد

الافتراضية (الموصى بها
• )
:
• import * as Index from './Index'
• import Index from './Index'
• استيراد (موصى به): import { name, value, id } from './Index'
• import { name as newName } from './Index'
• import './Index'
• .

import命令export命令

المركب

• import Index, { name, value, id } from './Index'

.

• ​
• ​

على

• الاستيراد
• والتصدير
• عند الطلب: `export {name ، value ، id} from.

امتداد المصفوفة

• () : تمت إضافة واحدة بناءً على مؤشر ES6 ، الذي يمثل مكان العثور على ES7

Let Arr = [1 ، 2 ، 3 ، 4]
 
 // يشمل () ES6
 console.log (arr.includes (3)) // true
 console.log ([1 ، 2 ، nan] .includes (nan)) ؛
 
 // يشمل () ES7
 console.log (arr.includes (1 ، 0)) // true
 console.log (arr.includes (1 ، 1)) //

الموسع الأرقام

• : استخدم ** لتمثيل Math.pow()

// Power Operator ES7
 console.log (Math.Pow (2 ، 3)) // 8
 console.log (2 ** 8) // 256

ES8

تمديد نقل الحرف

• padstart () : يستخدم لإكمال الرأس
• padend () : المستخدمة لإنجاز الذيل.

دع str = 'domesy'
 
 // padstart (): هل سيتم ملؤها في شكل مسافات؟ "0") ؛
 console.log ("8-27" .padstart (10 ، "Yyyy-0M-0D") ؛
  
 

• padstart
• (

)

console.log ("1" .padend (2 ، "0") ؛

• إرجاع مجموعة من أسماء السمات وقيم السمة

دع OBJ = {name: 'Domesy' ، value: 'React'}

//object.values ​​()
console.log (object.values ​​(obj)) // ['React' ، 'React']

//object.entries ()
console.log (Object.Entries (obj)) // [["name" ، 'value'] ، ['React' ، 'React']

Async في انتظار

الوظيفة: تغيير الوظيفة غير المتزامنة إلى وظيفة متزامنة ، (سكرات بناء الجملة المولد)

const func = async () => {
    دع الوعد = وعد جديد ((حل ، رفض) => {
    setTimeout(() => {
          حل ("تنفيذ") ؛
        } ، 1000) ؛
    });
     
      console.log (في انتظار الوعد) ؛
      console.log (في انتظار 0) ؛
      console.log (انتظار الوعد. resolve (1)) ؛
      console.log(2);
      عودة الوعد. حل (3) ؛
 }
 
 func (). ثم (val => {
      Console.log (Val) ؛
 }

)

• forEach()
• Promise then
• ​

Async

• async/await for-of Promise.all()
• try catch reject

هناك حالتين: سواء كان ذلك بمثابة وعد

. هذا الشيء غير الرائحة في انتظار.

إذا كانت تنتظر كائن الوعد ، فستتوقف الانتظار أيضًا عن الكود وراء ASYNC ، وقم أولاً بتنفيذ رمز التزامن خارج ASYNC ، وانتظر حتى يتم الوفاء بكائن الوعد ، ثم استخدم المعلمات حل كنتيجة تشغيل للتعبير.

وعيوب التزامن تنتظر والوعد

:

• من
• السهل
• نسبياً القراءة.

• ،

تحسين

• وضوح الكود.

• ، مما تسبب في فقدان الكود التزامن.

تمديد نقل حرف

ES9

• القيود المفروضة على السلسلة التي تفرغ في قوالب العلامات : يتم إرجاع undefined عند مواجهة سلسلة غير قانونية ، ويمكن الحصول على السلسلة الأصلية من raw .

// استرخاء قيود السلسلة const test = (value) => {
     console.log (القيمة)
 }
 

• '

،

raw: [" "domesy"]

الوعد

.

     إرجاع وعد جديد ((الدقة ، Rej) => {
         setTimeout(() => {
             إذا (الوقت <500) {
                 الدقة (الوقت)
             }آخر{
                 Rej (الوقت)
             }
         }، وقت)
     })
 }
 
 متعة (300)
 .Then ((val) => console.log ('res' ، val))
 .catch ((erro) => console.log ('rej' ، erro))
 .
 // نتيجة التنفيذ: RES 300 Func المكتملة (700)
 .Then ((val) => console.log ('res' ، val))
 .catch ((erro) => console.log ('rej' ، erro))
 .
 // نتيجة التنفيذ: REJ 700 المكتملة

من أجل النية

: ايتراتور غير متزامن ، تنتظر Loop كل Promise对象أن تصبح resolved状态قبل الدخول إلى الخطوة التالية

دع GetTime = (ثواني) => {
     إرجاع وعد جديد (الدقة => {
         setTimeout(() => {
             الدقة (ثانية)
         } ، ثواني)
     })
 }
 
اختبار وظيفة Async () {
    دع arr = [GetTime (2000) ، GetTime (500) ، GetTime (1000)]
    لانتظار (دع x من arr) {
        console.log (x) ؛ 
    }
}

اختبار () // تنفيذ 2000 500 1000

ES10

تمديد نقل الأحرف

• json.stringify () : يمكن إرجاع سلاسل لا تتوافق مع معايير UTF-8 (U+2028 و U+2029 يمكن إدخالها مباشرة)

//json.stringify ( ) ترقية console.log (json.stringify (" ud83d  ude0e")) ؛ 
 

"

 u {d800}"))

• ؛ (ملاحظة: إنها نفس الخريطة تقريبًا تليها مسطحة ذات قيمة عمق 1 ، ولكن عادة ما تكون الخريطة المسطحة أكثر كفاءة عندما يتم دمجها في طريقة واحدة.
• ) تجمع العناصر مع العناصر الموجودة في المباراة الفرعية التي تم اجتيازها لتشكيل مجموعة جديدة وإعادتها. الافتراضي هو 1. (التطبيق: تسطيح الصفيف (حل تلقائيًا إلى أسفل عند إدخال Infinity ))

دع arr = [1 ، 2 ، 3 ، 4]
 
 // flatmap ()
 console.log (arr.map ((x) => [x * 2]) ؛
 console.log (arr.flatmap ((x) => [x * 2]) ؛
 console.log (arr.flatmap ((x) => [[x * 2]]) ؛
 
 const arr1 = [0 ، 1 ، 2 ، [3 ، 4]] ؛
 const arr2 = [0 ، 1 ، 2 ، [[[3 ، 4]]]] ؛

 console.log (arr1.flat ()) ؛
 console.log (arr2.flat (2)) ؛
 

(

arr2.flat (Infinity)

)

• ؛

من

• الكائن
• Object.entries()

​
    ["أ" ، 1] ،
    ["ب" ، 2] ،
 ]);
 
 دع obj = object.fromentries (MAP) ؛
 

(

)

؛

    ["أ" ، 1] ،
    ["ب" ، 2] ،
 ]
 دع obj = object.fromentries (arr) ؛
 

(

OBJ

) ؛

    ج: 1 ،
    ب: 2 ،
    ج: 3
 }
 
 دع الدقة = object.fromentries (
     Object.Entries (OBJ) .Filter (([Key ، Val]) => value! == 3)
 )
 
 console.log (res) // {a: 1 ، b: 2}

توسيع عدد كبير

• من التحول : إرجاع الكود الأصلي للدالة (بما يتوافق مع الترميز)

// tostring ()
 اختبار الوظيفة () {
     consople.log ('Domesy')
 }
 console.log (test.toString ()) ؛
 // وظيفة اختبار () {
 //consople.log('domesy ')
 .

​

​

​
      يحاول {
         إرجاع json.parse (الاسم)
      } يمسك {
         العودة كاذبة
      }
  }
  
  console.log (func (1)) // 1
  

(

• func

({a: '1'})

)

• يمكن

أن يمثل
• نوع الرقم في JS
• فقط القيم في نطاق-(2^53-1) إلى 2^53-1

.

• يمكن أن يكون 53 رقمًا ثنائيًا (أي ما يعادل 16 رقمًا عشريًا ، بالإضافة إلى 9007199254740992).
• ليس لدى Bigint أي حد على عدد الأرقام ، ويمكن تمثيل أي عدد صحيح بدقة. ومع ذلك ، لا يمكن استخدامه إلا لتمثيل الأعداد الصحيحة ، ومن أجل التمييز بينه وبين العدد ، يجب إضافة بيانات نوع Bigint مع اللاحقة n.

ولكن

• لا يمكن استخدام
• أرقام أرقام أرقام وأرقام نوع Bigint
.

 console.log (2 ** 53) // 9007199254740992
 console.log (number.max_safe_integer) // 9007199254740991
 
 // Bigint
 const bigint = 9007199254740993n
 Console.log (Bigint) // 9007199254740993n
 console.log (typeof bigint) // bigint
 console.log (1n == 1) // صحيح
 console.log (1n === 1) // false
 const bigintnum = bigint (9007199254740993n)
 Console.log (Bigintnum) // 9007199254740993n

أنواع بيانات أساسية

في

ES6 ، وهي: srting ، number boolean null undefined symbol object

Array Function Date object RegExp

8. هم: srting ، number ، boolean ، object ، null ، undefined ، symbol BigInt

• وعد

bigint

.

• ثم العودة)
• بغض النظر عما إذا كانت النتيجة قد تم الوفاء بها أو رفضها ، لا
• يوجد أي صيد يعادل تعزيز Promise.all()

.
    promise.reject ({
      الكود: 500 ،
      MSG: "استثناء الخدمة" ،
    }) ،
    Promise.Resolve ({
      الكود: 200 ،
      البيانات: ["1" ، "2" ، "3"] ،
    }) ،
    Promise.Resolve ({
      الكود: 200 ،
      البيانات: ["4" ، "5" ، "6"] ،
    }) ،
  ]). ثم (((الدقة) => {
      console.log (res) // [{quient: {code: 500 ، msg: 'service revision'} ، الحالة: "رفض"} ،
                      // {السبب: {الكود: 200 ، البيانات: ["1" ، "2" ، "3"]} ، الحالة: "رفض"} ،
                      // {السبب: {الكود: 200 ، البيانات: ["4" ، "5" ، "6"]} ، الحالة: "رفض"}]
      const data = res.filter ((item) => item.Status === "الوفاء") ؛
      console.log (Data) ؛
                          // {السبب: {الكود: 200 ، البيانات: ["4" ، "5" ، "6"]} ، الحالة: "رفض"}]
  }

import ():

• استيراد require() import() الحصول require
• عند الطلب.
• التحميل

// ثم ()
 دع ModulePage = "index.js" ؛
 استيراد (ModulePage) .Then ((الوحدة) => {
    module.init () ؛
 });
 
 // جنبا إلى جنب مع Async في انتظار
 (غير متزامن () => {
  const modulepage = 'index.js'
  وحدة const = في انتظار الاستيراد (ModulePage) ؛
  console.log (وحدة)
 })

Globalthis

• Global This ، بغض النظر عن البيئة (المتصفح ، العقدة ، إلخ) ، يشير دائمًا إلى الكائن العالمي

// Browser Environment Console.log (Globalthis) // window

//العقدة

• رمز

السلسلة الاختياري

العالمي

ما

• إذا
• كان هناك TypeScript.

 // قبل ES11 ، دع = مستخدم && user.name
 
 

• //
• الآن

دع B = user

؟

• .

"||." القيمة الافتراضية "؛
  "؟؟" القيمة الافتراضية "؛
  
 const b = 0 ؛
 const a = b || 5 ؛
 Console.log (A) ؛
 
 const b = null // undefined
 const a = b ؟؟ 123 ؛
 

Console.log

(

A

)

• ​​
• ​​
• السلسلة الأصلية التي تتطابق مع نمط مع بديل.
• يمكن أن يكون النمط سلسلة أو تعبيرًا منتظمًا ، ويمكن أن يكون الاستبدال سلسلة أو وظيفة يتم تطبيقها على كل تطابق.
• replaceall () يعادل تعزيز خصائص استبدال () ، واستبدال كل

Let STR = "HI! ، هذه ميزة جديدة من ES6 ~ ES12 ، حاليًا ES12"
 
 console.log (str.replace ("es" ، "sy") ؛ ، هذه ميزة جديدة لـ SY6 ~ ES12 ، حاليًا ES12
 console.log (str.replace (/es/g ، "sy") ؛ ، هذه ميزة جديدة لـ Sy6 ~ Sy12 ، وهي حاليًا SY12
 
 console.log (str.replaceall ("es" ، "sy") ؛ ، هذه ميزة جديدة لـ Sy6 ~ Sy12 ، وهي حاليًا SY12
 console.log (str.replaceall (/es/g ، "sy") ؛ ، هذه ميزة جديدة لـ SY6 ~ SY12 ، وعد SY12 حاليًا.

(

)

• يختلف عن الوعد (). إرجاع الوعد الذي يحل أولاً.

الوعد. ([[
    الوعد.
    Promise.Resolve ("Second") ،
    Promise.Resolve ("First") ،
 ])
 .Then ((res) => console.log (res)) // الثانية
 .catch ((err) => console.error (err)) ؛ 
 
 الوعد. ([[
    promise.reject ("خطأ 1") ،
    promise.reject ("Error 2") ،
    promise.reject ("Error 3") ،
 ])
 .Then ((res) => console.log (res))
 .catch ((err) => console.error (err)) ؛
 // compregteror: تم رفض جميع الوعود
 
 الوعد. ([[
    Promise.Resolve ("الثالث") ،
    Promise.Resolve ("Second") ،
    Promise.Resolve ("First") ،
 ])
 .Then ((res) => console.log (res)) // الثالث
 .catch ((err) => console.error (err)

• )

؛

• يتيح ذلك تتبع الكائنات الموجودة دون منعها من جمع القمامة.
• مفيد
• جدًا
• للتخزين المؤقت ورسم خرائط الكائنات
• .
• ممكن. من المهم أيضًا تجنب الاعتماد على أي سلوك محدد لا يضمنه المواصفات. متى وكيف ، وما إذا كان جمع القمامة يعتمد على تنفيذ أي محرك JavaScript معين.

دع الضعف = New DefenRef ({name: 'Domesy' ، السنة: 24})
 
 DefenRef.Deref () // {name: 'Domesy' ، السنة: 24}
 PreamRef.Deref (). السنة // 24

مشغليًا منطقيًا وتعبيرات المهمة

&& =

دع num1 = 5 ؛
دع num2 = 10 ؛
num1 && = num2 ؛
console.log (num1) ؛

// يعادل num1 && (num1 = num2) ؛
إذا (num1) {
    num1 = num2 ؛
 }

|| =

دع num1 ؛
دع num2 = 10 ؛
num1 || = num2 ؛
console.log (num1) ؛

// يعادل num1 || (num1 = num2) ؛
إذا (! num1) {
   num1 = num2 ؛
}

؟؟

• ​

​
دع num2 = 10 ؛
دع num3 = فارغة ؛

num1 ؟؟ = num2 ؛
console.log (num1) ؛

num1 = false ؛
num1 ؟؟ = num2 ؛
console.log (num1) ؛

num3 ؟؟ = 123 ؛
console.log (num3) ؛

// يعادل //

num1

؟

دع num2 = 100_000 ؛

console.log (num1) ؛
Console.log (num2) ؛

const num3 = 10.12_34_56
Console.log (num3) ؛