前端面试 ===＞【ES6】

禁止摆烂-才浅

已于 2024-03-18 20:29:44 修改

阅读量1.1k

点赞数 16

分类专栏：前端面试题文章标签：前端面试 es6

于 2024-03-13 20:06:55 首次发布

本文链接：https://blog.csdn.net/qq_48937489/article/details/136689991

版权

前端面试题专栏收录该内容

10 篇文章 1 订阅

订阅专栏

ES6 前端面试题总结

1. ES6新特性

新增声明命令let、const：
- let、const 都是块级作用域，以 {} 代码块作为作用域范围，只能在代码块里面使用；
- 不存在变量提升，只能先声明后使用，否则会报错，语法上称为 暂时性死区；
- 在同一代码块内，不允重复声明；
- const声明的是一个只读常量，在声明时就需要赋值；
模板字符串：
- 用一对反引号表示，它可以当作普通字符串使用，也可以用来定义多行字符串，也可以在字符串中嵌入变量、JS表达式或函数，需要写在${}中；
函数的扩展：
- 函数的默认参数：
  - ES6为函数提供了默认值，在定义函数时便初始化了这个参数，以便在参数没有被传递进去时使用；
- 箭头函数；
对象的扩展：
- 属性简写；
- Object.keys()；
- Object.values();
- Object.assign()；
for-of循环；
import 和 export：
- export用于对外输出本模块（一个文件可以理解为一个模块）变量的接口；
- import用于在一个模块中加载另一个含有 export 接口的模块；
- import命令只能在模块的顶部，不能在代码块中；
Promise 对象：
- Promise是异步变编程的一种解决方案，将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数，主要是为了解决异步处理回调地狱（也就是循环嵌套的问题）而产生的；
- Promise构造函数包含一个参数和一个带有reaolve（解析）和 reject（拒绝）两个参数的回调函数，在回调中执行一些操作（例如异步），如果一切正常，则调用resolve()，否则调用reject()；
- 对于已经实例化过的Promise对象可以调用Promise.then()方法，传递resolve和reject方法作为回调；
- Promise.then()方法接受两个参数：onResolve 和 onReject，分别代表当前Promise对象在成功或失败时；
解构赋值；
Set数据结构：
- 类似数组，所有的数据都是唯一的，没有重复的值。它本身是一个构造函数；
- Size()：数据的长度；
- Add()：添加某个值，返回Set结构本身；
- Delete()：删除某个值，返回一个布尔值，表示删除是否成功；
- Has()：查找某条数据，返回一个布尔值；
- Clear()：清除所哟成员，没有返回值；

2. ES6的继承和 ES5的继承有什么区别？

ES5：
- 继承是通过原型或者构造函数机制来实现的；
ES6：
- 用calss关键字定义类，里面有构造方法，类之间通过extends关键字实现，子类必须在constructor方法中调用super方法；

3. var、let、const有什么区别

var 声明变量可以重复声明，而 let 不可以重复声明；
var 是不受限于块级的，而 let 是受限于块级；
var 会与 window 相映射（会挂一个属性），而 let 不与 window 相映射；
var 可以在声明之前访问，而 let 有暂时性死区，在声明的上面访问变量会报错；
const 声明之后必须赋值，否则会报错；
const 定义不可变的量，改变了会报错；
const 和 let 一样不会与 window 相映射，支持块作用域，在声明的之前访问变量会报错；

4. module、exort、import有什么作用

module、exort、import是ES6用来统一前端模块化方案的设计思路和实现方案；
export、import的出现统一了前端模块化的实现方案，整合规范了浏览器/服务器的模块化方法，用来取代传统的AMD/CMD、requireJS、seaJS、commondJS等等一系列前端模块的不同实现方案，使前端模块化更加统一规范，JS也能更加实现大型的应用程序开发；
import引入的模块是静态加载（编译阶段加载）而不是动态加载（运行时加载）；
import 和 export 导出的接口值是动态绑定的，即通过接口，可以取到模块内部实时的值；

