死磕javascript的手寫面試題

1.實作lodash的_.get方法

function _getValue(target, valuePath, defalutVal) {
  let valueType = Object.prototype.toString.call(target)
  console.log(valueType)
  // if (valueType == "[object Array]") {
    let paths = valuePath.replace(/\[(\d+)\]/, `.$1`).split('.')
    let result = target
    for(const path of paths){
      result = Object(result)[path]
      if(result == undefined){
        return defalutVal
      }
    }
    return result
}

測驗:
let obj = {
  a:{
    b:[
      {
        c:2
      }
    ]
  }
}

console.log(_getValue(obj, 'a.b[0].c')) //2

2.寫一個函式判斷兩個變數是否相等

function isEqual(res1, res2) {
  let a = getTypeOf(res1)
  let b = getTypeOf(res2)
  if(a !== b){
    return false
  }else if(a === 'base'){
    console.log('base',res1,res2)
    return res1 === res2
  } else if(a === 'array'){
    if(res1.length !== res2.length){
      console.log('array',res1,res2)
      return false
    }else{
      //遍歷陣列的值比較
      for(let i =0;i<res1.length;i++){
        if(!isEqual(res1[i],res2[i])){
          console.log('array',res1[i],res2[i])
          return false
        }
      }
      return true
    }
    return true
  }else if(a === 'object'){
    let ak = Object.keys(a)
    let bk = Object.keys(b)
    if(ak.length !== bk.length){
      return false
    }else{
      for(let o in res1){
        console.log(res1[o])
        if(!isEqual(res1[o],res2[o])){
          console.log('object',res1[o],res2[o])
          return false
        }
      }
      return true
    } 
  }else if(a === 'null' || a === 'undefined'){
    console.log('null')
    return true
  }else if(a === 'function'){
    console.log('function')
    return a === b
  }
}

function getTypeOf(res) {
  let type = Object.prototype.toString.call(res)
  switch (type) {
    case "[object Array]":
      return 'array'
    case "[object Object]":
      return 'object'
    case "[object Null]":
      return 'null'
    case "[object Undefined]":
      return 'undefined'
    case "[object Number]"||"[object String]"||"[object Boolean]":
      return 'base'
    case "[object Function]":
      return 'function'
    default:
      return 'typeError'
  }
}

測驗:
let a = {
  a:20,
  b:{
    c:30,
    d:[1,2,3]
  }
}
let b = {
  a:20,
  b:{
    c:30,
    d:[1,2,3]
  }
}
console.log(isEqual(a,b)) //true

3.陣列扁平化的方法

function _flat(arr){
  let result = []
  for(let i = 0;i<arr.length;i++){
    if(Array.isArray(arr[i])){
      result = result.concat(_flat(arr[i]))
    }else{
      result.push(arr[i])
    }
  }
  return result;
}

let arr = [1,2,[3,4,[5,6]]]
_flat(arr) //[1,2,3,4,5,6]

//es6
function _flat2(arr){
  while(arr.some(item=>Array.isArray(item))){
    arr = [].concat(...arr)
  }
  return arr
}

let arr = [1,2,[3,4,[5,6]]]
_flat2(arr) //[1,2,3,4,5,6]

4.深克隆

簡單深克隆，不考慮內置物件和函式

function deepClone(obj){
  if(typeof obj !== 'object') return
  let newObj = obj instanceof Array?[]:{}
  for(let key in obj){
      if(obj.hasOwnProperty(key)){
          newObj[key] = typeof obj[key] === 'object'?deepClone(obj[key]):obj[key]
      }
  }
  return newObj
}

復雜版深度克隆 考慮內置物件 比如date regexp 函式 以及物件的回圈參考的問題

const isObject = (target) => typeof target === "object"&& target !== null;

function deepClone2(target, map = new WeakMap()) {
  console.log(target)
    if (map.get(target)) {
        return target;
    }
    // 獲取當前值的建構式：獲取它的型別
    let constructor = target.constructor;
    // 檢測當前物件target是否與正則、日期格式物件匹配
    if (/^(RegExp|Date)$/i.test(constructor.name)) {
        // 創建一個新的特殊物件(正則類/日期類)的實體
        return new constructor(target);  
    }
    if (isObject(target)) {
        map.set(target, true);  // 為回圈參考的物件做標記
        const cloneTarget = Array.isArray(target) ? [] : {};
        for (let prop in target) {
            if (target.hasOwnProperty(prop)) {
                cloneTarget[prop] = deepClone(target[prop], map);
            }
        }
        return cloneTarget;
    } else {
        return target;
    }
}

5.陣列去重

filter去重

function _unique(arr){
  return arr.filter((item,index,array)=>{
    return array.indexOf(item) === index
  })
}

es6 Set

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

includes

function _unique3(arr){
  let newArr = []
  arr.forEach(item => {
      if(!newArr.includes(item)){
        newArr.push(item)
      }
  });
  return newArr
}

雙層for回圈

function _unique4(arr){
  for(let i =0;i<arr.length;i++){
    for(let j =i+1;j<arr.length;j++){
      if(arr[i] === arr[j]){
        arr.splice(j,1)
        j--
      }
    }
  }
  return arr
}

indexof

function _unique5(arr){
  let newArr = []
  for(let i = 0;i<arr.length;i++){
    if(newArr.indexOf(arr[i] === -1){
      newArr.push(arr[i])
    })
  }
  return newArr
}

6.判斷資料的型別

function _typeOf(obj){
  let res = Object.prototype.toString.call(obj).split(' ')[1]
  let mold = res.substring(0,res.length-1).toLowerCase()
  return mold
}

