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

  • Z时代
  • 2024-01-10
  • 分类：综合

前言

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

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

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

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

// 正确的写法
let x;
({x} = {x: 1});

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

var { foo: baz } = { foo: 'aaa', bar: 'bbb' };
baz // "aaa"
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 { foo: baz } = { foo: "aaa", bar: "bbb" };
baz // "aaa"
foo // error: foo is not defined

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

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

let obj = {
 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

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

function add([x, y]){
 return x + y;
}
add([1, 2]); // 3

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

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

[1, undefined, 3].map((x = 'yes') => x);
// [ 1, 'yes', 3 ]

总结

以上是 es6学习之解构时应该注意的点 的全部内容， 来源链接： utcz.com/z/352160.html

回到顶部