5. Set 和 Map 的区别？

Set：
- Set对象允许存储任何类型的唯一值；
- Set是值得合集，集合中的元素只能出现一次，即集合中的元素是唯一的；
- 存放的是地址不同的引用数据类型和值不同的基本数据类型；
- set.add()：添加数据；
- set.clear()：清空数据；
- set.delete()：删除数据；
- set.has()：查找数据；
Map：
- Map对象是键值对的集合，Map中的一个键只能出现一次，它在Map的集合中是独一无二的；
- 本质上是键值对的集合；
- 读：map.get()；
- 写：map.set()；
- 清空：map.clear()；
- 查：map.has()；
- 删除：map.delete()；
区别：
- 应用场景：
  - Set用于数组去重；
  - Map用于数据存储；
- Set：
  - 成员不能重复；
  - 只有键值没有键名，类似数组；
  - 可以遍历；
- Map：
  - 本质上是键值对的集合，类似集合；
  - 可以遍历，可以跟各种数据格式转换；

6. 扩展运算符为什么不能展开基本数据类型

在JS中，扩展运算符...确实可以用来 “展开” 数组 或 可迭代对象 的元素；
但 不能直接应用于基本数据类型，如数字、字符串或布尔值，这是因为基本数据类型不具备可迭代性，它们是不可分割的数据单体；
扩展运算符必须作用与能够返回多个值的结构上，而基本数据类型没有这样的内部结构；
如果你想复制基本数据类型的值，直接赋值即可，因为它们本身就是按值传递的；

7. setTimeout、Promise、async/await 的区别？

setTimeout的回调函数放在 宏任务队列 中，等到执行栈清空以后执行；
Promise.then()里的回调函数会放到 相应宏任务的微任务队列 中，等宏任务里面的同步代码执行完毕再执行；
async函数表示函数里面可能会有异步方法，await后面跟一个表达式；
await方法执行时，遇到await会立即执行表达式，然后把表达式后面的代码放到微任务队列中，让出执行栈让同步代码先执行；

8. 介绍一下Promise

Promise是解决异步编程导致的地狱回调问题（异步编程不方便）；
Promise是一个容器，里面保存着异步操作的结果；
从语法上来讲，Promise是一个对象，从他里面可以获取异步操作的结果；
特点：
- Promise的状态不受外界的影响:
  - Promise对象代表一个异步操作，有三种状态，pending、fulfilled、reject，只有异步操作的结果才可以决定Promise当前是哪一种状态，其他任何操作都无法改变这个状态；
- 一旦状态改变，就不会再变，任何时候都能获取异步操作的结果;
  - Promise对象的状态改变，只有两种可能：pending->fulfilled 或 pending ->rejected。只有这两种情况发生，状态就不会再变了，会一直保持这个结果。如果改变已经发生，你再对Promise对象添加回调函数，也会立即得到这个结果
缺点：
- Promise一旦创立，就会立即执行，无法中途取消；
- 如果不设置回调函数，Promise内部抛出的错误无法反应到外部；
- 当处于pending状态时，无法得到目前进展到哪一阶段；

9. Promise.all() 和 Promise.race() 的区别？

Promise.all()：
- 发起并行的Promise异步操作，等待所有的异步操作全部结束才会执行下一步操作；
- 等待机制；
- 注意：
  - Promise.all（）方法的参数可以不是数组，但必须具有 Iterator 接口，且返回的每个成员都是 Promise 实例；
Promise.race()；
- 发起并行的Promise异步操作，只要任何一个异步操作完成，就立即执行下一步操作；
- 赛跑机制；
all和race的入参都是数组；

10. Promise有几种状态，什么时候进入catch？

三种状态：
- pending ===> 进行中；
- fulfilled ===> 完成；
- reject ===> 失败；
当状态为 rejected 时，会进入catch；

11. Promsie 中的 reject 和 catch 处理上有什么区别？

