A complete list of frequently asked JavaScript questions for front-end interviews

 let myInstanceof = (target,origin) => {
     while(target) {
         if (target.__proto__===origin.prototype) {
            return true
         }
         target = target.__proto__
     }
     return false
 }
 let a = [1,2,3]
 console.log(myInstanceof(a,Array)); // true
 console.log(myInstanceof(a,Object)); // true

const a = [1, 2, 3, 4];
const b = array1.map(x => x * 2);
console.log(b); // Array [2, 4, 6, 8]

    // Implement Array.prototype.myMap = function(fn, thisValue) {
            let res = []
            thisValue = thisValue||[]
            let arr = this
            for(let i=0; i<arr.length; i++) {
                res.push(fn.call(thisValue, arr[i],i,arr)) // The parameters are this pointer, current array item, current index, current array}
            return res
        }
        // Using const a = [1,2,3];
        const b = a.myMap((a,index)=> {
                return a+1; 
            }
        )
        console.log(b) // Outputs [2, 3, 4]

Array.prototype.myMap = function(fn,thisValue){
     var res = [];
     thisValue = thisValue||[];
     this.reduce(function(pre,cur,index,arr){
         return res.push(fn.call(thisValue,cur,index,arr));
     },[]);
     return res;
}
​
var arr = [2,3,1,5];
arr.myMap(function(item,index,arr){
 console.log(item,index,arr);
})

 function reduce(arr, cb, initialValue){
     var num = initValue == undefined? num = arr[0]: initValue;
     var i = initValue == undefined? 1: 0
     for (i; i< arr.length; i++){
        num = cb(num,arr[i],i)
     }
     return num
 }
 
 function fn(result, currentValue, index){
     return result + currentValue
 }
 
 var arr = [2,3,4,5]
 var b = reduce(arr, fn,10) 
 var c = reduce(arr, fn)
 console.log(b) // 24

function flatten(arr) {
     var res = [];
     for (let i = 0, length = arr.length; i < length; i++) {
     if (Array.isArray(arr[i])) {
     res = res.concat(flatten(arr[i])); //concat does not change the original array //res.push(...flatten(arr[i])); //or use the spread operator} else {
         res.push(arr[i]);
       }
     }
     return res;
 }
 let arr1 = [1, 2,[3,1],[2,3,4,[2,3,4]]]
flatten(arr1); //[1, 2, 3, 1, 2, 3, 4, 2, 3, 4]

     function flat(arr, deep) {
        let res = []
        for(let i in arr) {
            if(Array.isArray(arr[i])&&deep) {
                res = res.concat(flat(arr[i],deep-1))
            } else {
                res.push(arr[i])
            }
        }
        return res
    }
    console.log(flat([12,[1,2,3],3,[2,4,[4,[3,4],2]]],1));

/**
 * Curry the function * @param fn the original function to be curried * @param len the number of parameters required, defaults to the number of formal parameters of the original function */
function curry(fn,len = fn.length) {
 return _curry.call(this,fn,len)
}
​
/**
 * Transfer function * @param fn original function to be curried * @param len required number of parameters * @param args received parameter list */
function _curry(fn,len,...args) {
    return function (...params) {
         let _args = [...args,...params];
         if(_args.length >= len){
             return fn.apply(this,_args);
         }else{
          return _curry.call(this,fn,len,..._args)
         }
    }
}

let _fn = curry(function(a,b,c,d,e){
 console.log(a,b,c,d,e)
});
​
_fn(1,2,3,4,5); // print: 1,2,3,4,5
_fn(1)(2)(3,4,5); // print: 1,2,3,4,5
_fn(1,2)(3,4)(5); // print: 1,2,3,4,5
_fn(1)(2)(3)(4)(5); // print: 1,2,3,4,5

/**
 * @param fn the function to be curried* @param length the number of parameters required, defaults to the number of formal parameters of the function* @param holder placeholder, defaults to the current curried function* @return {Function} the function after currying*/
function curry(fn,length = fn.length,holder = curry){
 return _curry.call(this,fn,length,holder,[],[])
}
/**
 * Transfer function* @param fn original function of currying* @param length number of parameters required by the original function* @param holder received placeholder* @param args received parameter list* @param holders received placeholder position list* @return {Function} function to continue currying or final result*/
