es6学习之解构时应该注意的点

前端之家收集整理的这篇文章主要介绍了es6学习之解构时应该注意的点前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

前言

本文主要给大家介绍了关于在es6解构时需要注意的一些事项,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧。

如果要将一个已经声明的变量用于解构赋值,必须非常小心。

错误的写法 let x; {x} = {x: 1}; // SyntaxError: Syntax error

上面代码的写法会报错,因为 JavaScript 引擎会将{x}理解成一个代码块,从而发生语法错误。只有不将大括号写在行首,避免 JavaScript 将其解释为代码块,才能解决这个问题。

如果变量名与属性名不一致,必须写成下面这样。

let obj = { first: 'hello',last: 'world' };
let { first: f,last: l } = obj;
f // 'hello'
l // 'world'
//这实际上说明,对象的解构赋值是下面形式的简写
let { foo: foo,bar: bar } = { foo: "aaa",bar: "bbb" };

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

let { p: [x,{ y }] } = obj;
x // "Hello"
y // "World"

注意:这时p是模式,不是变量,因此不会被赋值。如果p也要作为变量赋值,可以写成下面这样。

let { p,p: [x,{ y }] } = obj;
x // "Hello"
y // "World"
p // ["Hello",{y: "World"}]

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

let {toString: s} = true;
s === Boolean.prototype.toString // true

函数的参数也可以使用解构赋值。

add([1,2]); // 3

上面代码中,函数add的参数表面上是一个数组,但在传入参数的那一刻,数组参数就被解构成变量x和y。对于函数内部的代码来说,它们能感受到的参数就是x和y

undefined就会触发函数参数的默认值。

x); // [ 1,'yes',3 ]

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对编程之家的支持

原文链接:https://www.f2er.com/js/36782.html

猜你在找的JavaScript相关文章