2019前端面試系列之JS高頻手寫(xiě)代碼題
發(fā)布時(shí)間：2020-01-18 16:49:28 作者：奔跑的瓜牛 
我要評(píng)論
我要評(píng)論這篇文章主要介紹了2019前端面試系列之JS高頻手寫(xiě)代碼題，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
實(shí)現(xiàn) new 方法
/*
* 1.創(chuàng)建一個(gè)空對(duì)象
* 2.鏈接到原型
* 3.綁定this值
* 4.返回新對(duì)象
*/
// 第一種實(shí)現(xiàn)
function createNew() {
let obj = {} // 1.創(chuàng)建一個(gè)空對(duì)象
let constructor = [].shift.call(arguments)
// let [constructor,...args] = [...arguments]
obj.__proto__ = constructor.prototype // 2.鏈接到原型
let result = constructor.apply(obj, arguments) // 3.綁定this值
// let result = constructor.apply(obj, args)
return typeof result === 'object' ? result : obj // 4.返回新對(duì)象
}
function People(name,age) {
this.name = name
this.age = age
}
let peo = createNew(People,'Bob',22)
console.log(peo.name)
console.log(peo.age)
實(shí)現(xiàn) Promise
// 未添加異步處理等其他邊界情況
// ①自動(dòng)執(zhí)行函數(shù)，②三個(gè)狀態(tài)，③then
class Promise {
constructor (fn) {
// 三個(gè)狀態(tài)
this.state = 'pending'
this.value = undefined
this.reason = undefined
let resolve = value => {
if (this.state === 'pending') {
this.state = 'fulfilled'
this.value = value
}
}
let reject = value => {
if (this.state === 'pending') {
this.state = 'rejected'
this.reason = value
}
}
// 自動(dòng)執(zhí)行函數(shù)
try {
fn(resolve, reject)
} catch (e) {
reject(e)
}
}
// then
then(onFulfilled, onRejected) {
switch (this.state) {
case 'fulfilled':
onFulfilled(this.value)
break
case 'rejected':
onRejected(this.value)
break
default:
}
}
}
實(shí)現(xiàn)一個(gè) call 函數(shù)
// 思路：將要改變this指向的方法掛到目標(biāo)this上執(zhí)行并返回
Function.prototype.mycall = function (context) {
if (typeof this !== 'function') {
throw new TypeError('not funciton')
}
context = context || window
context.fn = this
let arg = [...arguments].slice(1)
let result = context.fn(...arg)
delete context.fn
return result
}
實(shí)現(xiàn)一個(gè) apply 函數(shù)
// 思路：將要改變this指向的方法掛到目標(biāo)this上執(zhí)行并返回
Function.prototype.myapply = function (context) {
if (typeof this !== 'function') {
throw new TypeError('not funciton')
}
context = context || window
context.fn = this
let result
if (arguments[1]) {
result = context.fn(...arguments[1])
} else {
result = context.fn()
}
delete context.fn
return result
}
實(shí)現(xiàn)一個(gè) bind 函數(shù)
// 思路：類(lèi)似call，但返回的是函數(shù)
Function.prototype.mybind = function (context) {
if (typeof this !== 'function') {
throw new TypeError('Error')
}
let _this = this
let arg = [...arguments].slice(1)
return function F() {
// 處理函數(shù)使用new的情況
if (this instanceof F) {
return new _this(...arg, ...arguments)
} else {
return _this.apply(context, arg.concat(...arguments))
}
}
}
更多介紹：bind方法的實(shí)現(xiàn)
淺拷貝、深拷貝的實(shí)現(xiàn)
淺拷貝：
// 1. ...實(shí)現(xiàn)
let copy1 = {...{x:1}}
// 2. Object.assign實(shí)現(xiàn)
let copy2 = Object.assign({}, {x:1})
深拷貝：
// 1. JOSN.stringify()/JSON.parse()
// 缺點(diǎn)：拷貝對(duì)象包含 正則表達(dá)式，函數(shù)，或者undefined等值會(huì)失敗
let obj = {a: 1, b: {x: 3}}
JSON.parse(JSON.stringify(obj))
// 2. 遞歸拷貝
function deepClone(obj) {
let copy = obj instanceof Array ? [] : {}
for (let i in obj) {
if (obj.hasOwnProperty(i)) {
copy[i] = typeof obj[i] === 'object' ? deepClone(obj[i]) : obj[i]
}
}
return copy
}
實(shí)現(xiàn)一個(gè)節(jié)流函數(shù)
// 思路：在規(guī)定時(shí)間內(nèi)只觸發(fā)一次
function throttle (fn, delay) {
// 利用閉包保存時(shí)間
let prev = Date.now()
return function () {
let context = this
let arg = arguments
let now = Date.now()
if (now - prev >= delay) {
fn.apply(context, arg)
prev = Date.now()
}
}
}
function fn () {
console.log('節(jié)流')
}
addEventListener('scroll', throttle(fn, 1000))
實(shí)現(xiàn)一個(gè)防抖函數(shù)
// 思路:在規(guī)定時(shí)間內(nèi)未觸發(fā)第二次，則執(zhí)行
function debounce (fn, delay) {
// 利用閉包保存定時(shí)器
let timer = null
return function () {
let context = this
let arg = arguments
// 在規(guī)定時(shí)間內(nèi)再次觸發(fā)會(huì)先清除定時(shí)器后再重設(shè)定時(shí)器
clearTimeout(timer)
timer = setTimeout(function () {
fn.apply(context, arg)
}, delay)
}
}
function fn () {
console.log('防抖')
}
addEventListener('scroll', debounce(fn, 1000))
instanceof 的原理
// 思路：右邊變量的原型存在于左邊變量的原型鏈上
function instanceOf(left, right) {
let leftValue = left.__proto__
let rightValue = right.prototype
while (true) {
if (leftValue === null) {
return false
}
if (leftValue === rightValue) {
return true
}
leftValue = leftValue.__proto__
}
}
柯里化函數(shù)的實(shí)現(xiàn)
柯里化函數(shù)的定義：將多參數(shù)的函數(shù)轉(zhuǎn)換成單參數(shù)的形式。
柯里化函數(shù)實(shí)現(xiàn)的原理：利用閉包原理在執(zhí)行可以形成一個(gè)不銷(xiāo)毀的作用域，然后把需要預(yù)先處理的內(nèi)容都儲(chǔ)存在這個(gè)不銷(xiāo)毀的作用域中，并且返回一個(gè)最少參數(shù)函數(shù)。
第一種：固定傳入?yún)?shù)，參數(shù)夠了才執(zhí)行
/**
* 實(shí)現(xiàn)要點(diǎn)：柯里化函數(shù)接收到足夠參數(shù)后，就會(huì)執(zhí)行原函數(shù)，那么我們?nèi)绾稳ゴ_定何時(shí)達(dá)到足夠的參數(shù)呢？
* 柯里化函數(shù)需要記住你已經(jīng)給過(guò)他的參數(shù)，如果沒(méi)給的話(huà)，則默認(rèn)為一個(gè)空數(shù)組。
* 接下來(lái)每次調(diào)用的時(shí)候，需要檢查參數(shù)是否給夠，如果夠了，則執(zhí)行fn，沒(méi)有的話(huà)則返回一個(gè)新的 curry 函數(shù)，將現(xiàn)有的參數(shù)塞給他。
*
*/
// 待柯里化處理的函數(shù)
let sum = (a, b, c, d) => {
return a + b + c + d
}
// 柯里化函數(shù)，返回一個(gè)被處理過(guò)的函數(shù)
let curry = (fn, ...arr) => { // arr 記錄已有參數(shù)
return (...args) => { // args 接收新參數(shù)
if (fn.length <= (...arr,...args)) { // 參數(shù)夠時(shí)，觸發(fā)執(zhí)行
return fn(...arr, ...args)
} else { // 繼續(xù)添加參數(shù)
return curry(fn, [...arr, ...args])
}
}
}
var sumPlus = curry(sum)
sumPlus(1)(2)(3)(4)
sumPlus(1, 2)(3)(4)
sumPlus(1, 2, 3)(4)
第二種：不固定傳入?yún)?shù)，隨時(shí)執(zhí)行
/**
* 當(dāng)然了，柯里化函數(shù)的主要作用還是延遲執(zhí)行，執(zhí)行的觸發(fā)條件不一定是參數(shù)個(gè)數(shù)相等，也可以是其他的條件。
* 例如參數(shù)個(gè)為0的情況，那么我們需要對(duì)上面curry函數(shù)稍微做修改
*/
// 待柯里化處理的函數(shù)
let sum = arr => {
return arr.reduce((a, b) => {
return a + b
})
}
let curry = (fn, ...arr) => { // arr 記錄已有參數(shù)
return (...args) => { // args 接收新參數(shù)
if (args.length === 0) { // 參數(shù)為空時(shí)，觸發(fā)執(zhí)行
return fn(...arr, ...args)
} else { // 繼續(xù)添加參數(shù)
return curry(fn, ...arr, ...args)
}
}
}
var sumPlus = curry(sum)
sumPlus(1)(2)(3)(4)()
sumPlus(1, 2)(3)(4)()
sumPlus(1, 2, 3)(4)()
參考鏈接：js如何用一句代碼實(shí)現(xiàn)函數(shù)的柯里化（ES6）
Object.create 的基本實(shí)現(xiàn)原理
// 思路：將傳入的對(duì)象作為原型
function create(obj) {
function F() {}
F.prototype = obj
return new F()
}
實(shí)現(xiàn)一個(gè)基本的 Event Bus
// 組件通信，一個(gè)觸發(fā)與監(jiān)聽(tīng)的過(guò)程
class EventEmitter {
constructor () {
// 存儲(chǔ)事件
this.events = this.events || new Map()
}
// 監(jiān)聽(tīng)事件
addListener (type, fn) {
if (!this.events.get(type)) {
this.events.set(type, fn)
}
}
// 觸發(fā)事件
emit (type) {
let handle = this.events.get(type)
handle.apply(this, [...arguments].slice(1))
}
}
// 測(cè)試
let emitter = new EventEmitter()
// 監(jiān)聽(tīng)事件
emitter.addListener('ages', age => {
console.log(age)
})
// 觸發(fā)事件
emitter.emit('ages', 18) // 18
實(shí)現(xiàn)一個(gè)雙向數(shù)據(jù)綁定
let obj = {}
let input = document.getElementById('input')
let span = document.getElementById('span')
// 數(shù)據(jù)劫持
Object.defineProperty(obj, 'text', {
configurable: true,
enumerable: true,
get() {
console.log('獲取數(shù)據(jù)了')
},
set(newVal) {
console.log('數(shù)據(jù)更新了')
input.value = newVal
span.innerHTML = newVal
}
})
// 輸入監(jiān)聽(tīng)
input.addEventListener('keyup', function(e) {
obj.text = e.target.value
})
詳細(xì)的實(shí)現(xiàn)見(jiàn)：這應(yīng)該是最詳細(xì)的響應(yīng)式系統(tǒng)講解了
實(shí)現(xiàn)一個(gè)簡(jiǎn)單路由
// hash路由
class Route{
constructor(){
// 路由存儲(chǔ)對(duì)象
this.routes = {}
// 當(dāng)前hash
this.currentHash = ''
// 綁定this，避免監(jiān)聽(tīng)時(shí)this指向改變
this.freshRoute = this.freshRoute.bind(this)
// 監(jiān)聽(tīng)
window.addEventListener('load', this.freshRoute, false)
window.addEventListener('hashchange', this.freshRoute, false)
}
// 存儲(chǔ)
storeRoute (path, cb) {
this.routes[path] = cb || function () {}
}
// 更新
freshRoute () {
this.currentHash = location.hash.slice(1) || '/'
this.routes[this.currentHash]()
}
}
實(shí)現(xiàn)懶加載
<ul> <li><img src="./imgs/default.png" data="./imgs/1.png" alt=""></li> <li><img src="./imgs/default.png" data="./imgs/2.png" alt=""></li> <li><img src="./imgs/default.png" data="./imgs/3.png" alt=""></li> <li><img src="./imgs/default.png" data="./imgs/4.png" alt=""></li> <li><img src="./imgs/default.png" data="./imgs/5.png" alt=""></li> <li><img src="./imgs/default.png" data="./imgs/6.png" alt=""></li> <li><img src="./imgs/default.png" data="./imgs/7.png" alt=""></li> <li><img src="./imgs/default.png" data="./imgs/8.png" alt=""></li> <li><img src="./imgs/default.png" data="./imgs/9.png" alt=""></li> <li><img src="./imgs/default.png" data="./imgs/10.png" alt=""></li> </ul>
let imgs = document.querySelectorAll('img')
// 可視區(qū)高度
let clientHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
function lazyLoad () {
// 滾動(dòng)卷去的高度
let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
for (let i = 0; i < imgs.length; i ++) {
// 圖片在可視區(qū)冒出的高度
let x = clientHeight + scrollTop - imgs[i].offsetTop
// 圖片在可視區(qū)內(nèi)
if (x > 0 && x < clientHeight+imgs[i].height) {
imgs[i].src = imgs[i].getAttribute('data')
}
}
}
// addEventListener('scroll', lazyLoad) or setInterval(lazyLoad, 1000)
rem 基本設(shè)置
// 提前執(zhí)行，初始化 resize 事件不會(huì)執(zhí)行
setRem()
// 原始配置
function setRem () {
let doc = document.documentElement
let width = doc.getBoundingClientRect().width
let rem = width / 75
doc.style.fontSize = rem + 'px'
}
// 監(jiān)聽(tīng)窗口變化
addEventListener("resize", setRem)
手寫(xiě)實(shí)現(xiàn) AJAX
// 1. 簡(jiǎn)單流程
// 實(shí)例化
let xhr = new XMLHttpRequest()
// 初始化
xhr.open(method, url, async)
// 發(fā)送請(qǐng)求
xhr.send(data)
// 設(shè)置狀態(tài)變化回調(diào)處理請(qǐng)求結(jié)果
xhr.onreadystatechange = () => {
if (xhr.readyStatus === 4 && xhr.status === 200) {
console.log(xhr.responseText)
}
}
// 2. 基于promise實(shí)現(xiàn)
function ajax (options) {
// 請(qǐng)求地址
const url = options.url
// 請(qǐng)求方法
const method = options.method.toLocaleLowerCase() || 'get'
// 默認(rèn)為異步true
const async = options.async
// 請(qǐng)求參數(shù)
const data = options.data
// 實(shí)例化
const xhr = new XMLHttpRequest()
// 請(qǐng)求超時(shí)
if (options.timeout && options.timeout > 0) {
xhr.timeout = options.timeout
}
// 返回一個(gè)Promise實(shí)例
return new Promise ((resolve, reject) => {
xhr.ontimeout = () => reject && reject('請(qǐng)求超時(shí)')
// 監(jiān)聽(tīng)狀態(tài)變化回調(diào)
xhr.onreadystatechange = () => {
if (xhr.readyState == 4) {
// 200-300 之間表示請(qǐng)求成功，304資源未變，取緩存
if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
resolve && resolve(xhr.responseText)
} else {
reject && reject()
}
}
}
// 錯(cuò)誤回調(diào)
xhr.onerror = err => reject && reject(err)
let paramArr = []
let encodeData
// 處理請(qǐng)求參數(shù)
if (data instanceof Object) {
for (let key in data) {
// 參數(shù)拼接需要通過(guò) encodeURIComponent 進(jìn)行編碼
paramArr.push(encodeURIComponent(key) + '=' + encodeURIComponent(data[key]))
}
encodeData = paramArr.join('&')
}
// get請(qǐng)求拼接參數(shù)
if (method === 'get') {
// 檢測(cè)url中是否已存在 ? 及其位置
const index = url.indexOf('?')
if (index === -1) url += '?'
else if (index !== url.length -1) url += '&'
// 拼接url
url += encodeData
}
// 初始化
xhr.open(method, url, async)
// 發(fā)送請(qǐng)求
if (method === 'get') xhr.send(null)
else {
// post 方式需要設(shè)置請(qǐng)求頭
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded;charset=UTF-8')
xhr.send(encodeData)
}
})
}
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
- 這篇文章主要介紹了Web前端面試筆試題總結(jié)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2020-02-18
- 這篇文章主要介紹了80道前端面試經(jīng)典選擇題匯總，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)2020-01-08
- 這篇文章主要介紹了面試官常問(wèn)的web前端問(wèn)題大全,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-01-03
- 這篇文章主要介紹了2019年百度前端工程師面試題(附答案)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-11-22
- 這篇文章主要介紹了2019年騰訊最新前端工程師面試題(附答案),小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-11-21
這篇文章主要介紹了第一次前端面試心得分享,很多朋友在面試過(guò)程真的不知所措，今天小編就把我的心得分享出來(lái)，需要的朋友可以參考下2020-02-20
