前端面试问题

作者：蟹黄同学
链接：https://juejin.cn/post/6956360277185003556
来源：掘金

1. 箭头函数和普通函数的区别

1. 箭头函数和普通函数的样式不同，箭头函数语法更加简洁、清晰，箭头函数是=>定义函数,普通函数是function定义函数。
2. 箭头函数会捕获其所在上下文的 this 值，作为自己的 this 值，定义的时候就确定并固定了。
3. 箭头函数不能作为构造函数使用，也不能使用new关键字(因为箭头函数没有自己的this，它的this其实是继承了外层执行环境中的this，且this指向永远不会改变,作为构造函数其的this要是指向创建的新对象)。
4. 箭头函数没有自己的arguments。在箭头函数中访问arguments实际上获得的是外层局部（函数）执行环境中的值。
5. call、apply、bind 并不会影响其 this 的指向。
   f. 箭头函数没有原型prototype。
6. 箭头函数不能当作 Generator 函数，不能使用 yield 关键字。

---

2. var，let和const之间的区别

从以下三个方面说。
变量提升方面：var声明的变量存在变量提升，即变量可以在声明之前调用，值为undefined。
let和const不存在变量提升问题(注意这个‘问题’后缀，其实是有提升的，只不过是let和const具有一个暂时性死区的概念，即没有到其赋值时，之前就不能用)，即它们所声明的变量一定要在声明后使用，否则报错。

块级作用域方面：var不存在块级作用域,let和const存在块级作用域

声明方面：var允许重复声明变量,let和const在同一作用域不允许重复声明变量。其中const声明一个只读的常量(因为如此，其声明时就一定要赋值，不然报错)。一旦声明，常量的值就不能改变。

如何使const声明的对象内属性不可变，只可读呢？
如果const声明了一个对象，对象里的属性是可以改变的。

	const obj={name:'蟹黄'};
	obj.name='同学';
	console.log(obj.name);//同学

因为const声明的obj只是保存着其对象的引用地址，只要地址不变，就不会出错。

使用 Object.freeze(obj) 冻结obj,就能使其内的属性不可变,但它有局限，就是obj对象中要是有属性是对象，该对象内属性还能改变，要全不可变，就需要使用递归等方式一层一层全部冻结。

---

3. Bigint和Number的区别

Number 类型的数字有精度限制，数值的精度只能到 53 个二进制位（相当于 16 个十进制位,
正负9007199254740992），大于这个范围的整数，就无法精确表示了。

Bigint 没有位数的限制，任何位数的整数都可以精确表示。 但是其只能用于表示整数，且为了与Number进行区分，BigInt 类型的数据必须添加后缀n。BigInt 可以使用负号（-），但是不能使用正号（+）。

另外number类型的数字和Bigint类型的数字不能混合计算。

*12n+12;//报错

---

4. 基本数据类型和引用数据类型的区别

基本数据类型：

1. 基本数据类型的值是不可变的(重新赋值属于改变属性名的指向了，而不是对值进行操作),这里你就可以联想到，是不是所有关于字符串和数字的方法 都是带有 返回值 的，而不是改变原字符串或数字。
   例如

	let a='abc';
	a.split('');
	console.log(a);//abc

2. 基本数据类型不可以添加属性和方法，虽然不会报错，但也只是一瞬间转为了相应包装对象，操作完又转化回原基本数据类型，不会保存结果。
3. 基本数据类型的赋值是简单赋值,基本数据类型的比较是值的比较。
4. 基本数据类型是存放在栈区的

引用数据类型：

1. 引用类型的值是可以改变的,例如对象就可以通过修改对象属性值更改对象。
2. 引用类型可以添加属性和方法。
3. 引用类型的赋值是对象引用,即声明的变量标识符，存储的只是对象的指针地址。
4. 引用类型的比较是引用(指针地址)的比较。
5. 引用类型是同时保存在栈区和堆区中的,栈区保存变量标识符和指向堆内存的地址。

---

5. defer和async的区别

大家应该都知道在script标签内有这两个属性async和defer，例如< script src="./home.js" async defer >< /script >

defer： 中文意思是延迟。用途是表示脚本会被延迟到整个页面都解析完毕后再运行。因此，在 < script > 元素中设置defer属性，相当于告诉浏览器立即下载，但延迟执行。HTML5规范要求脚本按照它们出现的 先后顺序执行 ，因此第一个延迟脚本会先于第二个延迟脚本执行,但执行脚本之间 存在依赖，需要有执行的先后顺序时，就可以使用 defer,延迟执行。我觉得把script脚本放在body底部和defer差不多。

