前言
JavaScript 一直是广泛使用的编程语言。自从 ECMAScript 5（ES5）发布以来，JavaScript 已经发生了很多重要的变化。随着 ECMAScript6（ES6）发布，这门语言进一步得到了改善和增强。在本文中，我们将介绍 ES6 的一些新特性，并比较它们与 ES5 中已有的特性。
ES6 新特性
1. let 和 const
ES6 中的 let 和 const 关键字是用来声明变量和常量的。与 var 不同，let 和 const 声明的变量和常量只有块级作用域，而不是函数作用域。
{
let x = 1;
const y = 2;
}
console.log(x); // ReferenceError: x is not defined
console.log(y); // ReferenceError: y is not definedlet 和 const 的主要区别在于，let 声明的变量是可变的，而 const 声明的常量是不可变的。一旦你声明了一个 const 常量，你就不能再次赋值给它。
2. 模板字面量
ES6 中的模板字面量是一种新的字符串语法，它允许我们在字符串中插入表达式，并使用多行字符串。用反引号（`）来定义模板。
const name = 'John';
const age = 30;
const message = `My name is ${name} and I'm ${age} years old.`;
console.log(message);
// My name is John and I'm 30 years old.3. 箭头函数
箭头函数是一种简化的函数语法，它使用箭头符号（=>）来表达。它们通常比函数表达式更简洁。
// ES5
var add = function(a, b) {
return a + b;
}
// ES6
const add = (a, b) => a + b;4. 类
ES6 中的类是一种新的简化的语法，用于定义对象。与函数表达式一样，它们也有一个构造函数，可以设置对象的属性和方法。
-- -------------------- ---- -------
----- ------ -
----------------- ---- -
--------- - -----
-------- - ----
-
---------- -
------------------- -- ---- -- ------------ --- --- ----------- ----- -------
-
-
----- -- - --- -------------- ----
-------------- -- ------ -- ---- -- ---- --- --- -- ----- ----5. 解构赋值
解构赋值是一种用于从数组或对象中提取值并分配到变量中的语法。在 ES6 之前，你需要一个变量来保存每一个值。然而在 ES6 中，你可以直接将这些值赋给变量，而无需显式地创建额外的变量。
-- -------------------- ---- ------- -- ---- ----- --- -- - --- --- --------------- -- - --------------- -- - -- ---- ----- - ----- --- - - - ----- ------- ---- -- -- ------------------ -- ---- ----------------- -- --
6. 模块化
ES6 通过提供内置的模块系统来支持模块化编程。这个系统允许你在不同的 JavaScript 文件中导入和导出代码。
// 模块化导出
export const add = (a, b) => a + b;
// 模块化导入
import { add } from './math';
console.log(add(1, 2)); // 3总结
在 ES6 中有许多新特性，其中一些在这篇文章中介绍过了。这些新特性可以帮助你写出更加简洁、易读与可维护的代码。然而，你不必在你的项目中使用所有的 ES6 功能，要么是因为你在旧浏览器中工作，要么是因为你只需要其中一部分。幸运的是，由于许多新特性都可以通过工具或框架进行转译或模拟，因此你可以继续使用 ES5 代码来 开发，同时也能够充分利用 ES6 的语言功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64550c38968c7c53b08b8983