---
# System prepended metadata

title: 變數解構
tags: [Mike課程]

---

---
tags:  Mike課程
---



# 變數解構

## ==常見舊式物件變數壞處==
* 一般舊式物件變數中，我們要取出裡面的值運用的話常會這樣用

```javascript=
      const data = {
        name :'Bryan',
        fe:"js vue",
        age: 18
      };
      console.log(data.name);
```
* 但若要改動data名稱時就還需要一個一個data去改掉

## ==解構式變數 解決重複的問題==

* 我們將 將data使用解構式解決

```javascript=
     const data = {
        name :'Bryan',
        fe:"js vue",
        age: 18
      };
      //將data使用解構式
      const { name ,fe ,age } = data;

      console.log( name, fe, age );
```

log顯示 : ![](https://i.imgur.com/OZjk3bc.png)

## ==解構式變數 解決物件寫入物件繁瑣的問題==
* 舊式常見的物件寫入物件中的寫法

```javascript=
      const data = {
        name :'Bryan',
        fe:"js vue",
        age: 18
      };
      //將data物件 寫入 userData中
      const userData ={
        user,
      };
```

* ES6寫法直接將data帶入要寫入的物件中

```javascript=
    const data = {
        name :'Bryan',
        fe:"js vue",
        age: 18
      };
      //將data物件 寫入 userData中
      const userData ={
        data,
        sex: "man"
      };
```

log顯示 :![](https://i.imgur.com/imOmOxV.png)





