关于前端:前端高频面试题三附答案

说一下JSON.stringify有什么毛病？

1.如果obj外面有工夫对象，则JSON.stringify后再JSON.parse的后果，工夫将只是字符串的模式，而不是对象的模式
2.如果obj里有RegExp(正则表达式的缩写)、Error对象，则序列化的后果将只失去空对象；
3、如果obj里有函数，undefined，则序列化的后果会把函数或 undefined失落；
4、如果obj里有NaN、Infinity和-Infinity，则序列化的后果会变成null
5、JSON.stringify()只能序列化对象的可枚举的自有属性，例如 如果obj中的对象是有构造函数生成的， 则应用JSON.parse(JSON.stringify(obj))深拷贝后，会抛弃对象的constructor；
6、如果对象中存在循环援用的状况也无奈正确实现深拷贝；

new 操作符

题目形容:手写 new 操作符实现

实现代码如下:

function myNew(fn, ...args) {
  let obj = Object.create(fn.prototype);
  let res = fn.call(obj, ...args);
  if (res && (typeof res === "object" || typeof res === "function")) {
    return res;
  }
  return obj;
}
用法如下：
// // function Person(name, age) {
// //   this.name = name;
// //   this.age = age;
// // }
// // Person.prototype.say = function() {
// //   console.log(this.age);
// // };
// // let p1 = myNew(Person, "lihua", 18);
// // console.log(p1.name);
// // console.log(p1);
// // p1.say();

事件总线（公布订阅模式）

class EventEmitter {
    constructor() {
        this.cache = {}
    }
    on(name, fn) {
        if (this.cache[name]) {
            this.cache[name].push(fn)
        } else {
            this.cache[name] = [fn]
        }
    }
    off(name, fn) {
        let tasks = this.cache[name]
        if (tasks) {
            const index = tasks.findIndex(f => f === fn || f.callback === fn)
            if (index >= 0) {
                tasks.splice(index, 1)
            }
        }
    }
    emit(name, once = false, ...args) {
        if (this.cache[name]) {
            // 创立正本，如果回调函数内持续注册雷同事件，会造成死循环
            let tasks = this.cache[name].slice()
            for (let fn of tasks) {
                fn(...args)
            }
            if (once) {
                delete this.cache[name]
            }
        }
    }
}

// 测试
let eventBus = new EventEmitter()
let fn1 = function(name, age) {
    console.log(`${name} ${age}`)
}
let fn2 = function(name, age) {
    console.log(`hello, ${name} ${age}`)
}
eventBus.on('aaa', fn1)
eventBus.on('aaa', fn2)
eventBus.emit('aaa', false, '布兰', 12)
// '布兰 12'
// 'hello, 布兰 12'

数组扁平化

数组扁平化就是将 [1, [2, [3]]] 这种多层的数组拍平成一层 [1, 2, 3]。应用 Array.prototype.flat 能够间接将多层数组拍平成一层：

[1, [2, [3]]].flat(2)  // [1, 2, 3]

当初就是要实现 flat 这种成果。

ES5 实现：递归。

function flatten(arr) {
    var result = [];
    for (var i = 0, len = arr.length; i < len; i++) {
        if (Array.isArray(arr[i])) {
            result = result.concat(flatten(arr[i]))
        } else {
            result.push(arr[i])
        }
    }
    return result;
}

ES6 实现：

function flatten(arr) {
    while (arr.some(item => Array.isArray(item))) {
        arr = [].concat(...arr);
    }
    return arr;
}

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

正向代理：

客户端想取得一个服务器的数据，然而因为种种原因无奈间接获取。于是客户端设置了一个代理服务器，并且指定指标服务器，之后代理服务器向指标服务器转交申请并将取得的内容发送给客户端。这样实质上起到了对实在服务器暗藏实在客户端的目标。实现正向代理须要批改客户端，比方批改浏览器配置。

反向代理：

服务器为了可能将工作负载分不到多个服务器来进步网站性能 (负载平衡)等目标，当其受到申请后，会首先依据转发规定来确定申请应该被转发到哪个服务器上，而后将申请转发到对应的实在服务器上。这样实质上起到了对客户端暗藏实在服务器的作用。
个别应用反向代理后，须要通过批改 DNS 让域名解析到代理服务器 IP，这时浏览器无奈察觉到真正服务器的存在，当然也就不须要批改配置了。

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

