23 سؤالًا صعبًا لمقابلات JavaScript

1. شرح ميزات التحقق من المساواة في جافا سكريبت

الصعوبة: *

• ===يتحقق عامل المساواة الصارم ( ) من قيم المساواة دون إجراء تحويلات النوع.
• ==يتحقق عامل المساواة غير الصارم ( ) من قيم المساواة ، ويحولها إلى نوع شائع.

var a = "42";
var b = 42;

a == b;         // true
a === b;        // false

• إذا كان أي من القيم التي تمت مقارنتها يمكن أن تكون قيمة trueأو false- حاول تجنب عامل التشغيل ==. استخدم عامل ===.
• استخدام المشغل ===في حالة ما إذا كنت تعمل مع القيم التالية: 0، «»أو [](مجموعة فارغة).
• في جميع الحالات الأخرى ، يمكنك استخدام عامل التشغيل بأمان ==. علاوة على ذلك ، هذا ليس آمنًا فحسب ، بل يساعد أيضًا في تبسيط التعليمات البرمجية وتحسين إمكانية قراءتها.

2. أعط أمثلة على الصب إلى نوع منطقي من القيم التي لا تتعلق بهذا النوع

الصعوبة: ***

• «» (سطر فارغ).
• 0، -0، NaN(وليس رقم).
• null، undefined.

• «hello».
• 42.
• [ ]، [ 1, «2», 3 ](المصفوفات).
• { }، { a: 42 }(الكائنات).
• function foo() { .. } (المهام).

3. ما هو معهد التمويل الدولي؟

الصعوبة: ***

(function IIFE(){
    console.log( "Hello!" );
})();
// "Hello!"

4. متى يجب علي استخدام وظائف الأسهم التي ظهرت في ES6؟

الصعوبة: ***

• استخدم الكلمة الأساسية functionفي النطاق العالمي ومن أجل الخصائص Object.prototype.
• استخدم الكلمة الأساسية لمنشئي functionالكائن.
• في حالات أخرى ، استخدم دالات الأسهم.

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

5. ما الفرق بين فئات ES6 ومنشئي الوظائف؟

الصعوبة: ***

function Person(name) {
  this.name = name;
}

class Person {
  constructor(name) {
    this.name = name;
  }
}

function Student(name, studentId) {
  //      ,   .
  Person.call(this, name);

  //    .
  this.studentId = studentId;
}

Student.prototype = Object.create(Person.prototype);
Student.prototype.constructor = Student;

class Student extends Person {
  constructor(name, studentId) {
    super(name);
    this.studentId = studentId;
  }
}

6. أخبرنا عن طريقة Function.prototype.bind ().

الصعوبة: ***

7. ما هي الوظائف المجهولة التي يشيع استخدامها؟

الصعوبة: ***

(function() {
  // - .
})();

setTimeout(function() {
  console.log('Hello world!');
}, 1000);

const arr = [1, 2, 3];
const double = arr.map(function(el) {
  return el * 2;
});
console.log(double); // [2, 4, 6]

8. ما هو الفرق بين طريقة Object.freeze () والكلمة الأساسية const؟

الصعوبة: ***

const person = {
    name: "Leonardo"
};
let animal = {
    species: "snake"
};
person = animal; // Uncaught TypeError: Assignment to constant variable.

let person = {
    name: "Leonardo"
};
Object.freeze(person);
person.name = "Lima"; // Uncaught TypeError: Cannot assign to read only property 'name' of object
console.log(person);

9. ما هو "المولد"؟

الصعوبة: ***

function* makeRangeIterator(start = 0, end = Infinity, step = 1) {
    let iterationCount = 0;
    for (let i = start; i < end; i += step) {
        iterationCount++;
        yield i;
    }
    return iterationCount;
}

10. متى يجب استخدام المولدات؟

الصعوبة: ***

