Es6的那些事

现在看招聘网站上的要求，作为前端er~都要熟悉甚至精通（滑稽脸）es6，项目中也经常用，啥let，const，尤其是用react的同学，肯定对解构赋值不会陌生，今天逛淘宝前端的博客，看到一篇名为Es6你可能不知道的事，感觉平时对Es6的理解还是太浅了。。。

我学习es6是跟阮一峰老师的教程学习的，真的是巨详细。

 

一、let 和 const

 

不存在变量提升，let改变了语法行为，所声明的变量一定要在声明之后使用否则会报错

只要使用了let命令，所声明的变量就绑定了这一区域，不再受外部作用域的影响，区块中只要使用了const和let命令，就在一开始形成了封闭作用域，凡在声明之前使用这些变量就会报错

function bar（x=y, y=2） {
    return [x, y]
}

bar() 会报错

块级作用域，es5函数只能在块级作用域和顶层作用域声明，不能再块级作用域中声明

函数声明语句的行为类似于let。在块级作用域中相当let

ES6 允许在块级作用域中声明函数，但是考虑到块级作用域行为差异太大 ，应该避免在块级作用域内声明函数，如果确实需要，也应该写成函数表达式，而不是函数声明式，而且只能是在使用大括号的块级作用域

 

const命令

const是一个只读的常量，一旦声明常量的值就不会改变，const只声明不赋值报错，声明的变量也不会提升，同样存在暂时性死区，只能在声明的位置后面使用

本质上并不是变量的值不会改动，而是变量的内存地址不会改动，const只能保证指针是固定的，数据解构是不可变的，但是对象本身是可变的 

 

我们平时使用的时候第一印象：let是用来替换var的，常量一般用const（以前这么理解的请举手），但其实是const定义的是不可重新定义赋值的值， 所以他的应用场景应该很广，包括常量、配置项以及引用的组件、定义大部分的中间组件，反之就let而言，应用场景会很少，我们只会在loop循环中才会用到（而且由于const由于不可以重新赋值的特性，所以可以做更多语法静态分析方面的优化，从而有更高的执行效率）

 

二、箭头函数

 

我非常喜欢箭头函数，因为语法简单，形态优雅

我在在前面写的关于this的文章中，提到了要注意箭头函数的this指向，箭头函数没有独立的执行上下文，所以内部引用this对象会直接访问父级，当年我们用过的中间变量（self, that, me, _that, _me, Self...），如果只有一个参数时，可以省略相应的括号

尤其是在连续的promise链式调用的过程中，可以使代码更加优雅

 

三、解构赋值

 

按照一定模式，从数组和对象中提取值，对变量进行赋值，成为解构赋值

如果解构不成功，会等于undefined

不完全解构赋值。只匹配一部分等号左边的数组，解构可以成功

解构赋值右边如果不是数组或者说不能遍历循环的解构，报错

对象的解构赋值的内部赋值机制，先找到同名属性，再赋给对应的变量，真正被赋值的是后者，而不是同名的属性

例子

{first： f, last: l} = { first:"hello", last :"world"}
f  hello
l  world

和数组一样，解构也可以用于嵌套解构的对象、

对象的解构可以指定默认值，默认值生效的条件是，对象的属性值严格等于undefined

如果解构失败，变量的值等于undefined

注意：如果将已经声明的变量用于解构赋值，必须非常小心

for example
let x;
{x} = {x:1} 

这样写会报错，因为js引擎将{x}理解成一个代码块，从而发生语法错误，只有不将大括号写在行首，避免js将其理解成代码块，才能解决这个问题，可以将他写在一个圆括号里

对象的解构赋值，等号左边可以什么都不写，虽然没有意义，但是语法是对的

 

ES6的规则是，只有可能导致解构的歧义，就不得使用圆括号，所以只要有可能就不在模式中中使用圆括号

不能使用圆括号的情况

变量声明语句不能使用

函数参数不能使用

赋值语句的模式

 

解构赋值的用途：

1、交换变量的值 [x, y] = [y, x]

2、可以使用解构赋值返回多个值，返回一个数组或者一个对象，取出值就很方便。就是return 数组或者对象

3、函数参数的定义，可以方便的将参数和传入的值对应起来

4、提取json

5、函数参数的默认值

6、遍历map解构

7、输入模块的指定加载方式，解构赋值会很清晰

 

四、promise

promise不只是一个对象，一个语法，更是一种异步编程方式的变化

所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。

Promise对象有以下两个特点。

（1）对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是Promise这个名字的由来，它的英语意思就是“承诺”，表示其他手段无法改变。
（2）一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise对象的状态改变，只有两种可能：从pending变为fulfilled和从pending变为rejected。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果，这时就称为 resolved（已定型）。如果改变已经发生了，你再对Promise对象添加回调函数，也会立即得到这个结果。这与事件（Event）完全不同，事件的特点是，如果你错过了它，再去监听，是得不到结果的。

小结：es6还有很多新的特性，比如模板字符串，正则扩展就不在这具体整理了，es6的内容可能有些琐碎，所以学习的时候也要有些耐心

参考资料

淘宝前端 es6你不知道的那些事

es6 阮一峰教程