أمثلة على استخدام بعض ميزات JavaScript الجديدة

يقول مؤلف المادة ، التي نُنشر ترجمتها اليوم ، أن ميزات JavaScript الجديدة التي تندرج ضمن معيار ES2019 متاحة بالفعل رسميًا في متصفحات Chrome و Firefox و Safari ، وكذلك على منصة Node.js. إذا كنت بحاجة إلى دعم المتصفحات القديمة ، فيمكنك الاستفادة من الابتكارات عن طريق نقل رمز JS باستخدام Babel . هنا نلقي نظرة على أمثلة لبعض ميزات JS الجديدة.

Object.fromEntries الطريقة

في ES2017 ، Object.entries طريقة Object.entries . يحول الكائن إلى صفيف. على سبيل المثال ، قد يبدو كالتالي:

 let students = {  amelia: 20,  beatrice: 22,  cece: 20,  deirdre: 19,  eloise: 21 } Object.entries(students) // [ // [ 'amelia', 20 ], // [ 'beatrice', 22 ], // [ 'cece', 20 ], // [ 'deirdre', 19 ], // [ 'eloise', 21 ] // ] 

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

 let students = {  amelia: 20,  beatrice: 22,  cece: 20,  deirdre: 19,  eloise: 21 } //          .filter() let overTwentyOne = Object.entries(students).filter(([name, age]) => {  return age >= 21 }) // [ [ 'beatrice', 22 ], [ 'eloise', 21 ] ] //       let drinkingAgeStudents = {} for (let [name, age] of overTwentyOne) {    drinkingAgeStudents[name] = age; } // { beatrice: 22, eloise: 21 } 

تم Object.fromEntries الأسلوب Object.fromEntries للتخلص من هذه الحلقات. يسمح لك بحل نفس المشكلة باستخدام مقدار أقل بكثير من التعليمات البرمجية. قد يساعد ذلك المطورين على استخدام أساليب الصفيف في كثير من الأحيان لمعالجة الكائنات المحولة إلى صفائف.

 let students = {  amelia: 20,  beatrice: 22,  cece: 20,  deirdre: 19,  eloise: 21 } //          .filter() let overTwentyOne = Object.entries(students).filter(([name, age]) => {  return age >= 21 }) // [ [ 'beatrice', 22 ], [ 'eloise', 21 ] ] //       let drinkingAgeStudents = Object.fromEntries(overTwentyOne); // { beatrice: 22, eloise: 21 } 

من المهم ملاحظة أن المصفوفات والكائنات ليست في هياكل بيانات مختلفة دون جدوى. في بعض الحالات ، يؤدي تحويل واحد إلى آخر إلى فقد البيانات. في المثال التالي ، يمكنك معرفة كيف عند تحويل صفيف إلى كائن ، يتم فقد عناصر الصفيف التي تتحول إلى أن تكون مفاتيح مكررة للكائن.

 let students = [  [ 'amelia', 22 ],  [ 'beatrice', 22 ],  [ 'eloise', 21],  [ 'beatrice', 20 ] ] let studentObj = Object.fromEntries(students); // { amelia: 22, beatrice: 20, eloise: 21 } //    beatrice! 

▍Podderzhka

• كروم 75
• فايرفوكس 67
• Safari 12.1

Array.prototype.flat الطريقة

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

النظر في المثال التالي. هنا ، نتيجة لمعالجة مجموعة من الكائنات باستخدام وظيفة map ، لدينا مجموعة متعددة الأبعاد. نريد أن نجعلها أكثر "مسطحة".

 let courses = [  {    subject: "math",    numberOfStudents: 3,    waitlistStudents: 2,    students: ['Janet', 'Martha', 'Bob', ['Phil', 'Candace']]  },  {    subject: "english",    numberOfStudents: 2,    students: ['Wilson', 'Taylor']  },  {    subject: "history",    numberOfStudents: 4,    students: ['Edith', 'Jacob', 'Peter', 'Betty']  } ] let courseStudents = courses.map(course => course.students) // [ //  [ 'Janet', 'Martha', 'Bob', [ 'Phil', 'Candace' ] ], //  [ 'Wilson', 'Taylor' ], //  [ 'Edith', 'Jacob', 'Peter', 'Betty' ] // ] //       -  [].concat.apply([], courseStudents) 

