序言
在了解 React 前端框架之前，让我们先让读者温习一下 JavaScript ES6 的知识，我们将在本篇文章中介绍 ES6。
- JavaScript 的历史
- let, const, var 差异
- 模板字面
- 箭头功能
以上中文翻译基于 MDN 官方翻译，如有错误，欢迎读者留言。
JavaScript ES6 历史
布兰登-艾奇于 1995 年出版、 JavaScript，最初JavaScript主要用于在网页中实现一些简单的功能。后来，出现了 Ajax、Jquery、React.js、Vue.js、Node.js、TypeScript，JavaScript 逐渐成为使用最广泛的编程语言之一，然后成为主流，它既可用于前端开发，也可用于后端开发。
有些读者可能知道 ES5 和 ES6，但 ES 是什么？
ES 的全称是 ECMAScript，其中 ECMA 代表欧洲计算机制造商协会（European Computer Manufacrurers Association），末尾的数字代表代数，因此 ES5 是第五代 ECMAScript，ES6 是第六代 ECMAScript。
那么，为什么不经常听到 ES1 至 ES4 代的消息呢？
其主要原因是，1997 年 ES1 推出后，它仍然只是简单地实现了一些功能。ES2、ES3 和 ES4 修正了一些问题，或增加了新的正则表达式和字符串处理功能，然后 ES5 在 2009 年问世，真正实现了大量功能，包括扩展数组方法、对象属性和 JSON。
JavaScript ES6
ES6 出现于 2015 年，增加了许多方便实用的功能，这些功能已在各种 JavaScript 应用程序中实现。
想了解更多历史的人，还可以参考
var, let, const 差异
1. var
var 是 ES5 的早期声明方法。它可以使用 var 声明，并具有函数作用域或全局作用域。
2. let
let is a relatively recent ES6 declaration method that can be declared using let. In addition to implementing the Lexical Variable Scope, the use of curly braces also creates a Code Block, which is block-scoped in a let declaration.
3. const
const 是最新的 ES6 声明之一，可以使用 const 声明，并且具有块作用域。
const 和 let 的最大区别在于，const 是一个不会被重新分配的值。
var 以及 let 差異
为了快速演示这两段代码之间的区别，让我们先在 ES5 中声明 var，我们可以看到，在判别式中再次声明 var 并将代码块留在判别式中后，变量仍然具有代码块中声明的值。
var input = "Global"; if(input){ var input = "Block"; console.log("input"); // 会输出变数Block } console.log("input"); // 会输出变数Block
如果再次使用 ES6 的 let 声明，可以看到在判别式中再次声明时，只会影响代码块，变量不会影响外部全局变量。
let input = "Global"; if(input){ let input = "Block"; console.log("input"); // 会输出Block } console.log("input"); // 会输出Global
从上面的例子中可以看出，在代码块中使用 ES5 var 声明会污染其他同名变量，因此现在的主流声明方式是使用 let 或 const。
模板文字
这使用了 MDN WEB 虽然有些地方也将其称为 Template String，但使用的是该术语的名称和中文译名。
在传统的 JavaScript 语法中，我们使用加号来连接字符串，但这种传统的语法并不直观。
console.log("Hello, This is "+ Name + " and My Phone Number is" + PhoneNumber)
在模板文字语法出现后，我们可以使用回车键来括弧字符串，并使用钱号和大括号 ${} 在字符串中放置变量。如果我们重写上面的代码，就会变成下面这样。您可以看到，整个字符串变得更加简洁易懂。
console.log(`Hello, This is ${Name} and My Phone Number is ${PhoneNumber}`)
箭头功能
宣告（ Define ）
在传统的 ES5 语法中，声明使用以下语法，以关键字 function 开头，然后是函数名称，并用大括号将函数内部的操作括起来。
function printHelloWorld() { console.log("Hello World") } var printHelloWorld = function() { console.log("Hello World") }
另一种声明类型是函数表达式，它首先声明一个变量，然后将一个函数赋值给该变量。
提吊（ Hoist ）
这里有两种不同类型的声明：字母声明和字母指定。如果是函数声明，则会被吊起，但如果是函数指定，则不会。
printHelloWorld() function printHelloWorld() { console.log("Hello World") } // 这样执行是没有问题的printHelloWorld() var printHelloWorld = function() { console.log("Hello World") } // 这样执行是有问题的
参数传输
在传统的 ES5 中，可以在函数中传递参数，这在形式上被称为 Argument。
function printHello(name) { console.log(`Hello,My Name is ${name}`) } printHello("Hogan")
但是，如果在使用函数时没有给出引用数字的值，该怎么办呢？
将显示 Hello,My Name is undefined
在 ES6 中，还有一个函数预设，因此您可以在函数声明中直接将引用赋值给一个值，从而避免这个问题。
function printHello(name = "Hogan") { console.log(`Hello,My Name is ${name}`) } printHello() // Hello,My Name is Hogan printHello("Bo Bo") // Hello,My Name is Bo Bo
箭头功能
箭头函数（Arrow Function）是 ES6 的新特性之一，它允许您在不使用函数关键字，甚至不给出函数名和返回值的情况下声明函数。
箭头函数将在未来的 React 实现中经常使用，是一项非常重要和有用的功能。
下面是使用关键字 function 和 return 声明传统 ES5 函数的方法。
var printHello = function(name) { return ("Hello " + name) } console.log(printHello("Hogan"))
箭头函数可改写如下
const printHello = (name) => `Hello ${name}` console.log(printHello("Hogan"))
结论
本文将介绍 JavaScript ES6 中的一些新功能和概念，并使用代码对其进行解释。
在了解 React 前端框架语法之前，让我们先回顾一下 JavaScript 的原始语法。
如果您有任何建议或问题，欢迎留言！
如果您喜欢 "React Vernacular Campaign "系列，请点赞并分享，让更多人看到！
其他文章参考
大公司为何使用 Nx？Monorepo 工具 5 分钟快速构建
简体中文 
繁體中文 
English 
한국어 
日本語 
Español