# 四之 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)
Sign in with Wallet
Connect another wallet