20道前端高频面试题（附答案）

代码输出结果

function runAsync (x) {
   
   
  const p = new Promise(r => setTimeout(() => r(x, console.log(x)), 1000))
  return p
}
Promise.race([runAsync(1), runAsync(2), runAsync(3)])
  .then(res => console.log('result: ', res))
  .catch(err => console.log(err))

输出结果如下：

1
'result: ' 1
2
3

then只会捕获第一个成功的方法，其他的函数虽然还会继续执行，但是不是被then捕获了。

数组去重

实现代码如下:

function uniqueArr(arr) {
   
   
  return [...new Set(arr)];
}

正向代理和反向代理的区别

• 正向代理：

客户端想获得一个服务器的数据，但是因为种种原因无法直接获取。于是客户端设置了一个代理服务器，并且指定目标服务器，之后代理服务器向目标服务器转交请求并将获得的内容发送给客户端。这样本质上起到了对真实服务器隐藏真实客户端的目的。实现正向代理需要修改客户端，比如修改浏览器配置。

• 反向代理：

服务器为了能够将工作负载分不到多个服务器来提高网站性能 (负载均衡)等目的，当其受到请求后，会首先根据转发规则来确定请求应该被转发到哪个服务器上，然后将请求转发到对应的真实服务器上。这样本质上起到了对客户端隐藏真实服务器的作用。
一般使用反向代理后，需要通过修改 DNS 让域名解析到代理服务器 IP，这时浏览器无法察觉到真正服务器的存在，当然也就不需要修改配置了。

正向代理和反向代理的结构是一样的，都是 client-proxy-server 的结构，它们主要的区别就在于中间这个 proxy 是哪一方设置的。在正向代理中，proxy 是 client 设置的，用来隐藏 client；而在反向代理中，proxy 是 server 设置的，用来隐藏 server。

写代码：实现函数能够深度克隆基本类型

浅克隆：

function shallowClone(obj) {
   
   
  let cloneObj = {
   
   };

  for (let i in obj) {
   
   
    cloneObj[i] = obj[i];
  }

  return cloneObj;
}

深克隆：

• 考虑基础类型
• 引用类型
  • RegExp、Date、函数 不是 JSON 安全的
  • 会丢失 constructor，所有的构造函数都指向 Object
  • 破解循环引用

function deepCopy(obj) {
   
   
  if (typeof obj === 'object') {
   
   
    var result = obj.constructor === Array ? [] : {
   
   };

    for (var i in obj) {
   
   
      result[i] = typeof obj[i] === 'object' ? deepCopy(obj[i]) : obj[i];
    }
  } else {
   
   
    var result = obj;
  }

  return result;
}

代码输出结果

function Dog() {
   
   
  this.name = 'puppy'
}
Dog.prototype.bark = () => {
   
   
  console.log('woof!woof!')
}
const dog = new Dog()
console.log(Dog.prototype.constructor === Dog && dog.constructor === Dog && dog instanceof Dog)

输出结果：true

解析： 因为constructor是prototype上的属性，所以dog.constructor实际上就是指向Dog.prototype.constructor；constructor属性指向构造函数。instanceof而实际检测的是类型是否在实例的原型链上。

constructor是prototype上的属性，这一点很容易被忽略掉。constructor和instanceof 的作用是不同的，感性地来说，constructor的限制比较严格，它只能严格对比对象的构造函数是不是指定的值；而instanceof比较松散，只要检测的类型在原型链上，就会返回true。

OPTIONS请求方法及使用场景

OPTIONS是除了GET和POST之外的其中一种 HTTP请求方法。

OPTIONS方法是用于请求获得由Request-URI标识的资源在请求/响应的通信过程中可以使用的功能选项。通过这个方法，客户端可以在采取具体资源请求之前，决定对该资源采取何种必要措施，或者了解服务器的性能。该请求方法的响应不能缓存。

OPTIONS请求方法的主要用途有两个：

• 获取服务器支持的所有HTTP请求方法；
• 用来检查访问权限。例如：在进行 CORS 跨域资源共享时，对于复杂请求，就是使用 OPTIONS 方法发送嗅探请求，以判断是否有对指定资源的访问权限。

代码输出结果

function runAsync (x) {
   
   
    const p = new Promise(r