JS手撕，經典面試題

引言

首先出這篇文章，一方面是爲了記錄鞏固我所學的知識，明白麪試的高頻考點。不鼓勵你們背題的，初衷是但願總結的一些面試題能幫助你查漏補缺，溫故知新。這些題並非所有，若是你還想看得更多，能夠訪問GitHub倉庫，目前已經有552道大廠真題了，涵蓋各種前端的真題，歡迎加入咱們一塊兒來討論~

函數

call

• 語法：fn.call(obj,...args)
• 功能：執行fn，使this爲obj，並將後面的n個參數傳給fn

Function.prototype.myCall = function (obj, ...args) {
  if (obj == undefined || obj == null) {
    obj = globalThis
  }
  obj.fn = this
  let res = obj.fn(...args)
  delete obj.fn
  return res
}
value = 2

let foo = {
  value: 1,
}

let bar = function (name, age) {
  console.log(name, age, this.value)
}

bar.myCall(foo, 'HearLing', 18) //HearLing 18 1
bar.myCall(null, 'HearLing', 18) //HearLing 18 2
複製代碼

apply

• 語法：fn.apply(obj,arr)
• 功能：執行fn，使this爲obj，並arr數組中元素傳給fn

Function.prototype.myAplly = function (obj, arr) {
  if (obj == undefined || obj == null) {
    obj = globalThis
  }
  obj.fn = this
  let res = obj.fn(...arr)
  delete obj.fn
  return res
}
value = 2

let foo = {
  value: 1,
}

let bar = function (name, age) {
  console.log(name, age, this.value)
}

bar.myAplly(foo, ['HearLing', 18]) //HearLing 18 1
bar.myAplly(null, ['HearLing', 18]) //HearLing 18 2
複製代碼

bind

• 語法：fn.bind(obj,...args)
• 功能：返回一個新函數，給fn綁定this爲obj，並制定參數爲後面的n個參數

Function.prototype.myBind = function (obj, ...args) {
  let that = this
  let fn = function () {
    if (this instanceof fn) {
      return new that(...args)
    } else {
      return that.call(obj, ...args)
    }
  }
  return fn
}

value = 2

let foo = {
  value: 1,
}

let bar = function (name, age) {
  console.log(name, age, this.value)
}
let fn = bar.myBind(foo, 'HearLing', 18)
//fn() //HearLing 18 1
let a = new fn() //HearLing 18 undefined
console.log(a.__proto__)//bar {}
複製代碼

區別call()/apply()/bind()

call(obj)/apply(obj)：:調用函數, 指定函數中的this爲第一個參數的值 bind(obj): 返回一個新的函數, 新函數內部會調用原來的函數, 且this爲bind()指定的第一參數的值

節流

• 理解：在函數屢次頻繁觸發時，函數執行一次後，只有大於設定的執行週期後纔會執行第二次
• 場景：頁面滾動（scroll）、DOM 元素的拖拽（mousemove）、搶購點擊（click）、播放事件算進度信息
• 功能：節流函數在設置的delay毫秒內最多執行一次（簡單點說就是，我上個鎖，無論你點了多少下，時間到了我才解鎖）

function throttle(fn, delay) {
  let flag = true
  return (...args) => {
    if (!flag) return
    flag = false
    setTimeout(() => {
      fn.apply(this, args)
      flag = true
    }, delay)
  }
}
複製代碼

防抖

• 理解：在函數頻繁觸發是，在規定之間之內，只讓最後一次生效
• 場景：搜索框實時聯想（keyup/input）、按鈕點擊太快，屢次請求（登陸、發短信）、窗口調整（resize）
• 功能：防抖函數在被調用後，延遲delay毫秒後調用，沒到delay時間，你又點了，清空計時器從新計時，直到真的等了delay這麼多秒。

function debounce(fn, delay) {
  let timer = null
  return (...args) => {
    clearTimeout(timer)
    timer = setTimeout(() => {
      fn.apply(this, args)
    }, delay)
  }
}
複製代碼

