1. What do you know about ES 6 grammar?

Let, const, arrow functions, Promise, expansion operators, destruct assignments, and so on.

See Ruan Yifeng ES 6

2. Promise, Promise. All, Promise.

  • Memorize the code Promise usage
Function fn(){return new Promise((resolve, reject)=>{resolve(reject, reject)})} fn().then(success, reject) fail).then(success2, fail2)Copy the code
  • Memorize the code promise.all usage
 Promise.all([promise1, promise2]).then(success1, fail1)
Copy the code

Success1 is invoked when both promisE1 and PROMISE2 are successful

  • Memorize the code promise.race
 Promise.race([promise1, promise2]).then(success1, fail1)
Copy the code

Promise1 and promisE2 call Success1 whenever one of them succeeds; If either promisE1 or promisE2 fails, fail1 is invoked. In short, whoever succeeds or fails first is considered the success or failure of race.

3. Handwriting function tremble and function throttling

Throttling (do not do it again after a period of time)

const throttle = (fn,delay)=>{
  let canUse = true
  return function() {
    const _this = this
    const args = arguments
    if(canUse){
      fn.apply(_this,args)
      canUse = false
      setTimeout(()=>{
        canUse = true
      },delay)
    }
  }
}

// 测试案例
const throttled = throttle(()=>console.log('hi'),2000)
throttled()
throttled()
Copy the code

Note that some places say that the throttling function is not executed immediately, but at the end of the cooldown (equivalent to casting with chant time), and that is also true.

Anti-shake (will wait for a while, then take along to do)

const debounce = (fn,delay)=>{ let timerId = null return function(){ const context = this const args = arguments if(timerId){window.clearTimeout(timerId)} timerId = setTimeout(()=>{ fn.apply(context,args) timerId = null },delay) } } // Test case Const debounce = Debounce (()=>console.log('hi'),2000) debounce() debmentioning () debounce()Copy the code

4. The handwritten AJAX

Back code, full version

var request = new XMLHttpRequest() request.open('GET', '/a/b/c? name=ff', true); request.onreadystatechange = function () { if(request.readyState === 4 && request.status === 200) { console.log(request.responseText); }}; request.send();Copy the code

Memorizing code, simplified version

var request = new XMLHttpRequest() request.open('GET', '/a/b/c? name=ff', true) request.onload = ()=> console.log(request.responseText) request.send()Copy the code

5. What is this in this code?

Back code

fn() this => window/global obj.fn() this => obj fn.call(xx) this => xx fn.apply(xx) this => xx fn.bind(xx) this => xx New Fn() this => New object Fn = ()=> {} this => outside thisCopy the code

What is the value of this? Once and for all

6. What are closures/immediate functions?

closure

Execute function immediately

7. What is JSONP, what is CORS, and what is cross-domain?

JSONP

CORS

8. How to use async/await and catch exceptions?

Ruan Yifeng’s book

How to use async/await and catch exceptions?

How to implement deep copy?

Basic implementation (recursive capability)

Circular reference (Consider the comprehensiveness of the problem and understand the true meaning of WeakMap)

Multiple types (consideration of the rigor of the problem, the method of creating various reference types, proficiency in THE JS API, accurate judgment of data types, understanding of data types)

General traversal (write code to consider performance optimization, understand the efficiency of centralized traversal, code abstraction ability)

Copy functions (differences between arrow functions and normal functions, regular expression proficiency)

Refer to the article

10. How to implement trim() with re?

Back code

String.prototype.trim = function(){ return this.replace(/^\s+|\s+$/g, ')} / / or function trim (string) {return string, replace (/ ^ \ s + | \ s + $/ g, ' ')}Copy the code

11. How to implement inheritance without class? How do you do that with class?

Class is not implemented like this

Function Animal(color) {this.color = color} animal.prototype. Move = function(){console.log(' console.log '); } function Cat(color,name) { Animal.call(this,color) this.name = name } function temp(){} temp.prototype = Animal.prototype Cat.prototype = new temp() Cat.prototype.constructor = Cat Cat.prototype.say = function(){ console.log('miaomiao~'); } // Test let cat = new cat (" white "," siniperca chuatsi ") cat.say() cat.move() cat.color cat.nameCopy the code

Memorizing code, using class is easy

Constructor (color){this.color = color} move(){console.log("move~move~"); // Constructor (color){this.color = color} move(){console.log("move~move~"); } } class Dog extends Animal { constructor(color,name){ super(color) this.name = name } say(){ console.log('wangwang~wangwang~'); }} // test let dog = new dog (" yellow "," yellow ") dog.say() dog.move() dog.name dog.colorCopy the code

12. How to implement array deduplication?

Reference segmentfault.com/a/119000001…

13. Send a Proposition: Write a Promise by hand

Reference juejin. Cn/post / 684490…