> For the complete documentation index, see [llms.txt](https://xiaohesong.gitbook.io/today-i-learn/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://xiaohesong.gitbook.io/today-i-learn/front-end/es6/understanding-es6/destructuring.md).

# 解构赋值

## object destructuring

* 默认值

```javascript
let {a, b = 'b'} = {a: 'a'}
```

* 别名

```javascript
let node = {
        type: "Identifier",
        name: "foo"
    };

let { type: localType, name: localName } = node;
```

* 别名设置默认值

```javascript
let node = {
        type: "Identifier"
    };

let { type: localType, name: localName = "bar" } = node;
```

> 注意，这个默认值仅为`undefined`的值进行赋值。
>
> ```javascript
> const obj = {name: null, age: false, fullname: undefined}
> const {name = 'xiaohesong', age = 18, fullname = 'xiaohesong'} = obj
> ```
>
> 所以你试试结果论证一把。
>
> 如果不只是想对`undefined`解构，可以使用译者写的一个插件： [babel-plugin-use-or-operator-for-destructuring-default-value](https://github.com/xiaohesong/babel-plugin-use-or-operator-for-destructuring-default-value)

* 嵌套的玩法

```javascript
let node = {
        type: "Identifier",
        name: "foo",
        loc: {
            start: {
                line: 1,
                column: 1
            },
            end: {
                line: 1,
                column: 4
            }
        }
    };

let { loc: { start }} = node;

console.log(start.line);        // 1
console.log(start.column);      // 1
```

## array destructuring

* 赋值

```javascript
let users = ['xiaocai', 'xiaozhang', 'xiaohesong']
let [,,xhs] = users
console.log(xhs) //xiaohesong
```

* 拷贝

在构造函数之前，是其他方式。

```javascript
// cloning an array in ECMAScript 5
var colors = [ "red", "green", "blue" ];
var clonedColors = colors.concat();

console.log(clonedColors);      //"[red,green,blue]"
```

es6

```javascript
// cloning an array in ECMAScript 6
let colors = [ "red", "green", "blue" ];
let [ ...clonedColors ] = colors;

console.log(clonedColors);      //"[red,green,blue]"
```

## object and array destructuting

混合型的解构

```javascript
let node = {
        type: "Identifier",
        name: "foo",
        loc: {
            start: {
                line: 1,
                column: 1
            },
            end: {
                line: 1,
                column: 4
            }
        },
        range: [0, 3]
    };

let {
    loc: { start },
    range: [ startIndex ]
} = node;

console.log(start.line);        // 1
console.log(start.column);      // 1
console.log(startIndex);        // 0
```

## function default params destructuring

函数的参数的默认值的解构

```javascript
function say({name, age, sex}) {
  #do smt
}

say()
```

这样会出错，为什么。 在引擎执行的时候，他是会这么解析

```javascript
function say({name, age, sex}) {
   let {name, age, sex} = options
}
```

所以如果想控制参数必填，这样是很好的。但是如果你想要参数是可选，那就可以给参数设置默认参数.

```javascript
function say({name, age, sex} = {}) {
  #do smt
}
say()
```

这样就不会报错.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://xiaohesong.gitbook.io/today-i-learn/front-end/es6/understanding-es6/destructuring.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.