Summary of the three years' experience in the front-end interview of "Winter" (including Toutiao, Baidu, Ele. me, Didi, etc.)

preface

It doesn’t matter whether it’s winter or mild winter, you need to be well prepared for the job interview. This article is a summary of the handwritten questions I prepared for the recent job hunting and the written interview. For myself, and for those who need it. Handwritten questions are better prepared for a link, most of the companies to examine the question is also so much, mostly not beyond the scope.

The issue of

Summary of three years’ experience in “Winter” front-end interview (including Toutiao, Baidu, Ele. me, Didi, etc.)
“Winter” three years of experience in the front end of the interview summary (including toutiao, Baidu, Ele. me, Didi, etc.) CSS
Summary of the three years’ experience in the front-end interview of “Winter” (including Toutiao, Baidu, Ele. me, Didi, etc.)
“Winter” three years of experience in front of the interview summary (including toutiao, Baidu, Ele. me, Didi, etc.) handwritten questions (promise)

Anti-shake & throttling

The principle is to use closures to store variables. If the task is triggered frequently, the task will be executed only when the task triggering interval exceeds the specified interval. It is generally used for real-time search in the input box. Throttling specifies that a function is executed only once in a specified interval, typically for scroll events.

/ / image stabilizationfunction debounce(fn,time){
    let timer = null;
    return function() {if(timer){
            clearTimeout(timer)
        }
        timer = setThe Timeout (() = > {fn. Apply (this, the arguments)}, time)}} / / throttlingfunction throttle(fn,time){
    let canRun = true;
    return function() {if(! canRun){return
        }
        canRun = false;
        setTimeout(() => {
            fn.apply(this,arguments);
            canRun = true;
        },time)
    }
}

Copy the code

Deep copy

Deep copy is a cliche. It was done years ago, and it’s still done now. The focus is on recursion, array, and object storage.

function deepClone(obj) {
    var result = Array.isArray(obj) ? [] : {};
    for (var key in obj) {
      if (obj.hasOwnProperty(key)) {
        if (typeof obj[key] === 'object'&& obj[key]! ==null) { result[key] = deepClone(obj[key]); }else{ result[key] = obj[key]; }}}return result;
  }
Copy the code

function deepClone(arr){
    return JSON.parse(JSON.stringify(arr))
}
Copy the code

An array of random sequence

Disorder is also a common problem.

// A trick algorithm, but each position out of order probability is differentfunction mixArr(arr){
    return arr.sort(() => {
        returnMath. The random () - 0.5; })}Copy the code

// Fisher-Yates Shufflefunction shuffle(arr){
    let m = arr.length;
    while(m > 1){
        let index = parseInt(Math.random() * m--);
        [arr[index],arr[m]] = [arr[m],arr[index]];
    }
    return arr;
}
Copy the code

Array to heavy

There are a lot of different ways to de-duplicate an array, and if I write it by hand, I usually write it like this. ES6’s set method will also be mentioned in passing.

function removeDup(arr){
    var result = [];
    var hashMap = {};
    for(var i = 0; i < arr.length; i++){
        var temp = arr[i]
        if(!hashMap[temp]){
            hashMap[temp] = true
            result.push(temp)
        }
    }
    return result;
}
Copy the code

Array.from(new Set(arr))
Copy the code

[...new Set(arr)]
Copy the code

An array of flat

The array Flat method is a new feature in ES6 to flatten groups of multidimensional numbers into low-dimensional arrays. If the parameter is not passed, it flattens one layer by default. Passing the parameter can specify the flattening level.

// Flatten a levelfunction flat(arr){
    var result = [];
    for(var i = 0; i < arr.length; i++){
        if(Array.isArray(arr[i])){
            result = result.concat(flat(arr[i]))
        }else{ result.push(arr[i]); }}return result;
}
Copy the code

// Flatten the layersfunction flattenByDeep(array,deep){
      var result = [];
      for(var i = 0 ; i < array.length; i++){
          if(Array.isArray(array[i]) && deep >= 1){
                result = result.concat(flattenByDeep(array[i],deep -1))
          }else{
                result.push(array[i])
          }
      }
      return result;
  }
Copy the code

An array of the filter

The filter method is often used and relatively easy to implement. Filter takes the current element, then the array index, then the entire array, and returns the element whose value is true.

Array.prototype.filter = function(fn,context){
    if(typeof fn ! ='function'){
        throw new TypeError(`${fn} is not a function`)}let arr = this;
    let reuslt = []
    for(var i = 0; i < arr.length; i++){let temp= fn.call(context,arr[i],i,arr);
        if(temp){ result.push(arr[i]); }}return result
}
Copy the code

Hand write call & apply & bind

Call, apply, and bind are the methods in ES5 that can change the reference to this. It is common to ask the difference between these three methods. Call and Apply pass arguments differently. Call takes comma-separated arguments, and Apply accepts arrays. The call is immediately executed. Bind returns a function that needs to be called again. Can a call/apply be implemented? Or can you use apply to implement a bind?

Function.prototype.myCall = function(context){ 
    if(typeof this ! ='function'){
        throw new TypeError('this is not a function')
    }
    context.fn = this;
    var arr = [];
    for(var i = 1; i< arguments.length; i++){
        arr.push('argument[' + i + '] ')
    }
    var result = eval('context.fn(' +arr+ ') ');
    delete context.fn;
    return result;
}
Copy the code

Function.prototype.myApply = function(context,arr){ 
    if(typeof this ! ='function'){
        throw new TypeError('this is not a function')
    }
    context.fn = this;
    var result= [];
    if(! arr){ result = context.fn() }else{
        var args = [];
        for(var i = 1; i< arr.length; i++){
            args.push('arr[' + i + '] ')
        }
        result = eval('context.fn(' +args+ ') ');
    }
    delete context.fn;
    return result;
}
Copy the code

Function.prototype.myBind = function(context){
    if(typeof this ! ='function'){
        throw new TypeError('this is not a function')
    }
    var self = this;
    var args = Array.prototype.slice.call(arguments,1);
    var F = function() {}; F.prototype = this.prototype; var bound =function(){
        var bindArgs = Array.prototype.slice.call(arguments);
        return self.apply(this instanceof F ? this: context, args.concat(bindArgs))
    };
    bound.prototype = new F();
    return bound;
}
Copy the code

Write in the last

There are mistakes also please friends timely pointed out, so as not to mistake people’s children. To see the content, turn to the link ~ at the top of the page

Summary of the three years’ experience in the front-end interview of “Winter” (including Toutiao, Baidu, Ele. me, Didi, etc.)