function _curry(fn,length,holder,args,holders){
 return function(..._args){
 //Copy the parameters to avoid confusion caused by multiple operations on the same function let params = args.slice();
 //Copy the placeholder position list and add the newly added placeholders here let _holders = holders.slice();
 //Loop through parameters, append parameters or replace placeholders_args.forEach((arg,i)=>{
 //There is a placeholder before the real parameter. Replace the placeholder with the real parameter if (arg !== holder && holders.length) {
     let index = holders.shift();
     _holders.splice(_holders.indexOf(index),1);
     params[index] = arg;
 }
 //There is no placeholder before the real parameter. Append the parameter to the parameter list else if (arg !== holder && !holders.length) {
     params.push(arg);
 }
 //The placeholder is passed in. If there is no placeholder before, record the position of the placeholder else if (arg === holder && !holders.length) {
     params.push(arg);
     _holders.push(params.length - 1);
 }
 //The passed in placeholder, there is a placeholder before, delete the original placeholder position else if (arg === holder && holders.length) {
    holders.shift();
 }
 });
 // The first length records in params do not contain placeholders, execute the function if(params.length >= length && params.slice(0,length).every(i=>i!==holder)){
 return fn.apply(this,params);
 }else{
 return _curry.call(this,fn,length,holder,params,_holders)
 }
 }
}

let fn = function(a, b, c, d, e) {
 console.log([a, b, c, d, e]);
}
​
let _ = {}; // Define placeholders let _fn = curry(fn,5,_); // Curry the function, specify the required number of parameters, and specify the required placeholders​
_fn(1, 2, 3, 4, 5); // print: 1,2,3,4,5
_fn(_, 2, 3, 4, 5)(1); // print: 1,2,3,4,5
_fn(1, _, 3, 4, 5)(2); // print: 1,2,3,4,5
_fn(1, _, 3)(_, 4,_)(2)(5); // print: 1,2,3,4,5
_fn(1, _, _, 4)(_, 3)(2)(5); // print: 1,2,3,4,5
_fn(_, 2)(_, _, 4)(1)(3)(5); // print: 1,2,3,4,5

function shallowCopy(target, origin){
    for(let item in origin) target[item] = origin[item];
    return target;
}

var obj={a:1,b:[1,2,3],c:function(){console.log('i am c')}}
var tar={};
Object.assign(tar,obj);

var arr=[1,2,[3,4]];
var newArr = arr.slice(0);
Array.prototype.concat
var arr=[1,2,[3,4]];
var newArr=arr.concat();

var arr=[1,2,[3,4]];
var newArr=arr.concat();

// Implement deep copy recursion function deepCopy(newObj,oldObj){
     for(var k in oldObj){
         let item = oldObj[k]
         // Determine whether it is an array, object, or simple type?
         if(item instanceof Array){
             newObj[k]=[]
             deepCopy(newObj[k],item)
         }else if(item instanceof Object){
             newObj[k]={}
             deepCopy(newObj[k],item)
         }else{ //Simple data type, directly assign newObj[k]=item
         }
     }
}

Function.prototype.myCall=function(context=window){ // Function method, so written on the Function prototype object if(typeof this !=="function"){ // If here is actually unnecessary, an error will be automatically thrown throw new Error("not a function")
 }
 const obj=context||window //The ES6 method can be used here to add default values ​​for parameters. The global scope of js strict mode is undefined
 obj.fn=this //this is the calling context, this is a function, use this function as the method of obj const arg=[...arguments].slice(1) //The first one is obj, so delete it, and convert the pseudo array to an array res=obj.fn(...arg)
 delete obj.fn // Failure to delete will result in more and more context attributes return res
}
// Usage: f.call(obj,arg1)
function f(a,b){
 console.log(a+b)
 console.log(this.name)
}
let obj = {
 name:1
}
f.myCall(obj,1,2) //Otherwise this points to window

 
obj.greet.call({name: 'Spike'}) //The output is Spike

Function.prototype.myApply = function(context) { // Arrow functions never have an arguments object! ! ! ! ! You can't write an arrow function here let obj=context||window
 obj.fn=this
 const arg=arguments[1]||[] //If there are parameters, the result is an array let res=obj.fn(...arg)
 delete obj.fn
 return res
} 
function f(a,b){
 console.log(a,b)
 console.log(this.name)
}
let obj = {
 name:'Zhang San'
}
f.myApply(obj,[1,2]) //arguments[1]

