前端面试题23-34

深入理解 Promise 和 ECMAScript6 的新特性

23. 说说你对 Promise 的理解

Promise 是 ECMAScript6 引入的一种异步编程解决方案，用于处理异步操作。它表示一个尚未完成但最终会结束的操作，具有三种状态：pending（进行中）、fulfilled（已完成）和 rejected（已拒绝）。Promise 使得异步代码更具可读性和可维护性，避免了传统回调函数嵌套带来的“回调地狱”问题。通过链式调用 then() 和 catch() 方法，可以更加优雅地处理异步操作的结果和错误。

24. Promise 的构造函数

Promise 的构造函数接受一个执行函数（executor），该函数包含两个参数：resolve 和 reject。resolve 用于将 Promise 状态从 pending 变为 fulfilled，并传递结果；reject 用于将 Promise 状态从 pending 变为 rejected，并传递错误信息。示例如下：

const promise = new Promise((resolve, reject) => {
   
  // 异步操作
  if (/* 操作成功 */) {
   
    resolve(value);
  } else {
   
    reject(error);
  }
});

25. 谈一谈你了解 ECMAScript6 的新特性？

ECMAScript6（ES6）引入了许多新特性，包括但不限于：

• 块级作用域声明：let 和 const
• 箭头函数：=>，简化函数定义并自动绑定 this
• 模板字符串：使用反引号（`）和内嵌表达式${}`
• 解构赋值：从数组和对象中提取值并赋给变量
• 类：class，面向对象编程的新语法
• 模块：import 和 export，实现模块化
• 默认参数：为函数参数设置默认值
• Promise：用于处理异步操作
• Symbol：一种新的原始数据类型，表示独一无二的值

26. Object.is() 与原来的比较操作符 ===、== 的区别？

Object.is() 用于判断两个值是否严格相等，与 === 类似，但在以下两种情况下有区别：

• Object.is(NaN, NaN) 返回 true，而 NaN === NaN 返回 false
• Object.is(+0, -0) 返回 false，而 +0 === -0 返回 true

== 是宽松相等比较，会进行类型转换，而 === 是严格相等比较，不会进行类型转换。

27. 什么是 Babel

Babel 是一个 JavaScript 编译器，用于将现代的 ES6/ES2015+ 代码转换为向后兼容的 ES5 代码，以便在不支持最新标准的环境中运行。Babel 允许开发者使用最新的 JavaScript 特性，而不必担心浏览器兼容性问题。它支持插件和预设，能够扩展和定制编译过程。

28. Symbol 有什么用处

Symbol 是 ES6 引入的一种新的原始数据类型，表示独一无二的值。主要用途包括：

• 作为对象属性的键，避免属性名冲突
• 创建不可枚举的属性，隐藏内部实现细节
• 实现迭代器（iterator）接口

每个 Symbol 都是唯一的，即使使用相同的描述符创建，也不会相等。

29. 模块化

模块化是将代码分割成独立且可重用的模块的编程技术。ES6 提供了原生模块系统，通过 import 和 export 关键字实现模块的引入和导出。模块化有助于提高代码的可维护性和可读性，支持按需加载，减少命名冲突。

// module.js
export const name = 'Module';
export function greet() {
   
  console.log('Hello from module');
}

// main.js
import {
    name, greet } from './module.js';
greet(); // 输出 'Hello from module'

30. 箭头函数的特点

箭头函数是 ES6 引入的简洁函数定义方式，具有以下特点：

• 使用 => 语法
• 没有自己的 this，它会捕获上下文的 this 值
• 没有 arguments 对象，可以使用 rest 参数 ... 替代
• 无法通过 new 关键字调用，没有 prototype 属性

const add = (a, b) => a + b;

31. ES5 / ES6 的继承除了写法以外还有什么区别

除了写法上的差异，ES6 继承相较于 ES5 继承具有以下优势：

• 更加直观和简洁：使用 class 和 extends 关键字，使得继承关系更加清晰
• super 关键字：调用父类构造函数和方法，简化了继承逻辑
• 内建的类语法：避免了 ES5 中通过原型链实现继承的复杂性

32. 全局作用域中，用 const 和 let 声明的变量不在 window 上，那到底在哪里？如何去获取？

在全局作用域中，用 const 和 let 声明的变量不会成为 window 对象的属性。它们处于全局作用域中，但不属于 window 对象，可以直接通过变量名访问。

let a = 10;
const b = 20;
console.log(a); // 输出 10
console.log(b); // 输出 20

33. 介绍下 Set、Map、WeakSet 和 WeakMap 的区别

• Set：存储唯一值的集合，支持值的快速增删查操作。
• Map：键值对集合，键可以是任意类型，保持键值对插入顺序。
• WeakSet：只存储对象的集合，弱引用，不能遍历，没有 clear 方法。
• WeakMap：键值对集合，键必须是对象，弱引用，不能遍历，没有 clear 方法。

const set = new Set([1, 2, 3]);
const map = new Map([['key1', 'value1'], ['key2', 'value2']]);
const weakSet = new WeakSet();
const weakMap = new WeakMap();

34. Promise.all() 和 Promise.allSettled() 的比较

• Promise.all()：接受一个 Promise 对象的数组，返回一个新的 Promise。当所有 Promise 都 fulfilled 时，返回一个包含所有结果的数组；如果有一个 Promise 被 rejected，则返回第一个被拒绝的理由。
• Promise.allSettled()：接受一个 Promise 对象的数组，返回一个新的 Promise。当所有 Promise 都 settle（完成或拒绝）时，返回一个包含每个 Promise 结果对象的数组，每个结果对象包含 status 和 value 或 reason。

Promise.all([promise1, promise2])
  .then(results => console.log(results))
  .catch(error => console.error(error));

Promise.allSettled([promise1, promise2])
  .then(results => results.forEach(result => console.log(result)));

通过对 Promise 和 ECMAScript6 的深入理解，可以更好地应对现代 JavaScript 开发中的复杂异步操作和新特性，提升代码质量和开发效率。