js基础知识

1. ES6

1.1. promise.all、promise.allSettled、promise.race对比

Promise.all(), Promise.allSettled(), 和 Promise.race() 都是 JavaScript 中用于处理多个 Promise 的实用函数，但它们各自有不同的行为和用途。下面是对这三个函数的对比：

1. Promise.all()

• 功能：Promise.all() 接收一个 Promise 数组作为参数，返回一个新的 Promise。这个新的 Promise 在所有输入的 Promise 都成功解决时才会解决，返回一个数组，其中的元素是各个 Promise 解决后的值。
• 行为：如果输入的任何一个 Promise 被拒绝 (rejected)，那么 Promise.all() 返回的 Promise 会立即被拒绝，且不会等待其他 Promise 完成。这意味着 Promise.all() 实际上是有“短路”行为的。
• 使用场景：当你需要确保一系列异步操作全部成功完成时使用，例如，从多个 API 端点获取数据，且只有当所有数据都可用时才继续后续操作。

2. Promise.allSettled()

• 功能：Promise.allSettled() 同样接收一个 Promise 数组作为参数，但与 Promise.all() 不同的是，它会等待所有的 Promise 完成，无论它们是解决还是被拒绝。
• 行为：它返回一个 Promise，这个 Promise 在所有输入的 Promise 都已完成（无论是解决还是被拒绝）时解决，返回一个数组，其中的元素是各个 Promise 的最终状态对象（包括 status 和 value 或 reason）。
• 使用场景：当你需要收集一系列异步操作的所有结果，无论它们是否成功，以便进行统一处理或错误管理时使用。

3. Promise.race()

• 功能：Promise.race() 接收一个 Promise 数组作为参数，返回一个新的 Promise，这个新的 Promise 会在输入的任意一个 Promise 解决或被拒绝时立即解决或被拒绝。
• 行为：它不关心其他 Promise 是否完成，只关注第一个完成的 Promise。如果第一个完成的 Promise 被解决，那么 Promise.race() 返回的 Promise 也会被解决；如果被拒绝，同样如此。
• 使用场景：当你需要在多个异步操作中选择最快完成的那个，或者有一个超时机制时使用。例如，你可能想在一定时间内获取数据，但如果超时则放弃尝试。

概念总结

• Promise.all() 用于等待所有 Promise 成功解决。
• Promise.allSettled() 用于等待所有 Promise 结束，无论结果如何。
• Promise.race() 用于响应最快完成的 Promise。

1.2 ES6 模块化

ES6（ECMAScript 2015）模块化是一种在JavaScript中组织和管理代码的新方法。在ES6之前，JavaScript没有内置的模块系统，开发者通常会使用一些社区标准如CommonJS（主要用于Node.js环境）、AMD（异步模块定义，用于浏览器环境）或CMD（Sea.js使用的模块定义）来实现模块化。

ES6模块化的主要特性包括：

1. 导入和导出（import/export）：

   • export 语句用于导出模块的成员，可以是变量、函数、类或其他表达式。
   • import 语句用于从其他模块导入成员，可以是具体的导出成员或默认导出成员。

2. 默认导出与默认导入：

   • 每个模块可以有一个默认导出，通过 export default 语句定义。
   • 默认导出可以通过任何名字导入，使用 import 语句时不需要加花括号 {}。

3. 命名导出与命名导入：

   • 多个成员可以被命名导出，使用 export 关键字前缀。
   • 这些成员可以通过带有花括号 {} 的 import 语句导入，并且可以重命名。

4. 静态分析：

   • ES6 模块支持静态分析，这意味着在编译阶段就能确定模块之间的依赖关系，以及输入和输出的变量。

5. 模块作用域：

   • 每个模块都有自己的作用域，这意味着模块内部定义的变量和函数不会泄露到全局作用域。

6. 动态导入（虽然不在原始的ES6规范中，但后来被添加）：

   • 动态导入允许在运行时按需加载模块，使用 import() 函数。

示例：

假设我们有两个模块文件，math.js 和 app.js：

math.js:

export function add(x, y) {
  return x + y;
}

export function subtract(x, y) {
  return x - y;
}

// 默认导出
export default function multiply(x, y) {
  return x * y;
}

app.js:

import { add, subtract } from './math.js';
import multiply from './math.js'; // 导入默认导出的multiply函数

console.log(add(1, 2)); // 3
console.log(subtract(5, 3)); // 2
console.log(multiply(2, 3)); // 6

ES6 模块化提供了更好的封装性和可维护性，减少了全局命名空间的污染，并使代码更易于理解和调试。在现代的前端开发中，ES6 模块已经成为标准的代码组织方式。在服务器端，如Node.js，也已经完全支持ES6模块。不过需要注意的是，使用ES6模块在Node.js中需要指定文件扩展名，并且从Node.js v14.5.0开始，你可以通过设置"type": "module"在package.json中启用对ES6模块的支持。