十道前端面试题第【01】篇

摘要：本篇分享了10道面试题，3个算法题、封装Ajax、封装防抖函数、封装节流函数，数组去重方法、封装深复制方法、Vue生命周期、MVC/MVP/MVVM的对比。

面试题

1、封装一个方法，要求把给定的任意的 IP 字符串，转化成 32 位的二进制字符串。

示例： ip2binary('192.168.72.204')，返回 ‘11000000101010000100100011001100’。

function ip2binary(ip) {
  return ip.split('.').map(ele=>parseInt(ele).toString(2).padStart(8,'0')).join('')
}
// 测试
ip2binary('192.168.72.204')
// 11000000101010000100100011001100

2、求出现次数最多的字符、出现了多少次。

示例：给出任意一个纯字母组成的字符串，如，“helheloawodop”。求其中出现最多的字符和次数。

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
}

// 测试
var str = 'hellowefijwoeiwoeiwoeiwqeooawebcaewe'
calMax(str)

3、封装一个冒泡排序算法 sortMe()

冒泡算法

示例：sortMe([2, 1, 4, 3])， 返回[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;
}
// 测试
sortMe([2, 1, 4, 3]); // [1, 2, 3, 4]

4、用 Promise 封装 $.ajax，得到 request()

示例：request({url,method,data}).then().catch()

function request(url,type,data) {
  return new Promise(function(resolve,reject) {
    $.ajax({
      url,
      type,
      data,
      success: function(res) {
        // 数据过滤
        resolve(res.data)
      },
      error: function(err) {
        // 异常提示
        reject(err)
      }
    })
  })
}
// 测试
request('http://test.com/api/login','POST',{}).then().catch()

5、有哪些数组去重的方法？（至少3种）

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

function unique(arr) {
  var obj = {};
  return arr.filter(ele => {
    if (!obj[ele]) {
      obj[ele] = true;
      return true;
    }
  })
}

function unique(arr) {
  var result = [];
  arr.forEach(ele => {
    if (result.indexOf(ele) == -1) {
      result.push(ele)
    }
  })
  return result;
}

6、封装一个可以用于深拷贝（深复制）的方法。

function deepClone(obj, result) {
  var result = result || {};
  for (var prop in obj) {
    if (obj.hasOwnProperty(prop)) {
      if (typeof obj[prop] == 'object' && obj[prop] !== null) {
        // 引用值(obj/array)且不为null
        if (Object.prototype.toString.call(obj[prop]) == '[object Object]') {
          // 对象
          result[prop] = {};
        } else {
          // 数组
          result[prop] = [];
        }
        deepClone(obj[prop], result[prop])
      }
    } else {
      // 原始值或func
      result[prop] = obj[prop]
    }
  }
  return result;
}

function deepClone(target) {
  if (typeof (target) !== 'object') {
    return target;
  }
  var result;
  if (Object.prototype.toString.call(target) == '[object Array]') {
    // 数组
    result = []
  } else {
    // 对象
    result = {};
  }
  for (var prop in target) {
    if (target.hasOwnProperty(prop)) {
      result[prop] = deepClone(target[prop])
    }
  }
  return result;
}

7、封装防抖函数。

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)
  }
}
// 测试
window.addEventListener('scroll', debounce(function(e){
  var top = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
  console.log('top', top)
}, 500))

8、封装节流函数。

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;
    }
  }
}
// 测试
document.addEventListener('click', throttle(function(e){
  console.log('一秒内，只能点一次')
}, 1000))

9、用详细的文字，描写Vue完整的生命周期。

• 参见Vue完整生命周期图
  
  

10、谈一谈你对 MVC / MVP / MVVM 的理解。

• 参考文章： MVC、MVP 和 MVVM 的图示

MVC MVP MVVM

本周结束，下周继续！！！