owned this note
owned this note
Published
Linked with GitHub
---
title: 'ES6'
---
# ES6 (ECMAScript 6)
---
## 為什麼要學 ES6 呢？
---
我認為的好處是：
ES6 解決了很多原本 JS 的缺陷<!-- .element: class="fragment" -->
更能貼近且玩更多 FP（Functional Programming 函數程式設計）<!-- .element: class="fragment" -->
許多新穎的工具都上 ES6+ 了，不學就看不懂<!-- .element: class="fragment" -->
註：目前已出到 ES10<!-- .element: class="fragment" -->
---
## Constants and Variables<br />變數與常數
---
#### 關於 scope { }
```javascript=
// var 的宣告在 if 的大括號 {} 內卻會汙染外部變數
if (true) {
var result = 123;
}
console.log(result); // 123
```
```javascript=
if (true) {
let result = 123;
}
console.log(result); // result is not defined
```
<!-- .element: class="fragment" -->
```javascript=
if (true) {
const result = 123;
}
console.log(result); // result is not defined
```
<!-- .element: class="fragment" -->
---
#### 關於重複宣告
var
```javascript=
var result = 123;
var result = 456;
console.log(result); // 456
```
這樣莫名其妙的覆蓋到原本用得好好的變數的情形就可能會發生...<!-- .element: class="fragment" -->
---
#### 關於重複宣告
let
```javascript=
let result = 123;
let result = 456;
// Identifier 'result' has already been declared
```
const<!-- .element: class="fragment" data-fragment-index="1" -->
```javascript=
const result = 123;
const result = 456;
// Identifier 'result' has already been declared
```
<!-- .element: class="fragment" data-fragment-index="1" -->
---
### 常數
const 宣告的變數為常數，指定後就無法重新給值
```javascript=
const result = 123;
result = 456;
// Assignment to constant variable.
```
---
## Destructuring 解構
使用語法來從陣列或是物件結構中抽離資料
---
從物件屬性建立變數
ES5
```javascript=
var personInfo = {
name: 'horse',
age: 20,
gender: 'Male',
};
var name = personInfo.name;
var age = personInfo.age;
var gender = personInfo.gender;
console.log(name); // 'horse'
console.log(age); // 19
console.log(gender); // 'Male'
```
---
從物件屬性建立變數
ES6 Object Destructuring 物件解構
```javascript=
const personInfo = {
name: 'horse',
age: 20,
gender: 'Male',
};
const { name, age, gender } = personInfo;
console.log(name); // 'horse'
console.log(age); // 19
console.log(gender); // 'Male'
```
---
## Template literals 樣板字串
---
樣板字串
```javascript=
const str = `Hello World!`;
console.log(str);
```
```javascript=
const multiLine = `This is an example
of a multiline string`;
console.log(multiLine);
```
<!-- .element: class="fragment" -->
---
字串替換
```javascript=
const name = 'horse';
console.log(`Hello, ${name}!`); // Hello, horse!
```
```javascript=
const user = { firstName: 'Kevin', lastName: 'Wade' };
console.log(`Hello, ${user.firstName} ${user.lastName}!`);
// Hello, Kevin Wade!
```
<!-- .element: class="fragment" -->
---
表達式
```javascript=
const price = 100;
const quantity = 7;
console.log(`Price: ${price * quantity}`); // Price: 700
```
```javascript=
const user = { firstName: 'Kevin', lastName: 'Wade' };
console.log(`Hello, ${user.firstName} ${user.lastName}!
Today is ${new Date()}`);
/*
Hello, Kevin Wade!
Today is Sat May 25 2019 20:43:47 GMT+0800 (台北標準時間)
*/
```
<!-- .element: class="fragment" -->
---
## Arrow Functions 箭號函數
---
### ES6 Arrow Function
ES5
```javascript=
var sayHello = function(name) {
return 'Hello ' + name;
};
console.log(sayHello('horse')); // Hello horse
```
ES6<!-- .element: class="fragment" data-fragment-index="1" -->
```javascript=
const sayHello = name => `Hello ${name}`;
console.log(sayHello('horse')); // Hello horse
```
<!-- .element: class="fragment" data-fragment-index="1" -->
---
### ES6 Arrow Function
#### forEach
ES5
```javascript=
var numbers = [1, 2, 3];
var total = 0;
numbers.forEach(function(n) {
total += n;
});
console.log(total); // 6
```
---
### ES6 Arrow Function
#### forEach
ES6
```javascript=
const numbers = [1, 2, 3];
let total = 0;
numbers.forEach((n) => {
total += n;
});
console.log(total); // 6
```
---
關於 function scope 內的 this
```javascript=
// ES5
var person = {
name: 'horse',
sayHello: function() {
setTimeout(function() {
console.log('Hello, ' + this.name);
}, 0);
},
};
person.sayHello();
```
輸出： 'Hello, '
---
關於 function scope 內的 this
```javascript=
// ES6
const person = {
name: 'horse',
sayHello() {
setTimeout(() => {
console.log(`Hello, ${this.name}`);
}, 0);
},
};
person.sayHello();
```
輸出： 'Hello, horse'
---
Default Params 預設參數
```javascript=
const sayHello = (name, msg="Hello") => `${msg}, ${name}`;
console.log(sayHello('horse', 'Hi'));
console.log(sayHello('horse'));
```
<span>輸出： Hi, horse<!-- .element: class="fragment" data-fragment-index="1" --></span>
<span>輸出： Hello, horse<!-- .element: class="fragment" data-fragment-index="1" --></span>
---
## Promises
[https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/.../Promise](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Promise)
---
## Classes
https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Classes
---
還有更多新特性就不一一贅述
接下來要講編譯工具 babel
以及重要的 polyfill 這項技術
讓舊瀏覽器也能夠使用這些新的語法
---
###### tags: `前端`
下一章： [Babel](https://hackmd.io/p/SyF4T6R24#/)
Google Drive
Gist
Clipboard
Sign in with Wallet
