变量的解构赋值

ES6中允许按照一定模式,从数组和对象中提取,对变量进行赋值。

数组的解构赋值

var [a,b,c] = [1,2,3];
a // 1;
b // 2;
c // 3;

上面的代码标示可以从数组中提取值,按照位置的对应关系对变量进行赋值。

本质上,这种写法属于“模式匹配”,只要等号两边的模式相同,左边的变量就会被赋予对应的值。

let [foo,[[bar],baz]] = [1,[[2],3]];
foo //1;
bar //2;
baz //3;

let [,,third] = ['foo','bar','baz'];
third //'baz'

let [head,...tail] = [1,2,3,4]
head //1;
tail //[2,3,4]

如果解构不成功,变量的值就等于undefined。

let [x,y,z] = ['a']
x // 'a';
y // undefined
z //[]

不完全解构

如果等号左边的模式只匹配等号右边数组的一部分,解构依然可以成功,这种情况叫做不完全解构。

let [x,y] = [1,2,3]
x //1
y //2

如果等号右边不是数组,那么将会报错。(不具备可遍历的结构)。

只要某种数据结构具有Iterator接口,都可以采用数组形式的解构赋值

function* fibs(){
 var a = 0;
 var b = 1;
 while(true){
  yield a;
  [a,b] = [b,a b];
 }
}

var [first,second,third,fourth,fifth,sixth] = fibs();
sixth // 5

fibs是一个Generator函数,原生具有Iterator接口,解构赋值会依次从这个接口获取值。

默认值

解构赋值允许指定默认值。

var [foo=true] = [];
foo //true

ES6内部使用严格相等于运算符(===)判断一个位置是否有值。所以,一个数组成员如果不严格等于undefined,默认值便不会生效。

var [x = 1] = [undefined]
x // 1

var [x = 1] = [null]
x // null

表达式也可以作为默认值,如果表达式作为默认值的时候,该表达式是惰性求值的,只有在用到的时候才会求值。

function f(){
 console.log('aaa')
}

let [x = f()] = [1]

在上面的代码中,函数f不会执行,是因为x能取到值。

默认值可以引用解构赋值的其他变量,但该变量必须已经声明。

对象的解构赋值

解构赋值可以应用在数组上,同样也可以用于对象。

 var {foo,bar} = {foo:'aaa',bar:'bbb'}
 foo // 'aaa'
 bar // 'bbb'

对象的解构赋值与数组有一个不同点,就是数组的元素是按次序排序的,变量的取值由它的位置决定,而对象的属性没有次序,变量必须与属性同名,才能取到正确的值。

var {bar,foo} = {foo:'aaa',bar:'bbb'}
foo //'aaa'
bar //'bbb'


var {baz} = {foo:'aaa',bar:'bbb'}
baz //undefined

如果变量名与属性名不一致,那必须写成这样:

var {foo:baz} = {foo:'aaa'}
baz //'aaa'

实际上对象的解构赋值是以下的形式简写:

var {foo:foo,bar:bar} = {foo:'aaa',bar:'bbb'}

对象的解构赋值的内部机制,是先找到同名属性,然后再赋给对应的变量,真正被赋值的是后者,而不是前者。

但是,采取上面的写法时,变量的声明和赋值是一起的,对于let和const而言,变量不能重新声明,所以一旦赋值的变量以前声明过,就会报错。

对象的解构也可以用于嵌套结构的对象。

var obj = {
 p: [
  'hello' ,
  {
   y : 'world'
  }
 ]
}

var {p:[x,{y}]} = obj

x //'hello'
y //'world'

这时p是模式,不是变量,因此不会被赋值。

对象的解构赋值也可以指定默认值,默认值的生效条件是,对象的属性值严格等于undefined。

var {x=3} = {x:undefined}
x //3

var {x=3} = {x:null}
x //null

如果解构模式是嵌套对象,而且子对象所在的父属性不存在,那么将会报错。

var {foo:{bar}} = {baz:'baz'}

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家学习或者使用ES6能带来一定的帮助,如果有疑问大家可以留言交流。