this.value = 2
var foo = {
 value: 1
};
var bar = function(name, age, school){
 console.log(name) // 'An'
 console.log(age) // 22
 console.log(school) // 'Homeschooling University'
}
var result = bar.bind(foo, 'An') //Presets some parameters 'An'
result(22, 'Home University') //This parameter will be merged with the preset parameters and put into bar

Function.prototype.bind = function(context, ...outerArgs) {
 var fn = this;
 return function(...innerArgs) { //Returns a function, ...rest is the parameter passed in when actually calling return fn.apply(context,[...outerArgs, ...innerArgs]); //Returns the function that changed this,
 //Parameter merging}
}

// declare a context let thovino = {
 name: 'thovino'
}
​
// Declare a constructor let eat = function (food) {
 this.food = food
 console.log(`${this.name} eat ${this.food}`)
}
eat.prototype.sayFuncName = function () {
 console.log('func name : eat')
}
​
// bind let thovinoEat = eat.bind(thovino)
let instance = new thovinoEat('orange') //Actually orange is put into thovino console.log('instance:', instance) // {}

function thovinoEat (...innerArgs) {
 eat.call(thovino, ...outerArgs, ...innerArgs)
}

Function.prototype.bind = function (context, ...outerArgs) {
 let that = this;
​
function res (...innerArgs) {
     if (this instanceof res) {
         // When the new operator is executed // Here, this will point to the simple empty object created by new itself in the third step of the new operator {}
         that.call(this, ...outerArgs, ...innerArgs)
     } else {
         // Normal bind
         that.call(context, ...outerArgs, ...innerArgs)
     }
     }
     res.prototype = this.prototype //! ! !
     return res
}

function Person(name,age){
 this.name=name
 this.age=age
}
Person.prototype.sayHi=function(){
 console.log('Hi! I am '+this.name)
}
let p1=new Person('张三',18)
​
////Manually implement new
function create(){
 let obj={}
 //Get the constructor let fn=[].shift.call(arguments) //Convert the arguments object into an array. arguments is not an array but an object! ! ! This method removes the first element of the arguments array, ! ! It doesn't matter whether the empty array is filled with elements or not, it does not affect the result of arguments or let arg = [].slice.call(arguments,1)
 obj.__proto__ = fn.prototype
 let res = fn.apply(obj, arguments) //Change this to add methods and properties to the instance //Make sure an object is returned (in case fn is not a constructor)
 return typeof res==='object'?res:obj
}
​
let p2=create(Person,'李四',19)
p2.sayHi()

[].shift.call(arguments) can also be written as:
 let arg=[...arguments]
 let fn=arg.shift() //Enables arguments to call array methods, the first parameter is the constructor obj.__proto__=fn.prototype
 //Change this pointer to add methods and attributes to the instance let res=fn.apply(obj,arg)

// Three states specified by the Promise/A+ specification const STATUS = {
 PENDING: 'pending',
 FULFILLED: 'fulfilled',
 REJECTED: 'rejected'
}
​
class MyPromise {
 // The constructor receives an execution callback constructor(executor) {
     this._status = STATUS.PENDING // Promise initial status this._value = undefined // then callback value this._resolveQueue = [] // Success queue triggered by resolve this._rejectQueue = [] // Failure queue triggered by reject​
 // Use arrow function to fix this (resolve function is triggered in executor, otherwise this cannot be found)
 const resolve = value => {
     const run = () => {
         // The Promise/A+ specification stipulates that the Promise state can only be triggered from pending to fulfilled
         if (this._status === STATUS.PENDING) {
             this._status = STATUS.FULFILLED // Change status this._value = value // Store the current value for then callback​
             // Execute resolve callback while (this._resolveQueue.length) {
                 const callback = this._resolveQueue.shift()
                 callback(value)
             }
         }
     }
     // Encapsulate the resolve callback operation into a function and put it into setTimeout to implement the promise asynchronous call feature (microtask in the specification, macrotask here)
     setTimeout(run)
 }
​
 // Same as resolve
 const reject = value => {
     const run = () => {
         if (this._status === STATUS.PENDING) {
         this._status = STATUS.REJECTED
         this._value = value
        ​
         while (this._rejectQueue.length) {
             const callback = this._rejectQueue.shift()
             callback(value)
         }
     }
 }
     setTimeout(run)
 }

     // When new Promise() is called, the executor is executed immediately, and resolve and reject are passed in
     executor(resolve, reject)
 }
