🍈作者简介：大家好，我是亦世凡华、渴望知识储备自己的一名在校大学生
🍇个人主页：亦世凡华、的博客
🍓系列专栏：ECMAScript专栏
🥝推荐一款模拟面试刷题神器🔥：点击跳转进入网站
文章目录
1. 简介
ECMAScript6.0也称ES6，是JavaScript 语言的下一代标准，2015 年 6 月正式发布，目的是使JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。
1.1 ES6与JavaScript的关系
ES6发布的第一个版本就成为规定了浏览器脚本语言的标准，并将这种语言称为ECMAScript，这种标准一开始就针对JavaScript语言制定，取名的原因与公司和商标有关，总之ES6和JavaScript的关系是，前者是后者的规范，后者是前者的一种实现。
1.2 Node下查看默认没有打开的ES6实验性语法
// Linux & Mac
$ node --v8-options | grep harmony
// Windows
$ node --v8-options | findstr harmony这里就拿Windows下举例
1.3 ES6代码转ES5代码
利用Babel转换器实现代码转换，原始代码用了箭头函数，Babel将其转换普通函数。
// 转码前
input.map(item => item + 1);
// 转码后
input.map(function (item) {
return item + 1;
});
2. let和const的变量声明及特点
2.1 let的命令用法
let是ES6新增的命令，用来声明变量，方法类似于var，但所声明变量只在其规定的let命令所在代码块内有效，例如
{
var a = 1;
let b = 2;
}
console.log(a);
console.log(b);
上面代码分别用var 和 let 声明两个变量并在外调用，结果let声明变量报错，表明let只能在规定代码块内才能使用。
var a = [];
for (let i = 0; i < 10; i++) {
a[i] = function () {
console.log(i);
};
}
a[2](); // 2
//a[3](); // 3上面代码是用let声明，声明的变量仅在块级作用域内有效，所以说当前的i只在本轮循环有效，因为 JavaScript 引擎内部会记住上一轮循环的值，初始化本轮的变量i时，就在上一轮循环的基础上进行计算，所以每次循环的i都是一个新的变量，所以最后输出的就是对应的值。
2.2 let的变量提升情况
我们知道，如果我们使用var命令，在预解析的作用域下，会导致变量提升，详情请看我相关博客的介绍：JavaScript入门到精通（四）连载_亦世凡华、的博客-CSDN博客
ES6为了纠正这种现象，使得let命令改变了语法行为，它所声明的变量一定要在声明后，否则会报错。例如：
// var
console.log(a); // 输出undefined
var a = 1;
// let
console.log(b); // 报错ReferenceError
let b = 1;
var的声明下，由于变量提升会先声明a但不赋值，执行输出语句当然是undefined，而let声明下，由于没有变量提升，输出b前，b是不存在的，只能抛出一个错误
2.3 let的重复声明情况
let不允许在相同作用域内重复声明同一个变量；所以也不能在函数内部重新声明参数。否则报错
function fn() {
let a = 1;
let a = 2;
} // 报错
function fn() {
let a = 1;
var a = 2;
} // 报错
function fn(a) {
let a;
}
fn() // 报错
function fn(a) {
{
let a;
}
}
fn() // 不报错2.4 let的暂时性死区
在代码块内，使用let命令声明变量之前，该变量都是不可使用的，凡是在声明之前就使用这些变量，就会报错，这在语法上，称为“暂时性死区(TDZ)”。
if (true) {
// TDZ开始
a = '张小凡'; // ReferenceError
console.log(a); // ReferenceError
let a; // TDZ结束
console.log(a); // undefined
a = '张小凡';
consle.log(a); // 张小凡
}
上面代码中，在let命令声明变量a之前，都属于变量a的“死区”，ES6规定暂时性死区主要是为了减少运行时错误，防止在变量声明前就使用这个变量，从而导致意料之外的错误，这种规定显然很容易避免了这样的错误。
2.5 const的命令用法
const声明的是一个只读变量，一旦声明，变量的值无法更改，否则报错
const a = '张小凡';
console.log(a);
a = '666';
console.log(a);
const声明的变量不能改变值意味着，一旦const声明就必须进行初始化，不立即赋值会立马报错。
const a;
2.6 const的其它特点
const和let一样，只在声明所在的块级作用域内有效，声明的常量也不存在变量提升，同样存在暂时性死区，声明的常量也与let一样不可重复声明。
2.7 const的实际作用
const保证的并不是变量的值不能变动，而是变量指向的那个内存地址所保存的数据不能变动。
const a = [];
a.push('Hello'); // 可执行
a.length = 0; // 可执行
a = ['Dave']; // 报错上面代码中，常量 a是一个数组，这个数组本身是可写的，但是如果将另一个数组赋值给 a，就会报错。
3. ES6的6种声明变量方式
常见的：var 和 function；ES6添加的 let 和 const ；以及另外两种 import 和 class 命令
4. 变量的赋值-解构
ES6允许从数组和对象中提取值，对变量进行赋值，被称为“解构”
4.1 数组的解构
以数组方式进行变量赋值属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予相对应的值，这样的赋值方式比以前的赋值方式更简单和清楚。解构不成功右边的值会是undefined；不完全解构的话，左边的模式会匹配右边相对应的部分；等号右边不是数组会报错;解构赋值允许指定默认值,最后一个表达式之所以会报错，是因为 m用 n做默认值时， n还没有声明
var[a,[[b],c]] = [1,[[2],3]];
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3
let [ , , d] = ["A", "B", "C"];
console.log(d); // "C"
let [x,,y] = [1, 2, 3];
console.log(x); // 1
console.log(y); // 3
let [A,B, ...C]=['a']
console.log(A) //a
console.log(B) //undefined
console.log(C) //[]
let [o] = 1; //报错
let [m = 1, n = m] = []; // m=1; n=1
let [m = 1, n = m] = [2]; // m=2; n=2
let [m = 1, n = m] = [1, 2]; // m=1; m=2
let [m =n, n = 1] = []; // ReferenceError: n is not defined4.2 对象的解构
与数组解构不同，对象解构变量必须与属性同名，才能取到正确的值。
let { a, b } = { a: 'aaa', b: 'bbb' };
console.log(a);
console.log(b);
let { c } = { d: 'ddd', e: 'eee' };
console.log(c); 
对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。真正被赋值的是后者，而不是前者。 说白了就是，a是匹配的模式，b才是变量，真正被赋值的是b而不是模式a
let { a: b } = { a: 'aaa', b: 'bbb' };
console.log(b);
console.log(a); 
对象的解构也可以指定默认值。
var {x = 3} = {x: undefined};
x // 3
var {x = 3} = {x: null};
x // null上面代码中，属性 x等于 null，因为 null与 undefined不严格相等，所以是个有效的赋值，导致默认值 3不会生效。
4.3 字符串的解构
对字符串进行解构后，得到的是类似于数组的对象
const [a, b, c, d, e] = 'hello';
console.log(a);
console.log(b);
console.log(c);
console.log(d);
console.log(e);
4.4 函数参数的解构
function fun([x, y]){
return x + y;
}
add([2, 2]); // 4函数fun的参数表面上是一个数组，但传入参数的那一刻，数组参数就被解构成变量x和y，当然函数参数也可以使用默认值。
function arr({x = 0, y = 0} = {}) {
return [x, y];
}
arr({x: 3, y: 8}); // [3, 8]
arr({x: 3}); // [3, 0]
arr({}); // [0, 0]
arr(); // [0, 0]4.5 数值和布尔值的解构
解构赋值时，如果等号右边是数值和布尔值，则会先转为对象，数值和布尔值的包装对象都有 toString属性，因此变量 s都能取到值。由于 undefined和 null无法转为对象，所以对它们进行解构赋值，都会报错。
let {toString: s} = 123;
s === Number.prototype.toString // true
let {toString: s} = true;
s === Boolean.prototype.toString // true
let { prop: x } = undefined; // TypeError
let { prop: y } = null; // TypeError4.6 圆括号问题
ES6 的规则：只要有可能导致解构的歧义，就不得使用圆括号。
// 全部报错
let [(a)] = [1];//变量声明语句
function f([(z)]) { return z; }//函数参数
({ p: a }) = { p: 42 };//赋值语句模式
可以使用圆括号的情况只有一种：赋值语句的非模式部分，可以使用圆括号。
[(b)] = [3]; // 正确
({ p: (d) } = {}); // 正确
[(parseInt.prop)] = [3]; // 正确第一行语句中，模式是取数组的第一个成员，跟圆括号无关；第二行语句中，模式是p，而不是d；第三行语句与第一行语句的性质一致。
4.7 注意点
（1）一个已经声明的变量用于解构赋值
// 错误的写法
let x;
{x} = {x: 1};
// SyntaxError: syntax error
// 正确的写法
let x;
({x} = {x: 1});
JavaScript 引擎会将 {x}理解成一个代码块，从而发生语法错误。只有不将大括号写在行首，避免 JavaScript 将其解释为代码块，才能解决这个问题。
（2）解构赋值允许等号左边的模式之中，不放置任何变量名。
({} = [true, false]);
({} = 'abc');
({} = []);
（3）可以对数组进行对象属性的解构。
let arr = [1, 2, 3];
let {0 : first, [arr.length - 1] : last} = arr;
first // 1
last // 34.8 解构的作用
（1）交换变量的值
let x = 1;
let y = 2;
[x, y] = [y, x];
（2）函数参数的定义 (方便将一组参数和变量名对应起来)
function f({x, y, z}) { }
f({z: 3, y: 2, x: 1});（3）从函数中返回多个值 (函数只能返回一个值，放在数值或对象中返回多个)
// 返回一个数组
function a() {
return [1, 2, 3];
}
let [a, b, c] = a();
console.log(a());
// 返回一个对象
function b() {
return {
foo: 1,
bar: 2
};
}
let { foo, bar } = b();
console.log(b());
（4）函数参数默认值(避免了在函数体内再书写)
jQuery.ajax = function (url, {
async = true,
beforeSend = function () {},
cache = true,
complete = function () {},
crossDomain = false,
global = true,
// ... more config
} = {}) {
// ... do stuff
};（5）输入模块的指定方法 (使输入语句非常清晰)
const { SourceMapConsumer, SourceNode } = require("source-map");（6）遍历Map解构 (Map 结构原生支持 Iterator 接口，配合变量的解构赋值，获取键名和键值就非常方便)。
const map = new Map();
map.set('first', 'hello');
map.set('second', 'world');
for (let [key, value] of map) {
console.log(key + " is " + value);
}
（7）提取JSON数据
let jsonData = {
id: 2022,
sex: "boy",
data: [1, 2]
};
let { id, sex, data: number } = jsonData;
console.log(id, sex, number);
🍃前端的学习还是要以多练习为主，想要练习前端的朋友，推荐可以去牛客网看一看，链接： 牛客网 里面的IT题库内容很丰富，属于国内做的很好的了，最重要的是里面的资源是免费的，是课程+刷题+面经+求职+讨论区分享，一站式求职学习网站，感兴趣的可以去看看
呼~，因为学习，文章拖了俩天才写完，不过总算是搞完了，本文一方面是加深自己对ES6的学习和提高知识的储备；另一方面也是希望帮助看到这篇文章的人学习更多的知识。今后也会不间断的更新关于前端的知识，大家一起共勉，一起进步，不足之处，还请指正。
想学习更多前端知识，关注博主，不迷路~~~~
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/140143.html
