ES6程序员es6相关

Es6中变量的解构与赋值

2017-05-29  本文已影响515人  itclanCoder
收听音频,戳如下链接.jpg

收听音频,戳链接,因旧号itclan已暂停使用,可移步新itclanCoder微信公众号,收听更多内容

前言

前端技术日新月异,现在出去面试,也基本都会问你Es6的一些内容了,越来越多的项目已经在用了的,这已是必然的趋势,无论是抱守Es5,还是现学Es6,Es7,时间也都会推着我们前进,今天一起来学习一下变量的解构赋值,本篇并不涉及什么高大上的内容,针对初学者,毫无压力,但需要对ES5的定义变量var关键字,数组,对象有所熟悉,对Es6新增的let,const有所了解,下面就我的学习和使用,跟大家分享一下使用心得,感受Es6不一样的魔力与强悍

什么是数组

如下代码示例所示

   var arr = [1,true,"itclan",null,undefined,function(){}],
        a = arr[0],
        b = arr[1],
        c = arr[2],
        d = arr[3],
        e = arr[4],
        f = arr[5]
  console.log(arr);//[1,true,"itclan",null,undefined, function]
  console.log(a,b,c,d,e,f); //1 true "itclan" null undefined (){}

官方解释:一组有序列值的集合
直白解释:按照次序排列的一组值,每一组中的值又叫做元素,元素与元素之间用逗号隔开,每个值在这个集合中都有一个位置,也就是对应的编号,以数字表示,从0开始,通常称为索引
特点:

什么是解构

官方定义:按照一定的模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(是针对数组或者对象中的值的提取和解析,在原有的结构基础上按照一定的规则进行重新定义结构,使变量赋值更为直观简单)
直白解释:模式匹配,映射关系,只要等号两边的模式相同,一一对应,左边的变量就会被赋予对应的值

数组的结构赋值.png

let与const命令同样适用解构赋值

03let与const同样适合变量的解构赋值.png

注意:

  1. 可以对一个数组进行拆分
  2. 它是基于那些有遍历接口的
  3. 拓展运算符:是三个点,它好比rest参数的逆运算,将一个数组转换为用逗号分割的参数序列,该运算符主要用于函数调用

等号右边不是数组(不是可遍历的结构),或是不具备可枚举(Interator)的接口,要么本身就具备Iterator接口

不具备inerator接口的会解构不成功

上面的表达式都会报错,左右等式两边若类型不对等的话,都会报错

允许指定默认值

允许指定默认值

对象的解构赋值

对象的解构与数组一样,同样可以嵌套

  1. 注意如下示例line是变量,loc和start都是模式,不会被赋值
  2. 对象的解构可以指定默认值

  3. 默认值生效的条件是:对象的属性值严格等于undefined,导致默认值不会生效,如果解构失败,变量的值等于undefined


    对象的解构与数组一样,同样可以嵌套

字符串的解构赋值

字符串的解构赋值
注意

数值和布尔值的解构赋值

解构赋值时,如果等号右边是数值或布尔值,则会转换为对象

函数参数的解构赋值

函数的参数解构赋值

上面的两段代码分别是没有使用解构赋值,和使用了解构赋值,前一个呢,是通过函数直接传参的形式,后一个呢,你可以理解为将圆括号内作为整个参数,传进去,函数multiply2的实际参数并不是一个数组,而是通过解构得到的变量x,y
两者性能比较:执行代码所消耗的时间,从结果得出，前者要优于后者,后者只是一种代码书写的简化，后者消耗的时间长一点,小段代码性能差别并不是很大,不受影响,但是若是很多的话,也是影响性能的,因为它先要解构,在赋值嘛,语法糖虽新,简化了操作,必然牺牲性能,有得必有失,适用就好


函数的参数解构与不解构性能比较

函数的参数的解构也允许适用默认值

函数result的参数是一个对象,通过这个对象进行解构,得到x和y的值,如果解构失败,则x和y等于默认值

