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

355 阅读2分钟

大图

摘要:本篇分享了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)


let arr = [1, 1, 1, 2, 2, 3, 3, 3, 4, 4, 4];

function count(arr) {
  if (!arr?.length) return alert('数据格式非法错误');
  const obj = {}
  const newArr = arr.reduce((init, current) => {
    obj[current] = obj[current] ? obj[current] + 1 : 1
    if(!init.length || init[init.length - 1] !== current) init.push(current)
    return init;
  }, []);
  console.log('每一项计数', obj, '去重后', newArr);
}
count(arr)

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

2463290-f8b354075cdcc589.gif

示例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完整的生命周期。

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

2.webp

  • MVVM

3.webp