ecmascript6_ECMAScript 2015（ES6）概述

ecmascript6

ES6 is the newer standardization/version of Javascript, which was released in 2015. It is important to learn ES6, because it has many new features that help developers write and understand JavaScript more easily. Modern Frameworks like Angular and React are being developed with ES6. Its syntax is also different than classic JavaScript.

ES6是2015年发布的更新的 Javascript 标准化/版本 。学习ES6非常重要，因为它具有许多新功能，可以帮助开发人员更轻松地编写和理解JavaScript。 像Angular和React这样的现代框架正在用ES6开发。 它的语法也与经典JavaScript不同。

So what’s new in ES6? Let’s have a look.

那么ES6的新功能是什么？ 我们来看一下。

1. let＆const关键字 (1. let & const keywords)

ES6 brings two new keywords for variable declarations: let and const.

ES6为变量声明带来了两个新的关键字： let和const 。

We used to have only the var keyword in JavaScript to declare variables:

我们以前在JavaScript中只有var关键字来声明变量：

var name = 'Cem';

In ES6, we use the let keyword instead.

在ES6中，我们改用let关键字。

为什么用“放”而不是“变”？ (Why ‘let’ instead of ‘var’ ?)

Because the usage of var causes scope problems. For example, let’s define a string with var globally and locally:

因为var的用法 导致范围问题。 例如，让我们在全局和本地使用var定义一个字符串：

var word = 'I am global';

if(true) {  
  var word = 'I am local'; 
}

console.log(word); // What do you expect here as result?

The console.log should print the global string: 'I am global'. Because the second declaration var word = 'I am local' is a local string and console.log is outside of the if block:

console.log应该打印全局字符串： 'I am global' 。 因为第二个声明var word = 'I am local'是本地字符串，而console.log在if块之外 ：

Unexpectedly, the local variable which we have defined with var has ignored the if block and gets printed to the console. To prevent this problem, ES6 brings us a new keyword: let.

出乎意料的是，我们用var定义的局部变量忽略了if块并被打印到控制台。 为避免此问题，ES6为我们带来了一个新关键字： let。

Let’s try again with let:

让我们再试一次let ：

let word = 'I am global';

if(true) {
  let word = 'I am local'; 
}

console.log(word); // This time what do you expect?

This time the global string has printed as we expected, let solved the scope-problem.

这次全局字符串已按我们预期的方式打印了， let解决了范围问题。

``var''语句的另一个问题 (Another issue of the ‘var’ statement)

We can both re-assign variables with var and let. But, let doesn’t allow us to redeclare the same variables:

我们都可以使用var和let来重新分配变量。 但是， let不允许我们重新声明相同的变量：

var number = 1;
var number = 2;

console.log(number); // No errors here, 2 gets printed

Let’s try again with let:

让我们再试一次let ：

let number = 1;
let number = 2;

console.log(number); // let doesn't allow redeclaration

You can still use var in ES6, but it is not recommended.

您仍然可以在ES6中使用var ，但不建议这样做。

const关键字 (The const keyword)

Let’s continue with the const keyword. const means constant.

让我们继续使用const关键字。 const表示常量 。

“Constant: something that does not change.”

“恒定：不变的东西。”

When we declare a constant variable, we cannot change it later. For example, birth date is a constant.

当我们声明一个常量变量时​​，我们以后就不能更改它。 例如， 出生日期是一个常数。

const birthYear = 1990;

birthYear = 2000; // You cannot re-assign a constant variable

If you try to change or redeclare a const variable, it will give an error:

如果您尝试更改或重新声明const变量，它将产生错误：

Using const improves your code quality. Use it only when you’re sure that your variable is not going to change later.

使用const可以提高代码质量。 仅在确定变量以后不会更改时才使用它。

2.模板文字 (2. Template Literals)

Template literals are one of the new syntaxes of ES6, for creating strings and printing dynamic variables.

模板文字是ES6的新语法之一，用于创建字符串和打印动态变量。

• To create a string, use back tics ( `` ) instead of single or double quotes:

  要创建字符串，请使用反斜线(``)而不是单引号或双引号：

let oldWay = 'A word';  // JS Way

let newWay = `A word`;  // ES6 Way

• Use the interpolation syntax: ${ expression } to simplify string concatenation and to create dynamic variables

  使用插值语法： $ {expression}简化字符串连接并创建动态变量

Let’s define some variables and use the old and new methods to print them:

让我们定义一些变量，并使用新旧方法来打印它们：

let name = 'Cem';
let age = 28;
let profession = 'Software Developer';

The previous JavaScript way:

以前JavaScript方式：

console.log("Hello, my name is " + name + ", I'm " + age + " years old and I'm a " + profession);

The ES6 way:

ES6方式：

console.log(`Hello, my name is ${name}, I'm ${age} years old and I'm a ${profession}.`);

