es6学习之解构时应该注意的点
前言
本文主要给大家介绍了关于在es6解构时需要注意的一些事项,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧。
如果要将一个已经声明的变量用于解构赋值,必须非常小心。
//错误的写法
letx;
{x}={x:1};
//SyntaxError:syntaxerror
上面代码的写法会报错,因为JavaScript引擎会将{x}理解成一个代码块,从而发生语法错误。只有不将大括号写在行首,避免JavaScript将其解释为代码块,才能解决这个问题。
//正确的写法
letx;
({x}={x:1});
如果变量名与属性名不一致,必须写成下面这样。
var{foo:baz}={foo:'aaa',bar:'bbb'};
baz//"aaa"
letobj={first:'hello',last:'world'};
let{first:f,last:l}=obj;
f//'hello'
l//'world'
//这实际上说明,对象的解构赋值是下面形式的简写
let{foo:foo,bar:bar}={foo:"aaa",bar:"bbb"};
也就是说,对象的解构赋值的内部机制,是先找到同名属性,然后再赋给对应的变量。真正被赋值的是后者,而不是前者。
let{foo:baz}={foo:"aaa",bar:"bbb"};
baz//"aaa"
foo//error:fooisnotdefined
letobj={
p:[
'Hello',
{y:'World'}
]
};
let{p:[x,{y}]}=obj;
x//"Hello"
y//"World"
注意:这时p是模式,不是变量,因此不会被赋值。如果p也要作为变量赋值,可以写成下面这样。
letobj={
p:[
'Hello',
{y:'World'}
]
};
let{p,p:[x,{y}]}=obj;
x//"Hello"
y//"World"
p//["Hello",{y:"World"}]
解构赋值时,如果等号右边是数值和布尔值,则会先转为对象
let{toString:s}=123;
s===Number.prototype.toString//true
let{toString:s}=true;
s===Boolean.prototype.toString//true
函数的参数也可以使用解构赋值。
functionadd([x,y]){
returnx+y;
}
add([1,2]);//3
上面代码中,函数add的参数表面上是一个数组,但在传入参数的那一刻,数组参数就被解构成变量x和y。对于函数内部的代码来说,它们能感受到的参数就是x和y
undefined就会触发函数参数的默认值。
[1,undefined,3].map((x='yes')=>x); //[1,'yes',3]
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对毛票票的支持。