23 schwierige Fragen für JavaScript-Interviews

1. Erläutern Sie die Funktionen zur Überprüfung der JavaScript-Gleichstellung

Schwierigkeit: *

• Der Operator ===für strikte Gleichheit ( ) überprüft die Werte auf Gleichheit, ohne Typkonvertierungen durchzuführen.
• Der nicht strenge Gleichheitsoperator ( ==) überprüft die Werte auf Gleichheit und konvertiert sie in einen gemeinsamen Typ.

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

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

• Wenn einer der verglichenen Werte ein Wert sein kann trueoder false- versuchen Sie, den Operator zu meiden ==. Verwenden Sie einen Operator ===.
• Verwenden Sie den Operator ===für den Fall, dass Sie mit den folgenden Werten arbeiten : 0, «»oder [](leeres Array).
• In allen anderen Fällen können Sie den Operator sicher verwenden ==. Darüber hinaus ist dies nicht nur sicher, sondern vereinfacht auch den Code und verbessert seine Lesbarkeit.

2. Geben Sie Beispiele für das Umwandeln in einen logischen Wertetyp, der nicht mit diesem Typ zusammenhängt

Schwierigkeit: ***

• «» (leere Zeile).
• 0, -0, NaN(Nicht eine Zahl).
• null, undefined.

• «hello».
• 42.
• [ ], [ 1, «2», 3 ](Arrays).
• { }, { a: 42 }(Objekte).
• function foo() { .. } (Funktionen).

3. Was ist IIFE?

Schwierigkeit: ***

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

4. Wann sollte ich die in ES6 angezeigten Pfeilfunktionen verwenden?

Schwierigkeit: ***

• Verwenden Sie das Schlüsselwort functionim globalen Bereich und für Eigenschaften Object.prototype.
• Verwenden Sie das Schlüsselwort functionfür Objektkonstruktoren.
• Verwenden Sie in anderen Fällen die Pfeilfunktionen.

• Bequeme Arbeit mit Kontext. Pfeilfunktionen verwenden den Wert des thisumgebenden Kontexts, ohne einen eigenen zu haben this. Wenn solche Funktionen nacheinander verwendet werden, ohne gewöhnliche Funktionen in komplexen Konstruktionen zu verwenden, gewährleistet dies eine sichere Arbeit mit dem Kontext.
• Kompaktheit. Der Pfeilfunktionscode ist einfacher einzugeben und leichter zu lesen. Vielleicht erscheint Ihnen dieser Vorteil von Pfeilfunktionen gegenüber gewöhnlichen kontrovers und hängt von der Sichtweise jedes einzelnen Entwicklers ab.
• Klarheit des Codes. Wenn fast der gesamte Code durch Pfeilfunktionen dargestellt wird, wird jede gewöhnliche Funktion in einem solchen Code durch Erstellen eines eigenen Kontexts unterschieden. Mit den Pfeilfunktionen erstellt der Programmierer einen verständlicheren Code, mit dem einfacher gearbeitet werden kann als mit Code ohne Pfeilfunktionen this.

5. Was ist der Unterschied zwischen ES6-Klassen und Funktionskonstruktoren?

Schwierigkeit: ***

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. Erzählen Sie uns von der Function.prototype.bind () -Methode.

Schwierigkeit: ***

7. Wofür werden häufig anonyme Funktionen verwendet?

Schwierigkeit: ***

