es6解构赋值

朴灿烈づ我的快乐病毒、 2022-09-11 05:20 211阅读 0赞

**解构赋值**语法是一种 Javascript 表达式。通过**解构赋值,** 可以将属性/值从对象/数组中取出,赋值给其他变量

> let node = \{  
>     type: "Identifier",  
>     name: "foo"  
> \};  
> let \{ type, name, value \} = node;

>   
> console.log(type); // "Identifier"  
> console.log(name); // "foo"  
> console.log(value); // undefined

### **一个对象中提取变量并赋值给和对象属性名不同的新的变量名。** ###

### [给新的变量名赋值][Link 1] ###

var o = \{p: 42, q: true\};  
var \{p: foo, q: bar\} = o;

console.log(foo); // 42  
console.log(bar); // true

### [对象解构中的 Rest][Rest] ###

> let \{a, b, ...rest\} = \{a: 10, b: 20, c: 30, d: 40\}  
> a; // 10  
> b; // 20  
> rest; // \{ c: 30, d: 40 \}

### [无声明赋值][Link 2] ###

> var a, b**;**
> 
> **(**\{a, b\} = \{a: 1, b: 2\}**)**;

**注意**：赋值语句周围的圆括号 `( ... )` 在使用对象字面量无声明解构赋值时是必须的。

`{a, b} = {a: 1, b: 2}` 不是有效的独立语法，因为左边的 `{a, b}` 被认为是一个块而不是对象字面量。

然而，`({a, b} = {a: 1, b: 2})` 是有效的，正如 `var {a, b} = {a: 1, b: 2}`

你的 `( ... )` 表达式之前需要有一个分号，否则它可能会被当成上一行中的函数执行。

### 连续解构赋值 ###

> let obj=\{a:\{b:133\}\} ；
> 
> const \{a:\{b\}\}=obj;
> 
> console.log(b)  //133

### 连续解构赋值并重命名**无声明赋值** ###

> let obj=\{a:\{b:133\}\} ；
> 
> const \{a:\{b:data\}\}=obj;
> 
> console.log(data)  //133

还有一些其他的方法参考：[解构赋值 - JavaScript | MDN][- JavaScript _ MDN]

[Link 1]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#%E7%BB%99%E6%96%B0%E7%9A%84%E5%8F%98%E9%87%8F%E5%90%8D%E8%B5%8B%E5%80%BC
[Rest]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#%E5%AF%B9%E8%B1%A1%E8%A7%A3%E6%9E%84%E4%B8%AD%E7%9A%84_rest
[Link 2]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#%E6%97%A0%E5%A3%B0%E6%98%8E%E8%B5%8B%E5%80%BC
[- JavaScript _ MDN]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment