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

    记得刚开始看《JavaScript高级程序设计》的时候,其实一直搞不懂JavaScript的BOM、DOM、ECMAScript三部分之间的关系,随着自己的编程经历丰富,最近再回头看高程,其实这三者也就越清晰,ECMAScript其实是ECMA-262定义的一种编程基础标准,并不只是服务于JavaScript,ECMAScript只是作为JavaScript语言的核心和基础,它也和web浏览器没有依赖关系,而JavaScript是以浏览器为环境,所以JavaScript又在ES基础上添加了DOM这样与编程环境(也就是web浏览器)进行交互的接口,而DOM其实也离不开ES的基础定义,包括基本的语法、类型、操作符等等。

    再说说ES的历史吧,记得15年刚接触前端,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=undefined

let [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 8
move({x:3});// 3 0
move({});// 0 0 
move();// 0 0
----------
function move({x,y}={x:0,y:0}){
    return [x,y];
}

move({x:3,y:8});// 3 8
move({x:3});// 3 undefined
move({});//undefined undefined
move();//0 0
    上面的两个函数参数都用了解构赋值,也都有默认值的应用,不过在形式上有点小差别。第一个是对x,y设置了默认值0,又对xy对象整体设置了默认值空对象{};第二个则只对xy对象设置了默认值{x:0,y:0}。
    7.对于编译器来说,一个式子是表达式还是解构赋值要解析到等号才能确认,但模式中出现括号就会带来一些问题,所以es6规则是,只要可能导致解构歧义就不能使用圆括号。建议只要有可能就不要在模式中放圆括号。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值