_typeOf（5） //number
_typeOf（'5'） //string

7.決議url引數為物件

function getParamsObj(params){
  let paramsStr = params.replace(/^.+\?(.+)/,"$1")
  let paramsArr = paramsStr.split('&')
  let paramsObj = {}

  for(let [key,value] of paramsArr.entries()){
      if(/=/.test(value)){
          let valArr = value.split('=')
          val = decodeURIComponent(valArr[1]) //解碼
          val = /^\d+$/.test(val)?parseFloat(val):val //判斷是不是數字
          if(paramsObj.hasOwnProperty(valArr[0])){
              paramsObj[valArr[0]] = [].concat(paramsObj[valArr[0]],val)
          }else{
              paramsObj[valArr[0]] = val
          }
      }  
      
  }
  return paramsObj
}

8.函式柯里化

//從一次傳入多個引數  編程多次呼叫每次傳入一個引數
function add(a, b, c, d, e) {
  return a + b + c + d + e
}


function curry(fn) {
   let dFn = (...args)=>{
     if(args.length == fn.length) return fn(...args)
     return (...arg)=>{
       return dFn(...args,...arg)
     }
   }
   return dFn
}
let addCurry = curry(add)
addCurry(1,2,3)(2)(3)

9.圖片懶加載

//添加了兩個功能
// 圖片加載完成后 移除事件監聽
// 加載完的圖片從imgList中移除
let imgList = [...document.querySelectorAll('img')]
let length = imgList.length

const imgLazyLoad = function () {
  let count = 0
  let deleteIndexList = []
  imgList.forEach((img, index) => {
    let rect = img.getBoundingClientRect() 
    //獲取元素到視圖的距離 top元素上邊到視圖上邊的距離 left元素左邊到視圖左邊的距離  right... bottom...
    if (rect.top < window.innerHeight) {
      // img.src = img.dataset.src
      img.src = img.getAttribute('data-src')
      deleteIndexList.push(index)
      count++
      if (count === length) {
        document.removeEventListener('scroll', imgLazyLoad)
      }
    }
  })
  imgList = imgList.filter((img, index) => !deleteIndexList.includes(index))
}
imgLazyLoad()

document.addEventListener('scroll', imgLazyLoad)

圖片懶加載:https://juejin.cn/post/6844903856489365518#heading-19

10節流防抖

函式防抖 觸發高頻事件 事件在n后執行，如果n秒鐘重復執行了 則時間重置

//簡易版
function debounce(func,wait){
  let timer; 
  return function(){
    let context = this;
    let args = arguments;
    console.log(timer)
    clearTimeout(timer)
    timer = (function(){
      func.apply(context,args)
    },wait)
  }

}
let btn = document.querySelector('button');
function aa(){
  console.log(111)
}
btn.onclick = debounce(aa,2000)

// 復雜版
// 1.取消節流防抖  
// 2.立即執行功能（點擊之后立即執行函式  但是 wait時間之后在點擊才能在立即執行）  
// 3.函式可能有回傳值
function debounce(func,wait,immediate){
  let timer,result;

  const debounce = function () {
    const context = this
    const args = arguments

    if(timer) clearTimeout(timer)
    if(immediate){
      console.log(timer)
      var callNow = !timer
      timer = setTimeout(function () {
          timer =null
      },wait)
      if(callNow) result = func.apply(context,args)
    }else{
      timer = setTimeout(function (params) {
        result = func.apply(context,args)
      },wait)
    }
    return result
  }

  debounce.cance = function () {
    clearTimeout(timer)
    timer=null
  }

  return debounce
  
}

let btn = document.querySelector('button');
function aa(){
  console.log(111)
}
btn.onclick = debounce(aa,2000,true)```

函式節流 觸發高頻事件 且n秒只執行一次

//使用時間戳
function  throttle(func,wait) {
  var context,args;
  var previous = 0

  return function () {
    context = this;
    args = arguments;
    let nowDate = +new Date()
    if(nowDate-previous>wait){
      func.apply(context,arguments)
      previous = nowDate
    }
  }
}

//定時器
function throttle(func,wait) {
  var context,args;
  var timer;
  return function(){
    context = this;
    args = arguments;
    if(!timer){
      timer = setTimeout(function () {
        timer = null;
        func.apply(context,args)
      },wait)
    }
  }

}

//組合版 options.leading 為true 立即執行一次 options.trailing為true  結束之后執行一次 默認為true
function throttle(func, wait ,options = {}) {
  var context, args, timer,result;
  var previous = 0;

  var later = function () {
    previous = options.leading === false ? 0 : new Date().getTime();
    timer = null;
    func.apply(context, args)
    if (!timer) context = args = null;
  }

  var throttle = function () {
    var now = new Date().getTime()
    if (!previous && options.leading === false) previous = now;
    context = this;
    args = arguments;

    //下次觸發 func 剩余的時間
    var remaining = wait - (now - previous);
    if (remaining <= 0 || remaining > wait) {
      // if (timer) {
      //   clearTimeout(timer);
      //   timer = null;
      // }
      previous = now;
      func.apply(context, args);
      if (!timer) context = args = null;
    } else if (!timer&& options.trailing !== false) {
      timer = setTimeout(later, remaining);
    }
  }

  throttled.cancel = function() {
    clearTimeout(timer);
    previous = 0;
    timer = null;
  }

  return throttle
}

function aa(e) {
  console.log(111)
  console.log(e)
}

let btn = document.querySelector('button');
btn.onclick = throttle(aa, 2000,{
  leading:false,
  trailing:true
})

參考資料 JavaScript專題之跟著 underscore 學節流防抖