zoukankan      html  css  js  c++  java
  • ES6知识整理(2)--变量的解构赋值

    最近准备在业余空闲时间里一边学习ES6,一边整理相关知识。只有整理过的学习才是有效的学习。也就是学习之后要使用和整理成文,才是真正的学到了。。。

    上一篇是一个试水,现在接上。

    变量提升


    看了下朋友回复,上篇还少讲了个变量提升,其实也是搜索之后才看到的,于是现在这里说下,所谓变量提升是es5中才有的,es6中已经去除了。

    这里写个栗子:

    变量的先使用后定义场景

    var声明,这样

    8.png

    let声明,这样

    9.png

    查了一下,基本可以理解为:es5容忍这种写法,即使是先使用,后面才声明,也不会报错。但es6就无法容忍了,你前面没声明,你就不能使用,即使后面声明了。得有个先后顺序。


    解构赋值


    现在我们来说说,es6的解构赋值,比起es5有什么不同呢?都是一种赋值方式。(解构赋值的场景很多)


    这是es5的多个变量赋值方式:

    image.png

    这是es6的多个变量赋值方式(当然es6中也能用es5的语法):

    分别赋值了,一一对应的。

    image.png

    你甚至可以这样,只要左右两边的解构一样就可以。

    image.png

    es6允许这样:(,左右可以是空的)声明的变量对应后面的值

    image.png

    还有这种操作:(...变量,把后面的值以数组形式都赋值给后面的变量)

    image.png

    当然,这样就报错了:(...变量必须是解构赋值的最后一个变量)

    image.png

    这种情况,只有一个值,第二个值就没有了,就是undefined,...变量就是个空数组

    image.png

    不完全解构


    这里只去前面的对应

    image.png

    b只取了2

    image.png

    这样子b取的就是数组了

    image.png

    默认值解构


    表示赋的值为不写或undefined,那就会取默认值

    image.png

    image.png

    严格相等运算符(===)


    image.png

    对象的解构赋值


    可以这样子,赋值时:后面给出变量的值

    image.png

    位置是可以调换的,值一样

    image.png

    没赋值到的变量会是undefined,不报错

    image.png

    字符串解构赋值


    只取单个字符串

    image.png

    这表示es6的取字符串长度,{}中,:前面就是es5的.操作,:后面是变量(但这种方式很少用,也不是所有的方法和属性都支持)

    image.png

    函数参数的解构赋值


    1和2对应赋值给x和y

    image.png


    解构赋值的用途场景


    互相赋值

    image.png

    函数中返回多个值

    image.png


    变量map:

    image.png

    打印是这样

    image.png


    即使工作中,也要平均每天(晚上)花2个小时进行学习与总结,无论学的是什么。


    ——公众号:海瑞菌

    qrcode_for_gh_94b347630286_258.jpg


  • 相关阅读:
    史上最全的SpringMVC学习笔记
    bzoj4551 [Tjoi2016&Heoi2016]树
    bzoj1196 [HNOI2006]公路修建问题
    bzoj3573 [Hnoi2014]米特运输
    bzoj3527 [Zjoi2014]力
    bzoj4197 [Noi2015]寿司晚宴
    【国家集训队2012】tree(伍一鸣)
    bzoj2748 [HAOI2012]音量调节
    bzoj2049 [Sdoi2008]Cave 洞穴勘测
    bzoj3611 [Heoi2014]大工程
  • 原文地址:https://www.cnblogs.com/wuhairui/p/9080361.html
Copyright © 2011-2022 走看看