首页 > 代码库 > [ES6] 09. Destructuring Assignment -- 2

[ES6] 09. Destructuring Assignment -- 2

2024-08-03 12:03:50   255人阅读

Read More: http://es6.ruanyifeng.com/#docs/destructuring

 

Array

“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值:

Exp 1:

var [head, ...tail] = [1, 2, 3, 4];console.log(head); // 1console.log(tail);  // [2, 3, 4]

Exp 2:

var [foo, [[bar], baz]] = [1, [[2], 3]];foo // 1bar // 2baz // 3

 

如果解构不成功，变量的值就等于undefined:

var [foo] = false;  console.log(foo); // undefinedvar [foo] = [false];console.log(foo); // false

 

另一种情况是不完全解构:

var [x, y] = [1, 2, 3]; console.log(x); // 1console.log(y); // 2

 

解构只能用于数组或对象, 对undefined或null进行解构，会报错:

// 报错var [foo] = undefined;var [foo] = null;

 

解构赋值允许指定默认值:

[x, y=‘b‘] = [‘a‘] // x=‘a‘, y=‘b‘

 

Object

var o = {  p: [    "Hello",    { y: "World" }  ]};var { p: [x, { y }] } = o;x // "Hello"y // "World"

 

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

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

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

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

 

[ES6] 09. Destructuring Assignment -- 2


联系
我们