• يحدد الرمز الذي يتم فيه استخدام المولد لحظة استلام القيمة التالية. المولد مسؤول فقط عن إرجاع القيم ، يتم التحكم فيه من الخارج.
• هناك مولدات غير متزامنة. تسمح لك بالعمل مع تدفقات البيانات غير المتزامنة.

11. ما هو "رفع المتغيرات"؟

الصعوبة: ****

12. ماذا سيتم إخراج التعليمات البرمجية التالية؟

الصعوبة: ****

var output = (function(x) {
  delete x;
  return x;
})(0);

console.log(output);

13. ماذا سيتم إخراج التعليمات البرمجية التالية؟

الصعوبة: ****

var Employee = {
  company: 'xyz'
}
var emp1 = Object.create(Employee);
delete emp1.company
console.log(emp1.company);

console.log(emp1.hasOwnProperty('company')); // false

14. أخبرنا عن نمط تصميم النموذج الأولي.

الصعوبة: ****

15. ما هي "المنطقة الميتة المؤقتة" في ES6؟

الصعوبة: ****

//console.log(aLet)  //  ReferenceError

let aLet;
console.log(aLet); // undefined
aLet = 10;
console.log(aLet); // 10

16. هل يمكنك وصف الفرق الرئيسي بين forEach () وطرق صفيف map ()؟ في أي حالات تفضل إحدى هذه الطرق على أخرى؟

الصعوبة: ****

• يتكرر فوق عناصر المصفوفة.
• ينفذ وظيفة رد الاتصال التي تم تمريرها إليها لكل عنصر من عناصر الصفيف.
• لا تعيد أي شيء.

const a = [1, 2, 3];
const doubled = a.forEach((num, index) => {
  //  -  num /  index.
});

// doubled = undefined

• يتكرر فوق عناصر المصفوفة.
• يقوم بتحويل كل عنصر من عناصر المصفوفة الأصلية إلى عنصر من المصفوفة الجديدة ، واستدعاء الوظيفة التي تم تمريرها إليه لكل عنصر من المصفوفة الأصلية.

const a = [1, 2, 3];
const doubled = a.map(num => {
  return num * 2;
});

// doubled = [2, 4, 6]

17. ما هو الفرق بين متغير غير معلن ومتغير يحتوي على قيمة فارغة ومتغير غير محدد؟ كيف تتحقق من متغير لحقيقة أنه غير معلن ، وكذلك غير محدد وغير محدد؟

الصعوبة: ****

function foo() {
  x = 1; //     ReferenceError
}

foo();
console.log(x); // 1

var foo;
console.log(foo); // undefined
console.log(foo === undefined); // true
console.log(typeof foo === 'undefined'); // true

console.log(foo == null); // true.        undefined!

function bar() {}
var baz = bar();
console.log(baz); // undefined

var foo = null;
console.log(foo === null); // true
console.log(typeof foo === 'object'); // true

console.log(foo == undefined); // true        null!

18. حدثنا عن وحدة التصميم "وحدة مفتوحة"

الصعوبة: *****

var Exposer = (function() {
  var privateVariable = 10;

  var privateMethod = function() {
    console.log('Inside a private method!');
    privateVariable++;
  }

  var methodToExpose = function() {
    console.log('This is a method I want to expose!');
  }

  var otherMethodIWantToExpose = function() {
    privateMethod();
  }

  return {
      first: methodToExpose,
      second: otherMethodIWantToExpose
  };
})();

Exposer.first();        // : This is a method I want to expose!
Exposer.second();       // : Inside a private method!
Exposer.methodToExpose; // undefined

19. ما الفرق بين خريطة وكائنات WeakMap؟

الصعوبة: *****

var map = new Map();
var weakmap = new WeakMap();

(function() {
    var a = {
        x: 12
    };
    var b = {
        y: 12
    };

    map.set(a, 1);
    weakmap.set(b, 2);
})()

20. كيف يتم تمرير المعلمات إلى وظيفة JavaScript: حسب المرجع أو بالقيمة؟

الصعوبة: *****

