引言💭
随着 ES6 的发布，JavaScript 语言经历了重要的升级，引入了大量的新特性，极大地提高了代码的简洁性、可维护性和可读性。
一、let 和 const
在 ES6 之前，JavaScript 只有 var 来声明变量，它是基于 函数作用域 的，这可能会导致变量提升和作用域混乱，增加代码的复杂性。ES6 引入了 let 和 const，它们基于 块级作用域，能有效避免这些问题。
let用于声明可变的变量。const用于声明常量，值一旦赋值后不能再修改。
let x = 10;
if (true) {
let x = 20; // 这里的 x 只在 if 块内有效
console.log(x); // 输出: 20
}
console.log(x); // 输出: 10
const y = 30;
y = 40; // 会抛出错误，因为 const 声明的变量不可变
应用场景：
- let：当你希望变量在某个块级作用域内有效时，使用
let来声明变量，避免了var的作用域污染。 - const：当你定义一个常量或者不希望重新赋值的变量时，使用
const。
二、箭头函数
箭头函数是 ES6 的一个重要特性，它不仅使得函数表达式变得更加简洁，而且解决了 this 的指向问题。箭头函数不会绑定自己的 this，它的 this 继承自外部函数，这在处理回调函数或事件处理时非常有用。
// 常规函数
function add(a, b) {
return a + b;
}
// 箭头函数
const add = (a, b) => a + b;
console.log(add(2, 3)); // 输出: 5
应用场景：
- 在事件处理、回调函数中，箭头函数能保持外部上下文的
this，避免传统函数的this问题。
三、模板字符串
ES6 引入了模板字符串，使得字符串的拼接更加直观和易读。模板字符串不仅支持嵌入变量，还支持多行字符串。
let name = 'Alice';
let age = 25;
let greeting = `Hello, my name is ${name} and I am ${age} years old.`;
console.log(greeting); // 输出: Hello, my name is Alice and I am 25 years old.
应用场景：
- 多行字符串：当你需要创建跨多行的文本时，使用模板字符串非常方便。
- 字符串插值：在字符串中嵌入表达式，让字符串拼接变得更加简洁。
四、解构赋值
解构赋值让你可以从数组或对象中提取值并赋给变量，极大地简化了从复杂数据结构中提取数据的过程。
- 数组解构：
let [a, b] = [1, 2];
console.log(a); // 输出: 1
console.log(b); // 输出: 2
- 对象解构：
let person = { name: 'Alice', age: 25 };
let { name, age } = person;
console.log(name); // 输出: Alice
console.log(age); // 输出: 25
应用场景：
- 从 数组 或 对象 中提取数据时，解构赋值能让你的代码更加简洁，尤其是当需要提取多个值时。
五、类
ES6 引入了 class 语法，使得 JavaScript 的面向对象编程变得更加直观。尽管 JavaScript 内部依然使用原型继承，但类提供了更加清晰和简洁的语法。
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
greet() {
console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
}
}
let person1 = new Person('Alice', 30);
person1.greet(); // 输出: Hello, my name is Alice and I am 30 years old.
应用场景：
- 当你需要定义 对象模板 或实现 面向对象编程 时，
class语法可以使代码更加简洁和易于理解。
六、模块化
ES6 引入了内建的模块化机制，使用 import 和 export 关键字，可以将代码分成多个模块进行管理。这样有助于提高代码的复用性和可维护性。
// 导出模块
// math.js
export function add(a, b) {
return a + b;
}
// 导入模块
// app.js
import { add } from './math.js';
console.log(add(2, 3)); // 输出: 5
应用场景：
- 当项目越来越大时，模块化有助于将代码拆分成多个独立的文件，避免重复代码并提高可维护性。
七、默认参数
ES6 允许为函数参数设置默认值，避免了在函数调用时检查每个参数是否为 undefined。
function greet(name = 'Guest') {
console.log(`Hello, ${name}!`);
}
greet(); // 输出: Hello, Guest!
greet('Alice'); // 输出: Hello, Alice!
应用场景：
- 当函数的某些参数在大多数情况下具有默认值时，使用默认参数可以减少代码量，提升可读性。
八、扩展运算符和剩余参数
- 扩展运算符：用于展开数组或对象，能够快速复制、合并或解构数据。
- 剩余参数：将多个参数收集成一个数组，适用于函数的参数。
// 扩展运算符
let arr1 = [1, 2, 3];
let arr2 = [...arr1, 4, 5];
console.log(arr2); // 输出: [1, 2, 3, 4, 5]
// 剩余参数
function sum(...numbers) {
return numbers.reduce((acc, curr) => acc + curr, 0);
}
console.log(sum(1, 2, 3, 4)); // 输出: 10
应用场景：
- 扩展运算符：在合并数组或复制对象时非常有用。
- 剩余参数：当函数接受不确定数量的参数时，剩余参数提供了更简洁的方式来处理。
九、Promise
Promise 是一种用于处理异步操作的机制，它代表一个可能尚未完成的操作，并允许你在操作完成后指定回调函数来处理结果或错误。
let promise = new Promise((resolve, reject) => {
let success = true;
if (success) {
resolve("Operation succeeded");
} else {
reject("Operation failed");
}
});
promise
.then(result => console.log(result)) // 输出: Operation succeeded
.catch(error => console.log(error));
应用场景：
- 使用
Promise可以更清晰地处理异步操作，避免回调地狱，并且能更方便地链式调用。
十、Symbol 类型
Symbol 是 ES6 引入的基本数据类型，表示一个独一无二的值，通常用于对象的属性键，以避免属性名冲突。
const sym = Symbol('description');
console.log(sym); // 输出: Symbol(description)
应用场景：
- 当你需要确保对象的属性键是唯一时，使用
Symbol可以避免不同模块之间的冲突。
十一、Set 和 Map
- Set：集合类型，元素唯一，自动去重。
- Map：键值对集合，键可以是任何数据类型，而不仅仅是字符串。
// Set
let set = new Set([1, 2, 3, 2]);
console.log(set); // 输出: Set { 1, 2, 3 }
// Map
let map = new Map();
map.set('name', 'Alice');
map.set('age', 25);
console.log(map.get('name')); // 输出: Alice
应用场景：
- Set：当你需要存储唯一的值并自动去重时，使用
Set非常方便。 - Map：当你需要一个更灵活的键值对存储结构时，
Map是比对象更合适的选择。
结语✒️
ES6 带来了许多强大的新特性，使 JavaScript 更加现代化、简洁和强大。
欢迎补充内容，持续更新中……🫰🏻