reject用来抛出异常，catch用来处理异常；
reject是Promsie的方法，catch是Promise实例的方法；
reject后的东西一定会进入then中的第二个回调，如果then中没有第二个回调，则进入catch；
4。网络异常，会直接进入catch而不会进入then的第二个回调；

const promise = new Promise(function(resolve, reject) {
    // ... some code
    if (/* 异步操作成功 */){
        resolve(value);
    } else {
        reject(error);
    }
});
Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject。它们是两个函数，由 JavaScript 引擎提供，不用自己部署。
resolve函数的作用是，将Promise对象的状态从“未完成”变为“成功”（即从 pending 变为
resolved），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；reject函数的作用是，将Promise对象的状态从“未完成”变为“失败”（即从 pending 变为 rejected），在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。
Promise实例生成以后，可以用then方法分别指定resolved状态和rejected状态的回调函数。
----------------------------------------------------------------------
promise.then(function(value) {
    // success
}, function(error) {
    // failure
});
then方法可以接受两个回调函数作为参数。第一个回调函数是Promise对象的状态变为resolved时调用，第二个回调函数是Promise对象的状态变为rejected时调用。这两个函数都是可选的，不一定要提供。它们都接受Promise对象传出的值作为参数

12. new Promise是同步还是异步

new Promise 的构造函数本身是同步执行的。
当您创建一个新的Promise实例时，传递给Promise构造器的executor函数（即带有resolve和reject参数的那个函数）会立即、同步地执行；

13. promise的then链是同步还是异步

Promise的then方法返回的是一个新的Promise，并且其内部的回调函数是异步执行的。当Promise状态改变（即从pending变为fulfilled或rejected）时，与该状态改变关联的then或catch回调会作为一个微任务（microtask）添加到事件循环的任务队列中。
在JavaScript中，事件循环分为宏任务（macrotask）和微任务（microtask）两个队列，Promise的回调属于微任务队列。这意味着，在当前宏任务执行完毕（包括所有同步代码）后，但在下一次宏任务开始前，会先清空微任务队列。因此，虽然then链看起来像是同步代码的一部分，但实际上它的回调会在稍后异步执行。

14. promise的then链为什么是异步的

Promise的then链式异步执行的，这是由于 Promise 的设计目的和 JavaScript 运行环境（特别是事件循环机制）决定的；
微任务队列：
- 当一个 Promise 被 resolve 或 reject，并且 then 方法中有回调函数需要执行时，这些回调函数不会立即执行，而是被放入到微任务队列中等待;
- 这意味着它们会在当前脚本的所有同步代码执行完毕，以及当前宏任务（例如事件回调、定时器等）执行结束后，在下一个事件循环迭代时被执行；
异步流程控制：
- Promise 旨在提供一种更优雅的方式来管理异步操作的结果。如果 then 回调同步执行，那么它将无法实现真正的异步处理，既无法在异步操作完成后再执行相关逻辑；
避免阻塞主线程：
- 如果回调函数同步执行，可能导致后续的异步结果无法及时得到处理，从而阻塞了主线程；
- 通过将其置于微任务队列中，可以确保即便有大量 Promise 链式调用，也不会影响其他同步代码的执行及浏览器UI渲染；
一致性与可靠性：
- 无论 Promise 的状态改变是因为同步还是异步操作引起的，其回调始终遵循相同的异步执行模型，这为开发者提供了一致的预期行为，增强了程序的可读性和稳定性；
总的来说，Promise 的 then 链异步执行是为了适应并强化 JavaScript 异步编程模式，保证不会阻塞主线程，并且能够以有序的方式处理异步操作的结果；

15. ES6 和 commonjs 模块化规范的区别

CommonJS是同步加载，ES6是异步加载；
CommonJS模块输出的是一个值的拷贝，ES6模块输出的是值的引用；
- CommonJS：一旦输出一个值，模块内部的变化就影响不到这个值；
- ES6：JS引擎对脚本静态解析的时候，遇到模块的加载命令import，就会生成一个只读引用，等到脚本真正执行的时候，再根据这个只读引用，到被加载的那个模块中取值；
CommonJS模块是运行时加载，ES6模块是编译时输出接口：
- CommonJS加载的是一个对象，该对象只有在脚本运行完才会生成；
- ES6模块不是对象，它的对外接口只是一种静态定义，在代码静态解析阶段就会生成；

