Summary of 10 must-see JavaScript interview questions (recommended)

1.This points to

1. Who calls whom?

example:

  function foo(){
        console.log("this",this);
      }
      new foo(); 

2. Globally point to window

example:

 function foo(){
        console.log("this",this);
 }
 foo(); 

3. The this of the constructor points to the constructor instance

4.call/apply/bind forces the change of this pointer

5. The this of the arrow function always points to the parent context

2. Event model: event delegation, proxy? How to make events bubble first and then capture

Event delegation: also known as event proxy. Event delegation uses event bubbling to bind all child element events to the parent element. If the child elements prevent the event from bubbling, then delegation cannot be achieved.

Three parameters: event name, event method, whether to capture or bubble

Bubble first, capture later

Bind two addEventListeners to an element, with the third parameter of one set to false (i.e. bubbling) and the third parameter of the other set to true (i.e. capturing). Adjust their code order and place the listening event set to false before the listening event set to true.

3. Objects and object-orientation

Objects are a composite data type that can store multiple attributes of different data types.

Object-oriented is a programming concept (everything is an object), which corresponds to process-oriented (class: class inheritance (subclass inherits the methods and properties of the parent class), encapsulation (the core is low coupling and high cohesion), polymorphism (overloading and rewriting)). js is an object-oriented language;

* js itself is built based on object-oriented programming (for example: there are many built-in classes in JS, Array, Object, Function, String; Promise is a new built-in class added in ES6, we can create an instance based on new Promise to manage heterogeneous programming),

* Generally, the VUE/REACT/JQUERY we usually use are also built based on object-oriented. They are all classes, and their instances are created for operation during normal development.

4. The difference between for···in and for···of

1. It is recommended to use for...in when looping object properties, and for...of when traversing arrays.

2. for...in loops out the key, for...of loops out the value

3. for...of cannot loop ordinary objects, and needs to be forced to use Object.keys()

5. Finding Duplicates in an Array

Find out whether the index of the first and last appearance of the element are the same, and determine whether the element does not exist in the new array. If both are satisfied, add it to the new array.

ES6-set

Using ES6's set is the easiest way to remove duplicates

var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,
undefined, null,null, NaN,NaN,'NaN', 0, 0, 'a', 'a',{},{}];
 
function arr_unique1(arr){
return [...new Set(arr)];
//or //return Array.from(new Set(arr));
}
arr_unique1(arr); // (13)[1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {…}, {…}]

Using Map data structure to remove duplicates

function arr_unique2(arr) {
  let map = new Map();
  let array = new Array(); // Array is used to return results for (let i = 0; i < arr.length; i++) {
    if(map .has(arr[i])) { // If there is a key value map .set(arr[i], true);
    } else {
      map .set(arr[i], false); // If there is no key value array .push(arr[i]);
    }
  }
  return array;
}

 console.log(arr_unique2(arr)); //(13) [1, "a", "true", true, 15, false, 1, {…}, null, NaN, NaN, "NaN", 0, "a", {…}, undefined]

Using recursive deduplication

function arr_unique3(arr) {
     var array = arr;
     var len = array.length;
     array.sort(function(a,b){ //It is easier to remove duplicates after sorting return a - b;
    })
    
 function loop(index){
        if(index >= 1){
            if(array[index] === array[index-1]){
                array.splice(index,1);
            }
            loop(index - 1); //recursive loop, then array deduplication}
    }
    loop(len-1);
    return array;
}
 
console.log(arr_unique3(arr)); //(14) [1, "a", "true", true, 15, false, 1, {…}, null, NaN, NaN, "NaN", 0, "a", {…}, undefined]

forEach + indexOf

filter+indexOf

forEach + includes

6. Array Flattening

Array flattening is to convert a multidimensional array into a one-dimensional array.

1. Traverse each item of the array.

2. Determine whether the item is an array.

3. If the item is not an array, put it directly into the new array.

4. If it is an array, return to 1 and continue iterating.

5. When the array traversal is complete, return the new array.

7. What are the advantages and disadvantages of iframe?

advantage:

①iframe can display the embedded web page intact;

②If multiple web pages reference iframe, you only need to modify the content of the iframe to change the content of each called page, which is convenient and quick.

③ If the web page has the same style, header and version, it can be written as one page and nested with iframe to increase the reusability of the code.

④Slow loading of third-party content such as icons and advertisements can be solved by iframe.

shortcoming:

① It will generate many pages that are difficult to manage;

②The iframe structure can sometimes be confusing. If there are many frames, up and down, left and right scroll bars may appear, distracting visitors and causing a poor user experience.

③The code is complex and cannot be indexed by some search engines. This is very critical. Current search engine crawlers cannot handle the content in iframes very well, so using iframes will be detrimental to search engine optimization.

④Poor equipment compatibility.

⑤Iframe frame pages will increase the server's http requests, which is not advisable for large websites.

8. Function Currying

The technique of transforming a function that accepts multiple arguments into a function that accepts a single argument (the first argument of the original function) and returns a new function that accepts the remaining arguments and returns the result.

It is to pass only a part of the parameters to the function to call, and return a new function to process the remaining parameters (closure)

9. Garbage collection mechanism

The browser's Javascript has an automatic garbage collection mechanism (GC: Garbage Collecation), that is, the execution environment is responsible for managing the memory used during code execution. The principle is that the garbage collector regularly (periodically) finds variables that are no longer in use and then releases their memory. However, this process is not real-time, because it is very expensive and the GC stops responding to other operations, so the garbage collector will execute it periodically at fixed time intervals.

10.Window's onload event and domcontentloaded

window.onload:

The onload event is fired when a resource and its dependent resources have finished loading.

document.onDOMContentLoaded:

The DOMContentLoaded event is fired when the initial HTML document is fully loaded and parsed, without waiting for style sheets, images, and subframes to finish loading.

the difference:

①The onload event is a DOM event, and onDOMContentLoaded is an HTML5 event.

②The onload event will be blocked by style sheets, images, and subframes, but onDOMContentLoaded will not.

③When the loaded script content does not include immediate DOM operations, using the onDOMContentLoaded event is a better choice, which will be executed earlier than the onload event.

Summarize

This concludes this article about the 10 must-read JavaScript interview questions. For more relevant JavaScript interview questions, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!