【JavaWeb13】了解ES6的核心特性，对于提高JavaScript编程效率有哪些潜在影响？

🙋‍♂️ 作者：@whisperrr.🙋‍♂️

👀 专栏：JavaWeb👀

💥 标题：【JavaWeb13】了解ES6的核心特性，对于提高JavaScript编程效率有哪些潜在影响？💥

❣️ 寄语：比较是偷走幸福的小偷❣️

🌍一. ES6 新特性

首先给大家推荐俩个学习ES6的网址。

ECMA International 官方网站：这个网站提供了 ES6 的官方文档，详细介绍了 ES6 的所有特性和规范。这是一个权威且详尽的学习资源，适合那些希望深入了解语言规范的开发者。

• 网址：https://262.ecma-international.org/6.0/

阮一峰的 ES6 教程：这是由阮一峰编写的一本关于 ES6 的入门书籍，广受前端开发者欢迎。这本书以简单易懂的方式介绍了 ES6 的各种特性，非常适合初学者和希望快速掌握 ES6 的开发者。

• 网址：https://es6.ruanyifeng.com/#docs/let

❄️1. ES6 基本介绍

1.ES6 是什么?

1. ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准， 2015 年 6 月发布。
2. ES6 设计目标：达到 JavaScript 语言可以用来编写复杂的大型程序，成为企业级开发语言
3. ECMAScript 和 JavaScript 的关系：ECMAScript 是 JavaScript 的规范/规则，JavaScript 是ECMAScript 的一种实现

❄️2. 基本使用

2.1 let 声明变量

在ES6（ECMAScript 2015）中，let 关键字被引入用来声明变量，它的用法与 var 类似，但有以下几个重要的区别：

1. 块级作用域：let 声明的变量只在它所在的代码块内有效。
2. 不存在变量提升：let 声明的变量不会被提升到作用域的顶部。
3. 暂时性死区：在声明之前就使用 let 声明的变量会导致ReferenceError错误。

下面是 let 声明变量的几种基本用法：

基本声明

let a;
let b = 10;

块级作用域示例

if (true) {let message = "Hello, World!";console.log(message); // "Hello, World!"
}
// 在这里访问 message 会报错，因为 message 是在 if 块中声明的

不存在变量提升

console.log(a); // 报错：ReferenceError: a is not defined
let a = 'I am not hoisted';

只能声明一次,

let num2 = 600;
let num2 = 900;

num2已经声明过了，再次使用let声明会报错
Uncaught SyntaxError: redeclaration of let num2

暂时性死区示例

var tmp = 123;
if (true) {tmp = 'abc'; // ReferenceError: Cannot access 'tmp' before initializationlet tmp;
}

在这个例子中，尽管 tmp 在 let tmp; 声明之前已经被声明为一个全局变量，但在 let 声明之前访问 tmp 会导致错误，因为在 if 块中的 tmp 的暂时性死区内，它还未被声明。
使用 let 可以帮助避免JavaScript中常见的一些错误，并且使得代码更加安全和易于理解。

2.2 const 声明常量/只读变量

在ES6（ECMAScript 2015）中，const 关键字用于声明一个只读的常量。这意味着一旦一个变量被声明为常量，它的值就不能再被改变。下面是 const 声明常量的一些基本用法和规则：

基本声明

const PI = 3.14159;

常量规则

1. 必须初始化：声明一个常量时，必须同时初始化它的值，否则会报错。

   const FOO; // SyntaxError: Missing initializer in const declaration
   

2. 不可重新赋值：一旦声明，常量的值就不能再被改变。

   const MAX_SIZE = 100;
   MAX_SIZE = 200; // TypeError: Assignment to constant variable.
   

2.3 解构赋值

1.基本介绍

1. 解构赋值是对赋值运算符的扩展
2. 是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值
3. 主要有两种形式： 数组解构和对象解构

2.数组解构

