لقد قلت أنه يمكنك استخدام ES6، ثم استخدمه بسرعة!

كيف تبدأ سريعًا مع VUE3.0: ابدأ بالتعلم

"إذا كنت تعرف كيفية استخدام ES6، فاستخدمه!": هذا هو "الزئير" الذي أطلقه القائد لأعضاء الفريق أثناء مراجعة الكود لأنه اكتشف الكثير من الأفضل استخدام طريقة الكتابة ES5، وهذا لا يعني أن الكتابة في ES5 لن تنجح وسيكون هناك أخطاء، بل سيؤدي فقط إلى زيادة في كمية التعليمات البرمجية وضعف إمكانية القراءة.

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

ملاحظة: يُطلق على بناء جملة JS بعد ES5 اسم ES6 بشكل جماعي! ! !

1. معلومات حول جمع القيمة

تعد القيمة شائعة جدًا في البرامج، مثل الحصول على القيمة من الكائن obj .

كائن ثابت = {
    أ:1،
    ب: 2،
    ج:3،
    د:4،
    ه:5،
}

Tucao :

const a = obj.a;
const b = obj.b;
const c = obj.c;
const d = obj.d;
const e = obj.e;

أو

const f = obj.a + obj.d;
const g = obj.c + obj.e;

Tucao: "ألا يمكنك استخدام مهمة التدمير الخاصة بـ ES6 للحصول على القيمة؟ أليس من الجيد استخدام 5 أسطر من التعليمات البرمجية في سطر واحد من التعليمات البرمجية؟ فقط استخدم اسم الكائن بالإضافة إلى اسم السمة للحصول على القيمة. إذا كان اسم الكائن قصيرًا، ولكن إذا كان طويلًا جدًا، فسيكون اسم الكائن موجودًا في كل مكان في الكود "

التحسين :

const {a,b,c,d,e} = كائن.
ثابت و = أ + د؛

const

+

e;

إعادة إنشاء مهمة اجتياز.

يبدو

أن فهمك لتدمير ES6 وتعيينه ليس دقيقًا بما فيه الكفاية. إذا كان اسم المتغير الذي تريد إنشاءه غير متوافق مع اسم خاصية الكائن، فيمكنك الكتابة:

const {a:a1} = obj;
console.log(a1); // 1

التكميلية

ES6 سهلة الاستخدام. لكن يرجى ملاحظة أن الكائن المدمر لا يمكن أن يكون undefined أو null . وإلا، سيتم الإبلاغ عن خطأ، لذلك يجب إعطاء الكائن المدمر قيمة افتراضية.

const {a,b,c,d,e} = obj ||.{};

2. شكاوى حول دمج البيانات

، مثل دمج صفيفين ودمج كائنين.

ثابت أ = [1,2,3];
ثابت ب = [1,5,6];
const c = a.concat(b);//[1,2,3,1,5,6]

ثابت obj1 = {
  أ:1،
}
ثابت obj2 = {
  ب:1،
}
const obj = Object.assi({}, obj1, obj2);//{a:1,b:1}

اشتكى مما

إذا كان عامل الامتداد لـ ES6 قد تم نسيانه، وهل دمج المصفوفات لا يأخذ في الاعتبار إلغاء البيانات المكررة؟

تحسين

const a = [1,2,3];
ثابت ب = [1,5,6];
const c = [...مجموعة جديدة([...a,...b])];//[1,2,3,5,6]

ثابت obj1 = {
  أ:1،
}
ثابت obj2 = {
  ب:1،
}
const obj = {...obj1,...obj2};//{a:1,b:1}

3. معلومات حول ربط السلاسل

const name = 'Xiao Ming';
النتيجة الثابتة = 59؛
دع النتيجة = ''؛
إذا (النتيجة > 60){
  النتيجة = `نجاح امتحان ${name}`؛ 
}آخر{
  النتيجة = `${name} رسب في الاختبار`؛ 
}

إذا كنت تشكو من

استخدام قوالب سلسلة ES6 كما تفعل أنت، فمن الأفضل عدم استخدامها، وليس لديك أي فكرة عن العمليات التي يمكن إجراؤها في ${} . في ${} يمكنك وضع أي تعبير JavaScript، وتنفيذ العمليات، وخصائص الكائن المرجعية.

تحسين

اسم ثابت = 'شياو مينغ'؛
النتيجة الثابتة = 59؛
نتيجة const = `${name}${score > 60?''s test result':''s test test Failed'}`

4. تعليقات على شروط الحكم في if

(
    اكتب == 1 ||
    اكتب == 2 ||
    اكتب == 3 ||
    اكتب == 4 ||
){
   //...
}

هل تشكو مما

إذا includes سيتم استخدام أسلوب مثيل المصفوفة في ES6؟

تحسين

الحالة الثابتة = [1,2,3,4];

إذا (الحالة. تشمل (النوع) ){
   //...
}

5. شكاوى حول البحث في القائمة

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

ثابت أ = [1,2,3,4,5];
نتيجة ثابتة = مرشح ( 
  العنصر =>{
    العنصر المرتجع === 3
  }
)

تقديم شكوى

بشأن البحث الدقيق، ألن تستخدم find في ES6؟ هل تفهم تحسين الأداء؟ إذا تم العثور على عنصر يستوفي الشروط في طريقة find ، فلن يستمر في اجتياز المصفوفة.

