---
# System prepended metadata

title: 四之 1、 JS 102 進入 ES
tags: [2020八月第一週, 2020七月第五週, Lidemy心得, JS102, JavaScript續, 進度筆記]

---

# 四之 1、 JS 102 進入 ES
###### tags: `JS102` `JavaScript續` `2020七月第五週` `進度筆記` `Lidemy心得` `7/30

---

## ES5 ES6 的概念，現在已經到 ES11 !?

ECMAScrpit 由歐洲電腦製造商(現為 ECMA 電信標準組織) 推行的標準化規範，可根據這個規格來開發 ， JavaScript 即是根據這根據這標準。  

ES6 (也有這樣稱呼 ES6=ES2015) 在 2015 年發布新版本， ES5 是稍微舊一點的版本，但可以查詢 JS 內容和運作。

參考資料:

[Day2 [JavaScript 基礎] 淺談 ECMAScript 與 JavaScript](https://ithelp.ithome.com.tw/articles/10213310)  

[ECMA-262](https://www.ecma-international.org/publications/standards/Ecma-262.htm)  

---

## ES6 新增了 let 和 const

新增類似 var 的宣告方法。

```
let a = 10
const b = 10
console.log(a, b )
```

常數 constant (const) ， 會不能改變他的值，因為是個變數，但是如果對其這樣做:
```
let a = 10
const b = {
  number: 10
}

b.number = 20
console.log(a, b )
```

因 const 宣告這個物件後存在記憶體內的值，被外部更動了 (.number) 去改了內部的值。
但如果先宣告了某值，後面再去更動 const 的宣告就不行:
```
let a = 10
const b = '123'
b= '456'
console.log(b)
```

b 會無法被賦上 456 的值。

---

## 作用域 (scope)

作用域 (scope) 是變數的生存範圍， JS 內是以 function 作為變數的生存範圍 ，例如:

```
var a = 10
function test() {
  console.log(a)
}

test()
```
`var a = 10` 這行是在 function 的上層，因對 function 區塊內要求要印出 a ， 但區塊內沒有 a 就會往上一層找，直到找到為止。

這樣 test() 下的 `console.log(a)` 會找不到，因為是 function 區塊內的 `console.log(a)` 和 底下的 test() 位於不同層:
```
function test() {
  var a = 10
  console.log(a)
}

test()
console.log(a)
```
可以以這個例子得知 a 的生存範圍在 function 內。

---

## 因此 let 的生存範圍很小

var 這樣是活得下去的，例如:
```
function test() {
  if (10 > 5 ) {
    var a = 10
  }
  console.log(a)
}

test()
```
用 `console.log(a)` 可以從外面拿到區塊內的 a 值。

但是 let 和 const 就只能活在區塊 { } 內，用 `console.log(a)` 無法拿到區塊內的 a 值:
```
function test() {
  if (10 > 5 ) {
    let a = 10
  }
  console.log(a)
}

test()
```

這樣子要讓 `console.log(a)` 也跟 let 同一層 (即同一區塊內) 才能拿到 a 值。  
有些 value 沒有要改變的情況可以用 const ， 盡量用 let 而不是 var ， 因為會希望作用域越小越好，像 var 可能會互相干擾(干擾其他層)，而 let 可以限縮只作用在某一區塊內。  

---

# 四之 2、 JS 102 ES6 樣板字面值
###### tags: `JS102` `JavaScript續` `2020七月第五週` `進度筆記` `Lidemy心得` 7/30

---

## 樣板字面值 （template literals）

### 字串傳統拼接的兩個問題。

1. 多行字串 ES6 以前要設定多行的方法:
```
var str = '' + 
'XD' + '\n' +  // 換行的意思;
'XDD'

console.log(str)
```
這樣才會拼接變成多行字串。

2. 太多字串拼接的時候會很繁瑣:

```
function sayHi(name) {
  console.log('hello, ' + name + ' now is ' + new Date())
}

sayHi('Haku')
```
可能會 '' 和 + 號搞混。

---

## 多行字串
因此在 ES6 (ES2015) 多行字串 (Template literals) 使用前導字元鍵 `` 來解決這個問題。  
一樣可以當一般字串使用:
```
var str = `str`
console.log(str)
```

也可以多行字串:
```
var str = `
Hi
Hello
How are you ?
`
console.log(str)
```
好處是可以直接多行(更懶了)，不用打換行符號。

---

### 也可以與 ${ } (常在區塊內放變數) 併用。

跟之前用一堆 str 比照的話:
```
function sayHi(name) {
  console.log('hello, ' + name + ' now is ' + new Date())
}

sayHi('Haku')
```
架好模板直接用:

```
function sayHi(name) {
  console.log(`hello, ${name} now is ${new Date()}`)
}

sayHi(`Haku`)
```
${name} 像是内嵌的方式，取 name 這個變數，也可以在 $ { } 內放內建函式，這樣子的模板架構也比較好懂，直覺。

---

參考資料:
[樣板字面值](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Template_literals)  

[[筆記] JavaScript ES6 中的模版字符串（template literals）和標籤模版（tagged template）](https://pjchender.blogspot.com/2017/01/javascript-es6-template-literalstagged.html)  

[JavaScript ES6 Template Literals 字串樣版](https://www.fooish.com/javascript/ES6/template-literals.html)  

---

# 四之 2、 JS 102 ES6 解構 (destructuring)
###### tags: `JS102` `JavaScript續` `2020八月第一週` `進度筆記` `Lidemy心得` 8/2

ES6 提供解構賦值的新方法，可以提高閱讀性和效率。

---

## 陣列解構 

一般排陣列的方式:
```
const arr = [1, 2, 3, 4]

var first = arr[0]
var second = arr[1]
var third = arr[2]
var fourth = arr[3]

console.log(second , third)
```

ES6 可以更直觀的這樣看:
```
const arr = [1, 2, 3, 4]

var [first, second, third, fourth] = arr

console.log(second , third)
```
會直接對應上去。

---

## 物件解構

ES5 一般 obj 的作法:
```
const obj = {
  name: 'Haku',
  age:30,
  address: 'Taiwan No.1'
}

var name = obj.name
var age = obj.age
var address = obj.address

console.log(address)
```
會印出 Taiwan No.1 。

ES6 中的解構方式:

```
const obj = {
  name: 'Haku',
  age: 30,
  address: 'Taiwan No.1'
}

var {name, age, address} = obj

console.log(address)
```

好處是 ES6 中的解構不用像 ES5 這樣 `var name = obj.name` 可以省略宣告賦值 name 和 age ，直接拿出來成為變數; 和省略初始值 key ， 把 name 跟 age 設為 obj.name 和 obj.age 。

---

### 可以一層一層疊上去
```
const obj = {
  name: 'Haku',
  age: 30,
  address: 'Taiwan No.1',
  family: {
    mom: 'Hi'
  }
}

var {family} = obj

console.log(family)
```
可以得到物件 { mom: 'Hi' } 。

用ES6 解構的語法:
```
const obj = {
  name: 'Haku',
  age: 30,
  address: 'Taiwan No.1',
  family: {
    mom: 'Hi'
  }
}

var {name, age, address, family} = obj
var {mom} = obj
console.log(family, address)
```
一樣可以拿到物件 { mom: 'Hi' } 和 上層的 Taiwan No.1 。

---

### 更複雜一點的，可以解構後再度解構:
```
const obj = {
  name: 'Haku',
  age: 30,
  address: 'Taiwan No.1',
  family: {
    mom: 'Hi'
  }
}

var {family: {mom}} = obj
console.log(mom)
```
會得到 Hi ， 只拿最後一層，前面 family 無法拿。
其實是這樣對應:
```
const obj = {
  family: {
    mom: 'Hi'
  }
}

var {
  family: {
    mom
  }
} = obj
console.log(mom)
```
兩個物件結構類似，這是雙層解構。

---

### 函式內的解構

一般函式內從前面傳入:

```
function test(obj) {
  console.log(obj.a)
}

test({
  a:1,
  b:2
})
```

函式內解構:
```
function test({a, b}) {
  console.log(a)
}

test({
  a:1,
  b:2
})
```
在函式裡面放 { } 取物件的值出來用。

---

參考資料:

[解構賦值](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) 

[解構賦值](https://eyesofkids.gitbooks.io/javascript-start-from-es6/content/part4/destructuring.html)

[[筆記] JavaScript ES6 中的陣列解構賦值（array destructuring）](https://pjchender.blogspot.com/2017/01/es6-array-destructuring.html)  

[[筆記] JavaScript ES6 中的物件解構賦值（object destructuring）](https://pjchender.blogspot.com/2017/01/es6-object-destructuring.html)

[Day 08: ES6篇 - Destructuring Assignment(解構賦值)](https://ithelp.ithome.com.tw/articles/10185430)

