前端面试100问（11-21）

 内容的起源来自于掘金上的一篇文章——《前端 100 问：能搞懂 80% 的请把简历给我》

木易杨前端进阶，《前端 100 问：能搞懂 80% 的请把简历给我》

 

系列笔记：

• 前端面试100问（1-10）
• 前端面试100问（11-21）

 

题11：算法手写题

已知如下数组：

var arr = [[1,2,2],[3,4,5,5],[6,7,8,9,[11,12,[12,13,[14]]]],10];

编写一个程序将数组扁平化并去除其中重复部分数据，最终得到一个升序且不重复的数组。

答： 参见 https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/8

这道题稍微有点复杂，即使了解了其中的知识点，想要完全独立手写一个方法出来还是很难。跳过。

 

题12：JS异步解决方案的发展历程以及优缺点

答：每日技术：JavaScript异步编程的4种方法

 

题13：Promise构造函数是同步执行还是异步执行，那么then方法呢？

答：经过前面几个问题的学习，这道题我可以答一下了。我的理解是Promise里面的代码是立即执行的，相当于是同步，resolve结果后，then()里的代码时异步的。

 

题14：情人节福利，如何实现一个new?

答：这道题到底在考什么？涉及到哪些知识点呢？懵~

看《每日壹题及答案汇总》讨论区Hiker9527的答案：

先理清楚new关键字调用函数的具体过程，那么写出来就很清楚了

1. 首先创建一个空的对象，空对象的__proto__属性指向构造函数的原型对象
2. 把上面创建的空对象赋值构造函数内部的this，用构造函数内部的方法修改空对象
3. 如果构造函数返回一个非基本类型的值，则返回这个值，否则上面创建的对象。

function _new(fn, ...arg) {
    var obj = Object.create(fn.prototype)
    const result = fn.apply(obj, ...arg)
    return Object.prototype.toString.call(result) == '[object Object]' ? result : obj;
}

 

mongonice的回答：

new运算符都做了哪些操作呢？

1. 创建了一个新对象（是Object类型的数据）
2. 将this指向新对象
3. 将创建的对象的原型指向构造函数的原型
4. 返回一个对象（如果构造函数本身有返回值且是对象类型，就返回本身的返回值，如果没有才返回新对象）

function mynew() {
    // 1.创建一个新对象
    const obj = Object.create({});  // 也可以写成 const obj = {}
    // 2.将this指向该对象
    let Fn = [].shift.call(arguments);  // 把构造函数分离出来
    let returnObj = Fn.apply(obj, arguments); // 通过apply将this指向由Fn变为obj

    // 3.将新对象的原型指向构造函数的原型
    obj.__proto__ = Fn.prototype;

    // 4.返回对象（如果构造函数有返回对象，那么就返回构造函数的对象，如果没有就返回新对象）
    return Object.prototype.toString.call(returnObj) == '[object Object]' ? returnObj : obj;
}

 

题15：简单讲解一下http2的多路复用

ZodiacSyndicate的回答：

HTTP2采用二进制格式传输，取代了HTTP1.x的文本格式，二进制格式解析更高效

多路复用代替了HTTP1.x的序列和阻塞机制，所有的相同域名请求都通过同一个TCP连接并发完成。

在HTTP1.x中，并发多个请求需要多个TCP连接，浏览器为了控制资源会有6-8个TCP连接的限制。

在HTTP2中同域名下所有通信都在单个连接上完成，消除了因多个TCP连接而带来的延时和内存消耗。单个连接上可以并行交错的请求和响应，之间互不干扰。

 

sisterAn的回答：

在HTTP/1中，每次请求都会建立一次HTTP连接，也就是我们常说的3次握手和4次挥手，这个过程在一次请求过程中占用了相当长的时间，即使开启了Keep-Alive,解决了多次连接的问题，但是依然有两个效率上的问题：

1.串行的文件传输。当请求a文件时，b文件只能等待，等待a连接到服务器、服务器处理文件、服务器返回文件这三个步骤。我们假设这三步用时都是1秒，那么a文件用时为3秒，b文件传输完成用时为6秒。依此类推。

