تسلسل اختياري ، اتحاد مع null ، وكيف يغيرون نهجنا في كتابة التعليمات البرمجية

الصورة من قبل ميغيل Á. بادريان .

يوم جيد يا اصدقاء!

أقدم إليكم ترجمة مقال سام صديقي " التسلسل الاختياري ، التلاشي الخالي ، وكيف سيغيرون طريقة كتابة الكود" .

تسلسل اختياري ، اتحاد مع null ، وكيف يغيرون نهج كتابة التعليمات البرمجية

طريقة أكثر أمانًا ومريحًا للوصول إلى الكائن.

إذا كنت تتبع إصدارات TypeScript ، فأنت تعلم أنه تم تقديم اختياري Chaining و Null Coalescing في TypeScript 3.7. أيضا ، يتم تضمين هذه الميزات بشكل افتراضي في بابل 7.8.0. هذا هو أحد المنافسين الرئيسيين لدور ميزات JavaScript. حاليًا ، هم في المرحلتين 4 و 3 ، على التوالي (في 23 يناير ، تم اعتماد معيار ECMAScript 2020 ، حيث توجد سلسلة اختيارية ، والتكامل مع لاغية ، واثنين من الأشياء المثيرة للاهتمام ؛ وأنا على علم بأن مقال ظهر مؤخراً على حبري ترجمة حول الميزات المقدمة في JS ES2020 ، ومع ذلك ، أعتقد أن بعض الأمثلة الإضافية لن يصب بأذى - تقريبا.

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

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

const data = {} data.user.id // Uncaught TypeError: Cannot read property 'id' of undefined //           -   

للحصول على مزيد من الأمثلة ، سوف نستخدم هذا الرمز الزائف (استجابة الخادم الزائفة):

 { 'url': 'https://api.github.com/repos/sedighian/Hello-World/pulls/12', 'number': 12, 'state': 'open', 'title': 'Amazing new feature', 'user': { 'login': 'sedighian', 'id': 123234 }, 'labels': [{ 'id': 208045946, 'name': 'bug', }] } 

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

 const userId = data && data.user && data.user.id //     const label = data && data.labels && data.labels[0] const someFuncRes = navigator && navigator.serviceWorker && window.serviceWorker() 

أو ، إذا كنت تفضل التدمير:

 const { user: { id } = {} } = data || {} //        const { user } = data || {} const { id } = user || {} 

هناك طريقة أكثر راحة وهي استخدام Lodash أو Ember:

 // lodash import _ from 'lodash' _.get(data, 'user.id') // ember import { get } from '@ember/object' get(data, 'user.id') 

كيف نفعل نفس الشيء مع السلسلة الاختيارية؟

 const userId = data?.user?.id //     const label = data?.labels?.[0] const someFuncRes = someFunc?.() 

مع الجمع بين null (Null Coalescing)

عندما تكون قيمة خاصية الكائن الذي نصل إليه فارغة أو غير محددة ، فإننا نستخدم القيمة الافتراضية. سابقا ، المشغل | (منطقي أو).

إذا كنا نرغب في كتابة sedighian إلى قيمة خاصية تسجيل الدخول بشكل افتراضي ، فإننا نقوم بما يلي:

 //      data && data.user && data.user.login || 'sedighian' //     data?.user?.login || 'sedighian' //        null data?.user?.login ?? 'sedighian' 

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

لنفترض أننا نريد إرجاع "" (سلسلة فارغة) ، خطأ أو 0. مع المشغل || هذا لن ينجح ، لأنه سيعود إلى الجانب الأيمن. في هذه الحالة ، يكون الدمج مع null مفيدًا لنا:

 //  data.user.alias   ,     data?.user?.alias ?? 'code ninja' // '' data?.user?.alias || 'code ninja' // code ninja //  data.user.volumePreference = 0 data?.user?.volumePreference ?? 7 // 0 data?.user?.volumePreference || 7 // 7 //  data.user.likesCats = false data?.user?.likesCats ?? true // false data?.user?.likesCats || true // true 

كبديل ، يمكنك استخدام مكتبات الطرف الثالث ، وفي حالة Ember ، أداة مساعدة مضمّنة:

 // lodash import _ from 'lodash' _.get(data, 'user.likesCats', true) // ember import { getWithDefault } from '@ember/object' getWithDefault(data, 'user.likesCats', true) 

تذكر أن الدمج مع null هو أكثر من القيمة الافتراضية للمتغير. هذه طريقة بديلة لتنفيذ كتلة التعليمات البرمجية في حالة عدم وجود قيم مقابلة:

 const temp = { celsius: 0 } temp?.fahrenheit ?? setFahrenheit(temp) 

ما يجب أن نتذكر؟

تذكر ترتيب الأحرف في السلسلة الاختيارية (أولاً علامة استفهام ، ثم فترة):

 data.?user // Uncaught SyntaxError: Unexpected token '?' data?.user // ok 

السلسلة الاختيارية لا تحمي من استدعاء وظيفة غير موجودة:

 data?.user() // Ungaught TypeError: user is not a function 

الجمع مع null ليس مطابقًا لـ lodash.get أو EmberObject.getWithDefault. الفرق الرئيسي هو كيف أن الجمع بين c null يعالج القيمة "null":

 const data = { user: { interests: null } } // lodash import _ from 'lodash' _.get(data, 'user.interests', 'knitting') // null // ember import { get } from '@ember/object' getWithDefault(data, 'user.interests', 'knitting') // null //   null data?.user?.interests ?? 'knitting' // knitting 

شكرا لاهتمامكم كل التوفيق.