同步和异步的区别

同步指的是当一个过程在执行某个申请时，如果这个申请须要期待一段时间能力返回，那么这个过程会始终期待上来，直到音讯返回为止再持续向下执行。
异步指的是当一个过程在执行某个申请时，如果这个申请须要期待一段时间能力返回，这个时候过程会持续往下执行，不会阻塞期待音讯的返回，当音讯返回时零碎再告诉过程进行解决。

代码输入问题

function A(){
}
function B(a){
　　this.a = a;
}
function C(a){
　　if(a){
this.a = a;
　　}
}
A.prototype.a = 1;
B.prototype.a = 1;
C.prototype.a = 1;

console.log(new A().a);
console.log(new B().a);
console.log(new C(2).a);

输入后果：1 undefined 2

解析：

console.log(new A().a)，new A()为构造函数创立的对象，自身没有a属性，所以向它的原型去找，发现原型的a属性的属性值为1，故该输入值为1；
console.log(new B().a)，ew B()为构造函数创立的对象，该构造函数有参数a，但该对象没有传参，故该输入值为undefined;
console.log(new C(2).a)，new C()为构造函数创立的对象，该构造函数有参数a，且传的实参为2，执行函数外部，发现if为真，执行this.a = 2,故属性a的值为2。

对类数组对象的了解，如何转化为数组

一个领有 length 属性和若干索引属性的对象就能够被称为类数组对象，类数组对象和数组相似，然而不能调用数组的办法。常见的类数组对象有 arguments 和 DOM 办法的返回后果，函数参数也能够被看作是类数组对象，因为它含有 length属性值，代表可接管的参数个数。

常见的类数组转换为数组的办法有这样几种：

通过 call 调用数组的 slice 办法来实现转换

Array.prototype.slice.call(arrayLike);

通过 call 调用数组的 splice 办法来实现转换

Array.prototype.splice.call(arrayLike, 0);

通过 apply 调用数组的 concat 办法来实现转换

Array.prototype.concat.apply([], arrayLike);

通过 Array.from 办法来实现转换

Array.from(arrayLike);

代码输入后果

Promise.resolve().then(() => {
  return new Error('error!!!')
}).then(res => {
  console.log("then: ", res)
}).catch(err => {
  console.log("catch: ", err)
})

输入后果如下：

"then: " "Error: error!!!"

返回任意一个非 promise 的值都会被包裹成 promise 对象，因而这里的return new Error('error!!!')也被包裹成了return Promise.resolve(new Error('error!!!'))，因而它会被then捕捉而不是catch。

原型链指向

p.__proto__  // Person.prototype
Person.prototype.__proto__  // Object.prototype
p.__proto__.__proto__ //Object.prototype
p.__proto__.constructor.prototype.__proto__ // Object.prototype
Person.prototype.constructor.prototype.__proto__ // Object.prototype
p1.__proto__.constructor // Person
Person.prototype.constructor  // Person

代码输入问题

window.number = 2;
var obj = {
 number: 3,
 db1: (function(){
   console.log(this);
   this.number *= 4;
   return function(){
     console.log(this);
     this.number *= 5;
   }
 })()
}
var db1 = obj.db1;
db1();
obj.db1();
console.log(obj.number);     // 15
console.log(window.number);  // 40

这道题目看清起来有点乱，然而实际上是考查this指向的:

执行db1()时，this指向全局作用域，所以window.number 4 = 8，而后执行匿名函数，所以window.number 5 = 40；
执行obj.db1();时，this指向obj对象，执行匿名函数，所以obj.numer * 5 = 15。

迭代查问与递归查问

实际上，DNS解析是一个蕴含迭代查问和递归查问的过程。

递归查问指的是查问申请收回后，域名服务器代为向下一级域名服务器发出请求，最初向用户返回查问的最终后果。应用递归查问，用户只须要收回一次查问申请。
迭代查问指的是查问申请后，域名服务器返回单次查问的后果。下一级的查问由用户本人申请。应用迭代查问，用户须要收回屡次的查问申请。

个别咱们向本地 DNS 服务器发送申请的形式就是递归查问，因为咱们只须要收回一次申请，而后本地 DNS 服务器返回给我们最终的申请后果。而本地 DNS 服务器向其余域名服务器申请的过程是迭代查问的过程，因为每一次域名服务器只返回单次查问的后果，下一级的查问由本地 DNS 服务器本人进行。

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