16. 介绍一下WebSocket

websocket是一种网络通信协议，是HTML5开始提供的一种在单个TCP连接上进行全双工通信的协议；
这个对比着HTTP协议来说，HTTP协议是一种无状态的、无连接、单向的应用层协议，通信请求只能由客户端发起，服务端对请求做出应答处理；
HTTP协议无法实现服务器主动向客户端发消息，webSocket链接允许客户端和服务器之间进行全双工通信，以便任一方都可以通过建立的连接将数据推送到另一端；
webSocket只需建立一次连接，就可以一直保持连接状态；
连接⽅式也⾮常简单，new WebSocket（后台地址）实例化⼀个socket对象,其中open建⽴连接，send可以发送消息，onmessage可以接收消息，close可以关闭连接；

17. websocket心跳机制

WebSocket心跳机制是一种用于检测和维持WebSocket长连接有效性的策略；
由于WebSocket连接在长时间无数据传输时，网络中间件可能会因为超时或其他原因而断开连接，即使实际的客户端与服务器之间的网络是正常的；
为了确保连接始终处于活跃状态并能及时发现断线情况，通常会采用以下方法来实现心跳机制：

1、定时发送心跳包：

前端可以设置一个定时器（如setInterval），每隔一段时间（例如30s）向服务器发送一个简单的心跳信息；

let socket = new WebSocket('ws://yourserver.com');

// 初始化心跳
function startHeartbeat() {
  setInterval(() => {
    if (socket.readyState === WebSocket.OPEN) {
      socket.send(JSON.stringify({ type: 'ping' }));
    }
  }, 30000); // 每30秒发送一次心跳
}

// 当WebSocket连接成功建立时启动心跳
socket.onopen = () => { startHeartbeat(); };

2、处理心跳响应：
- 服务器收到心跳请求后，应立即回应一个心跳确认消息；
- 前端监听到心跳回复后更新本地计时器或状态，表示连接正常；

3、检测连接异常：

设置一个心跳超时时间，在规定时间内如果没有收到服务器的心跳回应，则认为连接已断开，并执行重连逻辑；

let lastPongTime = Date.now(); // 记录最后一次收到pong的时间

// 监听接收到的消息
socket.onmessage = (event) => {
  const messageData = JSON.parse(event.data);
  if (messageData.type === 'pong') {
    lastPongTime = Date.now(); // 更新最后收到pong的时间
  }
};

// 定期检查是否超时未收到 pong
function checkHeartbeat() {
  const now = Date.now();
  if (now - lastPongTime > heartbeatTimeout) { // heartbeatTimeout 是你设定的超时时间阈值
    // 重新连接或关闭/创建新的WebSocket实例
    reconnect();
  }
}

setInterval(checkHeartbeat, heartbeatCheckInterval);

通过这样的机制，前端能够有效地维持WebSocket连接的稳定性，并在发生意外断连时快速做出反应；
同时，为了避免服务器造成过大压力，心跳消息一般设计的尽可能简洁；

禁止摆烂-才浅

关注

16
点赞
踩
24

收藏

觉得还不错? 一键收藏
1
评论
前端面试 ===＞【ES6】

Promise是解决异步编程导致的地狱回调问题（异步编程不方便）；Promise是一个容器，里面保存着异步操作的结果；从语法上来讲，Promise是一个对象，从他里面可以获取异步操作的结果；特点Promise的状态不受外界的影响:Promise对象代表一个异步操作，有三种状态，pending、fulfilled、reject，只有异步操作的结果才可以决定Promise当前是哪一种状态，其他任何操作都无法改变这个状态；一旦状态改变，就不会再变，任何时候都能获取异步操作的结果;
复制链接

扫一扫