​
 // then method, receiving a successful callback and a failed callback function then(onFulfilled, onRejected) {
  // According to the specification, if the parameter of then is not a function, it is ignored, the value is passed down, and the chain call continues to execute typeof onFulfilled !== 'function' ? onFulfilled = value => value : null
  typeof onRejected !== 'function' ? onRejected = error => error : null

  // then returns a new promise
  return new MyPromise((resolve, reject) => {
    const resolveFn = value => {
      try {
        const x = onFulfilled(value)
        // Classify the return value. If it is a Promise, wait for the Promise status to change, otherwise resolve directly
        x instanceof MyPromise ? x.then(resolve, reject) : resolve(x)
      } catch (error) {
        reject(error)
      }
    }
  }
}
​
  const rejectFn = error => {
      try {
        const x = onRejected(error)
        x instanceof MyPromise ? x.then(resolve, reject) : resolve(x)
      } catch (error) {
        reject(error)
      }
    }

    switch (this._status) {
      case STATUS.PENDING:
        this._resolveQueue.push(resolveFn)
        this._rejectQueue.push(rejectFn)
        break;
      case STATUS.FULFILLED:
        resolveFn(this._value)
        break;
      case STATUS.REJECTED:
        rejectFn(this._value)
        break;
    }
 })
 }
 catch (rejectFn) {
  return this.then(undefined, rejectFn)
}
// promise.finally method finally(callback) {
  return this.then(value => MyPromise.resolve(callback()).then(() => value), error => {
    MyPromise.resolve(callback()).then(() => error)
  })
}

 // static resolve method static resolve(value) {
      return value instanceof MyPromise ? value : new MyPromise(resolve => resolve(value))
  }

 // static reject method static reject(error) {
      return new MyPromise((resolve, reject) => reject(error))
    }

 // static all method static all(promiseArr) {
      let count = 0
      let result = []
      return new MyPromise((resolve, reject) => {
        if (!promiseArr.length) {
          return resolve(result)
        }
        promiseArr.forEach((p, i) => {
          MyPromise.resolve(p).then(value => {
            count++
            result[i] = value
            if (count === promiseArr.length) {
              resolve(result)
            }
          }, error => {
            reject(error)
          })
        })
      })
    }

 // Static race method static race(promiseArr) {
      return new MyPromise((resolve, reject) => {
        promiseArr.forEach(p => {
          MyPromise.resolve(p).then(value => {
            resolve(value)
          }, error => {
            reject(error)
          })
        })
      })
    }
}

myButton.addEventListener('click', function () {
  ajax()
})

function ajax() {
  let xhr = new XMLHttpRequest() //Instantiate to call method xhr.open('get', 'https://www.google.com') //Parameter 2, url. Parameter three: asynchronous xhr.onreadystatechange = () => { //This function is called whenever the readyState property changes.
    if (xhr.readyState === 4) { //The current state of the XMLHttpRequest proxy.
      if (xhr.status >= 200 && xhr.status < 300) { //200-300 request successful let string = request.responseText
        //The JSON.parse() method is used to parse the JSON string and construct a JavaScript value or object described by the string let object = JSON.parse(string)
      }
    }
  }
  request.send() //Used to actually issue an HTTP request. GET request without parameters}

