一、ES6 入门基础

什么是 ES6？JavaScript 版本发展史

ES6（ECMAScript 2015）是 JavaScript 的第六个主要版本，于 2015 年发布。它是对 JavaScript 语言的一次重大更新，引入了许多新特性和语法糖。

JavaScript 版本发展时间线

• 1995：JavaScript 诞生（由 Brendan Eich 开发）
• 1997：ECMAScript 1.0 发布
• 1998：ECMAScript 2.0 发布
• 1999：ECMAScript 3.0 发布（成为广泛支持的标准）
• 2009：ECMAScript 5.0 发布
• 2015：ECMAScript 6.0（ES6）发布
• 2016：ECMAScript 2016（ES7）发布
• 2017：ECMAScript 2017（ES8）发布
• 2018：ECMAScript 2018（ES9）发布
• 2019：ECMAScript 2019（ES10）发布
• 2020：ECMAScript 2020（ES11）发布
• 2021：ECMAScript 2021（ES12）发布
• 2022：ECMAScript 2022（ES13）发布

为什么要学 ES6？

1. 简化代码：ES6 提供了许多语法糖，使代码更简洁易读
2. 提高效率：新的语法和 API 大大提高了开发效率
3. 现代开发必备：现代前端框架（React、Vue、Angular）都大量使用 ES6 特性
4. 就业优势：ES6 已成为前端开发的标准，掌握它是求职的基本要求
5. 功能强大：引入了许多新功能，如 Promise、模块化、Class 等

ES6 兼容性与环境配置

浏览器兼容性

大部分现代浏览器都已经支持 ES6 特性，但为了兼容旧浏览器，我们可以使用 Babel 进行转译。

Babel 简介

Babel 是一个 JavaScript 编译器，可以将 ES6+ 代码转译为 ES5 代码，以兼容旧浏览器。

简单使用 Babel

1. 安装 Babel：

   npm install --save-dev @babel/core @babel/cli @babel/preset-env

2. 创建 .babelrc 配置文件：

   {
     "presets": ["@babel/preset-env"]
   }

3. 转译代码：

   npx babel src --out-dir dist

学习 ES6 的前提基础

要学习 ES6，你需要掌握以下 JavaScript 基础知识点：

1. 变量和数据类型：var、let、const（ES6）、字符串、数字、布尔值、对象、数组等
2. 函数：函数声明、函数表达式、参数、返回值等
3. 条件语句：if-else、switch 等
4. 循环语句：for、while、do-while 等
5. 对象和数组：基本操作和方法
6. DOM 操作：基本的 DOM 操作方法

第一个 ES6 代码体验

在浏览器控制台中运行

1. 打开浏览器（Chrome、Firefox 等）
2. 按 F12 打开开发者工具
3. 切换到 Console 选项卡
4. 输入以下 ES6 代码：

// 使用 let 声明变量
let name = 'ES6';

// 使用模板字符串
console.log(`Hello, ${name}!`);

// 使用箭头函数
const greet = (name) => `Hello, ${name}!`;
console.log(greet('World'));

// 使用解构赋值
const person = { firstName: 'John', lastName: 'Doe' };
const { firstName, lastName } = person;
console.log(`${firstName} ${lastName}`);

在 VS Code 中运行

1. 安装 Node.js（https://nodejs.org/）
2. 创建一个 index.js 文件
3. 写入上述 ES6 代码
4. 在终端中运行：

   node index.js

通过本章节的学习，你已经了解了 ES6 的基本概念和学习环境。接下来，我们将开始学习 ES6 的核心语法特性。