who wants to be a javascriptaire
1.0.0
طريقة ممتعة لتعلم JavaScript لمقابلات ترميز الواجهة الأمامية/الويب الخاصة بك. يتم الرد على جميع الأسئلة هنا في النص ولديها أيضًا مقطع فيديو على قناة YouTube الخاصة بنا. انقر فوق
لا تتردد في الوصول إلينا على منصاتنا الاجتماعية! ؟
Discord || Instagram || تويتر || Tiktok || بلوق || فيسبوك
يدعم
يرجى تشغيل هذا المشروع ومشاركته مع الآخرين لإظهار دعمك. اتبعني ❤ للحصول على تحديثات على المشاريع المستقبلية والدروس التعليمية!
أساسيات اللغة - المصفوفات - التاريخ والوقت - JavaScript الموجهة للكائنات - الوحدات النمطية - متنوعة
console . log ( new Date ( 2023 , 1 , 31 ) )Tue Jan 31 2024Tue Jan 31 2023Fri Mar 03 2023Errorفي JavaScript ، أثناء إنشاء التواريخ باستخدام كائنات التاريخ ، تعتمد أشهر على 0. مما يعني 0 لشهر يناير و 1 لشهر فبراير.
لذلك ، في هذه الحالة نطلب من JavaScript تحديد تاريخ 2023 31 فبراير وهو غير موجود.
ولكن بدلاً من إلقاء الخطأ ، ستتفوق JavaScript على الشهر التالي وهو مارس.
ومنذ فبراير في عام 2023 ، يوجد 28 يومًا فقط ، سيتم تفيض الرمز لمدة 3 أيام مما يجعل النتيجة في الثالث من مارس 2023.
var username = 'kirandash'
var username = 'bgwebagency'
console . log ( username )bgwebagencykirandashReferenceErrorSyntaxError يمكننا إعلان نفس المتغير عدة مرات باستخدام الكلمة الرئيسية var . وسيحتفظ المتغير بالقيمة التي تم تعيينها في النهاية.
لكن لا يمكننا إعلان نفس المتغير عدة مرات باستخدام let أو const
const user = {
username : 'kirandash' ,
updateUsername : newName => {
this . username = newName
} ,
}
user . updateUsername ( 'bgwebagency' )
console . log ( user . username )bgwebagencyReferenceErrorkirandashundefined لأن وظيفة updateUsername لا تعمل بشكل صحيح وتفشل في تحديث username user .
وظيفة updateUsername في object المستخدم هي وظيفة سهم ، ولا ترتبط بكائن user .
لذلك ، فإن وظيفة updateusername this الكلمة داخل updateusern هي لا تشير إلى كائن user ، ولكنها تشير إلى النطاق العالمي.
لإصلاح هذه المشكلة ، يجب علينا تغيير وظيفة السهم إلى وظيفة طبيعية.
const len1 = 'kiran' . length
const len2 = '?' . length
console . log ( len1 , len2 )5, 25, 15, undefined5, SyntaxErrorفي JavaScript ، تقوم خاصية طول السلسلة بإرجاع عدد البايتات وليس عدد الأحرف كما نتوقع.
الرموز التعبيرية هي حرف Unicode مشفر في بايتين. لذلك الجواب 2 لهذا السؤال.
يرجع طول السلسلة kiran 5 لأنه في سلسلة كل حرف هو واحد بايت.
console . log ( undefined == null , undefined === null )true, truetrue, falsefalse, falsefalse, trueأولاً ، اسمحوا لي أن أشرح الفرق بين المشغل المتساوي والمتساوي الصارم.
يتحقق المشغل المتساوي فقط إذا كانت كلتا القيمتين متساوية. يتحقق المشغل الصارم المتساوي إذا كان كل من القيمة والنوع متساويين.
لذلك في هذا الرمز ، فإن العبارة الأولى undefined == null true لأن كلا undefined null لها نفس القيمة الفارغة.
لكن البيان الثاني undefined === null يعيد false . نظرًا لأن typeof undefined undefined ، في حين أن typeof null هو object .
قد تتساءل ، لماذا يكون typeof null object عندما يكون null في الأساس نوع بيانات بدائي. هذا في الأساس خطأ في جافا سكريبت منذ البداية.
الآن ، نصيحة أخرى لك: عندما تريد تعيين قيمة فارغة للمتغير ، استخدم null بدلاً من undefined . نظرًا لأن undefined يستخدم بشكل أساسي للتحقق مما إذا كان المتغير ليس له قيمة مخصصة له.
function getFruits ( x , ... multi , y ) {
console . log ( x , y , multi ) ;
}
getFruits ( "?" , "?" , "?" , "?" , "?" )? ? ["?", "?", "?"]SyntaxErrorتمت إضافة مشغلي REST كجزء من ميزة ES6.
يستغرق كل الحجج التي تم تمريرها إلى وظيفة وتضعها في صفيف.
إذا تم تمرير وسيطات متعددة إلى وظيفة ، فيجب أن يأتي مشغل REST في النهاية. لهذا السبب سوف يرمي مقتطف الرمز هذا خطأ.
لإصلاح هذه المشكلة ، يرجى نقل مشغل REST إلى النهاية ثم يجب أن يعمل.
let x = Number . NEGATIVE_INFINITY
let y = Number . POSITIVE_INFINITY
let z = x + y
console . log ( z )0undefinedNaNTypeErrorالسلبيات _infinity و evential_infinity هي خصائص لكائن الأرقام في javaScript التي تمثل المفهوم الرياضي للانهاية السلبية واللهف الإيجابي.
عند إضافة number.negative_infinity و number.positive_infinity ، فإن النتيجة هي NAN.
لا تؤدي إضافة قيمة غير محدودة إيجابية إلى قيمة غير محدودة سلبية إلى قيمة عددية ذات معنى.
لذلك في هذه الحالة ، سيكون Z نان.
لاحظ أن الرمز لن يرمي نوعًا ، حيث أن JavaScript قادر على تنفيذ عملية الإضافة بين الرقم. negative_infinity و number.positive_infinity.
console . log ( 'BG Web Agency' === NaN , isNaN ( 'BG Web Agency' ) )true, truefalse, truetrue, falsefalse, false باستخدام === NaN للتحقق مما إذا كانت القيمة هي أن الرقم لن يعمل.
في JavaScript ، NaN (وليس رقمًا) هي قيمة خاصة تمثل رقمًا غير صالح.
NAN لا يساوي أي شيء ، بما في ذلك نفسه ، وبالتالي فإن تعبير "BG Web Agency" === NaN دائمًا false .
للتحقق مما إذا كانت القيمة عبارة عن رقم في JavaScript ، يمكنك استخدام وظيفة isNaN() . تُرجع هذه الوظيفة true إذا كانت الوسيطة التي تم تمريرها إليها هي NaN ، أو إذا لم يكن من الممكن تحويلها إلى رقم.
console . log ( isFinite ( Infinity ) , isNaN ( Infinity ) )false, falsefalse, truetrue, falsefalse, false يتم استخدام وظيفة isFinite() لتحديد ما إذا كانت القيمة المحددة هي رقم محدود.
إنها تُرجع كاذبة إذا كانت القيمة هي nan أو linfinity أو -infinity ، وصحيح إذا كانت القيمة عبارة عن رقم محدود.
لذلك ، في هذا المثال ، سيعود isFinite(Infinity) كاذبة لأن اللانهاية ليست رقمًا محدودًا.
من ناحية أخرى ، يتم استخدام وظيفة ISNAN () لتحديد ما إذا كانت قيمة معينة ليست رقمًا (NAN).
يتم إرجاعها بشكل صحيح إذا كانت القيمة نان ، وكاذبة إذا كانت القيمة رقم أو أي نوع بيانات آخر.
لذلك ، في هذا المثال ، سيعود isNaN(Infinity) أيضًا كاذبة لأن اللانهاية ليست نان.
لذلك استخدم دائمًا وظيفة isFinite بدلاً من وظيفة isNaN عندما تريد التحقق من صحة ما إذا كان الرقم محدودًا
const user = {
name : 'John' ,
age : 30 ,
getName : ( ) => {
return this . name
} ,
getAge : function ( ) {
return this . age
} ,
}
const getName = user . getName
const getAge = user . getAge
console . log ( getName ( ) )
console . log ( getAge ( ) ) تستخدم وظيفة getName Arrow this الكلمة الرئيسية للإشارة إلى خاصية اسم الكائن ، ولكن نظرًا لأن وظائف السهم لها this الربط المعجمي ، فإن قيمة this الكلمة الرئيسية داخل وظيفة السهم ستكون الكائن العالمي الذي هو window في متصفح ، أو global في Node.j.
نظرًا لعدم وجود خاصية اسم على الكائن global ، فإن الوظيفة تُرجع undefined .
تستخدم وظيفة getAge تعبير وظيفة منتظم وتشير بشكل صحيح إلى خاصية Age لكائن user باستخدام this الكلمة الرئيسية.
ولكن عندما يتم تعيين getAge إلى متغير getAge ، فإنه يفقد المرجع إلى كائن user ، لذلك عندما يتم استدعاء الوظيفة باستخدام getAge() ، سيشير هذا إلى الكائن العالمي مرة أخرى ، وبما أنه لا توجد خاصية عمرية على الكائن العالمي ، فإن الوظيفة تعود غير محددة.
for ( var i = 0 ; i < 3 ; i ++ ) {
setTimeout ( function ( ) {
console . log ( i )
} , 0 )
}الإغلاق هو وظيفة تحتفظ بالوصول إلى المتغيرات في نطاقها الخارجي ، حتى بعد عودة الوظيفة الخارجية.
في هذا المثال ، الإجابة هي B ، لأن وظيفة setTimeout غير متزامنة ولا يتم تنفيذها على الفور.
بحلول الوقت الذي يتم فيه تنفيذ وظيفة رد الاتصال إلى setTimeOut ، اكتملت الحلقة بالفعل ومتغير I له قيمة 3.
لذلك ، سيتم طباعة كل مكالمة إلى Console.log (i) داخل وظيفة رد الاتصال 3.
لحل هذه المشكلة وطباعة 0 ، 1 ، 2 ، يمكننا استخدام iife (تعبير وظيفة تم استدعاؤه على الفور) لإنشاء نطاق جديد لكل تكرار للحلقة.
هذا ينشئ متغيرًا جديدًا J داخل كل iife ، مع نسخته الخاصة من القيمة الحالية لـ i في التكرار للحلقة.
عند تنفيذ وظيفة رد الاتصال إلى SetTimeOut ، فإنها يمكنها الوصول إلى متغير J في إغلاقه ، والذي يتمتع بالقيمة المتوقعة من 0 أو 1 أو 2 لكل تكرار للحلقة.
function add ( x ) {
return function ( y ) {
if ( y !== undefined ) {
x += y
return arguments . callee
} else {
return x
}
}
}
console . log ( add ( 1 ) ( 2 ) ( 3 ) ( ) )الإجابة الصحيحة هي أ. يحدد الكود وظيفة إضافة تأخذ وسيطة واحدة X وتُرجع وظيفة أخرى تأخذ وسيطة واحدة y.
تتحقق هذه الوظيفة الداخلية إذا تم تعريف y. إذا تم تعريفه ، فإنه يضيف y إلى x ويعيد مرجعًا إلى نفسه باستخدام خاصية الوسائط.
إذا لم يتم تعريف Y ، فإنه يعيد القيمة الحالية لـ X.
ثم ، إضافة الكود إضافة (1) (2) (3) (). إضافة هذه المكالمات الأولى (1) مع 1 كوسيطة لها ، والتي تُرجع وظيفة تأخذ وسيطة واحدة y.
بعد ذلك ، يطلق هذه الوظيفة باستخدام 2 كوسيطة ، والتي تضيف 2 إلى 1 وتُرجع إشارة إلى الوظيفة.
أخيرًا ، يدعو هذه الوظيفة بـ 3 كوسيطة لها ، والتي تضيف 3 إلى 3 وإرجاع إشارة إلى الوظيفة.
نظرًا لعدم وجود حجة في المكالمة الأخيرة ، فإنها تُرجع القيمة الحالية لـ X ، والتي هي 6.
يوضح هذا الرمز مثالًا أكثر تعقيدًا على الكاري في JavaScript ، حيث تُرجع وظيفة الكاري مرجعًا إلى نفسها ، مما يسمح لها بالترفيه مع الوسيطة التالية.
function multiply ( x ) {
return function ( y ) {
return x * y
}
}
const double = multiply ( 2 )
console . log ( double ( 5 ) )الإجابة الصحيحة هي B. يحدد الكود وظيفة مضاعفة تأخذ وسيطة واحدة X وتُرجع وظيفة أخرى تأخذ وسيطة واحدة Y. هذه الوظيفة الداخلية تضاعف x و y وإرجاع النتيجة.
بعد ذلك ، يقوم الرمز بإنشاء وظيفة جديدة مزدوجة عن طريق الاتصال بالاتصال مع 2 كوسيطة. الوظيفة المزدوجة هي الآن وظيفة curried يمكن استدعاؤها مع وسيطة واحدة لمضاعفة قيمتها.
أخيرًا ، يستدعي الكود Double مع 5 كوسيطة ، مما يؤدي إلى تسجيل 10 إلى وحدة التحكم.
يوضح هذا الرمز مفهوم الكاري في JavaScript ، حيث تقوم وظيفة بإرجاع وظيفة أخرى يمكن تطبيقها جزئيًا مع بعض الوسائط.
أي من العبارات التالية صحيحة حول الطريقة next() لمؤلف في JavaScript؟
الإجابة الصحيحة هي A.
في JavaScript ، يعد Iserable كائنًا يحدد تسلسلًا ويمكن تكراره باستخدام حلقة.
التكرار هو كائن يعرف كيفية الوصول إلى عناصر واحدة في وقت واحد.
يحتوي كائن iberable على طريقة مع Symbol.iterator المفتاح.
يحتوي كائن التكرار على طريقة next() ، والتي تُرجع كائنًا بخصائصين: value ، وهي العنصر التالي في التسلسل ، وتم done ، وهو عبارة عن منطقية تشير إلى ما إذا كان التكرار قد وصل إلى نهاية التسلسل.
تُستخدم المتكررات بشكل شائع في العديد من التطبيقات في الوقت الفعلي أثناء العمل مع مجموعات البيانات الكبيرة ، أو أثناء تنفيذ هياكل البيانات المخصصة
function * counter ( ) {
let i = 0
while ( true ) {
yield i ++
}
}
const gen = counter ( )
console . log ( gen . next ( ) . value )
console . log ( gen . next ( ) . value )
console . log ( gen . next ( ) . value )ماذا يخرج مقتطف الكود أعلاه؟
الإجابة الصحيحة هي D.
وظيفة counter هي وظيفة مولد تنشئ حلقة لا حصر لها تعطي قيم زيادة من i .
يتم تعيين متغير gen على وظيفة المولد ، ويقوم كل مكالمة بـ gen.next() بإرجاع كائن مع خاصية القيمة المعيبة إلى القيمة التي تم إنتاجها التالية.
قم بتصريحات console.log ثم تطبع القيم التي تم إرجاعها بواسطة gen.next() .
وظيفة المولد هي نوع خاص من الوظائف التي يمكن استخدامها للتحكم في التكرار على سلسلة من القيم.
على عكس الوظائف التقليدية ، تتيح لك وظائف المولد إيقاف تنفيذها واستئنافها ، وإعطاء قيم متعددة بمرور الوقت.
أي من السيناريوهات التالية يمكن أن تسبب تسرب الذاكرة في جافا سكريبت؟
تحدث المراجع الدائرية عندما يشير كائنان أو أكثر إلى بعضهما البعض ، مما يؤدي إلى إنشاء حلقة تمنع الكائنات من جمع القمامة.
يمكن أن يسبب ذلك تسربًا للذاكرة إذا لم تعد الكائنات مطلوبة ولكن لا يمكن تحريرها بسبب المرجع الدائري.
الخيارات A و C و D لا تتسبب عادة في تسرب الذاكرة في JavaScript.
جمع القمامة هي عملية تحرير الذاكرة تلقائيًا والتي لم تعد تستخدمها البرنامج.
في JavaScript ، تُستخدم خوارزمية العلامة والكتابة بشكل شائع في جمع القمامة.
تعمل هذه الخوارزمية من خلال وضع علامة على جميع الكائنات في الذاكرة التي لا يزال يتم الرجوع إليها من قبل البرنامج ، ثم تجتاح أي ذاكرة لا يتم وضعها في الاستخدام.
function getData ( ) {
return new Promise ( ( resolve , reject ) => {
setTimeout ( ( ) => {
resolve ( 'Data retrieved successfully' )
} , 1000 )
} )
}
async function main ( ) {
try {
const data = await getData ( )
console . log ( data )
throw new Error ( 'Something went wrong' )
} catch ( err ) {
console . log ( 'Caught an error:' , err . message )
return 'Error occurred'
} finally {
console . log ( 'Finally block executed.' )
return 'Finally block value'
}
}
; ( async ( ) => {
console . log ( await main ( ) )
} ) ( )ماذا يخرج مقتطف الكود أعلاه؟
عند تنفيذ الكود ، يتم استدعاء الوظيفة الرئيسية () ، وهي وظيفة غير متزامنة تستخدم في انتظار الحصول على بيانات من وظيفة getData() .
بمجرد استرداد البيانات ، تقوم عبارة console.log(data) بتسجيل "البيانات التي تم استردادها بنجاح" إلى وحدة التحكم.
بعد ذلك ، throw new Error("Something went wrong") خطأ.
تمسك كتلة catch بالخطأ وسجلات "Caught an error: Something went wrong" إلى وحدة التحكم ، ثم إرجاع السلسلة "Error occurred" .
أخيرًا ، يتم تنفيذ الكتلة أخيرًا وتسجيلات "Finally block executed." إلى وحدة التحكم ، ثم إرجاع السلسلة "Finally block value" .
عندما يتم استدعاء الوظيفة main() ، فإنها تُرجع وعدًا لأنها وظيفة غير متزامنة. نظرًا لأن الكتلة finally تُرجع أيضًا قيمة ، ستكون هذه القيمة هي القيمة النهائية التي تم حلها للوعد.
لذلك ، عندما يتم تسمية console.log(main()) ، "Finally block executed." وسيتم تسجيل "Finally block value" إلى وحدة التحكم.
جرب ، والقبض ، وأخيراً الكلمات الرئيسية المستخدمة في JavaScript للتعامل مع أخطاء وقت التشغيل.
const arr = [ 1 , 2 , 3 , 4 , 5 ] ;
let sum = 0 ;
for ( let num of arr ) {
sum += num ;
if ( sum >= 6 ) break ;
}
console . log ( sum ) ;
const arr2 = [ 1 , 2 , 3 , 4 , 5 ] ;
let sum2 = 0 ;
arr . forEach ( ( num ) => {
sum2 += num ;
if ( sum2 >= 6 ) break ;
} ) ;
console . log ( sum2 ) ;ماذا يخرج مقتطف الكود أعلاه؟
لأن بيان break غير صالح داخل وظيفة رد الاتصال المنقولة إلى forEach .
forEach لا يدعم الإنهاء المبكر باستخدام بيان break . لذلك ، يتم إلقاء خطأ: "Uncaught SyntaxError: Illegal break statement".
في حالة الحلقة ، يُسمح ببيان break .
لإصلاح المشكلة ، قم بإزالة بيان break من Foreach ويجب أن يعمل.
بشكل عام ، ينصح for of for in أو forEach
let arr = [ 1 , 2 , 3 , 4 ]
let result = arr . push ( 5 )
console . log ( 'result: ' , result , 'arr: ' , arr )ماذا يخرج مقتطف الكود أعلاه؟
تضيف طريقة array.push() في JavaScript عنصرًا أو أكثر إلى نهاية الصفيف ويعيد الطول الجديد للمصفوفة.
في الكود المحدد ، arr عبارة عن صفيف مع القيم [1, 2, 3, 4] . يتم استدعاء طريقة push() مع الوسيطة 5 ، والتي تضيف 5 إلى نهاية صفيف arr .
تقوم طريقة push() بإرجاع الطول الجديد للمصفوفة بعد إضافة العنصر (العناصر). في هذه الحالة ، سيكون طول ARR الجديد 5 لأنه يضاف 5 إلى نهاية الصفيف.
let arr = [ 3 , 5 , 7 , 9 ]
let result = arr . unshift ( 1 , 2 )
console . log ( 'result: ' , result , 'arr: ' , arr )ماذا يخرج مقتطف الكود أعلاه؟
تضيف طريقة array.unshift() في JavaScript عنصرًا أو أكثر إلى بداية صفيف ويعيد الطول الجديد للمصفوفة.
في الكود المحدد ، arr عبارة عن صفيف مع القيم [3, 5, 7, 9] . تسمى طريقة unshift() مع الوسائط 1 و 2 ، والتي تضيف 1 و 2 إلى بداية صفيف arr .
تقوم طريقة unshift() بإرجاع الطول الجديد للمصفوفة بعد إضافة العنصر (العناصر). في هذه الحالة ، سيكون الطول الجديد لـ arr 6 لأنه يتم إضافة 1 و 2 إلى بداية الصفيف ، مما يحول العناصر الموجودة إلى اليمين.
const myArray = [ 1 , 2 , 3 , 4 , 5 ]
const poppedValue = myArray . pop ( )
console . log ( poppedValue )ماذا يخرج مقتطف الكود أعلاه؟
تقوم طريقة Array.pop() في JavaScript بإزالة العنصر الأخير من صفيف ويعيد هذا العنصر.
في هذه الحالة ، تم استدعاء myArray مجموعة مع عناصر [1, 2, 3, 4, 5] ، و myArray.pop() ، والتي تزيل العنصر 5 من الصفيف ويعيده.
const arr = [ 10 , 20 , 30 , 40 , 50 ]
const removedElement = arr . shift ( )
console . log ( 'removedElement: ' , removedElement , 'arr: ' , arr )ماذا يخرج مقتطف الكود أعلاه؟
تقوم طريقة Array.shift() بإزالة العنصر الأول من صفيف arr ، وهو 10 ، ويعيده. سيكون صفيف arr الناتج [20, 30, 40, 50] .
لذلك ، الخيار A هو الإجابة الصحيحة لأنها تعكس القيمة الصحيحة removedElement وحالة arr المحدثة بعد Array.shift() تسمى. الخيار B غير صحيح لأنه ينص على أن removedElement ستكون 50 ، وهذا غير صحيح. الخيار C غير صحيح أيضًا لأنه يذكر أن arr لا يزال دون تغيير ، وهو أمر غير دقيق. الخيار D مربك بعض الشيء لأنه ينص على أن Array.shift() إرجاع المصفوفة ، وهذا غير صحيح.
let arr = [ 1 , 2 , 3 , 4 , 5 ]
let removed = arr . splice ( 1 , 2 , 'a' , 'b' )
console . log ( 'removed:' , removed , 'arr: ' , arr )ماذا يخرج مقتطف الكود أعلاه؟
يتم استخدام طريقة Array.splice() .
في هذه الحالة ، يستخدم Snippet Code arr.splice(1, 2, 'a', 'b') ، والذي يبدأ من الفهرس 1 (إزالة العناصر 2) وإدراج العناصر a و b في مكانهما. يتم إرجاع العناصر التي تتم إزالتها (أي 2 و 3) وتخصيصها للمتغير الذي تمت إزالته. بعد التنفيذ ، سيتم إزالته [2, 3] وسيكون arr [1, 'a', 'b', 4, 5] . الخيار C غير صحيح لأنه يتضمن العناصر المدرجة في الصفيف الذي تمت إزالته ، وهو أمر غير دقيق. الخيار D غير صحيح أيضًا لأنه يذكر العناصر غير الصحيحة التي يتم إزالتها من الصفيف.
const fruits = [ 'apple' , 'banana' , 'orange' , 'grape' , 'apple' , 'kiwi' ]
const index = fruits . indexOf ( 'orange' )
const lastIndex = fruits . lastIndexOf ( 'apple' )
const result = fruits . includes ( 'grape' )
console . log ( 'index: ' , index , 'lastIndex: ' , lastIndex , 'result: ' , result )ماذا يخرج مقتطف الكود أعلاه؟
تبحث طريقة Array.indexOf() عن فهرس الحدوث الأول للقيمة المحددة في ثمار الصفيف. في هذه الحالة ، تم العثور على "Orange" في الفهرس 2 ، لذلك سيكون index 2.
تبحث طريقة Array.lastIndexOf() عن فهرس الحدوث الأخير للقيمة المحددة في ثمار المصفوفة. في هذه الحالة ، تظهر "Apple" مرتين في المصفوفة ويتم حدوثها الأخير في الفهرس 4 ، لذلك سيكون lastIndex 4.
من ناحية أخرى ، تتحقق طريقة Array.includes() result
function isDivisibleBy7 ( num ) {
return num % 7 == 0
}
const nums = [ 28 , 7 , 3 , 29 , 15 , 1 , 2 , 23 ]
const filterResult = nums . filter ( isDivisibleBy7 )
const findResult = nums . find ( num => num < 10 )
const findIndexResult = nums . findIndex ( num => num / 2 == 14 )
console . log (
'filterResult:' ,
filterResult ,
'findResult:' ,
findResult ,
'findIndexResult:' ,
findIndexResult ,
)ماذا يخرج مقتطف الكود أعلاه؟
تقوم طريقة Array.filter() بإرجاع صفيف يحتوي على جميع العناصر التي تم نقل الوظيفة التي تم نقلها إليها بشكل صحيح. في هذه الحالة ، تُرجع الوظيفة isDivisibleBy7 ، بالنسبة لأي رقم يمكن تقسيمه على 7. في صفيف nums ، 7 و 28 قابلة للقسمة على 7 ، لذا فإن nums.filter(isDivisibleBy7) عوائد [28 ، 7].
تقوم طريقة Array.find() بإرجاع العنصر الأول في الصفيف الذي تم نقل الوظيفة إليه إلى ذلك بشكل صحيح. في هذه الحالة ، تُرجع الوظيفة التي تم تمريرها إلى أي رقم أقل من 10. هناك أرقام متعددة في nums أقل من 10 ، ولكن منذ Array.find() لا تُرجع سوى الأول الذي يكون صحيحًا له ، nums.find((num) => num < 10) 7.
تشبه طريقة Array.findIndex() طريقة Array.find() . nums هذه الحالة ، تُرجع الوظيفة التي تم تمريرها إلى 28 ، حيث أن 28/2 == 14 nums.find((num) => num / 2 == 14)
const numbers = [ 1 , 2 , 3 , 4 , 5 ]
const doubledNumbers = numbers . map ( num => num * 2 )
console . log ( doubledNumbers )ماذا يخرج مقتطف الكود أعلاه؟
تقوم طريقة Array.map() في JavaScript بإنشاء صفيف جديد عن طريق تطبيق وظيفة المقدمة على كل عنصر من عناصر الصفيف الأصلي.
في هذه الحالة ، تضاعف الدالة المتوفرة num => num * 2 كل رقم في صفيف الأرقام بمقدار 2 ، مما يؤدي إلى صفيف جديد [2, 4, 6, 8, 10] .
const numbers = [ 1 , 2 , 3 , 4 , 5 ]
const sum = numbers . reduce ( ( acc , val ) => acc + val )
console . log ( sum )ماذا يخرج مقتطف الكود أعلاه؟
يأخذ Array.reduce() صفيفًا و "يقلل" إلى قيمة واحدة عن طريق تطبيق وظيفة مرارًا وتكرارًا على كل عنصر وتتبع النتيجة المتراكمة. يتم استخدامه بشكل شائع في مهام مثل جمع مجموعة من الأرقام ، أو إيجاد الحد الأقصى للقيمة ، أو تسلسل مجموعة من الأوتار في سلسلة واحدة.
في هذه الحالة ، تأخذ طريقة LEMBER () وظيفة رد الاتصال التي يتم تنفيذها لكل عنصر من عناصر الصفيف. تأخذ وظيفة رد الاتصال معلمتين ، acc و val ، والتي تمثل المتراكم والقيمة الحالية للمصفوفة ، على التوالي.
داخل وظيفة رد الاتصال ، تتم إضافة القيمة الحالية للمصفوفة إلى المجمع ويتم إرجاع النتيجة. تقوم طريقة reduce() بتحديث قيمة المتراكم مع كل تكرار حتى يتم تكرارها على جميع عناصر الصفيف.
أخيرًا ، تقوم طريقة reduce() بإرجاع القيمة النهائية للمتراكم ، وهي مجموع جميع الأرقام في الصفيف ، أي 15.
const arr = [ 1 , 2 , 3 , 4 ]
const result = arr . reduceRight ( ( acc , curr ) => acc + curr )
console . log ( result )ماذا يخرج مقتطف الكود أعلاه؟
تشبه طريقة reduceRight() طريقة reduce() ، باستثناء أنها تبدأ في تقليل الصفيف من العنصر الأيمن إلى العنصر الأيسر. تطبق طريقة reduceRight() دالة ضد تراكم وكل قيمة من الصفيف (من يمين إلى اليسار) لتقليلها إلى قيمة واحدة.
في مقتطف الكود المحدد ، يحتوي صفيف arr على القيم [1, 2, 3, 4] . يتم استدعاء طريقة reduceRight() على هذه الصفيف مع وظيفة رد الاتصال التي تضيف acc المتراكم مع العنصر الحالي curr .
في التكرار الأول ، ستكون قيمة curr 4 ، وستكون قيمة ACC undefined ، حيث لا يتم توفير قيمة أولية. لذلك ، ستكون نتيجة التكرار الأول 4 .
في التكرار الثاني ، ستكون قيمة curr 3 ، وستكون قيمة acc نتيجة للتكرار السابق ، وهو 4 . لذلك ، ستكون نتيجة التكرار الثاني 7 .
في التكرار الثالث ، ستكون قيمة curr 2 ، وستكون قيمة acc نتيجة للتكرار السابق ، وهو 7 . لذلك ، ستكون نتيجة التكرار الثالث 9 .
في التكرار الرابع والأخير ، ستكون قيمة curr 1 ، وستكون قيمة acc نتيجة للتكرار السابق ، وهو 9 . لذلك ، ستكون نتيجة التكرار الرابع 10 .
لذلك ، سيكون الإخراج النهائي للرمز 10 . وبالتالي ، فإن الخيار الصحيح هو A.
const arr = [ 'Centauri' , 3.14159 , 'canine' , 11235 , undefined ]
const result = arr . sort ( )
console . log ( result )ماذا يخرج مقتطف الكود أعلاه؟
بشكل افتراضي ، تقوم طريقة sort() بفرز عناصر الحرف حتى 11235 يأتي قبل 3.14159 لأن 1 يأتي قبل 3.
يتم فرز الكلمات والحروف أبجديًا بواسطة رمز ASCII ، لذا فإن "Centauri" الذي يبدأ بفرز C (رمز ASCII 67) قبل "Canine" الذي يبدأ بـ C (رمز ASCII 99).
العناصر غير المحددة دائما الفرز إلى نهاية الصفيف.
وبالتالي ، سيكون الإخراج النهائي للرمز [11235 ، 3.14159 ، "Centauri" ، "Canine" ، غير محدد] وهو الخيار D.
let numbers = [ 1 , 2 , 3 , undefined , 6 , 7 , 8 , 9 ]
let [ a , , b , c = 2 , ... rest ] = numbers
console . log ( a , b , c , rest )ماذا يخرج مقتطف الكود أعلاه؟
مع تدمير Array ، من الممكن فك قيم معينة من صفيف إلى متغيرات فردية. تتوافق القيم التي أنشأناها في الجانب الأيسر ( a, b, c, rest ) مع القيم وترتيب الصفيف الذي قمنا بتعيينه في الجانب الأيمن ( numbers ).
المتغير a يتوافق مع العنصر الأول من الصفيف ، وهو 1 .
نظرًا لأننا لم نحدد متغيرًا للقيمة التالية 2 ، فإن القيمة لا تؤخذ في الاعتبار في التقييم ويتم تخطيها.
المتغير b يتوافق مع العنصر الثالث من الصفيف ، وهو 3 .
من الممكن تعيين القيم الافتراضية للمتغيرات إذا كان العنصر في الصفيف undefined . نظرًا لأن العنصر الرابع في الصفيف undefined ، فإن المتغير c لديه القيمة الافتراضية 2 .
مع مشغل الانتشار ( ... ) يمكننا تعيين القيم المتبقية للمصفوفة إلى متغير. نظرًا لأن القيم [ 6, 7, 8, 9 ] هي القيم المتبقية للمصفوفة ، يتم تعيينها إلى rest المتغير.
لذلك ، النتيجة النهائية هي: 1 3 2 [ 6, 7, 8, 9 ] ، وهو الخيار ب.
const date1 = new Date ( )
const date2 = new Date ( '1995-12-17T05:10:00' )
const date3 = new Date ( '1995-10-15T08:12:15+02:00' )
console . log ( date1 , '' , date2 , '' , date3 )ماذا يخرج مقتطف الكود أعلاه؟
سيعود new Date() إلى التاريخ والوقت الحاليين متبوعًا بالتاريخ المحددان في التنسيق "Yyyy-MM-DDTHH: MM: Ss.ssz" ، حيث يمثل "Z" إزاحة المنطقة الزمنية للموسيقى UTC.
YYYY-MM-DDTHH:mm:ss.sssZ هو تنسيق يستخدم لتمثيل التواريخ والأوقات في معيار ISO 8601. يتكون من المكونات التالية:
YYYY : عام من أربعة أرقام (0000 إلى 9999) ، أو مع سنة موسعة مع + أو - تليها ستة أرقام. العلامة مطلوبة لسنوات موسعة. -000000 غير مسموح به بشكل صريح كسنة صالحة.MM : شهر من رقمين (01 = يناير ، 02 = فبراير ، وهلم جرا). انها الافتراضات إلى 01.DD : يوم من رقمين من الشهر (من 01 إلى 31)T : فاصل يشير إلى بداية مكون الوقتHH : ساعة مكونة من رقمين من اليوم بتنسيق على مدار 24 ساعة (من 00 إلى 23). كحالة خاصة ، يتم السماح 24:00:00 ، ويتم تفسيره على أنه منتصف الليل في بداية اليوم التالي. الإعدادات الافتراضية إلى 00.mm : دقيقة من رقمين من الساعة (00 إلى 59). الإعدادات الافتراضية إلى 00.ss : ثاني رقمين من الدقيقة (00 إلى 59). الإعدادات الافتراضية إلى 00..sss : مكون ميلي ثانية (000 إلى 999). الافتراضات إلى 000.Z : لاحقة تشير إلى أن الوقت في UTC (وقت عالمي منسق) ، مع عدم وجود تعويض. يمكن أن يكون إما الحرف الحرفي Z (يشير إلى UTC) أو + أو - متبوعًا بـ HH: MM ، الإزاحة في ساعات ودقائق من UTC. const date = new Date ( 'Mart 15, 1975 23:15:30' )
date . setMinutes ( 10 )
date . setUTCDate ( 5 )
console . log (
'Minutes:' + date . getMinutes ( ) + ',' ,
'' ,
'Year:' + date . getFullYear ( ) + ',' ,
'' ,
'UTCDate:' + date . getUTCDate ( ) ,
)ماذا يخرج مقتطف الكود أعلاه؟
يقوم الرمز المقدم بإنشاء كائن تاريخ تم تهيئته مع تاريخ ووقت "15 مارس 1975 23:15:30".
بعد ذلك ، يقوم بتعديل الدقائق وتاريخ UTC لكائن التاريخ باستخدام أساليب setMinutes() و setUTCDate() ، على التوالي.
أخيرًا ، يقوم بتسجيل القيم المحدثة للدقائق والسنة وتاريخ UTC باستخدام console.log() .
بعد تعديل الدقائق إلى 10 باستخدام setMinutes(10) ، تقوم طريقة getMinutes() بإرجاع القيمة المحدثة 10.
بعد تعديل تاريخ UTC إلى 5 باستخدام setUTCDate(5) ، تقوم طريقة getUTCDate() بإرجاع القيمة المحدثة 5.
تعيد طريقة getFullYear() السنة التي لم تتغير ، وهي عام 1975.
const date1 = new Date ( '2023-5-1' )
const next_us_election = new Date ( '2024-11-5' )
const difference_in_time = next_us_election . getTime ( ) - date1 . getTime ( )
const difference_in_days = difference_in_time / ( 1000 * 3600 * 24 )
console . log ( parseInt ( difference_in_days , 10 ) + ' Days' )ماذا يخرج مقتطف الكود أعلاه؟
يحسب الرمز الفرق في الأيام بين تاريخ "2023-5-1" وتاريخ الانتخابات الأمريكية التالية "2024-11-5". يستخدم كائن Date لإنشاء تاريخين: يمثل date1 1 مايو 2023 ، ويمثل next_us_election 5 نوفمبر 2024.
يتم استخدام طريقة getTime() للحصول على القيمة الزمنية بالمللي ثانية لكل تاريخ. عن طريق طرح القيمة الزمنية date1 من next_us_election ، نحصل على فرق الوقت بالمللي ثانية.
لتحويل الفرق الزمني من المللي ثانية إلى أيام ، نقوم بتقسيمه على عدد المللي ثانية في اليوم (1000 _ 3600 _ 24). يتم تخزين النتيجة في المتغير difference_in_days .
أخيرًا ، يتم استخدام وظيفة parseInt() لتحويل قيمة dister_in_days إلى عدد صحيح ، ويتم تسجيل النتيجة إلى وحدة التحكم مع سلسلة "أيام". سيكون الإخراج "554 يومًا".
let person = {
name : 'John' ,
age : 30 ,
hobbies : [ 'reading' , 'traveling' , 'cooking' ] ,
address : {
street : '123 Main St' ,
city : 'New York' ,
state : 'NY' ,
} ,
sayHello : function ( ) {
console . log ( 'Hello, my name is ' + this . name )
} ,
}
console . log ( person . name )
console . log ( person . hobbies [ 1 ] )
console . log ( person . address . city )
person . sayHello ( )ماذا يخرج مقتطف الكود أعلاه؟
يحدد الكود person الحرفي الكائن ذي خصائص مثل name age hobbies address ، وطريقة sayHello .
تقوم عبارات console.log() بطباعة قيمة name ، والعنصر الثاني من مجموعة hobbies (التي "السفر") ، وقيمة خاصية city في كائن address (وهو "نيويورك").
أخيرًا ، يتم استدعاء الطريقة sayHello على كائن person باستخدام TOCATION DOT ، والذي يخرج السلسلة "مرحبًا ، اسمي جون" إلى وحدة التحكم.
function User ( username ) {
this . username = username
this . updateUsername = newName => {
this . username = newName
}
}
const user1 = new User ( 'kirandash' )
const user2 = new User ( 'bgwebagency' )
user1 . updateUsername ( 'kirandash-website' )
user2 . updateUsername ( 'bgwebagency-app' )
console . log ( user1 . username , user2 . username )ماذا يخرج مقتطف الكود أعلاه؟
يحدد الكود User دالة مُنشئ يقوم بإنشاء كائنات user مع خاصية username وطريقة updateUsername . يتم إنشاء كائنين user ، user1 و user2 ، مع أسماء المستخدمين الأولية 'Kirandash' و 'BgWebagency' على التوالي.
يتم استدعاء طريقة updateUsername على كلا من كائنات user1 و user2 لتحديث أسماء المستخدمين الخاصة بهم. يتم تحديث اسم المستخدم الخاص بـ user1 إلى "Kirandash-Website" ، ويتم تحديث اسم المستخدم user2 إلى "BgWebagency-App".
أخيرًا ، تقوم الكود بتسجيل تسلسل user1.username و user2.username ، مما يؤدي إلى إخراج "Kirandash-Website BgWebagency-App".
function greet ( name ) {
console . log ( `Hello, ${ name } ! Welcome to ${ this . location } .` )
}
const person = {
location : 'New York' ,
}
greet . call ( person , 'John' )
greet . apply ( person , [ 'Alex' ] )
const greetPerson = greet . bind ( person )
greetPerson ( 'Thomas' )ماذا يخرج مقتطف الكود أعلاه؟
The call function is used to invoke the greet function with the person object as the context (the value of this ) and 'John' as the argument.
The apply function is used to invoke the greet function with the person object as the context (the value of this ) and an array ['Alex'] as the arguments.
The bind function is used to create a new function greetPerson with the person object as the bound context (the value of this ).
In summary, the code demonstrates how call , apply , and bind can be used to invoke a function with a specific context and arguments
class Animal {
constructor ( name ) {
this . name = name
}
static makeSound ( ) {
console . log ( 'Generic animal sound' )
}
sayName ( ) {
console . log ( `My name is ${ this . name } ` )
}
}
const a1 = new Animal ( 'Lion' )
const a2 = new Animal ( 'Time' )
Animal . makeSound ( )
a1 . makeSound ( )
a2 . makeSound ( )What does the above code snippet output?
The static method makeSound() is defined on the Animal class, and is accessible directly through the class itself, ie, Animal.makeSound() . This will output "Generic animal sound" to the console.
However, when we try to call makeSound() on an instance of the Animal class (a1.makeSound() and a2.makeSound()) , we get a TypeError, because static methods can only be accessed through the class itself and not through its instances.
function Animal ( name ) {
this . name = name
}
Animal . prototype . eat = function ( ) {
console . log ( this . name + ' is eating.' )
}
function Dog ( name ) {
Animal . call ( this , name )
}
Dog . prototype = Object . create ( Animal . prototype )
Dog . prototype . constructor = Dog
Dog . prototype . bark = function ( ) {
console . log ( this . name + ' is barking.' )
}
function CustomArray ( ) {
Array . call ( this )
}
CustomArray . prototype = Object . create ( Array . prototype )
CustomArray . prototype . constructor = CustomArray
CustomArray . prototype . sum = function ( ) {
return this . reduce ( ( acc , val ) => acc + val , 0 )
}
var dog = new Dog ( 'Buddy' )
dog . eat ( )
dog . bark ( )
var numbers = new CustomArray ( )
numbers . push ( 1 , 2 , 3 , 4 , 5 )
console . log ( numbers . sum ( ) )What will be the output of the following code
Explanation: In this example, we have a base class called Animal that defines a constructor and an eat() method. The subclass Dog extends the Animal class and adds its own constructor, bark() method, and a specific property breed .
Furthermore, we extend the built-in Array class using the class syntax to create a CustomArray class. The CustomArray class adds a custom method called sum() that calculates the sum of the array elements.
In the usage section, we create an instance of Dog named dog with the name "Buddy" . We can call the inherited eat() method from the Animal class, the bark() method defined in the Dog class.
Additionally, we create an instance of CustomArray called numbers and add some numbers to it. We can call the custom sum() method, which is added to the built-in Array class through subclassing.
This example showcases inheritance, subclassing, and extending a built-in class in JavaScript, illustrating how classes can be extended and customized to add additional functionality.
const person = {
name : 'John' ,
age : 30 ,
city : 'New York' ,
}
const { name , age , city } = person
console . log ( name )
console . log ( age )
console . log ( city )What will be the output of the following code
In the code above, we have an object literal called person with properties name , age , and city . We then use object destructuring to extract those properties into separate variables ( name , age , and city ). After destructuring, we can use these variables to access the corresponding values from the object.
Consider the following code snippet:
// module.mjs
export const PI = 3.14159
export function calculateArea ( radius ) {
return PI * radius * radius
}
export default function calculateCircumference ( radius ) {
return 2 * PI * radius
}
// script.mjs
import calculateCircumference , { PI , calculateArea } from './module.mjs'
console . log ( PI ) // Output: ________
console . log ( calculateArea ( 5 ) ) // Output: ________
console . log ( calculateCircumference ( 5 ) ) // Output: ________What will be the output of the console.log statements in the code above?
خيارات:
3.14159 , 78.53975 , 31.41593.14159 , 78.53975 , 62.83183.14159 , 78.53975 , NaN3.14159 , NaN , 62.8318 The module.js file exports three entities:
PI is a named export, exported using the export keyword.calculateArea is a named export, exported using the export keyword.calculateCircumference is the default export, exported using the export default syntax. In the main.js file, we import PI and calculateArea as named exports using the destructuring assignment syntax. We also import calculateCircumference as the default export. The import statements reference the module.js file using the relative file path ./module.js .
The outputs of the console.log statements will be:
console.log(PI) will output 3.14159 since we imported the named export PI .console.log(calculateArea(5)) will output 78.53975 since we imported the named export calculateArea and called the function with a radius of 5.console.log(calculateCircumference(5)) will output 62.8318 since we imported the default export calculateCircumference and called the function with a radius of 5. Consider the following code snippet:
// foo.js
function foo ( ) {
console . log ( `Foo` )
}
export { foo } What is the correct Syntax to import the function foo ?
خيارات:
import foo from "./foo"import foo as FooFunction from "./foo"import { foo } from "./foo"import { foo } from "./bar" Named exports are imported into different files with braces and must be imported with the name of the object, function or variable that was exported. In this example, a function with the name foo is exported from the file foo.js . Accordingly, the correct expression is: import { foo } from "./foo" .
In JavaScript, when importing a default export from a module, which syntax correctly assigns an alias "myAlias" to the default import?
Explanation: Both option B and C are valid syntaxes for importing a default export from a module and assigning it an alias. The difference between the two syntaxes is that option B does not use the { default as myAlias } syntax. This means that the default export will be imported under the name myAlias, rather than the name default.
Here is an example of how to use the option B syntax:{import myAlias from 'module';},This will import the default export from the module module and assign it the name myAlias. You can then use the myAlias variable to access the default export from the module module. Here is an example of how to use the option C syntax:{import { default as myAlias } from 'module';},This will import the default export from the module module and assign it the alias myAlias. You can then use the myAlias alias to access the default export from the module module.
The choice of which syntax to use is up to you. The option B syntax is simpler, but it can lead to collisions if there is already a variable named myAlias in the current scope. The option C syntax is more verbose, but it avoids collisions.
Which method is used to convert a JavaScript object to a JSON string while preserving data types like Dates and RegEx?
JSON.stringify()JSON.stringify() with a custom replacer functionJSON.toTypedString()JSON.stringify()JSON.stringify() with a custom replacer function. Explanation: The JSON.stringify() method can be used to convert a JavaScript object to a JSON string. However, by default, it will not preserve data types like Dates and RegEx . To preserve these data types, you can use a custom replacer function. The replacer function takes an object as input and returns a new object with the modified values.
The code below would show you how to use a custom replacer function to preserve data types:
function replacer ( key , value ) {
if ( typeof value === 'Date' ) {
return value . toJSON ( )
} else if ( typeof value === 'RegExp' ) {
return value . toString ( )
} else {
return value
}
}
const object = {
date : new Date ( ) ,
regex : / some regex / ,
}
const jsonString = JSON . stringify ( object , replacer )
