---
# System prepended metadata

title: Javascript 第八章 ES6
tags: [JS X Codeshiba]

---

# Javascript 第八章 ES6
###### tags: `JS X Codeshiba`

## ES6的特性

**範例一: for迴圈**
使用前:
用原有迴圈的結構，變數容易在外面汙染其他變數或被汙染
![](https://i.imgur.com/ZBRRxBI.png)

使用後:
變數不影響後續迴圈的結構了!!
![](https://i.imgur.com/IZQllHw.png)

原因: 原有var的作用域需要用function來區分，變成let只需要用大括號來區分

**範例二: if...else結構**
使用前:
用var，最後的console.log就直接把變數印出來了
![](https://i.imgur.com/Dk20ZHn.png)

使用後:
值並未覆寫，仍是原有宣告的變數
![](https://i.imgur.com/tm0dVxb.png)

**範例三: IIEF 立即函式**
![](https://i.imgur.com/vFqxhUB.png)

## 常數(const)
首先，訂出來的常數不可以隨意改變
![](https://i.imgur.com/Bj5M6HD.png)
但是當常數拿來定義物件時，裡面的值是可以變的
![](https://i.imgur.com/skBaYsn.png)

連屬性都可以增加
![](https://i.imgur.com/bJ7DC57.png)

## 用let來解構賦值
用let宣告過後就不能再次宣告
![](https://i.imgur.com/w1fDhit.png)

用let就可以以陣列的形式來宣告值，就不用重複宣告
![](https://i.imgur.com/iLitfHO.png)

用let值也可以以物件的形式來宣告
![](https://i.imgur.com/tV90X7R.png)

```Explaination
{a,b}其實是
{a=a,b=b}的縮寫
```

## For in & For of
[MDN_For of](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of)
[MDN_For in](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Statements/for...in)

## iterator 迭代器
請參考:
[MDN 迭代協議](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Iteration_protocols)

![](https://i.imgur.com/oYLieRc.png)
![](https://i.imgur.com/owmGJ2R.png)

## for of 的用法
![](https://i.imgur.com/k0zrvWn.png)
![](https://i.imgur.com/l7pz43D.png)

## 樣板字面值
![](https://i.imgur.com/siumFFM.png)

## 擴展運算子
讓陣列可以直接用console.log表達出來
![](https://i.imgur.com/WWWTeUi.png)

讓陣列可以被用來做相關運算
![](https://i.imgur.com/jE3Ed9D.png)

讓陣列可以連結起來
![](https://i.imgur.com/6KiR9dl.png)

也可以使用在物件上，並會取代掉原有的屬性
![](https://i.imgur.com/fXJKpkC.png)

## 箭頭函式
[參考文章 箭頭函式MDN](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Functions/Arrow_functions)

![](https://i.imgur.com/t3xaGUs.png)

## Call & This
![](https://i.imgur.com/zAyRamK.png)





