Dan Levy

اختبار: هل تعرف JavaScript الحديثة؟

أثبت مهاراتك في JavaScript!

هل تفرق بين ES2015 و ES2022؟

1. 

ES2020

ما هي قيمة result؟

console.log(null ?? 100);

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

عامل الدمج الفارغ (??) يُرجع المعامل الأيمن (b) إذا كان المعامل الأيسر (a) هو null أو undefined. في هذه الحالة، a هو null، لذا فإن result يساوي 100.

2. 

ES2020

ماذا سيكون ناتج الكود التالي؟

const value = false;
const defaultVal = 42;
console.log(value ?? defaultVal);

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

عامل الدمج الفارغ (??) يعامل القيم الخاطئة مثل false كقيم صالحة. بما أن value هي false، فإنها تُعتبر قيمة صالحة ويتم إرجاعها.

3. 

الربط الاختياري

ما هو ناتج الكود التالي؟

const obj = { foo: null };
const result = obj.foo?.bar;
console.log(result);

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

عامل الربط الاختياري (?.) يوقف التقييم إذا كان الجانب الأيسر هو null أو undefined. بما أن obj.foo هو null، فإن obj.foo?.bar يتم تقييمه إلى undefined.

4. 

BigInt

ما هو ناتج الكود التالي؟

const a = 42n;
const result = a * 2n;
console.log(result);

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

يتم إنشاء قيم BigInt بإلحاق n برقم. لا يمكنك خلط BigInt مع الأرقام العادية في العمليات الحسابية. هنا، كلا القيمتين من نوع BigInt، لذا تعمل عملية الضرب، مما ينتج عنه 84n.

5. 

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

ماذا يسجل هذا؟

const modulePromise = import('./myModule.js');
console.log(typeof modulePromise);

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

الدالة import() تُرجع Promise يتم حله إلى كائن الوحدة. لأن مثيلات Promise هي كائنات، فإن typeof modulePromise يسجل 'object'.

6. 

Promise.allSettled

ماذا ستكون نتيجة الكود التالي؟

const promises = [
  Promise.resolve('success'),
  Promise.reject('error')
];
Promise.allSettled(promises).then(results => {
  console.log(results[0].status + ': ' + results[0].value);
});

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

تقوم Promise.allSettled بإرجاع مصفوفة من الكائنات التي تصف نتيجة كل وعد. الوعد الأول هو fulfilled بالقيمة 'success'، لذا ستطبع جملة الطباعة fulfilled: success.

7. 

String.matchAll

ماذا يُرجع str.matchAll()؟

const str = 'foo1bar2baz3';
const matches = str.matchAll(/\d/g);

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

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

8. 

بيانات الاستيراد الوصفية

ماذا يمثل import.meta.url؟

console.log(import.meta.url);

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

import.meta هو كائن يحتوي على بيانات وصفية حول الوحدة الحالية. الخاصية import.meta.url تمثل رابط الوحدة الحالية، والتي يمكن استخدامها للحصول على معلومات حول مكان تشغيل السكريبت.

9. 

التعيين المنطقي

ما هي قيمة a بعد التعيين المنطقي؟

let a = null;
a ||= 10;
console.log(a);

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

التعيين بالـ OR المنطقي (||=) يعين القيمة اليمنى إذا كانت القيمة اليسرى خاطئة (null، undefined، 0، false، إلخ). بما أن a هي null، فإنها تُعين القيمة 10.

10. 

التخصيص المنطقي للقيم الفارغة

ما هي قيمة b بعد التخصيص المنطقي للقيم الفارغة؟

let b = null;
b ??= 10;
console.log(b);

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

التخصيص المنطقي للقيم الفارغة (??=) يعين القيمة اليمنى إذا كانت القيمة اليسرى null أو undefined. بما أن b هي null، فقد تم تعيين القيمة 10.

11. 

WeakRef

ماذا يوفر WeakRef؟

const obj = { data: 'important' };
const ref = new WeakRef(obj);
console.log(ref.deref());

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

يوفر WeakRef مرجعًا ضعيفًا لكائن، مما يسمح بجمع الكائن بواسطة جامع القمامة إذا لم توجد مراجع أخرى. نظرًا لأن obj لا يزال مرجعًا قويًا هنا، فإن deref() يُرجع الكائن الأصلي. إذا تم استرداد الهدف، فإن deref() سيعيد undefined.

Loading comments...