owned this note
owned this note
Published
Linked with GitHub
---
title: javascript 6.11 ES6 (ES2015)
tags: javascript, 5x
---
6.11 0326 javascript ES6 (ES2015)
===
ES6有很多比ES5更加好用的語法!
# let 變數
在ES5，使用`var`宣告變數
在ES6，使用`let`宣告變數
javascript
```javascript
//var name = "kitty"; //在ES5，用var宣告變數
let name = "kitty"; //在ES6，用let宣告變數
console.log(name);
```
console
```bash
"kitty"
undefined
```
## `let` 與`var`相比的好處
### 1. let
* 區域變數：被設成`let`的變數僅能作用在宣告的範圍裡面
（如下圖例：為`迴圈`內部）
```javascript=
for (let i = 0; i < 3; i++ ) {
console.log(i);
}
```
console
```javascript
0
1
2
```
* `let`如果未事前先宣告，就會出現錯誤
```javascript=
for (let i = 0; i < 3; i++ ) {
}
console.log(i);
```
console
```javascript
"error"
"ReferenceError: i is not defined
at nororos.js:7:38
at https://static.jsbin.com/js/prod/runner-4.1.7.min.js:1:13924
at https://static.jsbin.com/js/prod/runner-4.1.7.min.js:1:10866"
```
### 2. var
為全域變數，商業邏輯出錯時不容易debug
```javascript=
for (var i = 0; i < 3; i++ ) {
}
console.log(i);
```
等於
```javascript=
var i;
for (i = 0; i < 3; i++ ) {
}
console.log(i);
```
結果皆為:
console
```javascript
3
```
### 3. `let`和`var`同時使用，變數會被全域的`var`決定
javascript
```javascript=
var i; //全域
for (let i = 0; i < 3; i++ ) {
}
console.log(i);
```
console
```javascript
undefined //而不是3
```
### 4. `let` 與`var`不同之處：變數的有效範圍不同
設定為`let`的變數，就算在迴圈內數值被改變，也只會作用在區域範圍內，不會影響到外面
```javascript=
let i = 100;
for (let i = 0; i < 3; i++) {
console.log('hi');
}
console.log(i);
```
console
```javascript
"hi"
"hi"
"hi"
100 //仍然是100
```
設定為`var`的變數，在任何區域重新給值時，數值都會被改變
```javascript=
var i = 100;
for (var i = 0; i < 3; i++) {
console.log('hi');
}
console.log(i);
```
console
```javascript
"hi"
"hi"
"hi"
3 //100被改為3
```
### ES6 寫法
```javascript=
let i = 10;
for (let i = 0; i < 5; i++) {
console.log('hi');
}
console.log(i);
```
console
```javascript
"hi"
"hi"
"hi"
"hi"
"hi"
10 // 迴圈印5次hi，let變數仍為10
```
### ES5寫法
```javascript=
var i = 10;
for (var i = 0; i < 5; i++) {
console.log('hi');
}
console.log(i);
```
console
```javascript
"hi"
"hi"
"hi"
"hi"
"hi"
5 // 迴圈印5次hi，var變數被改為5
```
# const 常數
常數不可被更改
```javascript=
const age = 18;
console.log(age); //印出18
age = 20; //TypeError: 型別錯誤，不可指定變數值給常數
const age = 20; //SyntaxError: 變數名稱已經被宣告過了
```
console
```javascript
18
"error"
"TypeError: Assignment to constant variable.
at nororos.js:5:5
at https://static.jsbin.com/js/prod/runner-4.1.7.min.js:1:13924
at https://static.jsbin.com/js/prod/runner-4.1.7.min.js:1:10866"
"error"
"SyntaxError: Identifier 'age' has already been declared
at https://static.jsbin.com/js/prod/runner-4.1.7.min.js:1:13924
at https://static.jsbin.com/js/prod/runner-4.1.7.min.js:1:10866"
```
# 解構
## ES6 `let { key, key }` = `變數名稱`
javascript
```javascript=
var hero = { name: '孫悟空', age: '18' };
let { name, age } = hero; // 從var指定為let變數
console.log(name);
console.log(age);
```
console
```bash
"孫悟空"
"18"
```
# 字串與變數的串接
## ES6 使用` `` ` 圍住整體，`${變數}`帶到字串裡
javascript
```javascript=
let name = "kitty";
console.log(`Hello, ${name}`); //"Hello, kitty"
```
## ES5 使用`+` 串接字串與變數
javascript
```javascript=
var name = "kitty";
console.log("Hello, " + name); //"Hello, kitty"
```
console
```bash
"Hello, kitty"
```
# 箭頭函式
e.g. 假設有一html語法如下：
```htmlmixed
<a href="#" id="zone">Hello Zone</a>
```
## ES6 以箭頭`=>`代替函式`function()`
javascript
```javascript=
document.querySelector('.zone').addEventListener('click', evt => {
console.log('我被按了!');
});
```
function內的程式碼如果只有一行，可以連大括弧都省略
```javascript=
document.querySelector('.zone').addEventListener('click', evt => console.log('我被按了!'););
```
## ES5 函式`function()`
javascript
```javascript=
document.querySelector('.zone').addEventListener('click', function(evt){
console.log('我被按了!');
});
```
# 陣列
```javascript=
var friends = ['Ross','Joey','Chandler','Monica','Phoebe','Rachel'];
```
## ES6 `forEach()`
javascript
```javascript=
friends.forEach(function(x){
console.log(x);
});
```
用箭頭函數改寫
```javascript=
friends.forEach( x => {
console.log(x);
});
```
fuction內的程式碼只有一行，所以可以省略大括弧，變得更精簡
```javascript
friends.forEach(x => console.log(x));
```
## ES5 `for迴圈`
javascript
```javascript=
for (var i = 0; i < friends.length; i++){
console.log(friends[i]);
}
```
console
```bash
"Ross"
"Joey"
"Chandler"
"Monica"
"Phoebe"
"Rachel"
```
# 物件簡寫
## ES6 key與value名稱相同，value可省略
若物件的key與value的名稱設定相同，可只寫一次
```javascript=
function profile(firstName, lastName, age){
return {
firstName,
lastName,
age,
fullName: function() {
return lastName + firstName;
}
}
}
let p1 = profile('悟空', '孫', 18);
console.log(p1.fullName());
```
## ES5
```javascript=
function profile(firstName, lastName, age){
return {
firstName: firstName,
lastName: lastName,
age: age,
fullName: function() {
return lastName + firstName;
}
}
}
var p1 = profile('悟空', '孫', 18);
console.log(p1.fullName());
```
console
```bash
"孫悟空"
```
# 物件導向的寫法
## ES6 `class-base`
類別裡面可寫`constructor`建構子和一般的function
* 這裡的class是`Syntax Sugar語法糖衣`
```javascript=
class Pokemon {
constructor(name, skill) {
this.name = name;
this.skill = skill;
}
attack(){
console.log('攻擊!');
}
}
var pikachu = new Pokemon('皮卡丘','電');
console.log(pikachu);
console.log(pikachu.attack()); //"攻擊!" undefined
pikachu.attack(); //"攻擊!"
```
console
```bash
[object Object] {
name: "皮卡丘",
skill: "電"
}
"攻擊!"
undefined
"攻擊!"
```
## ES5 `prototype-base`
javascript
```javascript=
function Pokemon(name, skill) {
this.name = name;
this.skill = skill;
}
Pokemon.prototype.attack = function() {
var sound = this.name.slice(0,2).repeat(2);
console.log("攻擊吧！" + this.name + "！使出" + this.skill + "～" + sound);
}
var pikachu = new Pokemon("皮卡丘", "十萬伏特");
pikachu.attack();
```
console
```bash
"攻擊吧！皮卡丘！使出十萬伏特～皮卡皮卡"
```
# 其他ES6常用語法
## map
## reduce
## filter
## some
## find
## every
# ES6的瀏覽器支援程度
可用轉譯套件轉成較低版本的javascript
Google Drive
Gist
Clipboard
Sign in with Wallet