function ajax(url) {
  const p = new Promise((resolve, reject) => {
    let xhr = new XMLHttpRequest()
    xhr.open('get', url)
    xhr.onreadystatechange = () => {
      if (xhr.readyState == 4) {
        if (xhr.status >= 200 && xhr.status <= 300) {
          resolve(JSON.parse(xhr.responseText))
        } else {
          reject('Request error')
        }
      }
    }
    xhr.send() //Send hppt request})
  return p
}
let url = '/data.json'
ajax(url).then(res => console.log(res))
  .catch(reason => console.log(reason))

function debounce(fn, delay) {
     if(typeof fn!=='function') {
        throw new TypeError('fn is not a function')
     }
     let timer; // Maintain a timer
     return function () {
         var _this = this; // Get the this of the debounce execution scope (the object to which the original function is mounted)
         var args = arguments;
         if (timer) {
            clearTimeout(timer);
         }
         timer = setTimeout(function () {
            fn.apply(_this, args); // Use apply to point to the object that calls debounce, which is equivalent to _this.fn(args);
         }, delay);
     };
}

// Call
input1.addEventListener('keyup', debounce(() => {
 console.log(input1.value)
}), 600)

function throttle(fn, delay) {
  let timer;
  return function () {
    var _this = this;
    var args = arguments;
    if (timer) {
      return;
    }
    timer = setTimeout(function () {
      fn.apply(_this, args); // Here args receives the parameters of the function returned from the outside, and arguments cannot be used
      // fn.apply(_this, arguments); Note: Chrome 14 and Internet Explorer 9 still do not accept array-like objects. They will throw an exception if passed an array-like object.
      timer = null; // Clear the timer after executing fn after delay. At this time, timer is false and throttle trigger can enter the timer}, delay)
  }
}

div1.addEventListener('drag', throttle((e) => {
  console.log(e.offsetX, e.offsetY)
}, 100))

function getData(url) {
  return new Promise((resolve, reject) => {
    $.ajax({
      url,
      success(data) {
        resolve(data)
      },
      error(err) {
        reject(err)
      }
    })
  })
}
const url1 = './data1.json'
const url2 = './data2.json'
const url3 = './data3.json'
getData(url1).then(data1 => {
  console.log(data1)
  return getData(url2)
}).then(data2 => {
  console.log(data2)
  return getData(url3)
}).then(data3 =>
  console.log(data3)
).catch(err =>
  console.error(err)
)

for(let i=0;i<=10;i++){ //Using var to print is 11
 setTimeout(()=>{
    console.log(i);
 },1000*i)
}

for(var i = 1; i <= 10; i++){
    (function (i) {
        setTimeout(function () {
            console.log(i);
        }, 1000 * i)
    })(i);
}

var a
for(let i=0;i<10;i++){
 a=document.createElement('a')
 a.innerHTML=i+'<br>'
 a.addEventListener('click',function(e){
     console.log(this) //this is the currently clicked <a>
     e.preventDefault() //If this method is called, the default event behavior will no longer be triggered.
     //For example, after executing this method, if you click a link (a tag), the browser will not jump to the new URL. We can use event.isDefaultPrevented() to determine whether this method has been called (on that event object).
     alert(i)
 })
 const d = document.querySelector('div')
 d.appendChild(a) //append appends the element to an existing element.
}

class EventBus {
    on(eventName, listener) {}
    off(eventName, listener) {}
    once(eventName, listener) {}
    trigger(eventName) {}
}

const e = new EventBus();
// fn1 fn2
e.on('e1', fn1)
e.once('e1', fn2)
e.trigger('e1') // fn1() fn2()
e.trigger('e1') // fn1()
e.off('e1', fn1)
e.trigger('e1') // null

      //Declare class class EventBus {
        constructor() {
          this.eventList = {} //Create an object to collect events}
        //Publish event $on(eventName, fn) {
          // Determine whether the event name has been published? Add publication: Create and add publication this.eventList[eventName]
            ? this.eventList[eventName].push(fn)
            : (this.eventList[eventName] = [fn])
        }
        //Subscribe to event $emit(eventName) {
          if (!eventName) throw new Error('Please pass in the event name')
          //Get subscription parameters const data = [...arguments].slice(1)
          if (this.eventList[eventName]) {
            this.eventList[eventName].forEach((i) => {
              try {
                i(...data) //Polling events} catch (e) {
                console.error(e + 'eventName:' + eventName) //Collect errors during execution}
            })
          }
        }
        //Execute once$once(eventName, fn) {
          const _this = this
          function onceHandle() {
            fn.apply(null, arguments)
            _this.$off(eventName, onceHandle) //Cancel monitoring after successful execution}
          this.$on(eventName, onceHandle)
        }
        //Unsubscribe $off(eventName, fn) {
          //Cancel all subscriptions when no parameters are passed if (!arguments.length) {
            return (this.eventList = {})
          }
          //When eventName is passed in as an array, cancel multiple subscriptions if (Array.isArray(eventName)) {
            return eventName.forEach((event) => {
              this.$off(event, fn)
            })
          }
          //Cancel all queues under the event name when fn is not passed in if (arguments.length === 1 || !fn) {
            this.eventList[eventName] = []
          }
          //Cancel the fn under the event name
          this.eventList[eventName] = this.eventList[eventName].filter(
            (f) => f !== fn
          )
        }
      }
      const event = new EventBus()

      let b = function (v1, v2, v3) {
        console.log('b', v1, v2, v3)
      }
      let a = function () {
        console.log('a')
      }
      event.$once('test', a)
      event.$on('test', b)
      event.$emit('test', 1, 2, 3, 45, 123)

      event.$off(['test'], b)

      event.$emit('test', 1, 2, 3, 45, 123)