الآن لدينا تحت Array.prototype.flat طريقة Array.prototype.flat ، والتي تأخذ حجة اختيارية تشير إلى أي مستوى يجب أن تثار عناصر المصفوفة.

 let courseStudents = [  [ 'Janet', 'Martha', 'Bob', [ 'Phil', 'Candace' ] ],  [ 'Wilson', 'Taylor' ],  [ 'Edith', 'Jacob', 'Peter', 'Betty' ] ] let flattenOneLevel = courseStudents.flat(1) console.log(flattenOneLevel) // [ //  'Janet', //  'Martha', //  'Bob', //  [ 'Phil', 'Candace' ], //  'Wilson', //  'Taylor', //  'Edith', //  'Jacob', //  'Peter', //  'Betty' // ] let flattenTwoLevels = courseStudents.flat(2) console.log(flattenTwoLevels) // [ //  'Janet',  'Martha', //  'Bob',   'Phil', //  'Candace', 'Wilson', //  'Taylor', 'Edith', //  'Jacob',  'Peter', //  'Betty' // ] 

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

 let courseStudents = [  [ 'Janet', 'Martha', 'Bob', [ 'Phil', 'Candace' ] ],  [ 'Wilson', 'Taylor' ],  [ 'Edith', 'Jacob', 'Peter', 'Betty' ] ] let defaultFlattened = courseStudents.flat() console.log(defaultFlattened) // [ //  'Janet', //  'Martha', //  'Bob', //  [ 'Phil', 'Candace' ], //  'Wilson', //  'Taylor', //  'Edith', //  'Jacob', //  'Peter', //  'Betty' // ] 

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

 let courseStudents = [  [ 'Janet', 'Martha', 'Bob', [ 'Phil', 'Candace' ] ],  [ 'Wilson', 'Taylor' ],  [ 'Edith', 'Jacob', 'Peter', 'Betty' ] ] let alwaysFlattened = courseStudents.flat(Infinity) console.log(alwaysFlattened) // [ //  'Janet',  'Martha', //  'Bob',   'Phil', //  'Candace', 'Wilson', //  'Taylor', 'Edith', //  'Jacob',  'Peter', //  'Betty' // ] 

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

▍Podderzhka

• كروم 75
• فايرفوكس 67
• سفاري 12

Array.prototype.flatMap الطريقة

جنبا إلى جنب مع طريقة flat ، لدينا الآن تحت تصرفنا طريقة جديدة مجتمعة - Array.prototype.flatMap . أعلاه ، لقد رأينا بالفعل مثالًا على موقف قد تكون فيه هذه الطريقة في متناول اليد ، ولكن دعونا ننظر إلى مثال آخر.

لنفترض أننا نواجه مهمة إدراج عناصر معينة في صفيف. كيف يمكننا حلها قبل ظهور ميزات JS الجديدة؟ على سبيل المثال ، مثل هذا:

 let grades = [78, 62, 80, 64] let curved = grades.map(grade => [grade, grade + 7]) // [ [ 78, 85 ], [ 62, 69 ], [ 80, 87 ], [ 64, 71 ] ] let flatMapped = [].concat.apply([], curved) //    .       flat,      JS   // [ // 78, 85, 62, 69, // 80, 87, 64, 71 // ] 

