1. Implement debounce function

Continuous trigger in last execution method, scenario: input box match

let debounce = (fn,time = 1000) => { let timeLock = null return function (... args){ clearTimeout(timeLock) timeLock = setTimeout(()=>{ fn(... args) },time) } }Copy the code

2. Implement throttle functions

Trigger only once in a certain period of time, scenario: long list scrolling throttling

let throttle = (fn,time = 1000) => { let flag = true; return function (... args){ if(flag){ flag = false; setTimeout(()=>{ flag = true; fn(... args) },time) } } }Copy the code

3. Deepclone

Determine the type, re, and date. Return the new object directly, null or non-object type. If the hash contains a value that returns directly from the hash, create a new obj.constructor that iterates over the object recursively.

function deepClone(obj,hash = new WeakMap()){ if(obj instanceof RegExp) return new RegExp(obj); if(obj instanceof Date) return new Date(obj); if(obj === null || typeof obj ! == 'object') return obj; If (hash.has(obj)){return hash.get(obj)} //new a corresponding Object //obj is Array, equivalent to new Array() //obj is Object, New Object() let constr = new obj.constructor(); hash.set(obj,constr); For (let key in obj){if(obj. HasOwnProperty (key)){constr[key] = deepClone(obj[key],hash)}  = Object.getOwnPropertySymbols(obj) for(let i=0; i<symbolObj.length; i++){ if(obj.hasOwnProperty(symbolObj[i])){ constr[symbolObj[i]] = deepClone(obj[symbolObj[i]],hash) } } return constr }Copy the code

4. Flat array implementation

Let arr = [1,2,[3,4,[5,[6]]]] console.log(arr.flat(Infinity))//flat specifies the structure depth to extract the nested array. The default value is 1Copy the code
Function fn(arr){return arr. Reduce ((prev,cur)=>{return prev. Concat (array.isarray (cur)? fn(cur):cur) },[]) }Copy the code

5. Coriolization of functions

function sumFn(a,b,c){return a+ b + c}; let sum = curry(sumFn); The sum (2) (3) (5) / / 10 sum (2, 3) (5) / / 10 function curry (fn,... args){ let fnLen = fn.length, argsLen = args.length; If (fnLen > argsLen){return function(argsLen){return function(... arg2s){ return curry(fn,... args,... arg2s) } }else{ return fn(... args) } }Copy the code

6. Use closures to print 1,2,3,4 every second

for (var i=1; i<=5; i++) {
  (function (i) {
    setTimeout(() => console.log(i), 1000*i)
  })(i)
}
Copy the code

7. Hand write a JSONP

Const jsonp = function (url, data) {return new Promise((resolve, reject) => {// initialize url let dataString = url.indexof ('? ') = = = 1? '? ': '' let callbackName = 'jsonpCB_${date.now ()}' URL += '${dataString}}' callback=${callbackName} 'if (data) { For (let k in data) {url += '${k}=${data[k]}'}} let jsNode = document.createElement('script') jsNode.src = // Trigger callback, Callback window[callbackName] = result => {delete window[callbackName] Document. Body. RemoveChild (jsNode) if (result) {resolve (result)} else {reject (' returns no data ')}} / js/loading exception jsNode.addEventListener('error', () = > {window [callbackName] document delete. Body. RemoveChild (jsNode) reject (' failure load JavaScript resources')}, False) / / js node is added to the document, to request the document. The body. The appendChild (jsNode)})} the json (' http://192.168.0.103:8081/jsonp '{a: 1, b: 'heiheihei' }) .then(result => { console.log(result) }) .catch(err => { console.error(err) })Copy the code

8. Write an observer pattern

Class Subject{constructor(name){this.name = name this.observers = [] this.state = 'XXXX'} // The observers should provide a method to receive observers Attach (observer){this.observers. Push (observer)} // Change the observed state setState(newState){this.state = newState this.observers.forEach(o=>{ o.update(newState) }) } } class Observer{ constructor(name){ this.name = name } Update (newState){console.log(' ${this.name}say:${newState} ')}} // Let sub = new Subject(' light ') let mm = new Observer(' xiaoming ') let jj = new Observer(' xiajian ') sub. Attach (mm) sub. Attach (jj) sub.Copy the code

9. EventEmitter implementation

class EventEmitter { constructor() { this.events = {}; } on(event, callback) { let callbacks = this.events[event] || []; callbacks.push(callback); this.events[event] = callbacks; return this; } off(event, callback) { let callbacks = this.events[event]; this.events[event] = callbacks && callbacks.filter(fn => fn ! == callback); return this; } emit(event, ... args) { let callbacks = this.events[event]; callbacks.forEach(fn => { fn(... args); }); return this; } once(event, callback) { let wrapFun = function (... args) { callback(... args); this.off(event, wrapFun); }; this.on(event, wrapFun); return this; }}Copy the code

10. Various methods for generating random numbers?

function getRandom(min, max) {
  return Math.floor(Math.random() * (max - min)) + min   
}
Copy the code

To summarize

Prepare carefully before the interview. The knowledge points and principles written on the resume should be well prepared. Think about the difficulties and highlights in the project, which is the difference between the interview and others.

There is also to show their modesty and studious, as well as for the future continued to advance the planning, enterprises hire more stable people.

Everything is difficult at the beginning, but programmers this way after a few years of development space is still very large, everything is important to adhere to.

In order to help you better and more efficient preparation for the interview, the electronic draft of “Front-end Engineer Interview Manual” is specially organized.

Front end test summary

JavaScript

performance

linux

Front-end data summary

The full PDF is free to share, just like it,Just click here and get it for free.

The job gap for front-end engineers has been very large, and fewer and fewer people meet the job requirements, so the partners who learn front-end should pay attention to it. They must learn solid skills and do valuable projects, so that no matter what situation they encounter when looking for a job, the problem will not be big.