es6-prez:给我们其他人的 ES6 演示

**ES6 演示：JavaScript 的新特性与实践** ES6，也称为 ECMAScript 2015，是 JavaScript 语言的一个重要版本更新，引入了许多新的特性和语法改进，旨在提高开发效率和代码质量。这个名为 "es6-prez" 的演示项目，显然是为了向其他人展示这些变化，帮助他们理解和掌握 ES6 的核心概念。 ### 1. 基本语法增强 #### 1.1 字符串模板（Template literals） 字符串模板使用反引号（`）包围，支持内联表达式和多行书写，使得字符串处理更加便捷。例如： ```javascript let name = 'Alice'; console.log(`Hello, ${name}!`); // 输出 "Hello, Alice!" ``` #### 1.2 解构赋值 允许从数组或对象中提取值，直接赋值给变量。这对于交换变量、获取数组元素或对象属性非常有用： ```javascript let [a, b] = [1, 2]; console.log(a, b); // 输出 1, 2 let {foo, bar} = {foo: 'foo', bar: 'bar'}; console.log(foo, bar); // 输出 "foo" "bar" ``` ### 2. 变量声明 #### 2.1 `let` 和 `const` `let` 和 `const` 是替代 `var` 的新变量声明方式，它们的作用域为块级，避免了 `var` 的一些问题，如变量提升和重新声明。 ```javascript for (let i = 0; i < 3; i++) { console.log(i); // 0, 1, 2 } console.log(i); // Uncaught ReferenceError: i is not defined ``` `const` 声明常量，一旦赋值后不可改变，但需要注意，如果常量是对象，那么对象的属性仍然可以修改。 ### 3. 类与模块 #### 3.1 类（Class） ES6 引入了类的概念，提供了一种更面向对象的语法，尽管底层仍然是基于原型的： ```javascript class Person { constructor(name) { this.name = name; } sayHello() { console.log(`Hello, I'm ${this.name}`); } } let person = new Person('Alice'); person.sayHello(); // 输出 "Hello, I'm Alice" ``` #### 3.2 模块（Module） 通过 `import` 和 `export` 关键字，可以实现模块化，方便代码组织和重用： ```javascript // moduleA.js export function add(a, b) { return a + b; } // moduleB.js import { add } from './moduleA.js'; console.log(add(1, 2)); // 输出 3 ``` ### 4. 箭头函数 箭头函数提供了更简洁的函数定义方式，同时也改变了 `this` 的指向： ```javascript let arr = [1, 2, 3]; arr.map((value) => value * 2); // 返回 [2, 4, 6] ``` ### 5. Promise 对象 Promise 是处理异步操作的新方法，避免了回调地狱： ```javascript let promise = new Promise((resolve, reject) => { setTimeout(() => resolve('Success'), 1000); }); promise.then(result => console.log(result)); // 输出 "Success" after 1 second ``` ### 6. Generator 函数 Generator 函数允许创建可暂停/恢复执行的函数，用于处理异步操作和复杂流程控制： ```javascript function* fibonacci() { let a = 0, b = 1; while (true) { yield a; [a, b] = [b, a + b]; } } let gen = fibonacci(); console.log(gen.next().value); // 输出 0 console.log(gen.next().value); // 输出 1 ``` 这只是 ES6 的一部分内容，还有许多其他特性，如迭代器、Set 和 Map 数据结构、Proxy 和 Reflect API 等，都极大地丰富了 JavaScript 语言的功能。通过深入学习和实践 "es6-prez" 中的示例，你可以更好地掌握这些新特性，并在实际开发中发挥它们的优势。