JavaScript 是一种动态、高级、解释性的编程语言，用于在网页上创建交互式效果。ES6 是 ECMAScript 的第六版，为 JavaScript 带来了一些重大的改进和新的功能。本文将针对 ES6 的重点语法进行总结，并探讨它们的应用场景和示例代码。
let 和 const
ES6 中的 let 和 const 用于声明变量和常量，相较于ES5中的var有着不同的功能和应用场景。当我们需要在一个范围中定义一个变量或常量的时候，使用 let 和 const 会更好。比如：
let x = 10; const y = 20;
与 var 不同，let 和 const 只存在于它们被定义的代码块中（花括号之间的代码），即它们有了块级作用域，解决了 var 变量的作用域问题，因此可克服使用 var 带来的一些问题。另外，使用 const 可以确保常量不会被重新赋值，从而更好地保护代码的可靠性。
箭头函数
箭头函数是 ES6 中新增的语法，可以将一个函数表达式以更简洁的形式来书写。语法形式为：
(param1, param2, …, paramN) => { statements }而且，箭头函数有以下两个特点：
箭头函数可以忽略 return 关键字，直接将表达式的值作为函数的返回值；
箭头函数会自动捕获其所在上下文的
this值，即继承了外层函数调用时this的上下文。
所以箭头函数在某些特定情况下可以用来代替 function 关键字声明的函数，例如：
let arr = [1, 2, 3]; let newArr = arr.map(number => number * 2); console.log(newArr); // [2, 4, 6]
箭头函数也可与解构赋值语法结合使用。比如：
let arr = [{name: 'Lily', age: 16}, {name: 'Tom', age: 18}];
let ages = arr.map(({ age }) => age);
console.log(ages); // [16, 18]模板字符串
ES6 引入了模板字符串，允许我们使用反引号(``)来构建字符串，并且可以轻松地插入变量或表达式。例如：
let name = 'world';
let greeting = `Hello ${name}!`;
console.log(greeting); // Hello world!在模板字符串中，我们可以使用 ${} 来插入变量或表达式，比起原生的字符串拼接，模板字符串更加方便简洁。
解构赋值
解构赋值使我们可以从有结构的对象或数组中提取值并将其赋给变量，它使代码书写更加简单和直观。比如：
let obj = {name: 'Lucy', age: 18};
let {name, age} = obj; // 按属性名提取
console.log(name, age); // Lucy 18数组解构时，可以结合之前介绍的 let、const 关键字使用，如：
let [first, second, ...others] = [1, 2, 3, 4]; console.log(first, second, others); // 1 2 [3, 4]
解构赋值还可以嵌套使用。例如：
-- -------------------- ---- -------
--- ---- - -
--- ----
----- -------
---- ---
---------- -
------- ---------
------- -
----- ------
--------- -------
-
-
--
--- - ---------- - ------- - ---- - - - - -----
------------------ -- ---这里 let { education: { school: { name } } } 实际上是先解构出 education 属性，再从 education 中解构出 school 属性，最后从 school 中取出 name 属性的值。
for…of 循环
ES6 的 for...of 循环语句可以很方便遍历一个可迭代对象中的元素，如数组和字符串等。例如：
for (let char of "Hello") {
console.log(char);
}
// H e l l o而且，与 for...in 循环不同，for...of 循环会访问迭代对象的值（属性值），而非其属性名，这更符合我们在实际场景中的需求。
类和继承
ES6 中引入了类和继承的概念，改变了 JavaScript 原有的基于原型的面向对象模型。类和对象是面向对象编程的核心概念之一，它可以使代码更加分离，使维护更加灵活。
-- -------------------- ---- -------
----- ------ -
----------------- ---- -
--------- - -----
-------- - ----
-
---------- -
------------------- --- ----------------
-
-
----- ------- ------- ------ -
----------------- ---- ------ -
----------- -----
---------- - ------
-
------------- -
------------------------- -- -------- ----------
-
-
--- ---- - --- --------------- --- -----
---------------- -- ------ --- -----
------------------- -- ---- -- -------- -------在上面的例子中，Person 和 Student 都用 class 关键字声明。注意到子类 Student 在构造函数内通过 super 调用了父类 Person 的构造函数。在此基础上，Student 又定义了一个 studyLesson 方法。
Promise
Promise 是异步编程的一种解决方案，它可以让我们更优雅地编写异步代码。Promise的状态有三种：pending、fulfilled 和 rejected，并且状态可以由 pending 转变为 fulfilled 或 rejected。
在实际应用中，Promise 可以使异步代码的流程更加清晰明了，更易于维护和扩展。看下面的例子：
-- -------------------- ---- -------
-------- -------------------- -
------ --- ----------------- ------- -- -
--- --- - --- -----------------
--------------- ---- ------
---------- - -- -- -
-- ----------- --- ---- -
--------------------------
- ---- -
-----------------------
-
--
----------- - -- -- -
-----------------------
--
-----------
---
-
------------------------------------------------
-------------- -- -
----------------------
--
------------ -- -
---------------------
---在上面的代码中，myAsyncFunction('http://some-api.com/data.json') 返回的是一个 Promise 对象，它会根据异步操作的结果，调用 resolve 或 reject 函数来改变状态。而在调用端，我们通过 .then() 方法来注册状态变为 fulfilled 的处理，.catch() 方法来注册状态变为 rejected 的处理。
总结
ES6 为 JavaScript 带来了很多新的功能和语言特性，这些新特性旨在让 JavaScript 更加优美、简洁以及更易于维护和扩展。本文重点讲解了 ES6 中的 let 和 const、箭头函数、模板字符串、解构赋值、for...of 循环、类和继承以及 Promise 等语法，这些都是开发前端应用时必须掌握的重要技能。
在实际项目中，掌握这些 ES6 语法并应用于开发中，可以提高代码的质量、效率和可维护性，是前端开发者必须掌握的基本技能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64912ccc48841e9894f30310