2.连接数过多。我们假设Apache设置了最大并发数为300，因为浏览器限制，浏览器发起的最大请求数为6，也就是服务器能承载的最高并发为50，当第51个人访问时，就需要等待前面某个请求处理完成。

HTTP2的多路复用就是为了解决上述的两个性能问题。

在HTTP2中，有两个非常重要的概念，分别是帧（frame）和流（stream）。

帧代表着最小的数据单位，每个帧会标识出该帧属于哪个流，流也就是多个帧组成的数据流。

多路复用，就是在一个TCP连接中可以存在多条流。换句话说，也就是可以发送多个请求，对端可以通过帧中的标识知道属于哪个请求。通过这个技术，可以避免HTTP旧版本中的队头阻塞问题，极大的提高传输性能。

 

题16：谈谈你对TCP三次握手和四次握手的理解

答：每日技术：读《作为前端的你了解多少tcp的内容》笔记

 

插播一提

题60：已知如下代码，如何修改才能让图片宽度为300px?注意下面代码不可修改。

<img src="1.jpg" style="width:480px!important;" />

答：

方法一：css方法max-width:300px;覆盖样式 （亲测有效）

max-width: 300px;

方法二：transform: scale(0.625); 按比例缩放图片（亲测有效）

transform: scale(0.625);

方法三：js方法

document.getElementsByTagName("img")[0].setAttribute("style", "width:300px!important;");

方法四：

box-sizing: border-box;
padding: 90px;

 

 

题17：A、B机器正常连接后，B机器突然重启，问A此时处于TCP什么状态？（超纲题）

答：因为B会在重启之后进入TCP状态机的listen状态，只要当A重新发送一个数据包，B端应该会主动发送一个带rst位的重置包来进行连接重置，所以A应该在syn_sent状态。

 

题18、19 React相关，先跳过

 

题20：介绍下npm模块安装机制，为什么输入npm install就可以自动安装对应的模块？

答：每日技术：npm模块安装机制

 

题21：有以下3个判断数组的方法，请分别介绍它们之间的区别和优劣

Object.prototype.toString.call()
instanceof
Array.isArray()

答：

1.Object.prototype.toString.call()

每一个继承Object的对象都有toString方法，如果toString方法没有重写的话，会返回[object type]，其中type为对象的类型，但当除了Object类型的对象外，其他类型直接使用toString方法时，会直接返回都是内容的字符串，所以我们需要使用call或者apply方法来改变toString方法的执行上下文。

const an = ['Hello', 'An']

an.toString();  // "Hello,An"
Object.prototype.toString.call(an);  // "[object Array]"

这种方法对于所有基本的数据类型都能进行判断，即使是null和undefined

Object.prototype.toString.call('An') // "[object String]"
Object.prototype.toString.call(1) // "[object Number]"
Object.prototype.toString.call(Symbol(1)) // "[object Symbol]"
Object.prototype.toString.call(null) // "[object Null]"
Object.prototype.toString.call(undefined) // "[object Undefined]"
Object.prototype.toString.call(function(){}) // "[object Function]"
Object.prototype.toString.call({name: 'An'}) // "[object Object]"

Object.prototype.toString.call()常用于判断浏览器内置对象时。

 

2.instanceof

instanceof的内部机制是通过判断对象的原型链中是不是能找到类型的prototype

但instanceof只能用来判断对象类型，原始类型不可以。并且所有对象类型instanceof Object都是true

[] instanceof Object; // true

 

3.Array.isArray() 用来判断对象是否为数组

Array.isArray优于instanceof，因为Array.isArray能检测iframes

var iframe = document.createElement('iframe')
// undefined
document.body.appendChild(iframe)
<iframe>​#document</iframe>​
xArray = window.frames[window.frames.length - 1].Array;
// ƒ Array() { [native code] }
var arr = new xArray(1, 2, 3);
// undefined
Array.isArray(arr)
// true
arr instanceof Array
// false

Array.isArray的缺点是在老浏览器需要polyfill

假如不存在Array.isArray()，则在其他代码之前运行下面的代码将创建该方法。

if (!Array.isArray) {
    Array.isArray = function(arg) {
        return Object.prototype.toString.call(arg) === '[object Array]'
    }
}