function changeStuff(a, b, c)
{
  a = a * 10;
  b.item = "changed";
  c = {item: "changed"};
}

var num = 10;
var obj1 = {item: "unchanged"};
var obj2 = {item: "unchanged"};

changeStuff(num, obj1, obj2);

console.log(num);
console.log(obj1.item);
console.log(obj2.item);

10
changed
unchanged

21. كيفية تنظيم "تجميد عميق" لجسم ما؟

الصعوبة: *****

let person = {
    name: "Leonardo",
    profession: {
        name: "developer"
    }
};
Object.freeze(person); //   
person.profession.name = "doctor";
console.log(person); // { name: 'Leonardo', profession: { name: 'doctor' } }

function deepFreeze(object) {
    let propNames = Object.getOwnPropertyNames(object);
    for (let name of propNames) {
        let value = object[name];
        object[name] = value && typeof value === "object" ?
            deepFreeze(value) : value;
    }
    return Object.freeze(object);
}
let person = {
    name: "Leonardo",
    profession: {
        name: "developer"
    }
};
deepFreeze(person);
person.profession.name = "doctor"; // TypeError: Cannot assign to read only property 'name' of object

22. لماذا يواجه مبرمجو جافا سكريبت مشكلة في استخدام هذه الكلمة الرئيسية؟

الصعوبة: *****

• إذا تم استدعاء الوظيفة بالشكل المعتاد (أي باستخدام بنية العرض someFunc()) ، thisفستشير إلى الكائن العام (في المستعرض هذا window). إذا تم تنفيذ الرمز في وضع صارم ، thisستتم كتابة قيمة إليه undefined.
• إذا تم استدعاء الوظيفة كطريقة لكائن ما ، thisفسيتم تمثيل الكلمة الأساسية بالكائن الذي تنتمي إليه الطريقة.
• call apply, this , call apply.
• , this .
• , new, this , prototype -.
• إذا تم إنشاء الوظيفة باستخدام طريقة الربط ، فسيتم ربط الكلمة الأساسية thisللدالة بشكل صارم بالقيمة التي تم تمريرها bindكوسيطة أولى. هذا هو الاستثناء الوحيد للقاعدة القائلة بأن الدوال ليس لها قيمة مشفرة this. الوظائف التي تم إنشاؤها باستخدام bindثابتة this.

23. قارن استخدام البناء المتزامن / المنتظر والمولدات لتنفيذ نفس الوظيفة

الصعوبة: *****

• عند تكرار مولد باستخدام طريقة ، .next()تُرجع كل استدعاء لهذه الطريقة قيمة واحدة باستخدام الكلمة الرئيسية yield. عند استخدام البناء غير المتزامن / الانتظار ، يتم تنفيذ تعبيرات الانتظار بالتسلسل.
• يبسط تصميم غير متزامن / انتظار تنفيذ حالة استخدام مولد معينة.
• دائمًا ما يكون للقيم التي أرجعها المولد الشكل {value: X, done: Boolean}، وتقوم الدالات غير المتزامنة بإرجاع الوعود التي تم حلها بالقيمة X، أو تفشل.
• يمكن تحويل وظيفة غير متزامنة إلى مولد باستخدام الوعود. فيما يلي مثال على مثل هذا التحويل.

//  
async function init() {
    const res1 = await doTask1();
    console.log(res1);

    const res2 = await doTask2(res1);
    console.log(res2);

    const res3 = await doTask3(res2);
    console.log(res3);

    return res3;
}

init();

//    
function runner(genFn) {
    const itr = genFn();

    function run(arg) {
        let result = itr.next(arg);

        if (result.done) {
            return result.value;
        } else {
            return Promise.resolve(result.value).then(run);
        }
    }

    return run;
}

//   runner    
runner(function* () {
    const res1 = await doTask1();
    console.log(res1);

    const res2 = await doTask2(res1);
    console.log(res2);

    const res3 = await doTask3(res2);
    console.log(res3);

    return res3;
});