ES6学习之变量的解构赋值的更多相关文章

  1. iOS >>块>>更改块外部的变量值

    我不是在处理一个Object并改变它,就像我的mString一样.我希望’center’属性的行为类似于myInt,因为它是直接访问的C结构,而不是指向对象的指针.我希望’backgroundColor’的行为类似于我的imstring,因为它是一个指向一个新对象的对象的指针,不是吗?

  2. 寒城攻略:Listo 教你 25 天学会 Swift 语言 - 05 Strings and Characters

    Swift所代表的字符串是字符串类型,进而代表字符类型的值的集合//Swift的String和Character类型提供了一个快速的,兼容Unicode的方式来处理代码中的文本信息。每一个字符值代表一个Unicode字符,我们可以利用for-in循环来遍历字符串中的每一个字符println}//定义一个字符常量letyenSign:Character="$"printlncharacters")//使用"countElements()"函数来获取字符串的长度//8.ConcatenatingStrings

  3. swift 部分运算符

    下面的语句是无效的:ifx=y{println("这一特征可以防止使用相等的运算符(==)时,不小心使用赋值运算符(=)。通过使ifx=y无效,Swift可以帮助你避免代码中出现这些类型的错误")}2.swift中字符串的追加可以使用加法运算leth="hello,"letw="world"println(h+w)//输出hello,world3.范围运算符:闭区间运算符:表示[a,b]例如:forindexin1...5{println//输出1,2,3,4,5}半开区间运算符:表示[a,b)例如for

  4. 二 Swift学习之基本运算符

    二Swift学习之基本运算符————–借鉴老码团队翻译组-Tyrion1.1术语运算符有一元、二元和三元运算符。三元运算符操作三个操作对象,和C语言一样,Swift只有一个三元运算符,就是三目运算符(a?这不同于上面提到的自增和自减运算符。无疑空合运算符(??由于userDefinedColorName是一个可选类型,我们可以使用空合运算符去判断其值。

  5. Swift算术运算符

    ==,返回值为true和false逻辑运算符:!,&,&&,|,||(短路或)位运算符:~,^,>>,

  6. Swift语法基础:11 - Swift的运算术语, 赋值运算, 数值运算, 复合赋值

    在Swift当中当然是有与或非这三个逻辑运算符,并且兼容大部分C类运算符,比如“”,“=”,“==”,“=”,“+”,“-“,“*”,“/”,这些等等都支持,但这里有一点要注意一下,赋值符号“=”不返回值,以防止把“==”写成“=”导致程序出错.区别于C,Swfit还提供对浮点数类型进行取余预算“%”,还提供了C没有提供的区间,“0..

  7. Swift可选类型和可选链

    ),允许接受nil控制则是正常类型强制拆封如果我们能确定可选类型一定有值,那么在读取它的时候,可以在可选类型的后面加一个感叹号(!)println对result1中的语句进行了强制拆封前问号,后感叹号,强制拆封隐式拆封为了能够方便的访问可选类型,可以将可选类型后面的问号改成感叹号(!问号表示引用的时候,如果某个环节为nil,她不会出现错误,而是把nil返回给引用者,这种使用问号引用可选类型的方式叫做可选链三、使用问号?

  8. swift开发基础之变量和常量

    swift开发基础之变量和常量今天学习了一下swift语言感觉IOS又迈出了自己的一步代码上面简化了很多,并可以使用playground一个实时预览的效果注意:常量直接用let就行了如果对上面的常量重新赋值会出现错误不需要制定类型变量直接用var就行了可以多次赋值可以制定类型也可以不制定类型感觉很智能化可以多次重新赋值最后是一个变量叠加的问题只需要加一个\然后将数字括起来就行了playground

  9. Swift教程04-定义声明变量重要原则

    和很多其他语言一样,要使用Swift的变量,首先需要声明,定义1.声明变量的原则[最重要]:2.导入对应的框架,使用import3.定义变量示例/*定义变量说明:定义的变量名,即标识符必须以Unicode字符开头,可以使用汉字,$,下划线开头变量与常量:变量使用var,常量使用let定义定义变量形式:varxx:类型=xxx常量类似分号的省略:每行之后的分号可以省略掉,但是如果你在一个一行写多个语

  10. Swift教程07-基本数据类型(三)元组类型tuple

    元组乃何方神圣?

随机推荐

  1. js中‘!.’是什么意思

  2. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  3. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  4. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,怎么实现这样的功能呢?今天小编给大家分享AugularJs上传前预览图片的实现代码,需要的朋友参考下吧

  6. JavaScript面向对象编程入门教程

    这篇文章主要介绍了JavaScript面向对象编程的相关概念,例如类、对象、属性、方法等面向对象的术语,并以实例讲解各种术语的使用,非常好的一篇面向对象入门教程,其它语言也可以参考哦

  7. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  8. javascript 动态调整图片尺寸实现代码

    在自己的网站上更新文章时一个比较常见的问题是:文章插图太宽,使整个网页都变形了。如果对每个插图都先进行缩放再插入的话,太麻烦了。

  9. jquery ajaxfileupload异步上传插件

    这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

返回
顶部