async： 中文意思是异步，这个属性与defer类似，都用于改变处理脚本的行为。同样与defer类似，async只适用于外部脚本文件，并告诉浏览器立即下载文件。但与defer不同的是，标记为async的脚本并不保证按照它们的先后顺序执行。
指定async属性的目的是不让页面等待两个脚本下载和执行，从而 异步加载页面 其他内容,这使用于之间 互不依赖 的各脚本。

看到这里，就能知道其的一些作用了

当网页交给浏览器的HTML解析器转变成一系列的词语（Token）。解释器根据词语构建节点（Node），形成DOM树。因为JavaScript代码可能会修改DOM树的结构，所以节点是JavaScript代码的话，就需要停止当前DOM树的创建，直到JavaScript的资源加载并被JavaScript引擎执行后才继续DOM树的创建。

这里就会产生 阻塞，出现 白屏问题 (白屏问题优化有很多方面，这里就脚本阻塞这一小点)，我们就可以使用 async和defer 属性来解决JavaScript脚本阻塞问题。

当然最稳妥的办法还是把script标签放置在body的底部，没有兼容性问题，不会因此产生白屏问题，没有执行顺序问题。

---

6. async await对比promise的优缺点

async/await优点：

1. 它做到了真正的串行的同步写法，代码阅读相对容易
2. 对于条件语句和其他流程语句比较友好，可以直接写到判断条件里面

function a() {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve(222)
      }, 2222)
    })
  };
async function f() {
    try {
      if ( await a() === 222) {
        console.log('yes, it is!') // 会打印
      }
    } catch (err) {
      // ...
    }
  }

3. 处理复杂流程时，在代码清晰度方面有优势

async/await缺点：

1. 无法处理promise返回的reject对象，要借助try…catch…
2. 用 await 可能会导致性能问题，因为 await 会阻塞代码，也许之后的异步代码并不依赖于前者，但仍然需要等待前者完成，导致代码失去了并发性。

	//promise
	Promise.all([ajax1(), ajax2()])

3. try…catch…内部的变量无法传递给下一个try…catch…,Promise和then/catch内部定义的变量，能通过then链条的参数传递到下一个then/catch，但是async/await的try内部的变量，如果用let和const定义则无法传递到下一个try…catch…，只能在外层作用域先定义好。

但async/await确确实实是解决了promise一些问题的。更加灵活的处理异步

promise的一些问题：

1. 一旦执行，无法中途取消，链式调用多个then中间不能随便跳出来
2. 错误无法在外部被捕捉到，只能在内部进行预判处理，如果不设置回调函数，Promise内部抛出的错误，不会反应到外部
3. Promise内部如何执行，监测起来很难，当处于pending状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）

---

8. 用框架和不用框架的区别，vue和react的区别

首先说说用框架和不用框架的区别：（以使用框架的角度看）
框架好处：

1. 使用框架工具写项目，在浏览器中代码依然是原生的HTML CSS JS。而框架帮开发者做了很多事情，开发者只关注业务逻辑就可以,极大的加快了开发速度。
   例如前端框架根本上是解决了 UI 与状态同步问题 ,频繁操作 DOM 性能低下.中间步骤过多,易产生 bug且不易维护,而且 心智要求较高不利于开发效率 的一系列阻碍

2. 组件化: 其中以 React 的组件化最为彻底,甚至可以到函数级别的原子组件,高度的组件化可以是我们的工程易于维护、易于组合拓展。

3. 天然分层: JQuery 时代的代码大部分情况下是面条代码,耦合严重,现代框架不管是 MVC、MVP还是MVVM 模式都能帮助我们进行分层，代码解耦更易于读写。

4. 生态: 现在主流前端框架都自带生态,不管是数据流管理架构还是 UI 库都有成熟的解决方案

框架缺点：

1. 代码臃肿，使用者使用框架的时候会将整个框架引入，而框架封装了很多功能和组件，使用者必须按照它的规则使用，而实际开发中很多功能和组件是用不到的。

2. 框架迭代更新速度非常快，需要时间熟悉它。

说说Vue和React的区别：
这里就说说其思想差异(毕竟面试时不一定就要把两个框架差异说清楚，理解核心就好)：

react整体是函数式的思想，把组件设计成纯组件，状态和逻辑通过参数传入，所以在react中，是单向数据流；

vue的思想是响应式的，也就是基于是数据可变的，通过对每一个属性建立Watcher来监听，当属性变化的时候，响应式的更新对应的虚拟dom。

---

9. cookies和session的区别