تحسين

const a = [1,2,3,4,5];
النتيجة الثابتة = a.find( 
  العنصر =>{
    العنصر المرتجع === 3
  }
)

6. شكاوى حول المصفوفات المسطحة

في بيانات JSON الخاصة بالقسم، اسم السمة هو معرف القسم، وقيمة السمة عبارة عن مجموعة مصفوفة من معرفات أعضاء القسم. نحتاج الآن إلى استخراج جميع معرفات أعضاء القسم في مجموعة مصفوفة.

تناقص ثابت = {
'قسم المشتريات':[1،2،3]،
'قسم شؤون الموظفين':[5،8،12]،
'القسم الإداري':[5,14,79]،
'وزارة النقل':[3,64,105]،
}
دع العضو = []؛
لـ (دع العنصر في الإقلاع){
    قيمة const = deps[item];
    إذا(Array.isArray(القيمة)){
        العضو = [...العضو،...القيمة]
    }
}
عضو = [...مجموعة جديدة(عضو)]

هل من الضروري الاجتياز للحصول على جميع قيم السمات للكائن

؟

هل نسيت Object.values . هناك أيضًا عملية التسطيح التي تتضمن المصفوفات، لماذا لا تستخدم الطريقة flat التي يوفرها ES6؟ ولحسن الحظ، يصل عمق المصفوفة هذه المرة إلى بعدين فقط، فهل هذا ضروري؟ حلقة متداخلة للتسطيح؟

تحسين

const deps = {
    'قسم المشتريات':[1،2،3]،
    'قسم شؤون الموظفين':[5،8،12]،
    'القسم الإداري':[5,14,79]،
    'وزارة النقل':[3,64,105]،
}
Let member = Object.values(deps).flat(Infinity);

يتم استخدام Infinity كمعلمة لـ flat ، لذلك ليست هناك حاجة لمعرفة أبعاد المصفوفة المسطحة.

يُضاف إلى أن

الطريقة flat لا تدعم متصفح IE.

7. Tucao حول الحصول على قيمة سمة الكائن

const

name = obj && obj.name;

هل سيتم استخدام مشغل السلسلة الاختياري في ES6؟

تحسين

اسم const = obj?.name;

8. تعليقات على إضافة سمات الكائن

عند إضافة سمات إلى كائن، ما الذي يجب فعله إذا تغير اسم السمة ديناميكيًا.

دع obj = {};
دع الفهرس = 1؛
دع المفتاح = `الموضوع${index}`;
obj[key] = 'محتوى الموضوع';

لماذا

نحتاج إلى إنشاء متغير إضافي. أتساءل عما إذا كان من الممكن استخدام التعبيرات لأسماء خصائص الكائنات في ES6؟

تحسين

Let obj = {};
دع الفهرس = 1؛
obj[`topic${index}`] = 'محتوى الموضوع';

9. الحكم على ما إذا كان مربع الإدخال ليس فارغًا

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

إذا (القيمة !== قيمة && فارغة !== قيمة && غير محددة !== ''){
    //...
}

هل سمعت عن عامل دمج القيمة الخالية الجديد في ES6؟ هل تحتاج إلى كتابة العديد من الشروط

؟

إذا((القيمة؟؟'') !== ''){
  //...
}

10. شكاوى حول الوظائف غير المتزامنة

الوظائف غير المتزامنة شائعة جدًا ويتم تنفيذها غالبًا باستخدام Promise.

كونست fn1 = () =>{
  إرجاع وعد جديد ((حل، رفض) => {
    setTimeout(() => {
      العزم(1);
    }، 300)؛
  });
}
كونست fn2 = () =>{
  إرجاع وعد جديد ((حل، رفض) => {
    setTimeout(() => {
      العزم(2);
    }, 600);
  });
}
ثابت fn = () =>{
   fn1().ثم(res1 =>{
      console.log(res1); // 1
      fn2().ثم(res2 =>{
        console.log(res2)
      })
   })
}

قمت باستدعاء

دالة غير متزامنة مثل هذه، فلن تخاف من رد الاتصال الجهنمي!

تحسين

const fn = async () =>{
  const res1 = انتظار fn1();
  const res2 = انتظار fn2();
  console.log(res1); // 1
  console.log(res2);// 2
}

الملحق

: عند إجراء طلبات متزامنة، لا تزال بحاجة إلى استخدام Promise.all() .

ثابت fn = () =>{
   Promise.all([fn1(),fn2()]).then(res =>{
       console.log(res);//[1,2]
   }) 
}

إذا كانت هناك طلبات متزامنة، فسيتم إرجاع النتيجة طالما اكتملت إحدى الوظائف غير المتزامنة، ويجب استخدام Promise.race() .

11.

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

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

هذه المقالة مستنسخة من: https://juejin.cn/post/7016520448204603423

المؤلف: Hongchen Lianxin

[توصية دروس فيديو ذات صلة: الواجهة الأمامية للويب]

ما سبق هو ما قلته أنه يمكنك استخدام ES6، ثم استخدامه بسرعة! لمزيد من التفاصيل، يرجى الانتباه إلى المقالات الأخرى ذات الصلة على موقع php الصيني!