(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. Was ist der Unterschied zwischen der Object.freeze () -Methode und dem const-Schlüsselwort?

Schwierigkeit: ***

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. Was ist ein "Generator"?

Schwierigkeit: ***

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. Wann sollten Generatoren verwendet werden?

Schwierigkeit: ***

• Der Code, in dem der Generator verwendet wird, bestimmt den Zeitpunkt, zu dem der nächste Wert empfangen wird. Der Generator ist nur für die Rückgabe von Werten verantwortlich, er wird von außen gesteuert.
• Es gibt asynchrone Generatoren. Mit ihnen können Sie mit asynchronen Datenströmen arbeiten.

11. Was ist das „Erhöhen von Variablen“?

Schwierigkeit: ****

12. Was wird der folgende Code ausgeben?

Schwierigkeit: ****

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

console.log(output);

13. Was wird der folgende Code ausgeben?

Schwierigkeit: ****

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

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

14. Erzählen Sie uns etwas über das Muster des Prototypentwurfs.

Schwierigkeit: ****

15. Was ist eine „temporäre Totzone“ in ES6?

Schwierigkeit: ****

//console.log(aLet)  //  ReferenceError

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

16. Können Sie den Hauptunterschied zwischen den Array-Methoden forEach () und map () beschreiben? In welchen Situationen würden Sie eine dieser Methoden einer anderen vorziehen?

Schwierigkeit: ****

• Es iteriert über die Elemente des Arrays.
• Es führt die Rückruffunktion aus, die für jedes Element des Arrays an ihn übergeben wird.
• Es gibt nichts zurück.

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

// doubled = undefined

• Es iteriert über die Elemente des Arrays.
• Es konvertiert jedes Element des ursprünglichen Arrays in ein Element des neuen Arrays und ruft die an es übergebene Funktion für jedes Element des ursprünglichen Arrays auf.

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

// doubled = [2, 4, 6]

17. Was ist der Unterschied zwischen einer nicht deklarierten Variablen, einer Variablen mit einem Nullwert und einer nicht definierten Variablen? Wie überprüfe ich eine Variable auf die Tatsache, dass sie nicht deklariert sowie null und undefiniert ist?

Schwierigkeit: ****

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. Erzählen Sie uns von dem Designmodul "Modul öffnen"

Schwierigkeit: *****

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. Was ist der Unterschied zwischen Map- und WeakMap-Objekten?

Schwierigkeit: *****

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. Wie werden Parameter an die JavaScript-Funktion übergeben: als Referenz oder als Wert?

Schwierigkeit: *****

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. Wie organisiere ich ein „Deep Freeze“ eines Objekts?

Schwierigkeit: *****

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. Warum haben JavaScript-Programmierer Probleme, dieses Schlüsselwort zu verwenden?

Schwierigkeit: *****

• Wenn die Funktion in der üblichen Form aufgerufen wird (dh mit dem Ansichtskonstrukt someFunc()), thisverweist sie auf das globale Objekt (im Browser dies window). Wenn der Code im strengen Modus ausgeführt wird, wird ein thisWert in geschrieben undefined.
• Wenn die Funktion als Methode eines Objekts aufgerufen wird, wird das Schlüsselwort thisdurch das Objekt dargestellt, zu dem die Methode gehört.
• call apply, this , call apply.
• , this .
• , new, this , prototype -.
• Wenn die Funktion mit der Bindungsmethode erstellt wurde , wird das thisFunktionsschlüsselwort fest an den Wert gebunden, der bindals erstes Argument übergeben wurde. Dies ist die einzige Ausnahme von der Regel, dass Funktionen keinen fest codierten Wert haben this. Mit erstellte Funktionen bindsind unveränderlich this.

23. Vergleichen Sie die Verwendung des Konstrukts async / await und der Generatoren, um dieselbe Funktionalität zu implementieren

Schwierigkeit: *****

• Wenn Sie einen Generator mit einer Methode iterieren, gibt .next()jeder Aufruf dieser Methode einen einzelnen Wert mit dem Schlüsselwort zurück yield. Bei Verwendung des Konstrukts async / await werden Warteausdrücke nacheinander ausgeführt.
• Das asynchrone / wartende Design vereinfacht die Implementierung eines bestimmten Generator-Anwendungsfalls.
• Die vom Generator zurückgegebenen Werte haben immer die Form {value: X, done: Boolean}, und asynchrone Funktionen geben die mit dem Wert aufgelösten Versprechen zurück Xoder schlagen fehl.
• Eine asynchrone Funktion kann mithilfe von Versprechungen in einen Generator umgewandelt werden. Das Folgende ist ein Beispiel für eine solche Konvertierung.

//  
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;
});