zoukankan      html  css  js  c++  java
  • 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 阮一峰教程

  • 相关阅读:
    使用DragonFly进行智能镜像分发
    Operator部署Prometheus
    kubernetes中部署Jenkins并简单使用
    kubernetes常用控制器之DaemonSet
    kubernetes中部署nacos
    selenium自动化操作
    BeautifulSoup爬取网页分页
    细品BeautifulSoup节点访问
    再端一碗BeautifulSoup
    初试爬虫
  • 原文地址:https://www.cnblogs.com/jinzhou/p/9157489.html
Copyright © 2011-2022 走看看