ES6（ECMAScript 2016）引入了数组解构（Array Destructuring），它是一种表达式，可以方便地从数组中提取值并赋给变量。数组解构的语法形式是在一个赋值操作符的左侧使用一个数组字面量。

以下是数组解构的一些基本用法：

//第一种方式
let arr = [1, 2, 3];
let [a, b, c] = arr;
//第二种方式
let [num1, num2, num3] = [100, 200, 300];

3.对象解构

ES6（ECMAScript 2015）同样引入了对象解构（Object Destructuring），它允许你将对象中的属性直接赋值给变量。对象解构的语法是在赋值操作符的左侧使用一个对象字面量。

以下是对象解构的一些基本用法：

//第一种方式
let monster = {name: '牛魔王', age: 800};
let {name, age} = monster;
//第二种方式
let {name, age} = {name: '牛魔王', age: 800};//也可以当做形参
function f1({name, age}) {
console.log("f1-name=", name, " ", "f1-age=", age)
}
f1(monster);

1.把 monster 对象的属性, 赋值给{name,age}
2.{name,age} 的取名 name 和 age 要和 monster 对象的属性名保持一致
3.使用{} 包括, 不要使用[]
4.{name,age} 顺序是无所谓

2.4 模板字符串

• 模板字符串使用反引号 ` 字符串包裹
• 可作为普通字符串
• 可用来定义多行字符串，即可以将换行字符串原生输出
• 字符串插入变量和表达式, 使用 ${}
• 字符串中调用函数

let str1 = `for(int i = 0;i < 10;i++){
System.out.println("i="+i);
}`;let str2 = `教育名称=${name}`;
let str3 = `1+2=${1 + 2}`;

2.5 对象拓展运算符

对象扩展运算符（Spread Operator），用三个点（…）表示，允许你将一个对象的可枚举属性复制到另一个对象中。这在合并对象、传递参数等场景中非常有用。

合并对象,你可以使用扩展运算符来合并两个或多个对象。

const obj1 = { a: 1, b: 2 }; 
const obj2 = { b: 3, c: 4 }; 
const mergedObj = { …obj1, …obj2 }; 
console.log(mergedObj); // { a: 1, b: 3, c: 4 }

在这个例子中，obj2 的属性 b 覆盖了 obj1 中的 b 属性。

2.6 箭头函数

1.基本介绍

1. 箭头函数提供更加简洁的函数书写方式。
2. 基本语法是：(参数列表) => { 函数体 }
3. 箭头函数没有参数或有多个参数，要用 () 括起来,箭头函数只有一个参数, 可以省略()
4. 箭头函数函数体有多行语句，用 {} 包裹起来，表示代码块
5. 函数体只有一行语句，并且需要返回结果时，可以省略 {}, 结果会自动返回
6. 箭头函数多用于匿名函数的定义

let f2 = (n, m) => {
var res = 0
for (var i = n; i <= m; i++) {
res += i
}
return res
};

🌍二. Promise

❄️1. 基本使用

1.Promise 基本介绍

1. 传统的 Ajax 异步调用在需要多个操作的时候，会导致多个回调函数嵌套，导致代码不够直观，就是常说的 Callback Hell
2. 为了解决上述的问题，Promise 对象应运而生，在 EMCAScript 2015 当中已经成为标准
3. Promise 是异步编程的一种解决方案。
4. 从语法上说，Promise 是一个对象，从它可以获取异步操作的消息
5. 一句话: Promise 是异步编程的一种解决方案, 可以解决传统 Ajax 回调函数嵌套问题

2.需求分析/图解

3.执行效果

❄️2. 如何解决回调地狱问题

下面让我们详细探讨一下如何使用 Promise 来解决传统 Ajax 请求中的嵌套回调问题。

2.1回调地狱问题

在传统的异步编程模式中，如果需要按顺序执行多个异步操作（比如多个 Ajax 请求），通常会写出如下嵌套回调的代码：

// 假设我们使用的是 jQuery 的 $.ajax 方法
$.ajax({url: 'url1',success: function(response1) {// 处理 response1$.ajax({url: 'url2',success: function(response2) {// 处理 response2$.ajax({url: 'url3',success: function(response3) {// 处理 response3// 如果还有更多操作，继续嵌套...},error: function(error3) {// 处理 error3}});},error: function(error2) {// 处理 error2}});},error: function(error1) {// 处理 error1}
});

这种代码结构被称为“回调地狱”，因为随着异步操作数量的增加，代码变得越来越难以阅读和维护。

2.2 使用 Promise

Promise 提供了一种更加优雅的方式来处理异步操作。以下是使用 Promise 改写上述代码的步骤：

1. 创建 Promise 对象：对于每个异步操作，创建一个返回 Promise 对象的函数。

function fetchUrl(url) {return new Promise((resolve, reject) => {$.ajax({url: url,success: function(response) {resolve(response);},error: function(error) {reject(error);}});});
}

2. 链式调用 .then() 方法：使用 .then() 方法来处理每个 Promise 的成功结果，并在每个 .then() 方法中返回一个新的 Promise，以便链式调用。

fetchUrl('url1').then(response1 => {// 处理 response1// 可以返回新的 Promise 或值return fetchUrl('url2');}).then(response2 => {// 处理 response2// 继续返回新的 Promisereturn fetchUrl('url3');}).then(response3 => {// 处理 response3}).catch(error => {// 处理任何在执行过程中出现的错误});

在上面的代码中，每个 fetchUrl 函数调用都返回一个新的 Promise 对象。当这个 Promise 成功解决（resolved）时，.then() 方法会被调用，并传入解决值。如果 Promise 被拒绝（rejected），.catch() 方法会被调用，并传入拒绝的原因。

2.3Promise 的优势

• 代码扁平化：Promise 通过链式调用来避免嵌套回调，使代码更加扁平化。
• 更好的错误处理：.catch() 方法可以捕获链中任何 Promise 的错误，而不是在每个回调中分别处理。
• 可读性和可维护性：链式调用使得异步代码的流程更加清晰，易于理解和维护。
  通过使用 Promise，我们可以编写更加清晰和结构化的异步代码，避免了回调地狱，并提供了更强大的错误处理机制。

🌍三. 模块化编程

❄️1. 基本介绍

1. 传统非模块化开发有如下的缺点：(1)命名冲突 (2)文件依赖
2. Javascript 代码越来越庞大，Javascript 引入模块化编程，开发者只需要实现核心的业务逻辑，其他都可以加载别人已经写好的模块
3. Javascript 使用"模块"（module）的概念来实现模块化编程, 解决非模块化编程问题

2.模块化编程原理示意图

❄️2. CommonJS 模块编程

• 每个 js 文件就是一个模块，有自己的作用域。在文件中定义的变量、函数、类/对象，都是私有的，对其他 js 文件不可见
• CommonJS 使用 module.exports={} / exports={}导出 模块 , 使用 let/const 名称 =require("xx.js")导入模块
  

CommonJS 是一种模块规范，最初被用于服务器端的 JavaScript 环境，尤其是 Node.js。它定义了一种简单的方式来创建和消费模块。以下是 CommonJS 模块编程的基本概念和用法：

1.模块定义

在 CommonJS 中，一个模块是一个文件。模块可以通过 module.exports 对象来导出值，也可以通过 exports 变量来导出多个成员。以下是导出一个函数的例子：

// myModule.js
function myFunction() {// ...
}
module.exports = myFunction;

或者，如果你想要导出多个函数或对象：

// myModule.js
function myFunction() {// ...
}
function anotherFunction() {// ...
}
exports.myFunction = myFunction;
exports.anotherFunction = anotherFunction;

2.模块引用
要使用一个模块，你可以使用 require 函数来引入它。require 函数会返回模块导出的对象。

// main.js
const myModule = require('./myModule');
myModule.myFunction();

如果模块导出的是一个函数或单个值，你可以直接使用它：

// main.js
const myFunction = require('./myModule');
myFunction();

3.模块缓存
Node.js 会缓存通过 require 加载的模块。这意味着每次调用 require 时，如果模块已经被加载过，它会返回缓存的模块，而不是重新加载。

特点

• 同步加载：CommonJS 模块是同步加载的，这意味着模块加载时会阻塞后续代码的执行，直到模块加载完成。
• 循环依赖：CommonJS 可以处理模块间的循环依赖，但是需要小心处理，因为可能会出现只部分加载的情况。

以下是一个简单的 CommonJS 模块化编程的例子：

// math.js
exports.add = function(a, b) {return a + b;
};
exports.subtract = function(a, b) {return a - b;
};
// main.js
const math = require('./math');
console.log(math.add(1, 2)); // 输出 3
console.log(math.subtract(5, 2)); // 输出 3

在这个例子中，math.js 模块导出了两个函数，main.js 通过 require 引入了这个模块，并使用了它的功能。
CommonJS 模块规范在 Node.js 和一些浏览器环境中得到了广泛的支持，但是在浏览器环境中，通常使用 ES6 Modules 或 AMD 作为模块化的解决方案。

❄️3. ES6 模块编程

• ES6 使用
  (1)export {名称/对象/函数/变量/常量}
  (2) export 定义=
  (3) export default {}导出模块
• 使用 import {} from "xx.js" / import名称 form "xx.js" 导入模块
  
  ES6模块化编程是JavaScript语言的一个重要进步，它为开发者提供了一种官方的、标准化的方式来组织和重用代码。在此之前，JavaScript社区已经尝试了多种模块化方案，如AMD、CommonJS等，但它们都是非标准的，或者在某些环境中有限制。ES6模块的引入，标志着JavaScript在语言层面上对模块化的正式支持。

1. ES6模块的关键特性

1. 导出（Export）与导入（Import）
   ES6模块通过export和import关键字来管理模块的对外接口和依赖关系。这使得模块之间的交互变得直观且易于理解。你可以导出单个变量、函数、类或者整个模块对象，也可以导入一个模块中的特定部分或者整个模块。
2. 默认导出（Default Export）
   默认导出允许一个模块导出一个没有名字的值，这在使用模块时提供了更大的灵活性。每个模块只能有一个默认导出，但可以与多个命名导出共存。
3. 编译时加载
   与CommonJS的运行时加载不同，ES6模块是在编译时进行加载的。这意味着模块的依赖关系在代码执行之前就已经确定，这有助于提高性能并允许进行更多的编译时优化。
4. 树摇（Tree Shaking）
   由于ES6模块的静态结构，未使用的导出可以在打包过程中被移除，这个过程被称为“树摇”。这有助于减少最终打包文件的体积，提高应用的加载速度。
5. 命名空间导出（Namespace Export）
   ES6模块还支持命名空间导出，允许你将多个导出聚合到一个对象中。这对于组织大量导出非常有用，可以避免命名冲突。

2. 实践中的注意事项

• 浏览器支持：虽然现代浏览器支持ES6模块，但在使用时可能需要设置正确的MIME类型，并在<script>标签中使用type="module"。
• 服务器端渲染：在Node.js等服务器端环境中，可能需要使用特定的模块解析策略或转换工具，如Babel，来兼容ES6模块。
• 打包工具：在实际开发中，通常会使用Webpack、Rollup等打包工具来处理模块依赖，优化生产环境下的代码。
  ES6模块化编程不仅提升了代码的可维护性和可重用性，也为JavaScript的生态系统带来了标准化和一致性。随着现代前端框架和工具链的发展，ES6模块已经成为编写现代JavaScript应用程序的基石。