浅克隆：

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;
}

Virtual Dom 的劣势在哪里？

Virtual Dom 的劣势」其实这道题目面试官更想听到的答案不是上来就说「间接操作/频繁操作 DOM 的性能差」，如果 DOM 操作的性能如此不堪，那么 jQuery 也不至于活到明天。所以面试官更想听到 VDOM 想解决的问题以及为什么频繁的 DOM 操作会性能差。

首先咱们须要晓得：

DOM 引擎、JS 引擎互相独立，但又工作在同一线程（主线程） JS 代码调用 DOM API 必须挂起 JS 引擎、转换传入参数数据、激活 DOM 引擎，DOM 重绘后再转换可能有的返回值，最初激活 JS 引擎并继续执行若有频繁的 DOM API 调用，且浏览器厂商不做“批量解决”优化，引擎间切换的单位代价将迅速积攒若其中有强制重绘的 DOM API 调用，从新计算布局、从新绘制图像会引起更大的性能耗费。

其次是 VDOM 和实在 DOM 的区别和优化：

虚构 DOM 不会立马进行排版与重绘操作
虚构 DOM 进行频繁批改，而后一次性比拟并批改实在 DOM 中须要改的局部，最初在实在 DOM 中进行排版与重绘，缩小过多DOM节点排版与重绘损耗
虚构 DOM 无效升高大面积实在 DOM 的重绘与排版，因为最终与实在 DOM 比拟差别，能够只渲染部分

JavaScript有哪些内置对象

全局的对象（ global objects ）或称规范内置对象，不要和 “全局对象（global object）” 混同。这里说的全局的对象是说在
全局作用域里的对象。全局作用域中的其余对象能够由用户的脚本创立或由宿主程序提供。

规范内置对象的分类：

（1）值属性，这些全局属性返回一个简略值，这些值没有本人的属性和办法。例如 Infinity、NaN、undefined、null 字面量

（2）函数属性，全局函数能够间接调用，不须要在调用时指定所属对象，执行完结后会将后果间接返回给调用者。例如 eval()、parseFloat()、parseInt() 等

（3）根本对象，根本对象是定义或应用其余对象的根底。根本对象包含个别对象、函数对象和谬误对象。例如 Object、Function、Boolean、Symbol、Error 等

（4）数字和日期对象，用来示意数字、日期和执行数学计算的对象。例如 Number、Math、Date

（5）字符串，用来示意和操作字符串的对象。例如 String、RegExp

（6）可索引的汇合对象，这些对象示意依照索引值来排序的数据汇合，包含数组和类型数组，以及类数组构造的对象。例如 Array

（7）应用键的汇合对象，这些汇合对象在存储数据时会应用到键，反对依照插入程序来迭代元素。
例如 Map、Set、WeakMap、WeakSet

（8）矢量汇合，SIMD 矢量汇合中的数据会被组织为一个数据序列。
例如 SIMD 等

（9）结构化数据，这些对象用来示意和操作结构化的缓冲区数据，或应用 JSON 编码的数据。例如 JSON 等

（10）管制形象对象
例如 Promise、Generator 等

（11）反射。例如 Reflect、Proxy

（12）国际化，为了反对多语言解决而退出 ECMAScript 的对象。例如 Intl、Intl.Collator 等

（13）WebAssembly

（14）其余。例如 arguments

总结： js 中的内置对象次要指的是在程序执行前存在全局作用域里的由 js 定义的一些全局值属性、函数和用来实例化其余对象的构造函数对象。个别常常用到的如全局变量值 NaN、undefined，全局函数如 parseInt()、parseFloat() 用来实例化对象的构造函数如 Date、Object 等，还有提供数学计算的单体内置对象如 Math 对象。

对AJAX的了解，实现一个AJAX申请

AJAX是 Asynchronous JavaScript and XML 的缩写，指的是通过 JavaScript 的异步通信，从服务器获取 XML 文档从中提取数据，再更新以后网页的对应局部，而不必刷新整个网页。

创立AJAX申请的步骤：