函数的参数的解构也允许适用默认值
注意下面的一种写法与上面的区别,上面的是直接赋值,实际参数少于形式参数时,则会返回undefined,函数result的参数指定默认值,而不是为变量x和y指定默认值
函数Result的参数指定默认值,而不是为变量x和y指定默认值

解构赋值的用途

函数参数的定义

如下代码实例所示:解构赋值可以方便的将一组参数与变量名对应起来
三个点表示的是，拓展运算符,基于那些有遍历接口的,可以对一个数组进行拆分,它好比rest参数的逆运算,将一个数组转为用逗号分割的参数序列,主要运用于函数调用,函数orderValue是一有序列值,而DisorderedValue函数后面的参数是一组无序列值
当参数是一组无序的值,通过这种写法,很方便的提取json对象中想要的参数，这里提取的是a,b,c要注意一点,若实参数多于形参数,上面形参数没有的话,它是会报错的


函数参数的定义

函数参数的默认值

函数参数的默认值

通过原始的判断值的方式与Es6中的解构赋值的方式，对比可知,明显Es6的写法要简易得多

循环遍历Map结构与Set结构

注意最后一个Set结构的使用,里面的代码中已经设置了Set参数,会提示Uncaught SyntaxError: Identifier 'iterable' has already been declared这么一个错误,并不是说明这段代码有任何问题,是由于这个Set结构之前已经声明一次了,你可以单独把这段代码复制粘贴,打开另外一个窗口控制台或者新建单独一个js脚本,进行测试即可,由此也可以得出Set()结构并不能重复声明,且该构造器函数的成员是唯一的,没有重复的值,因此可以用来作为数组的去重一个好的方法,想想之前原始的去重方法,什么数组下标比较,循环遍历元素比较,总之实现起来没有这么简单粗暴,这在面试笔试的时候,有时,短时间要想写出来,还真是费不少时间的(笔试过的深有感触)

小结:for循环,forEach(),for-in,Object.keys(),for-of遍历属性

共同点:可循环遍历属性

不同点:for循环遍历寻找,只针对数组等有length长度的,对于json对象无能为力,forEach循环遍历,是Es5中内置的方法,但是不能中断循环,使用break语句和return语句,for-in循环,遍历对象的属性,他不仅会遍历自定义属性还会遍历出原型下的属性,不推荐使用for-in来循环一个数组,因为,它不像对象,数组跟普通对象的属性不一样,是有序列值为指标的,for-in是用来循环带有字符串key的对象的方法,找到对象里面的属性名和属性值,当操作的是一个数组时,则用Object.keys(),而不需要时则选用for-in,因为for-in不仅遍历自定义属性，还会遍历出原型,继承的属性,如果不是自己想要的结果,我们必须通过简单的if语句进行过滤删选,以确保我们访问的是自定义属性,for-of是Es6新增的,最为强大,不仅弥补了forEach和for-in循环的短板,与for-in语法结构上相似,但它的功能很丰富,可以循环很多东西,属于全能型的,可以循环一个数组，循环一个字符串,循环一个类型化数组，循环Map,循环一个Set,循环DOM,循环一个拥有enumerable属性对象，循环一个生成器(以后在讲)
至于更多相关Map和set两种新增的数据结构,以后在详聊的

总结
其实,整篇文章主要是围绕着变量的解构赋值进行说明,从什么是数组开始,到数组的解构,一些新增的语法糖确实精简了不少代码,对于习惯了Es5，我只用var,没有使用过Es6的童鞋来说,可能刚开始有些抗拒的,觉得怪里怪气的,是真的人云亦云中的语法清晰,可读性和表现力增强,有待在不断使用当中领悟,或许标准就是精简,写得更少,做得更多,谈到了let与const同样适用于解构赋值，函数参数等的解构赋值,最重要的是莫过于变量解构的用途,以及结尾循环遍历Map结构与Set结构，关于for循环,forEach(),Object.keys(),for-in,for-of的使用

以下是本篇提点概要

更多内容尽在微信itclanCoder公众号.jpg
上一篇 下一篇

猜你喜欢

热点阅读