الآن بعد أن أصبح لدينا طريقة Array.prototype.flat ، يمكن تحسين هذا الرمز:

 let grades = [78, 62, 80, 64] let flatMapped = grades.map(grade => [grade, grade + 7]).flat() // [ // 78, 85, 62, 69, // 80, 87, 64, 71 // ] 

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

 let grades = [78, 62, 80, 64] let flatMapped = grades.flatMap(grade => [grade, grade + 7]); // [ // 78, 85, 62, 69, // 80, 87, 64, 71 // ] 

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

 let grades = [78, 62, 80, 64] let flatMapped = grades.flatMap(grade => [grade, [grade + 7]]); // [ //  78, [ 85 ], //  62, [ 69 ], //  80, [ 87 ], //  64, [ 71 ] // ] 

▍Podderzhka

• كروم 75
• فايرفوكس 67
• سفاري 12

أساليب String.prototype.trimStart و String.prototype.trimEnd

ميزة جديدة لطيفة أخرى من ES2019 هي الأسماء المستعارة التي تعطي بعض أساليب السلسلة أسماء أكثر معنى. في السابق ، كان لدينا طرق String.prototype.trimLeft و String.prototype.trimLeft تحت تصرفنا:

 let message = "  Welcome to CS 101  " message.trimRight() // '  Welcome to CS 101' message.trimLeft() // 'Welcome to CS 101  ' message.trimRight().trimLeft() // 'Welcome to CS 101' 

الأساليب رائعة ، لكن الشيء الجيد هو أنه تم إعطاؤهم أسماء أكثر ملاءمة للغرض منها. وهدفهم هو إزالة المسافة البيضاء البادئة والزائدة من الأوتار.

 let message = "  Welcome to CS 101  " message.trimEnd() // '  Welcome to CS 101' message.trimStart() // 'Welcome to CS 101  ' message.trimEnd().trimStart() // 'Welcome to CS 101' 

▍Podderzhka

• كروم 75
• فايرفوكس 67
• سفاري 12

حجة كتلة الصيد اختياري

ميزة أخرى لطيفة من ES2019 هي أن الحجة في كتل try-catch أصبحت الآن اختيارية. في السابق ، كان على جميع كتل catch اجتياز كائن استثناء كمعلمة. كان لا بد من تمرير الحجة catch حتى لو لم يتم استخدامها.

 try {  let parsed = JSON.parse(obj) } catch(e) {  // e      console.log("error") } 

الآن هذا ليس كذلك. إذا لم يتم استخدام كائن الاستثناء في catch ، فلا يجب نقل أي شيء إلى هذه الكتلة.

 try {  let parsed = JSON.parse(obj) } catch {  console.log("error") } 

هذه فرصة عظيمة ، والتي ستكون مفيدة في الحالات التي يعرف فيها المبرمج مقدمًا حدوث حالة طوارئ تؤدي إلى الدخول في catch المقابلة.

▍Podderzhka

• كروم 75
• فايرفوكس 67
• سفاري 12

التغييرات في طريقة Function.prototype.toString

جلب معيار ES2019 تغييرات على كيفية عمل طريقة وظيفة toString . سابقا ، كان يشوه قليلا ظهور رمز الإخراج:

 function greeting() {  const name = 'CSS Tricks'  console.log(`hello from ${name}`) } greeting.toString() //'function greeting() {\nconst name = \'CSS Tricks\'\nconsole.log(`hello from ${name} //`)\n} 

الآن تعكس هذه الطريقة التمثيل الحقيقي للكود المصدري للوظائف.

 function greeting() {  const name = 'CSS Tricks'  console.log(`hello from ${name}`) } greeting.toString() // 'function greeting() {\n' + // " const name = 'CSS Tricks'\n" + // ' console.log(`hello from ${name}`)\n' + // '}' 

▍Podderzhka

• كروم 75
• فايرفوكس 60
• Safari 12 ( جزئيًا )

النتائج

نظرنا هنا في أمثلة لاستخدام عدد قليل من ميزات JavaScript الجديدة. إذا كنت مهتمًا بابتكارات JS ، فقم بإلقاء نظرة على هذا المستودع وهذا الجدول.

أعزائي القراء! هل واجهت مواقف تؤدي فيها الميزات الجديدة لـ JS إلى تبسيط حل أية مشكلات بشكل كبير؟