Front-end streamlined interview questions---this one is enough (js articles-continuously updated)

start directly

js data type

Basic data type (value type): string number boolean undefined null symbol (es6 new)
complex data type (reference type): array object function math date map set weakmap weakset

The difference between value types and reference types

1. The key and value of the value type are stored in the stack
2. The stack of the reference type stores the address, and the real value is in the heap
3. The value of a heap of the reference type can be accessed by multiple variables, and one of them can be modified others will be affected

shallow copy

1. Object.assign(A,B)
2. for in traversal copy 1
3. {...A} object extension

deep copy

1. Convert string: var obj2 = JSON.parse(JSON.stringify(obj1))
2. Recursion:

function deeCopy(obj){
    
    
    if(typeof obj==="object"&&obj!==null){
    
    
      var result；
      if(obj.instanceof Array){
    
    
         result = [];
         for(var i=0;i<obj.length;i++){
    
    
               result[i] = deepCopy(obj[i])
         }
      }else{
    
    
         result = {
    
    };
         for(var k in obj){
    
    
             result[k] = deepCopy(obj[k])
         }
      }
      return result;
    }else {
    
    
        return obj;
    }
}

js detect object type

typeof: The reference type returns object
instance:: it is an instance of a function, and it is most accurate to return true if there is this function in the prototype chain
: Object.protoype.toString.call(obj).slice(8,-1)
constructor , Array isArray()

page rendering process

1. Download html to generate a dom tree
2. Download css to generate a css tree
3. Merge the css tree and dom tree into a rendering tree
4. Start rendering the page, and it will block when encountering js

What is a closure, the application scenario of a closure, and the disadvantages of a closure

A closure is a nested function of a function. The function is passed in as a parameter and returned as a return value. The
function of the closure:
1. Form a local scope
2. You can access the local variables inside the function outside the function.
The disadvantage of the closure
is referenced by the closure The variable will not be destroyed by the js garbage collection mechanism, and will be resident in memory. Improper use may easily cause memory leaks

What is a prototype and what is a prototype chain

Every constructor (class) has an explicit prototype prototype
Every instance object has an implicit prototype __proto__
The implicit prototype __proto__ of the instance is equal to the explicit prototype prototype of other constructors
when looking up the properties of an object or When searching for the method, first search on the instance, if you can’t find it, search up the __proto__ step by step.
We make the chain relationship formed by __proto__ of __proto__ into the prototype chain
function: 1. The prototype chain realizes js inheritance, 2. The prototype can Add public methods to instances created by the constructor

How JS implements inheritance

1. Class uses the extends keyword to implement inheritance
2. The general prototype chain implements inheritance

function B（）{
    
    
     A.call(this) //实现构造函继承
}
B.protoytpe = Object.create(A.prototype) //实现原型继承
B.prototype.= B //修正构造函数

The difference between Call and apply

Both call and apply execute a function, and use the first parameter to impersonate the this
apply parameter of the function in the form of an array

What does the new keyword do?

1. Create an empty object
2. call to execute the construction and pass in the empty object as this
3. Specify the constructor of the empty object

function A(){
    
    }
var  obj = {
    
    };
a.call(obj);
obj.prototype.constructor = A

event flow

Bubbling flow: The event is responded to by the most specific element, and then the component bubbles to the least specific element (html)
Capture flow: Capture the event from the least specific element
Open capture addEventListenter The third parameter true
prevents event bubbling: e .stopPropagation()

event proxy

$(父元素).on(事件名，子选择器，响应函数)

Register the event to the parent element shared by multiple elements, and respond to the event through the bubbling mechanism
Function: Dynamically added elements can also respond to events

Array deduplication

set deduplication
filter filtering

var arr2=arr1.filter((item,index)=>arr1.indexof(item)===index)

asynchronous and synchronous

Synchronization is executed sequentially, blocking code
Asynchronous non-blocking execution code
Asynchronous methods: callback function, promise, subscription publishing mode, event response, aync and awiat

handwritten ajax

The core of ajax is to exchange data asynchronously with the server through XMLHttpRequest (xhr) to realize the front-end refresh attempt

