前端面试高频20道手写题

数组去重

const arr = [1, 1, '1', 17, true, true, false, false, 'true', 'a', {
   }, {
   }];
// => [1, '1', 17, true, false, 'true', 'a', {}, {}]
复制代码

方法一：利用Set

const res1 = Array.from(new Set(arr));
复制代码

方法二：两层for循环+splice

const unique1 = arr => {
   
  let len = arr.length;
  for (let i = 0; i < len; i++) {
   
    for (let j = i + 1; j < len; j++) {
   
      if (arr[i] === arr[j]) {
   
        arr.splice(j, 1);
        // 每删除一个树，j--保证j的值经过自加后不变。同时，len--，减少循环次数提升性能
        len--;
        j--;
      }
    }
  }
  return arr;
}
复制代码

方法三：利用indexOf

const unique2 = arr => {
   
  const res = [];
  for (let i = 0; i < arr.length; i++) {
   
    if (res.indexOf(arr[i]) === -1) res.push(arr[i]);
  }
  return res;
}
复制代码

当然也可以用include、filter，思路大同小异。

方法四：利用include

const unique3 = arr => {
   
  const res = [];
  for (let i = 0; i < arr.length; i++) {
   
    if (!res.includes(arr[i])) res.push(arr[i]);
  }
  return res;
}
复制代码

方法五：利用filter

const unique4 = arr => {
   
  return arr.filter((item, index) => {
   
    return arr.indexOf(item) === index;
  });
}
复制代码

方法六：利用Map

const unique5 = arr => {
   
  const map = new Map();
  const res = [];
  for (let i = 0; i < arr.length; i++) {
   
    if (!map.has(arr[i])) {
   
      map.set(arr[i], true)
      res.push(arr[i]);
    }
  }
  return res;
}
复制代码

手写 Promise.race

该方法的参数是 Promise 实例数组, 然后其 then 注册的回调方法是数组中的某一个 Promise 的状态变为 fulfilled 的时候就执行. 因为 Promise 的状态只能改变一次, 那么我们只需要把 Promise.race 中产生的 Promise 对象的 resolve 方法, 注入到数组中的每一个 Promise 实例中的回调函数中即可.

Promise.race = function (args) {
   
  return new Promise((resolve, reject) => {
   
    for (let i = 0, len = args.length; i < len; i++) {
   
      args[i].then(resolve, reject)
    }
  })
}
复制代码

手写 apply 函数

apply 函数的实现步骤：

1. 判断调用对象是否为函数，即使我们是定义在函数的原型上的，但是可能出现使用 call 等方式调用的情况。
2. 判断传入上下文对象是否存在，如果不存在，则设置为 window 。
3. 将函数作为上下文对象的一个属性。
4. 判断参数值是否传入
5. 使用上下文对象来调用这个方法，并保存返回结果。
6. 删除刚才新增的属性
7. 返回结果

// apply 函数实现
Function.prototype.myApply = function(context) {
   
  // 判断调用对象是否为函数
  if (typeof this !== "function") {
   
    throw new TypeError("Error");
  }
  let result = null;
  // 判断 context 是否存在，如果未传入则为 window
  context = context || window;
  // 将函数设为对象的方法
  context.fn = this;
  // 调用方法
  if (arguments[1]) {
   
    result = context