时间:2021-05-28
变量的解构赋值
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 // undefinedz //[]不完全解构
如果等号左边的模式只匹配等号右边数组的一部分,解构依然可以成功,这种情况叫做不完全解构。
let [x,y] = [1,2,3]x //1y //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 // 5fibs是一个Generator函数,原生具有Iterator接口,解构赋值会依次从这个接口获取值。
默认值
解构赋值允许指定默认值。
var [foo=true] = [];foo //trueES6内部使用严格相等于运算符(===)判断一个位置是否有值。所以,一个数组成员如果不严格等于undefined,默认值便不会生效。
var [x = 1] = [undefined]x // 1var [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}]} = objx //'hello'y //'world'这时p是模式,不是变量,因此不会被赋值。
对象的解构赋值也可以指定默认值,默认值的生效条件是,对象的属性值严格等于undefined。
var {x=3} = {x:undefined}x //3var {x=3} = {x:null}x //null如果解构模式是嵌套对象,而且子对象所在的父属性不存在,那么将会报错。
var {foo:{bar}} = {baz:'baz'}总结
以上就是这篇文章的全部内容了,希望本文的内容对大家学习或者使用ES6能带来一定的帮助,如果有疑问大家可以留言交流。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例讲述了ES6新特性之变量的解构赋值。分享给大家供大家参考,具体如下:1.数组的解构赋值//①可以从数组中提取值,按照对应位置,对变量赋值var[a,b]
本文实例讲述了ES6数组与对象的解构赋值。分享给大家供大家参考,具体如下:数组的解构赋值基本用法ES6允许按照一定的模式,从数组和对象中提取值,对变量进行赋值,
本文实例讲述了ES6知识点整理之对象解构赋值应用。分享给大家供大家参考,具体如下:ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(D
本文实例讲述了ES6知识点整理之数组解构和字符串解构的应用。分享给大家供大家参考,具体如下:ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称
前言首先在ES6中引入的“解构赋值语法”允许把数组和对象中的值插入到不同的变量中。虽然看上去可能很难,但实际上很容易学习和使用。解构赋值语法是一种JS表达式。E