var xhr=new XMLHttpRequest();
xhr.open("get","");
xhr.send(data);
xhr.onreadystatechange=function(){
    
    
	if(xhr.reaystate===4){
    
    
		if(xhr===200){
    
    
			//xhr.responseText  获取的数据
		}
	}
}

promise

Promise realizes asynchronous operation and solves the problem of callback hell caused by callback function hierarchy or multiple forms.
Promise resolve and reject state sending changes cannot be changed.

var p=new Promise((resolve,reject)=>{
    
    
	var num=Math.random();
	if(num>0.5){
    
    
		setTimeout(()=>resolve(num),2000)
	}else{
    
    
		reject(num)
		}
		})

promise.reject()
promise.all() Multiple promises are completed before returning the result
promise.race() Multiple promises are executed and return the fastest one

Where do you use promises

1. Define the api request port
2. Custom jsonp is used
3. The pop-up plug-in waits for the user to confirm and then resolve
4. Encapsulate actions and use sync to decorate await to achieve asynchronous
(waiting, network, waiting for user confirmation) (promose is used for asynchronous operations )

The difference between get and post

1. get to obtain data
2. post to add, modify and delete
3. put to modify
4. delete to delete
5. get has a cache and can bookmark direction data volume 2k
6. post has no cache and theoretically has no size limit

What is RESTful

It is an interface design style.
Each url address is a resource.
Use get to get post, add new put, modify delete method to delete

How to achieve cross-domain

1. jsonp
2. The backend response header allows
3. Proxy
No matter which kind of proxy needs backend support

The difference between arrow function and ordinary function

1. The this of the arrow function points to the this of the upper scope.
2. The arrow function cannot be used as a constructor, and there is no constructor

this points to the question

1. The this of the constructor new function () points to the new object instance
2. The this of the arrow function points to the this of the upper scope 3. The this
of the object points to the object 4. The this of
the event response function points to the caller
5. setTimout The this of setInterval points to windows
6, and the this of call aplly bind points to the first parameter

variable hoisting

Variables declared by var in js will be promoted to the front of the current scope, and
all functions assigned to undefined will also be promoted to the front of the scope by default. Functions can be called first and then declared

The difference between let and var

1. let cannot promote variables, var can
2. let cannot be repeatedly assigned, var can
const declaration must be assigned, the value of the value type cannot be modified

Get browser width and height

window.innerWidth window.innerHeight
document.documentElement.clientWidth
document.documentElement.clientHeight

The difference between clientWidth offsetWidth and scrollWidth

clientWidth content + padding width
offsetWidth content + padding width + border width
scrollWith content + scrolling area width

scrolleft offsetLeft

scrollleft Scroll bar scrolling distance
offsetLeft The distance between the current element and the nearest positioned parent element

事件event.pageX ，event.pageY,clientX,clienX

Event click position

Get the bounds of an element

element.getBoundingClientRect()

jsonp principle

The script tag src is used without homology restrictions.
The backend returns the method name + () + data format + fun (data). The
front end can capture data by defining this method in advance.

write jsonp

function jsonp(){
    
    
    return new Promise(()=>{
    
    
      var  funName = “callback”+Date.now()+Math.random();
      var  script = document.createElement("script");
      src = url+"callback="+funName;
      document.body.appendChild(script);
      script.src = src;
      window[funName]=function(){
    
    
           resolve(data);
           document.body.removeChild(script)
      }
      script. = function(){
    
    reject(err)}
    })

}

Bubble Sort

N numbers are queued, and the two are smaller than the front. The
outermost loop is n-1, and the inner loop is n-1-i.

var array=[16,25,9,90,23];
			//外层控制轮数
			for (var i =0; i <array.length-1; i++) {
    
    
				//内层控制比较的次数
				for(var j=0;j<array.length-1-i;j++){
    
    
					//两两相比
					if(array[j]>array[j+1]){
    
    
						var temp=array[j];
						array[j]=array[j+1];
						array[j+1]=temp;
					}
				}
			}