ES6学习之变量的解构赋值

网友投稿 216 2023-06-14


ES6学习之变量的解构赋值

变量的解构赋值

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] = ['fohttp://o','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 //http:// '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 XgOeyP{foo:{bar}} = {baz:'baz'}

总结

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


版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:关于不同页面之间实现参数传递的几种方式讨论
下一篇:BootStrap Datetimepicker 汉化的实现代码
相关文章

 发表评论

暂时没有评论,来抢沙发吧~