前端面试题之手写代码

实现
const add3 = add(1)(2)
const add8 = add3+5
const add10 = add(1,2,3)(4)
使用toString实现

// 用toString 实现
function add(...args) {
  const f = add.bind(null, ...args);

  f.toString = () => {
    return args.reduce((prev, current) => {
      return +prev + current;
    }, 0);
  };

  return f;
}

console.log(add(1, 2)); // 3
console.log(add(1)(2)); // 3
console.log(add(1)(2)(3)); // 6
console.log(add(1, 2, 3)(4)); // 10

手写ajax

debounce&throttle

new

apply,call,bind

promise

/**
 * 看下原本的promise
 */

 const promise = new Promise((resolve)=>{

 },(reject)=>{

 })

// 首先promise 是个类
// 其次promise 的状态有 pending，fulfill，reject
// 链式调用 then 特别注意的是 then方法是在 resolve或者reject 的执行之后才会执行，
// 也就是说then传入的需要存储起来，等待resolve之后才拿出来执行

class MyPromise {
  static pending = 'pending';
  static fulfilled = 'fulfilled';
  static rejected = 'reject';

  constructor(exector){
    // 初始化状态
    this.status = MyPromise.pending;
    this.value;
    this.reason;
    this.callbacks = [];
    exector(this._resolve.bind(this),this._reject.bind(this))
  }

  // 成功
  _resolve(value) {
    this.value = value;
    this.status = MyPromise.fulfilled;

    // 通知事件执行
    this.callbacks.forEach((cb => this._handler(cb)))
  }

  _reject(reason) {
    this.reason = reason;
    this.status = MyPromise.fulfilled;

    // 通知事件执行
    this.callbacks.forEach((cb => this._handler(cb)))
  }

  // 把then方法添加到一个队列当中
  then(onFulfilled,onRejected){
    this.callbacks.push({
      onFulfilled,
      onRejected
    })
  }

  _handler(callback){
    const {onFulfilled,onRejected} = callback;

    if(this.status === MyPromise.fulfilled && onFulfilled){
      onFulfilled(this.value)
    }
    if(this.status === MyPromise.rejected){
      onRejected(this.reason)
    }
  }
}

// 试试执行下
function fetchData(success) {
  return new MyPromise((resolve,reject)=>{
    setTimeout(() => {
      if(success){
        resolve('yes')
      }else{
        reject('error')
      }
    }, 1000);
  })
}

fetchData(true).then(data=>{
  console.log(data)
})
// 以上，实现了初始版本，但是还是不支持链式调用

添加链式调用

 const promise = new Promise((resolve)=>{

 },(reject)=>{

 })

class MyPromise {
  static pending = 'pending';
  static fulfilled = 'fulfilled';
  static rejected = 'reject';

  constructor(exector){
    // 初始化状态
    this.status = MyPromise.pending;
    this.value;
    this.reason;
    this.callbacks = [];
    exector(this._resolve.bind(this),this._reject.bind(this))
  }

  // 成功
  _resolve(value) {
    this.value = value;
    this.status = MyPromise.fulfilled;

    // 通知事件执行
    this.callbacks.forEach((cb => this._handler(cb)))
  }

  _reject(reason) {
    this.reason = reason;
    this.status = MyPromise.fulfilled;

    // 通知事件执行
    this.callbacks.forEach((cb => this._handler(cb)))
  }

  // 为了链式调用，传值，需要再返回一个promise
  then(onFulfilled,onRejected){
    return new MyPromise((nextResolve,nextReject)=>{
      this._handler({
        nextResolve,
        nextReject,
        onFulfilled,
        onRejected
      })
    })
  }

  _handler(callback){
    const {onFulfilled,onRejected,nextResolve,nextReject} = callback;

    // 还处于then当中
    if(this.status === MyPromise.pending){
      this.callbacks.push(callback)
      return 
    }
    if(this.status === MyPromise.fulfilled){
      const nextValue = onFulfilled ? onFulfilled(this.value) : undefined
      nextResolve(nextValue)
      return 
    }
    if(this.status === MyPromise.rejected){
      const nexReason = onRejected ? onRejected(this.reason) : undefined;
      nextReject(nexReason)
    }
  }
}

// 试试执行下
function fetchData(success) {
  return new MyPromise((resolve,reject)=>{
    setTimeout(() => {
      if(success){
        resolve('yes')
      }else{
        reject('error')
      }
    }, 1000);
  })
}

fetchData(true).then(data=>{
  console.log(data)
}).then(res=>{
  console.log(22)
})

函数柯里化

function curry(func){
  return function curriedFn(...args){
    if(args.length < func.length){
      return function(){
        return curriedFn(...args.concat(Array.from(arguments)))
      }
    }
    return func(...args)
  }
}

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

const curried = curry(getSum);

函数组合：需要满足结合律

function compose(...args){
  return function(value){
    return args.reduceRight((prev,next)=>{
      return next(prev)
    },value)
  }
}

const flowRight = (...args)=> (value) => args.reduceRight((prev,next)=> next(prev),value)