---
tags: Vue 直播班 - 2021 夏季班
---

# 上課共筆文件 - 第一週

## 語法糖與新增語法
### 新增語法：
* 箭頭函式(特性:自帶retrun)
* let 、const
#### 箭頭函式

=> { return 結果 }
=> 回傳一個結果
=> ({ 回傳物件 })

### 語法糖：
不會影響運作，邏輯與當前一致。
* 物件字面值
* 展開運算子：淺拷貝

### 物件字面值：
物件中的函式縮寫

//本來的寫法
const obj = {
    fn: function(){
        console.log('ok');
    }
}

//縮寫寫法
const obj = {
    fn(){
        console.log('ok');
    }
}

物件 key 和值相同時可縮寫

//本來的寫法
const myName = "小明";
const person = {
    myName: myName
}

//縮寫寫法
const myName = "小明";
const person = {
    myName
}

### 展開：
陣列合併：

const groupA = ['A','B','C'];
const groupB = ['D','E'];
const groupAll = [...groupA,...groupB]; //groupA groupB 都被合併至 groupAll 了

把其他物件的方法合併過來：

const methods = {
    fn(){
        console.log('methods fn')
    }
}
const methods2 = {
    ...methods,
    fn2(){
        console.log('methods fn2')
    }
}
methods2.fn(); //可印出 methods fn

### 解構：
const { 變數名稱 } = 物件名稱;
如果在解構式裡放函式，不能加上括號。

const {method()} = people; //錯誤
const {method} = people; //正確

### 樣板字面值：
可使用變數、運算結果、加入判斷式
**等號右邊的就可以大膽放入!**

const text = `${變數名稱}去吃飯`;

運算結果

function sum(a,b){
    return a+b;
}
const text = `${sum(1,2)}`;

加入判斷式(三元運算子)，三元運算子寫法為：「判斷式 ? 如果是 true 要做什麼 : 如果是 false 要做什麼」
sum(1,2)>7 ? '超過7':'低於7'

function sum(a,b){
    return a+b;
}
const text = `${sum(1,2)}${sum(1,2)>7 ? '超過7':'低於7'}`;

### 陣列處理方法：
除了forEach，其他迴圈手法都會產生空陣列
map的長度會跟原始陣列一模一樣

使用 map 方法回傳物件格式，並使用箭頭函式的縮寫時，要用小括號括起來

const map = people.map(item=>
    ({
        text: `${item.name}`
    })
);

filter 回傳符合條件的陣列

const filter = people.filter(item=>item.price>90)

* [JavaScript 陣列處理方法 [filter(), find(), forEach(), map(), every(), some(), reduce()]
](https://wcc723.github.io/javascript/2017/06/29/es6-native-array/)

## 第四周大魔王：
API(第二周釋出)
Component
Props,Emits
ESM(第一周釋出)
可能加碼協助:線上助教、加碼活動

## 關注點分離：
是一個設計模式

**關鍵點:先定義資料**

關注點分離，常見的分離點
* 資料HTML, JS 分離
* 資料與方法分離

## ESmodule (ESM)
JS模組化分裝(依據功能)
可將外部JS引入近來

與傳統載入差別:
能管理、知道載入內容(不全部載入)
差別在封裝，不會汙染到全域
> [
]