在本章中，我们将看到ES6中添加的功能。我们还将学习如何使用BabelJS将功能编译到ES5。
以下是我们将在本章讨论的各种ES6功能−
让我们在JavaScript中声明一个块作用域局部变量。考虑以下示例来理解let的使用。
让a = 1;
如果（a == 1）{
让a = 2;
console.log（a）;
}
console.log（a）;
2
1
第一个控制台打印2的原因是因为使用 let 再次声明 a 并且仅在如果阻止。使用let声明的任何变量都只在声明的块中可用。我们使用let声明变量两次，但它不会覆盖a的值。
这是var和let关键字之间的区别。当您使用var声明变量时，该变量将在函数范围内可用，或者如果声明将充当全局变量。
使用let声明变量，变量是块范围内可用。如果在if语句中声明，它将仅在if块中可用。这同样适用于switch，for-loop等。
现在我们将看到使用babeljs在ES5中进行代码转换。
让我们运行以下命令转换代码−
npx babel let.js --out-file let_es5.js
let关键字从es6到es5的输出如下−
让a = 1;
如果（a == 1）{
让a = 2;
console.log（a）;
}
console.log（a）;
"use strict";
var a = 1;
if（a == 1）{
var _a = 2;
console.log（_a）;
}
console.log（a）;
如果您看到ES5代码，则将let关键字替换为 var 关键字。此外，if块中的变量重命名为 _a ，与使用 let 关键字声明的效果相同。
在本节中，我们将了解ES6和ES5中const关键字的工作原理。 Const关键字也可在范围内使用;如果在外面，它会抛出一个错误。一旦分配，就不能更改const声明变量的值。让我们考虑以下示例来理解如何使用const关键字。
让a = 1;
if（a == 1）{
const age = 10;
}
console.log（年龄）;
未捕获的ReferenceError:年龄未在:5:13
上面的输出会抛出一个错误，因为const块是在if块中定义的，并且在if块中可用。
我们将了解使用BabelJS转换为ES5。
让a = 1;
if（a == 1）{
const age = 10;
}
console.log（年龄）;
npx babel const.js --out-file const_es5.js
"use strict ";
var a = 1;
if（a == 1）{
var _age = 10;
}
console.log（年龄）;
如果出现ES5，const关键字将替换为var关键字，如上所示。
与变量表达式相比，Arrow函数的语法更短。它也被称为胖箭头函数或lambda函数。该函数没有自己的this属性。在此函数中，省略了关键字函数。
var add =（x，y ）=> {
返回x + y;
}
var k = add（3,6）;
console.log（k）;
9
使用BabelJS，我们将上面的代码转换为ES5。
var add =（x，y）=> {
返回x + y;
}
var k = add（3,6）;
console.log（k）;
npx babel arrowfunction.js --out-file arrowfunction_es5.js
使用Babel将箭头函数转换为变量表达式函数，如下所示。
"use strict";
var add = function add（x，y）{
return x + y;
};
var k = add（3,6）;
console.log（k）;
ES6附带新的Classes功能。类与ES5中提供的基于原型的继承类似.class关键字用于定义类。类就像特殊函数一样，与函数表达式有相似之处。它有一个构造函数，在类中调用。
class Person {
构造函数（fname，lname，age，address）{
this.fname = fname;
this.lname = lname;
this.age =年龄;
this.address = address;
}
get fullname（）{
return this.fname +" - "+ this.lname;
}
}
var a =新人（"Siya"，"Kapoor"，"15"，"Mumbai"）;
var persondet = a.fullname;
Siya-Kapoor
class Person {
constructor（fname，lname，age，地址）{
this.fname = fname;
this.lname = lname;
this.age =年龄;
this.address = address;
}
get fullname（）{
return this.fname +" - "+ this.lname;
}
}
var a =新人（"Siya"，"Kapoor"，"15"，"Mumbai"）;
var persondet = a.fullname;
npx babel class.js --out-file class_es5.js
使用babeljs添加额外代码以获得适用于类的功能与ES5中一样.BabelJs确保功能与ES6中的功能相同。
"use strict";
var _createClass = function（）{
function defineProperties（target，props）{
for（var i = 0; i< props.length; i ++）{
var descriptor = props [i];
descriptor.enumerable = descriptor.enumerable ||假;
descriptor.configurable = true;
if（描述符中的"value"）descriptor.writable = true;
Object.defineProperty（target，descriptor.key，descriptor）;
}
}
返回函数（构造函数，protoProps，staticProps）{
if（protoProps）defineProperties（Constructor.prototype，protoProps）;
if（staticProps）defineProperties（Constructor，staticProps）;
return构造函数;
};
}（）;
函数_classCallCheck（实例，构造函数）{
if（！（instance instanceof Constructor））{
抛出新的TypeError（"不能将类称为函数"）;
}
}
var Person = function（）{
函数Person（fname，lname，age，address）{
_classCallCheck（this，Person） ）;
this.fname = fname;
this.lname = lname;
this.age =年龄;
this.address = address;
}
_createClass（Person，[{
key:"fullname"，
get:function get（）{
return this.fname +" - "+ this.lname;
}
}]）;
返回人;
}（）;
var a = new Person（"Siya"，"Kapoor"，"15"，"Mumbai"）;
var persondet = a.fullname;
JavaScript承诺用于管理代码中的异步请求。
当您从具有依赖性的异步请求管理多个回调时，它使生活更轻松并保持代码清洁。 Promise提供了一种更好的回调函数处理方式。承诺是ES6的一部分。默认情况下，当您创建承诺时，承诺的状态将处于暂挂状态。
承诺有三种状态和减号;
新的Promise（）用于构建承诺。 Promise构造函数有一个参数，它是一个回调函数。回调函数有两个参数 - 解析和拒绝;
这两个参数都是内部函数。您编写的异步代码，即Ajax调用，图像加载，计时函数将进入回调函数。
如果在回调函数中执行的任务成功，那么解析函数被调用;否则，将使用错误详细信息调用reject函数。
以下代码行显示了一个promise结构调用−
var _promise = new Promise（函数（解析，拒绝）{
var success = true;
if（success）{
resolve（"success"）;
} else {
拒绝（"失败"）;
}
}）;
_promise.then（function（value）{
//一旦函数resolve被调用，它就会传递给res b $ b console.log（value）; //成功
}）。catch（函数（值）{
//一旦函数拒绝被调用，它就会传递给拒绝
console.log（value）; //失败。
}）;
let timingpromise = new Promise（（解析） ，拒绝）=> {
setTimeout（function（）{
resolve（"Promise is resolved！"）;
}，1000）;
}）;
timingpromise.then（（msg）=> {
console.log（msg）;
}）;
承诺已解决！
let timingpromise = new Promise（（解决） ，拒绝）=> {
setTimeout（function（）{
resolve（"Promise is resolved！"）;
}，1000）;
}）;
timingpromise.then（（msg）=> {
console.log（msg）;
}）;
npx babel promise.js --out-file promise_es5.js
"use strict";
var timingpromise = new Promise（函数（解析，拒绝）{
setTimeout（function（）{
resolve（"Promise is resolved！"）;
} ，1000）;
}）;
timingpromise.then（function（msg）{
console.log（msg）;
}）;
对于承诺，代码在转换时不会改变。我们需要使用babel-polyfill才能在旧浏览器上工作。关于babel-polyfill的详细信息在babel-poyfill章节中有解释。
发电机功能与普通功能类似。该函数具有特殊的语法函数*，函数为*，函数内部使用 yield 关键字。这意味着在需要时暂停或启动该功能。执行开始后，正常功能无法在两者之间停止。它将执行完整功能或在遇到return语句时暂停。生成器在这里的执行方式不同，您可以使用yield关键字暂停该函数，并在需要时再次调用生成器启动它。
function * generatorfunction（a）{
yield a;
收益+1;
}
让g = generatorfunction（8）;
console.log（g.next（））;
console.log（g.next（））;
{值:8，已完成:false}
{值:9，完成:假}
函数* generatorfunction（a）{
收益率a;
收益+1;
}
让g = generatorfunction（8）;
console.log（g.next（））;
console.log（g.next（））;
npx babel generator.js --out-file generator_es5.js
"use strict";
var _marked = /*#__PURE__*/regeneratorRuntime.mark(generatorfunction）;
函数generatorfunction（a）{
return regeneratorRuntime.wrap（function generatorfunction $（_ context）{
while（1）{
switch（_context.prev = _context .next）{
case 0:
_context.next = 2;
返回a;
案例2:
_context.next = 4;
返回+ 1;
案例4:
案例"结束":
返回_context.stop（）;
}
}
}，_ marked，this）;
}
var g = generatorfunction（8）;
console.log（g.next（））;
console.log（g.next（））;
JavaScript中的Iterator会返回一个有价值的JavaScript对象。该对象还有一个名为done的标志，它具有true / false值。如果它不是迭代器的结尾，则返回false。让我们考虑一个例子，看一下迭代器在数组上的工作情况。
让数字= [4,7,3,10];
让a = numbers [Symbol.iterator]（）;
console.log（a.next（））;
console.log（a.next（））;
console.log（a.next（））;
console.log（a.next（））;
console.log（a.next（））;
在上面的例子中，我们使用了一个数字数组，并使用 Symbol.iterator 作为数组调用了一个函数index。
我们使用数组上的next（）获得的输出如下−
{value:4，done:false}
{value:7，done:false}
{value:3，done:false}
{value:10，done:false}
{value:undefined，done:true}
输出为对象提供值，并作为属性完成。每个 next（）方法调用都会从数组中提供下一个值，并以false结尾。只有完成数组中的元素时，done的值才为true。我们可以使用它来迭代数组。还有更多选项可供选择，例如 for-of 循环，用作以下−
let numbers = [4,7,3,10];
for（let n of numbers）{
console.log（n）;
}
4
7
3
10
当 for-of loop 使用密钥时，它会提供详细信息数组值如上所示。我们将检查两种组合并查看babeljs如何将它们转换为es5。
let number = [4,7,3,10];
让a = numbers [Symbol.iterator]（）;
console.log（a.next（））;
console.log（a.next（））;
console.log（a.next（））;
console.log（a.next（））;
console.log（a.next（））;
让_array = [4,7,3,10];
for（let n of _array）{
console.log（n）;
}
npx babel iterator.js --out-file iterator_es5.js
"use严格";
var numbers = [4,7,3,10];
var a = numbers [Symbol.iterator]（）;
console.log（a.next（））;
console.log（a.next（））;
console.log（a.next（））;
console.log（a.next（））;
console.log（a.next（））;
var _array = [4,7,3,10];
var _iteratorNormalCompletion = true;
var _didIteratorError = false;
var _iteratorError = undefined;
尝试{
for（var _iterator = _array [Symbol.iterator]（），
_step;！（_ iteratorNormalCompletion =（_ step = _iterator.next（））。done） ;
_iteratorNormalCompletion = true）{
var n = _step.value;
console.log（n）;
}
} catch（错误）{
_didIteratorError = true;
_iteratorError = err;
}最后{
尝试{
if（！_iteratorNormalCompletion && _iterator.return）{
_iterator.return（）;
}
} finally {
if（_didIteratorError）{
throw _iteratorError;
}
}
}
es5中添加了 for-of 循环的更改。但iterator.next保持不变。我们需要使用 babel-polyfill 使其在旧浏览器中运行。 Babel-polyfill与babel一起安装，同样可以在node_modules中使用，如下所示−
< html>
< head>
< script type ="text / javascript"src ="node_modules / babel-polyfill / dist / polyfill.min.js">< / script>
< script type ="text / javascript"src ="iterator_es5.js">< / script>
< / head>
< body>
< h1> Iterators< / h1>
< / body>
< / html>
Destructuring属性的行为类似于JavaScript表达式，它从数组，对象中解压缩值。
以下示例将解释解构语法的工作。
let x，y，rem;
[x，y] = [10,20];
console.log（x）;
console.log（y）;
[x，y，... rem] = [10,20,30,40,50];
console.log（rem）;
让z = 0;
（{x，y} =（z）？{x:10，y:20}:{x:1，y:2}）;
console.log（x）;
console.log（y）;
10
20
[30,40,50]
1
2
以上代码行显示如何从右侧分配值数组到左侧的变量。带有 ... rem 的变量从数组中获取所有剩余的值。
我们还可以从对象中分配值在左侧使用条件运算符，如下所示−
（{x，y} =（z）？{x:10，y :20}:{x:1，y:2}）;
console.log（x）; // 1
console.log（y）; // 2
让我们使用babeljs&minus来转换为ES5;
npx babel destructm.js --out-file destruct_es5.js
"use strict";
var x = void 0，
y = void 0，
rem = void 0;
x = 10;
y = 20;
console.log（x）;
console.log（y）;
x = 10;
y = 20;
rem = [30,40,50];
console.log（rem）;
var z = 0;
var _ref = z？ {x:10，y:20}:{x:1，y:2};
x = _ref.x;
y = _ref.y;
console.log（x）;
console.log（y）;
模板文字是一个字符串文字，允许在其中使用表达式。它使用反引号（``）而不是单引号或双引号。当我们在字符串中表达表达式时，这意味着我们可以在字符串中使用变量，调用函数等。
让a = 5;
让b = 10;
console.log（`使用模板文字:值是$ {a + b} .`）;
console.log（"使用正常方式:值为"+（a + b））;
使用模板文字:值为15.
使用正常方式:价值为15
让a = 5;
让b = 10;
console.log（`使用模板文字:值是$ {a + b} .`）;
console.log（"使用正常方式:值为"+（a + b））;
npx babel templateliteral.js --out-file templateliteral_es5.js
"use strict";
var a = 5;
var b = 10;
console.log（"使用模板文字:值为"+（a + b）+"。"）;
console.log（"使用正常方式:值为"+（a + b））;
在es6中，添加到对象文字的新功能非常好用。我们将在ES5和ES6中通过一些对象文字的例子&减号;
ES5
var red = 1，green = 2，blue = 3;
var rgbes5 = {
red:red，
green:green，
blue:blue
};
console.log（rgbes5）; // {红色:1，绿色:2，蓝色:3}
ES6
让rgbes6 = {
红色，
绿色，
蓝色
};
console.log（rgbes6）; // {red:1，green:2，blue:3}
如果看到上面的代码，ES5和ES6中的对象会有所不同。在ES6中，如果变量名与键相同，则不必指定键值。
让我们看看使用babel编译ES5。
const red = 1，green = 2，blue = 3;
让rgbes5 = {
红色:红色，
绿色:绿色，
蓝色:蓝色
};
console.log（rgbes5）;
让rgbes6 = {
红色，
绿色，
蓝色
};
console.log（rgbes6）;
let brand ="carbrand";
const cars = {
[品牌]:"宝马"
}
console.log（cars.carbrand）; //"宝马"
npx babel enhancedobjliteral.js --out-file enhancedobjliteral_es5.js
"严格使用";
函数_defineProperty（obj，key，value）{
if（key in obj）{
Object.defineProperty（obj，key，{
value:value， enumerable:true，configurable:true，writable:true
}）;
} else {obj [key] = value; } return obj;
}
var red = 1，
green = 2，
blue = 3;
var rgbes5 = {
red:red，
green:green，
blue:blue
};
console.log（rgbes5）;
var rgbes6 = {
red:red，
green:green，
blue:blue
};
console.log（rgbes6）;
var brand ="carbrand";
var cars = _defineProperty（{}，品牌，"宝马"）;
console.log（cars.carbrand）; //"宝马"
在本节中，我们将讨论默认值，休息和传播属性。
使用ES6，我们可以使用函数参数的默认参数，如下所示;
let add =（a，b = 3）=> {
返回a + b;
}
console.log（add（10,20））; // 30
console.log（add（10））; // 13
让我们使用babel将上述代码转换为ES5。
npx babel default.js --out-file default_es5.js
"use strict";
var add = function add（a）{
var b = arguments.length> 1>>参数[1]！==未定义？论证[1]:3;
返回a + b;
};
console.log（add（10,20））;
console.log（add（10））;
休息参数以三个点（...）开头，如下例所示−
let add =（... args）=> {
让sum = 0;
args.forEach（function（n）{
sum + = n;
}）;
返还金额;
};
console.log（add（1,2））; // 3
console.log（add（1,2,5,6,6,7））; // 27
在上面的函数中，我们将n个参数传递给函数add。要添加所有这些参数，如果它在ES5中，我们必须依赖参数对象来获取参数的细节。使用ES6，休息有助于定义带有三个点的参数，如上所示，我们可以遍历它并得到数字的总和。
注意−当使用三个点时，我们不能使用额外的参数，即休息。
let add = （... args，value）=> {//语法错误
let sum = 0;
args.forEach（function（n）{
sum + = n;
}）;
返还金额;
};
上面的代码会给出语法错误。
对es5的编译看起来如下−
npx babel rest.js --out-file rest_es5.js
"use strict";
var add = function add（）{
for（var _len = arguments.length，args = Array（_len），_ key = 0; _key< _len; _key ++）{
args [_key] =参数[_key];
}
var sum = 0;
args.forEach（function（n）{
sum + = n;
}）;
返还金额;
};
console.log（add（1,2））;
console.log（add（1,2,5,6,6,7））;
Spread属性也有像休息一样的三个点。以下是一个工作示例，其中显示了如何使用spread属性。
let add =（a，b，c）=> {
返回a + b + c;
}
let arr = [11,23,3];
console.log（add（... arr））; // 37
现在让我们看看如何使用babel&minus编译上述代码;
npx babel spread.js --out-file spread_es5.js
"use strict";
var add = function add（a，b，c）{
返回a + b + c;
};
var arr = [11,23,3];
console.log（add.apply（undefined，arr））;
代理是一个对象，您可以在其中为属性查找，赋值，枚举等操作定义自定义行为函数，调用等。
var a = new Proxy（target，handler）;
target 和 handler 都是对象。
目标是一个对象，或者可以是另一个代理元素。
handler 将是一个对象，其属性为函数，在调用时会给出行为。
让我们试图通过示例和减号来理解这些功能;
let handler = {
get:function（target，name）{
返回目标中的名字？ target [name]:"无效密钥";
}
};
让o = {
名称:'Siya Kapoor'，
addr:'孟买'
}
让a =新代理（o，处理程序）;
console.log（a.name）;
console.log（a.addr）;
console.log（a.age）;
我们在上面的例子中定义了目标和处理程序，并将它与代理一起使用。 Proxy使用键值返回对象。
Siya Kapoor
孟买
无效密钥
现在让我们看看如何使用babel&minus将上述代码转换为ES5;
npx babel proxy.js --out-file proxy_es5.js
'use strict';
var handler = {
get:function get（target，name）{
返回目标中的名字？ target [name]:"无效密钥";
}
};
var o = {
name:'Siya Kapoor'，
addr:'Mumbai'
};
var a = new Proxy（o，handler）;
console.log（a.name）;
console.log（a.addr）;
console.log（a.age）;