创立一个 XMLHttpRequest 对象。
在这个对象上应用 open 办法创立一个 HTTP 申请，open 办法所须要的参数是申请的办法、申请的地址、是否异步和用户的认证信息。
在发动申请前，能够为这个对象增加一些信息和监听函数。比如说能够通过 setRequestHeader 办法来为申请增加头信息。还能够为这个对象增加一个状态监听函数。一个 XMLHttpRequest 对象一共有 5 个状态，当它的状态变动时会触发onreadystatechange 事件，能够通过设置监听函数，来解决申请胜利后的后果。当对象的 readyState 变为 4 的时候，代表服务器返回的数据接管实现，这个时候能够通过判断申请的状态，如果状态是 2xx 或者 304 的话则代表返回失常。这个时候就能够通过 response 中的数据来对页面进行更新了。
当对象的属性和监听函数设置实现后，最初调用 sent 办法来向服务器发动申请，能够传入参数作为发送的数据体。

const SERVER_URL = "/server";
let xhr = new XMLHttpRequest();
// 创立 Http 申请
xhr.open("GET", url, true);
// 设置状态监听函数
xhr.onreadystatechange = function() {
  if (this.readyState !== 4) return;
  // 当申请胜利时
  if (this.status === 200) {
    handle(this.response);
  } else {
    console.error(this.statusText);
  }
};
// 设置申请失败时的监听函数
xhr.onerror = function() {
  console.error(this.statusText);
};
// 设置申请头信息
xhr.responseType = "json";
xhr.setRequestHeader("Accept", "application/json");
// 发送 Http 申请
xhr.send(null);

应用Promise封装AJAX：

// promise 封装实现：
function getJSON(url) {
  // 创立一个 promise 对象
  let promise = new Promise(function(resolve, reject) {
    let xhr = new XMLHttpRequest();
    // 新建一个 http 申请
    xhr.open("GET", url, true);
    // 设置状态的监听函数
    xhr.onreadystatechange = function() {
      if (this.readyState !== 4) return;
      // 当申请胜利或失败时，扭转 promise 的状态
      if (this.status === 200) {
        resolve(this.response);
      } else {
        reject(new Error(this.statusText));
      }
    };
    // 设置谬误监听函数
    xhr.onerror = function() {
      reject(new Error(this.statusText));
    };
    // 设置响应的数据类型
    xhr.responseType = "json";
    // 设置申请头信息
    xhr.setRequestHeader("Accept", "application/json");
    // 发送 http 申请
    xhr.send(null);
  });
  return promise;
}

说一说你用过的css布局

gird布局，layout布局，flex布局，双飞翼，圣杯布局等

说一下HTTP 3.0

HTTP/3基于UDP协定实现了相似于TCP的多路复用数据流、传输可靠性等性能，这套性能被称为QUIC协定。

流量管制、传输可靠性性能：QUIC在UDP的根底上减少了一层来保障数据传输可靠性，它提供了数据包重传、拥塞管制、以及其余一些TCP中的个性。
集成TLS加密性能：目前QUIC应用TLS1.3，缩小了握手所破费的RTT数。
多路复用：同一物理连贯上能够有多个独立的逻辑数据流，实现了数据流的独自传输，解决了TCP的队头阻塞问题。
疾速握手：因为基于UDP，能够实现应用0 ~ 1个RTT来建设连贯。

关于前端:前端高频面试题三附答案

说一下JSON.stringify有什么毛病？

new 操作符

事件总线（公布订阅模式）

数组扁平化

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

同步和异步的区别

代码输入问题

对类数组对象的了解，如何转化为数组

代码输入后果

原型链指向

代码输入问题

迭代查问与递归查问

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

Virtual Dom 的劣势在哪里？

JavaScript有哪些内置对象

对AJAX的了解，实现一个AJAX申请

说一说你用过的css布局

说一下HTTP 3.0

评论

发表回复取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

关于前端:前端高频面试题三附答案

说一下JSON.stringify有什么毛病？

new 操作符

事件总线（公布订阅模式）

数组扁平化

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

同步和异步的区别

代码输入问题

对类数组对象的了解，如何转化为数组

代码输入后果

原型链指向

代码输入问题

迭代查问与递归查问

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

Virtual Dom 的劣势在哪里？

JavaScript有哪些内置对象

对AJAX的了解，实现一个AJAX申请

说一说你用过的css布局

说一下HTTP 3.0

评论

发表回复 取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

发表回复取消回复