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}
对象的解构赋值,等号左边可以什么都不写,虽然没有意义,但是语法是对的
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的内容可能有些琐碎,所以学习的时候也要有些耐心
参考资料