面试高频的13个手写代码

1. promise.all

Promise.all = function(promises) { 
 return new Promise(function(resolve, reject) {    
 var result = []    
 var count = 0    
 var promiseNum = promises.length   
  if (promises.length === 0) resolve([])   
   for (let i = 0; i < promiseNum; i++) {        	Promise.resolve(promises[i]).then(function(val) {       
    count++       
     result[i] = val       
      if (count === promiseNum) resolve(result)     
       }, function(error){       
        reject(error)      
       })   
     }  
  })
}

2. promise.race

Promise.race = function(promises) {  
  return new Promise(function(resolve, reject){     
   for (var i; i < promises.length; i++) {        
     Promise.resolve(promises[i]).then(function(data){        
       resolve(data)      
     }, function(error) {        
        reject(error)      
    })    
   }  
 })
}

3. Object.create

_create = function(proto, properties) {
  // 新申明一个函数
  var F = function() {}
  // 将函数的原型指向proto
  F.prototype = proto
  // 返回这个函数的实力化对象
  var o = new F()
  if (typeof properties === 'object') {
      Object.defineProperties(o, properties)  
     }
     return o
  }

4. new

function _new(Con, ...args) {
//1.创建一个空的简单JavaScript对象(即car = {});
let obj = {}
// 2.将构造函数的作用域赋给新对象(因此this就指向了这个对象);
Object.setPrototypeOf(obj, Con.prototype)  
// obj.constructor.prototype === obj.__proto__ === Con.prototype  
// 3.相当于调用构造函数Car,并拿到构造函数返回的结果(执行构造函数中的代码(为这个新对象添加属性))  
let result = Con.apply(obj, args)
// 4. 如果构造函数返回的结果是object,则用构造函数的结果作为返回值;否则返回这个临时对象(也就是this),这个临时对象的原型链指向该构造函数
return result instanceof Object ? result : obj
}

5. map

Array.prototype.map = function(fn) {
  if(this===null || underfined){
    throw '输入不能为null或者underfinded'
  }   
  let res = []   
  for (let i=0; i<this.length; i++) { 
     res.push(fn(this[i], i, this))
   } 
   return res
}

6. filter

Array.prototype.filter = function(fn) {
  if(this===null || underfined){    
   throw '输入不能为null或者underfinded'  
  }  
  let res = []  
  for (let i = 0; i <this.length; i++) {  
   if (fn(this[i],i,this)) {    
     res.push(this[i])    
    }  
   }  
   return res
}

7. reduce

Array.prototype.reduce = function(fn, base) { 
 let initialArr = this;  
 let arr = initialArr.concat();  
 if(base) arr.unshift(base)  
 let newValue;  
 while(arr.length > 1) {   
  newValue = fn.call(null, arr[0], arr[1]);    
  arr.splice(0,2,newValue)  
 }  
 return newValue
}

8. 深拷贝

function deepCopy(obj, cache = new Map()) { 
 if (cache.get(obj)) {    
  return cache.get(obj)  
 }  
 if (typeof obj !== 'object') return obj  
 if (typeof obj === null) return obj  
 let cloneObj  
 if (obj instanceof Date) return new Date(obj.getTime())  
 if (obj instanceof RegExp) return new RegExp(obj.source, obj.flags)
 if (obj instanceof Array) {   
  cloneObj = []  
 } else {   
   const p = obj.constructor.prototype    
   cloneObj = Object.create(p) 
   // 将对象的原型链也复制,如果用{}代替p,则对象构造函数(constructor)都将为Object  
 }  
 cache.set(obj)  
 for (let key in obj) {  
   // 只克隆该属性,不克隆其原型属性    
   if (obj.hasOwnProperty(key)) {     
    cloneObj[key] = deepCopy(obj[key], cache)   
   } 
  }  
  return cloneObj
}

9. 防抖

function debounce(fn, delay) { 
 let ts = null  
 return function() {   
  clearTimeout(ts)    
  ts = setTimeout(() =>  {     
   fn.apply(this, arguments) // 在这个示例中是否用apply作用不大   
  }, delay)  
 }
}

10. 节流

function throttle(fn, delay) { 
 let ts = null  
 return function() {  
   if (!ts) {     
    ts = setTimeout(() => {      
      fn.call(this, ...arguments)        
      ts = null      
    }, delay)    
   }  
  }
}

11. call

Function.prototype.call = function(context) { 
 if(typeof this !== 'function') {  
  throw new TypeError(`${this} is not a function`)  
 }  
 context = context || window;  
 context.fn = this  
 const args = [...arguments].slice(1)  
 const result = context.fn(...args)  delete 
 context.fn  

 return result
}

12. apply

Function.prototype.apply = function(context) { 
 if (typeof this !== 'function') {  
   throw new TypeError(`${this} is not a function`)  
 }  
 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
}

13. bind

Function.prototype.bind = function(context) { 
 if (typeof this !== 'function') {  
   throw new TypeError(`${this} is not a function`)
 }  
 context = context || window  
 context.fn = this  
 const args = [...arguments].slice(1)  
 return function F() {  
  // 如果调用了new    
  if (this instanceof F) {  
    return new context.fn(...args, ...arguments)   
  }    
  return context.fn(args.concat(...arguments)) 
 }
}
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值