We can do much more with template literals, and you can check here for more details.

我们可以使用模板文字做更多的事情，您可以在此处查看更多详细信息。

3.箭头功能 (3. Arrow Functions)

Arrow Functions use a fat arrow => rather than the function keyword, when defining a function:

定义函数时，箭头函数使用粗箭头=>而不是function关键字：

JavaScript Function:

JavaScript函数：

var sum = function addition (firstNum, secondNum) {
    return firstNum + secondNum;
}

ES6 Function:

ES6功能：

let sum = (firstNum, secondNum) => { return firstNum + secondNum };

We can also omit the return keyword, unless our function returns a code block.

我们也可以省略return关键字，除非我们的函数返回一个代码块。

Since this article is about an overview of ES6, I’m not going much deeper of arrow functions. You can get more information about arrow functions here.

由于本文是关于ES6的概述，因此我不再深入介绍箭头功能。 您可以在此处获取有关箭头功能的更多信息。

4.点差算子 (4. The Spread and Rest Operators)

Have you ever seen three dots ... in programming? This is called the spread syntax.

你见过三个点...在编程？ 这称为传播语法 。

扩展运算符-数组的用法 (Spread Operator — Usage for Arrays)

We have an array of numbers: let numberArray = [1, 19, 21, 85, 42]

我们有一个数字数组： let numberArray = [1, 19, 21, 85, 42]

We can use the spread operator:

我们可以使用点差运算符：

• to get the values (numbers) out of the array:
  从数组中获取值(数字)：

console.log(...numberArray);

Using the spread operator doesn’t affect the array itself.

使用散布运算符不会影响数组本身。

• to concat the array with another array:
  将数组与另一个数组连接：

let charArray = ['a','b','c'];

charArray.push(...numberArray);

console.log(charArray);

Otherwise, the numberArray would be added as the fourth element, directly inside the charArray:

否则， 将把numberArray作为第四个元素添加到charArray内部：

Rest运算符-功能用法 (Rest Operator — Usage for Functions)

The other usage of three dots ... are for function parameters.

三个点的其他用法...用于功能参数。

A parameter given after three dots turns into an array which will contain the rest of the parameters called the rest operator.

在三个点之后给出的参数将变成一个数组 ，其中将包含称为rest运算符的其余参数。

function count (...counter) { // parameter becomes an array
  console.log(counter.length);
}

count(); // 0
count(10); // 1
count(1, 10, 24, 99, 3); // 5

Since the ...counter is now an array, we can get the length of it. All the parameters that are given to the count() function are now values of the counter array:

由于...counter现在是一个数组，因此我们可以得到它的长度。 现在，提供给count()函数的所有参数都是计数器数组的值：

5.进出口 (5. Import & Export)

Another new feature of ES6 is that it lets us import & export our classes, functions, and even variables to other parts (files) of our code. This approach helps us programmers a lot when we want to break the code into smaller pieces. It increases the readability and maintenance of the project code in the future.

ES6的另一个新功能是它允许我们将类，函数甚至变量导入和导出到代码的其他部分(文件)。 当我们想将代码分解成更小的部分时，这种方法对我们的程序员有很大帮助。 它将在以后增加项目代码的可读性和维护性。

Let’s see how it works:

让我们看看它是如何工作的：

Firstly, we create an ES6 function and export it with the export keyword.

首先，我们创建一个ES6函数，并使用export关键字将其export 。

export let myFunction = () => { console.log('I am exported!'); }

After that, to import myFunction to another file, we need to define its folder path, name of the file, and the import keyword.

之后，要将myFunction导入另一个文件，我们需要定义其文件夹路径，文件名和import关键字。

import { myFunction } from './yourFolderPath/fileName';

Finally, call the function in the imported file and use it.

最后，在导入的文件中调用该函数并使用它。

myFunction();

This is how we can break our code into smaller pieces, with the help of export & import. We can also import other modules and services like HttpService, Router, Axios, and Bootstrap to use them in our code too, after installing them in our node_modules.

这样，我们就可以在导出和导入的帮助下将代码分解为较小的部分。 在将它们安装在node_modules中之后，我们还可以导入其他模块和服务(例如HttpService，Router，Axios和Bootstrap)在我们的代码中使用它们。

I’ve explained some new features of ES6 in this article. There are many other features and more details that you should check out. If you find this article helpful, please share it so more people can read it.

我已经在本文中解释了ES6的一些新功能。 还有许多其他功能和更多详细信息，您应该检查一下。 如果您觉得这篇文章对您有帮助，请与他人分享，以便更多的人阅读。

Thank you for reading and for your support! :)

感谢您的阅读和支持！ :)

翻译自: https://www.freecodecamp.org/news/a-general-review-of-ecmascript-2015-es6-f524d5f8c095/

ecmascript6