節流與防抖的區別

首先概念上的不一樣，解釋一下什麼是防抖節流；而後就是使用場景的不一樣； 經典區分圖：

curry

function mycurry(fn, beforeRoundArg = []) {
  return function () {
    let args = [...beforeRoundArg, ...arguments]
    if (args.length < fn.length) {
      return mycurry.call(this, fn, args)
    } else {
      return fn.apply(this, args)
    }
  }
}

function sum(a, b, c) {
  return a + b + c
}

let sumFn = mycurry(sum)
console.log(sumFn(1)(2)(3))//6

複製代碼

數組

數組去重

function unique(arr) {
  const res = []
  const obj = {}
  arr.foreach((item) => {
    if (obj[item] === undefined) {
      obj[item] = true
      res.push(item)
    }
  })
  return res
}
//其餘方法
//Array.from(new Set(array))
//[...new Set(array)]

複製代碼

數組扁平化

// 遞歸展開
function flattern1(arr) {
  let res = []
  arr.foreach((item) => {
    if (Array.isArray(item)) {
      res.push(...flattern1(item))
    } else {
      res.push(item)
    }
  })
  return res
}
複製代碼

對象

new

function newInstance (Fn, ...args) {
  const obj = {}
  obj.__proto__ = Fn.prototype
  const result = Fn.call(obj, ...args)
  // 若是Fn返回的是一個對象類型, 那返回的就再也不是obj, 而是Fn返回的對象不然返回obj
  return result instanceof Object ? result : obj
}
複製代碼

instanceof

function instance_of(left, right) {
  let prototype = right.prototype
  while (true) {
    if (left === null) {
      return false
    } else if (left.__proto__ === prototype) {
      return true
    }
    left = left.__proto__
  }
}
let a = {}
console.log(instance_of(a, Object))//true

複製代碼

對象數組拷貝

淺拷貝

// 淺拷貝的方法
//Object.assign(target,...arr)
// [...arr]
// Array.prototype.slice()
// Array.prototype.concate()

function cloneShallow(origin) {
  let target = {}
  for (let key in origin) {
    if (origin.hasOwnProperty(key)) {
      target[key] = origin[key]
    }
  }
  return target
}
let obj = {
  name: 'lala',
  skill: {
    js: 1,
    css: 2,
  },
}
let newobj = cloneShallow(obj)
newobj.name = 'zhl'
newobj.skill.js = 99
console.log(obj)//{ name: 'lala', skill: { js: 99, css: 2 } }
console.log(newobj)//{ name: 'zhl', skill: { js: 99, css: 2 } }

複製代碼

深拷貝

// 淺拷貝的方法
//JSON.parse(JSON.stringify(obj))
function deepClone(source, hashMap = new WeakMap()) {
  let target = new source.constructor()
  if (source == undefined || typeof source !== 'object') return source
  if (source instanceof Date) return source(Date)
  if (source instanceof RegExp) return source(RegExp)
  hashMap.set(target, source)//解決循環引用
  for (let key in source) {
    if (source.hasOwnProperty(key)) {
      target[key] = deepClone(source[key], hashMap)
    }
  }
  return target
}

let obj = {//應該考慮更復雜的數據
  name: 'lala',
  skill: {
    js: 1,
    css: 2,
  },
}

let newobj = deepClone(obj)
newobj.skill.js = 100
console.log(obj)//{ name: 'lala', skill: { js: 1, css: 2 } }
console.log(newobj)//{ name: 'lala', skill: { js: 99, css: 2 } }
複製代碼

最後的話

🚀🚀 更多基礎知識總結能夠⭐️關注我，後續會持續更新面試題總結~

⭐️⭐️ 最後祝各位正在準備秋招補招和春招的小夥伴面試順利~，收割offer，咱們一塊兒加油吧🤝！還有就是快春節了，提早祝你新年快樂~❤ ❤