1. 存储位置不同: cookie的数据信息存放在客户端浏览器上，session的数据信息存放在服务器上。
2. 存储容量不同: 单个cookie保存的数据<=4KB，一个站点最多保存20个Cookie，而对于session来说并没有上限，但出于对服务器端的性能考虑，session内不要存放过多的东西，并且设置session删除机制。
3. 存储方式不同:cookie中只能保管ASCII字符串，并需要通过编码方式存储为Unicode字符或者二进制数据。session中能够存储任何类型的数据，包括且不限于string，integer，list，map等。
4. 隐私策略不同:cookie对客户端是可见的，别有用心的人可以分析存放在本地的cookie并进行cookie欺骗，所以它是不安全的，而session存储在服务器上，对客户端是透明的，不存在敏感信息泄漏的风险。
5. 有效期上不同:开发可以通过设置cookie的属性，达到使cookie长期有效的效果。session依赖于名为JSESSIONID的cookie，而cookie JSESSIONID的过期时间默认为-1，只需关闭窗口该session就会失效，因而session不能达到长期有效的效果。
6. 服务器压力不同:cookie保管在客户端，不占用服务器资源。对于并发用户十分多的网站，cookie是很好的选择。session是保管在服务器端的，每个用户都会产生一个session。假如并发访问的用户十分多，会产生十分多的session，耗费大量的内存。
7. 跨域支持上不同:cookie支持跨域名访问(二级域名是可以共享cookie的)。session不支持跨域名访问。

---

10. fetch,Ajax,axios区别

Ajax是什么： Ajax是（Asynchronous JavaScript and XML）的缩写。现在，允许浏览器与服务器通信而无须刷新当前页面的技术都被叫做Ajax。核心使用XMLHttpRequest对象。

axios是什么： axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范。

fetch是什么： Fetch被称为下一代Ajax技术,采用Promise方式来处理数据。是一种简洁明了的API，比XMLHttpRequest更加简单易用。

所以其主要区别是 axios、fetch请求后都支持Promise对象API，ajax只能用回调函数。.

---

12. TCP和UDP的区别

1. TCP 是面向连接的，udp 是无连接的即发送数据前不需要先建立链接。
2. TCP 提供可靠的服务。也就是说，通过 TCP 连接传送的数据，无差错，不丢失，不重复，且按序到达; UDP 尽最大努力交付，即不保证可靠交付。 并且因为 tcp 可靠，
   面向连接，不会丢失数据因此适合大数据量的交换。
3. TCP 是面向字节流，UDP 面向报文，并且网络出现拥塞不会使得发送速率降低（因
   此会出现丢包，对实时的应用比如 IP 电话和视频会议等）。
4. TCP 只能是 1 对 1 的，而UDP 支持 1 对 1,1 对多。
5. TCP 的首部较大为 20 字节，而 UDP 只有 8 字节。
6. TCP 是面向连接的可靠性传输，而 UDP 是不可靠的。

---

16. px,em,rem,vw,vh区别

1. px: px就是pixel的缩写，意为像素。px就是一张图片最小的一个点，一张位图就是千千万万的这样的点构成的。

2. em: 参考物是父元素的font-size，具有继承的特点。如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。

3. rem: css3新单位，相对于根元素html（网页）的font-size，不会像em那样，依赖于父元素的字体大小，而造成混乱。

4. vw: css3新单位，viewpoint width的缩写，视窗宽度，1vw等于视窗宽度的1%。
   举个例子：浏览器宽度1200px, 1 vw = 1200px/100 = 12 px。

5. vh: css3新单位，viewpoint height的缩写，视窗高度，1vh等于视窗高度的1%。
   举个例子：浏览器高度900px, 1 vh = 900px/100 = 9 px。

---

18. bind call apply区别

1. 三者都可以改变函数的this对象指向。
2. 三者第一个参数都是this要指向的对象，如果如果没有这个参数或参数为undefined或null，则默认指向全局window。
3. 三者都可以传参，但是apply是数组，而call是参数列表，且apply和call是一次性传入参数，而bind可以分为多次传入。
4. bind 改变this指向后不会立即执行，而是返回一个永久改变this指向的函数便于稍后调用； apply, call则是立即调用

---

22. localstorage、sessionstorage、cookie的区别

1. 相同点是都是保存在浏览器端、且同源的
2. cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递，而sessionStorage和localStorage不会自动把数据发送给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下
3. 存储大小限制也不同，cookie数据不能超过4K，同时因为每次http请求都会携带cookie、所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大
4. 数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭之前有效；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie：只在设置的cookie过期时间之前有效，即使窗口关闭或浏览器关闭
5. 作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localstorage在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的
6. webStorage(webstorage是本地存储，存储在客户端，包括localStorage和sessionStorage)支持事件通知机制，可以将数据更新的通知发送给监听者
7. webStorage的api接口使用更方便

---