手撕代码

1. 实现 Promise.all

   2. 需要返回一个 promise
   3. 接收的参数是一个promise或者非promise值组成的数组，用Promise.resolve统一处理
   4. 当所有任务完成的时候resolve结果数组
   5. 当有一个reject的时候整个函数reject
   6. 边界情况：传入的为空数组

   const promiseAll = (jobs) => {
     return new Promise((resolve, reject) => {
         if (!Array.isArray(jobs)) {
         reject(new Error('传入的参数不是数组'))
       }
       // 处理边界
       if (jobs.length === 0) {
         resolve([])
       }
       const result = []
       let count = 0
       for (let i = 0; i < jobs.length; i++) {
         Promise.resolve(jobs[i])
           .then(res => {
           // 保证答案顺序，如果是判断类型再push的话顺序会乱
             result[i] = res
             count++
             if (count === jobs.length) {
               resolve(result)
             }
             })
           .catch(e => {
             reject(e)
           })
       }
     })
   }

2. 实现 Promise.race

   8. 需要返回一个 Promise
   9. 返回的 Promise 根据输入的数据的第一个敲定而敲定

   const promiseRace = (jobs) => {
     return new Promise((resolve, reject) => {
       if (!Array.isArray(jobs)) {
         return reject(new Error("参数不是数组"));
       }
   
       for (let job of jobs) {
         Promise.resolve(job)
           .then((res) => {
             resolve(res);
           })
           .catch((e) => {
             reject(e);
           });
       }
     });
   };

3. 实现 Promise.any

4. 返回一个 promise 对象

5. 当任意一个promise敲定时，返回的promise对象敲定

6. 当可迭代参数里所有的都被拒绝时，返回的promise对象拒绝并返回一个错误数组

7. 当传入空数组时拒绝

const promiseAny = (jobs) => {
  return new Promise((resolve, reject) => {
    if (!Array.isArray(jobs)) {
      return reject(new Error("参数不是数组"));
    }

    // 边界情况
    if (jobs.length === 0) {
      return reject(new Error("All promises were rejected"));
    }

    let reasons = []
    let count = 0
    for (let i = 0; i < jobs.length; i++) {
      Promise.resolve(jobs[i])
        .then(res => {
          resolve(res)
        })
        .catch(e => {
          reasons[i] = e
          count++
          if (count === jobs.length) {
            reject(reasons)
          }
        })
    }
  });
};

15. 实现 Promise.allSettled

16. Promise.allSettled 总会返回一个兑现的 promise

17. 当入参都敲定（兑现或者拒绝）时，allSettled 返回的 promise 兑现

18. 返回值是一个{ status: ‘fufilled’ | ‘rejected’, reason?, value? }

function promiseAllSettled(jobs) {
  return new Promise((resolve, reject) => {
    if (!Array.isArray(jobs)) {
      return reject(new Error("参数不是数组"));
    }

    // 处理空数组
    if (jobs.length === 0) {
      return resolve([]);
    }

    const result = [];
    let count = 0;

    for (let i = 0; i < jobs.length; i++) {
      Promise.resolve(jobs[i])
        .then((res) => {
          result[i] = {
            status: 'fulfilled',
            value: res
          };
          count++;
          if (count === jobs.length) {
            resolve(result);
          }
        })
        .catch((e) => {
          result[i] = {
            status: 'rejected',
            reason: e
          };
          count++;
          if (count === jobs.length) {
            resolve(result);
          }
        });
    }
  });
}

19. 实现红绿灯机制：初始化绿灯，过4s后变成黄灯，过1s后变成红灯，过5s后变成绿灯，以此循环

const states = [
  { color: 'green', duration: 4 },
  { color: 'yellow', duration: 1 },
  { color: 'red', duration: 5 },
]

// sleep 实现
const sleep = (duration) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve()
    }, duration * 1000)
  })
}

const trafficLight = async () => {
  while(true) {
    for (const state of states) {
      const { color, duration } = state
      console.log(color)
      await sleep(duration)
    }
  }
}

trafficLight()

// then实现
const startLight = () => {
  let chian = Promise.resolve()
  const runCircle = () => {
    states.forEach(state => {
      chain = chain.then(() => changeTo(state))
    })
    chain.then(runCircle)
  }
}
startLight()
// 递归实现

20. 异步任务 compose 函数

const task1 = (pre) => new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(pre * 3)
  }, 1000)
})

const task2 = (pre) => new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(pre + 4)
  }, 1000)
})

const task3 = (pre) => new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(pre + 6)
  }, 1000)
})

const compose = (queue = [], initialValue) => {
  const initial = Promise.resolve(initialValue)
  return queue.reduce((prePromise, currTask) => {
    return prePromise.then(currTask)
  }, initial)
}

compose([task1, task2, task3], 2).then((res) => {
  console.log(res)
})

21. 不定参数柯里化

// 不定参数的柯里化实现
const sum = (...args) => {
  return args.reduce((total, curr) => {
    return total + curr
  }, 0)
}

const curry = (fn) => {
  let totalArgs = []
  const curried = (...args) => {
    if (args.length === 0) {
      const result = fn.apply(null, totalArgs)
      totalArgs = []
      return result
    } else {
      totalArgs.push(...args)
      return curried
    }
  }
  return curried
}
const curriedSum = curry(sum)

console.log(curriedSum(1)(2)(3)(4)())

22. 防抖 / 节流

// 防抖
const debounce = (fn, delay) => {
  let timer = null
  return function(...args) {
    const context = this
    if (timer) {
      clearTimeout(timer)
    }
    timer = setTimeout(() => {
      fn.apply(context, args)
    }, delay)
  }
}

// 节流 （非立即执行/延迟响应）
const throttle = (fn, frequent) => {
  let timer = null
  return function(...args) {
    const context = this
    if (timer) {
      return
    }
    timer = setTimeout(() => {
      fn.apply(context, args)
      timer = null
    }, frequent)
  }
}

// 节流 立即触发一次
const throttle_immediate = (fn, delay) => {
  let lastTime = 0
  return function(...args) {
    const context = this
    const currentTime = Date.now()
    if (Date.now - lastTime > delay) {
      fn.apply(context, args)
      lastTime = currentTime
    }
  }
}