ECMAScript6简介和学习笔记(一) let const 解构

来源:互联网 发布:常见网络骗局 编辑:程序博客网 时间:2024/04/27 23:07
    记得刚开始看**《高程》**的时候es6就有迹可循了,第三版最新*截止2016年*底的高程其实是12年出版的吧,那时候其实是es5刚出也没多久的时候,甚至浏览器对es5支持还不是很好,但其实es6很早就开始酝酿了。    es6从开始制定到最后发布其实整整用了15年。1999年的es3一经发布就获得了极大成功,而新的es4也在2000年即开始酝酿,但直到07年es4的草案发布,各方对是否通过这个标准依然有着很大的分歧,因为es4对es3进行了很激进的升级改版,最终还是只发布了去除了比较激进部分的es5(最初叫es3.1)版本,其余激进的内容(起名叫做harmony)留在了es6再考虑,11年es5.1发布,成为了在15年es6发布前的国际标准。2016年又对es6进行了一些修改,常被称为es2016。    走过了es6 15年的光辉岁月,下面让我们拥抱全新大改版吧

let命令

    js没有块级作用域一直以来会造成很多困扰,es6在这方面进行了let的努力。    let命令用于声明变量,类似var,但是其声明的变量只能在let所在的代码块中有效,变量不会泄漏到外层作用域中,当然作用域链还是正常生效的,妈妈以后再也不怕我的for循环的i出循环被滥用了~划重点开始    1.不存在变量提升    2.暂时性死区,只要块级作用域中存在let命令,它所声明的变量就会绑定在这个区域,而且根据第一条不存在变量提升,如果你在变量a let声明前调用a(即使在作用域链中存在同名a变量)只能爆出*referenceError*引用错误,因为后面的let a=5;形成了a的暂时性死区,可以理解为let a屏蔽了a的外层作用域链的寻找。给个示范代码。
var a = 123;{{    a=3;//ReferenceError    let a;}}
    3.不允许重复声明,var的声明十分随意,这也带来了很多的困扰,但let声明了变量后不允许重复声明,包括已经用var声明了的变量在let声明,总之let的重复声明会报错。    4.let实际上为js加了块级作用域,另外es6还规定了块级作用域的任意嵌套,和上面第2个重点的代码相同,{}可以显式的创建一个块级作用域。

const命令

    const命令用来声明常量,且在其声明后值就不可改变,所以const声明变量必须立即初始化(赋值),另外作用域的情况是和let相同的,只在块级作用域内有效,且同样存在暂时性死区,不可重复声明,所以在声明对象变量是必须非常小心。

变量解构赋值

    es6中允许按照一定模式,从数组和对象中提取值,对变量进行赋值。本质上,这种赋值其实是一种模式匹配,根据等号两边变量或常量的模式按照一定的规则进行匹配赋值。
var [a,b,c] = [1,2,3];//结果 a=1;b=2;c=3;----------let [a,[[b],c]] = [1,[[2],3]];//结果同上----------let [a] = [];//解构不成功 a=undefinedlet [a] = [1,2];//不完全解构 a=1
    解构不成功的情况按我的理解是解构在解析等号右边的构造时没有可以解析的对象,造成的声明了而赋值未成功。不完全解构是在解析等号右边的构造时没有解析到最后,只能匹配右边数组的一部分。    当然也不必过分深究这两个概念,只要记得解构的几种可能分别对应什么情况即可。划重点开始    1.等号右边被解析的对象必须是可遍历的结构,即有Iterator接口。总体来说,如果右边不是对象,则解构时会将其先转化为对象,当然由于null和undefined无法转化为对象,所以对他们进行解构赋值会报错。    2.var let const 命令都可以进行解构赋值,    3.允许指定默认值,当一个被赋值成员的值解构后严格等于undefined时,启用默认值。    4.对象的解构赋值规则略微特殊,数组的元素是按照次序排列的,变量由他的位置决定,而对象的属性没有次序,变量必须与属性同名,才能取到正确的值。对象解构赋值的内部机制是先找到同名的属性,然后再赋给相应的变量。
vat {a:a,b:b} = {a:"b",b:"a"};//a="b" b="a"vat {a:b,b:a} = {a:"b",b:"a"};//a="a" b="b"
    如上式,键名相互对应,然后对键值进行赋值,真正被赋值的是后者而不是前者。    5.字符串也可以解构赋值,被解构赋值时它会被转换成一个类似数组的对象,数值和布尔值解构赋值时会先转化为对象    6.函数参数可以设置解构赋值,也可以使用默认参数,举两个例子,你可以自己先分辨一下他们 。
function move({x=0,y=0}={}){    return [x,y];}move({x:3,y:8});// 3 8move({x:3});// 3 0move({});// 0 0 move();// 0 0----------function move({x,y}={x:0,y:0}){    return [x,y];}move({x:3,y:8});// 3 8move({x:3});// 3 undefinedmove({});//undefined undefinedmove();//0 0
    上面的两个函数参数都用了解构赋值,也都有默认值的应用,不过在形式上有点小差别。第一个是对x,y设置了默认值0,又对xy对象整体设置了默认值空对象{};第二个则只对xy对象设置了默认值{x:0,y:0}。    7.对于编译器来说,一个式子是表达式还是解构赋值要解析到等号才能确认,但模式中出现括号就会带来一些问题,所以es6规则是,只要可能导致解构歧义就不能使用圆括号。建议只要有可能就不要在模式中放圆括号。
1 0