十道前端面試題第【01】篇

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、談一談你對 MVC / MVP / MVVM 的理解。

• 參考文章： MVC、MVP 和 MVVM 的圖示

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、用詳細的文字，描寫Vue完整的生命週期。

• 參見Vue完整生命週期圖
  
  

7、求出現次數最多的字符、出現了多少次。

示例：給出任意一個純字母組成的字符串，如，“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)

8、封裝一個可以用於深拷貝（深複製）的方法。

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;
}

9、封裝防抖函數。

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))

10、封裝節流函數。

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))

本週結束，下週繼續！！！