Ten front end questions [01]

Abstract: This article will share 10 interview questions, 3 algorithm questions, encapsulated Ajax, encapsulated anti-shock function, encapsulated throttling function, array deduplication method, encapsulated deep copy method, Vue life cycle, MVC/MVP/MVVM comparison.

Encapsulate a method that converts a given arbitrary IP string to a 32-bit binary string.

Example: ip2binary (‘ 192.168.72.204 ‘), back to ‘11000000101010000100100011001100’.

function ip2binary(ip) {
  return ip.split('. ').map(ele= >parseInt(ele).toString(2).padStart(8.'0')).join(' ')}/ / test
ip2binary('192.168.72.204')
/ / 11000000101010000100100011001100
Copy the code

2, find the most occurrence of the character, how many occurrences.

Example: Give any string consisting of pure letters, for example, “Helheloawodop”. Find the most characters and the number of occurrences.

function calMax(str) {
  var cache = {}
  var max = 0
  for(var w of str){
    console.log('w',w)
    cache[w] = cache[w] ? cache[w]+1 : 1
  }
  for(var k in cache) {
    max = Math.max(max, cache[k])
  }
  return max
}

/ / test
var str = 'hellowefijwoeiwoeiwoeiwqeooawebcaewe'
calMax(str)
Copy the code

3, encapsulate a bubble sort algorithm sortMe()

Example: sortMe([2, 1, 4, 3]), returns [1, 2, 3, 4]

const sortMe = arr= > {
  let swapped = false
  const a = [...arr]
  for (let i = 1; i < a.length - 1; i++) {
    swapped = false
    for (let j = 0; j < a.length - i; j++) {
      if (a[j + 1] < a[j]) {
        [a[j], a[j + 1]] = [a[j + 1], a[j]]
        swapped = true}}if(! swapped)return a
  }
  return a
}
/ / test
sortMe([2.1.4.3]); // [1, 2, 3, 4]
Copy the code

$. Ajax = request();

Example: the request ({url, method, data}). Then (). The catch ()

function request(url,type,data) {
  return new Promise(function(resolve,reject) {
    $.ajax({
      url,
      type,
      data,
      success: function(res) {
        // Data filtering
        resolve(res.data)
      },
      error: function(err) {
        // Error message
        reject(err)
      }
    })
  })
}
/ / test
request('http://test.com/api/login'.'POST',{}).then().catch()
Copy the code

5, What are the methods of array deduplication? (At least 3)

/ / the first
function unique(arr) {
  return [...new Set(arr)]
}

/ / the second
function unique(arr) {
  var obj = {}
  return arr.filter(ele= > {
    if(! obj[ele]) { obj[ele] =true
      return true}})}/ / the third kind
function unique(arr) {
  var result = []
  arr.forEach(ele= > {
    if (result.indexOf(ele) == -1) {
      result.push(ele)
    }
  })
  return result
}
Copy the code

Encapsulate a method that can be used for deep copy (deep copy).

/ / the first
function deepClone(obj, result) {
  var result = result || {}
  for (var prop in obj) {
    if (obj.hasOwnProperty(prop)) {
      if (typeof obj[prop] == 'object'&& obj[prop] ! = =null) {
        // Reference value (obj/array) and not null
        if (Object.prototype.toString.call(obj[prop]) == '[object Object]') {
          / / object
          result[prop] = {}
        } else {
          / / array
          result[prop] = []
        }
        deepClone(obj[prop], result[prop])
      }
    } else {
      // The original value or func
      result[prop] = obj[prop]
    }
  }
  return result
}

/ / the second
function deepClone(target) {
  if (typeof(target) ! = ='object') {
    return target
  }
  var result
  if (Object.prototype.toString.call(target) == '[object Array]') {
    / / array
    result = []
  } else {
    / / object
    result = {}
  }
  for (var prop in target) {
    if (target.hasOwnProperty(prop)) {
      result[prop] = deepClone(target[prop])
    }
  }
  return result
}
Copy the code

7. Package anti-shake function.

function debounce(handle, delay) {
  var timer = null
  return function (e) {
    var _self = this,
        _args = arguments
    clearTimeout(timer)
    timer = setTimeout(function () {
        handle.apply(_self, _args)
    }, delay)
  }
}
/ / test
window.addEventListener('scroll', debounce(function(e){
  var top = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
  console.log('top', top)
}, 500))
Copy the code

Encapsulate the throttling function.

function throttle(handler, wait) {
  var lastTime = 0;
  return function (e) {
    var nowTime = new Date().getTime();
    if (nowTime - lastTime > wait) {
      handler.apply(this.arguments); lastTime = nowTime; }}}/ / test
document.addEventListener('click', throttle(function(e){
  console.log('You can only click once a second.')},1000))
Copy the code

9. Describe the complete life cycle of Vue in detailed words.

See the Vue full life cycle diagram

Talk about your understanding of MVC/MVP/MVVM.

Reference article: Diagrams of MVC, MVP, and MVVM
MVC

MVVM