ES6 (ECMAScript 6)

為什麼要學 ES6 呢？

我認為的好處是：

ES6 解決了很多原本 JS 的缺陷

更能貼近且玩更多 FP（Functional Programming 函數程式設計）

許多新穎的工具都上 ES6+ 了，不學就看不懂

註：目前已出到 ES10

Constants and Variables
變數與常數

關於 scope { }

// var 的宣告在 if 的大括號 {} 內卻會汙染外部變數
 
if (true) {
  var result = 123;
}
 
console.log(result); // 123

if (true) {
  let result = 123;
}
 
console.log(result); // result is not defined

if (true) {
  const result = 123;
}
 
console.log(result); // result is not defined

關於重複宣告

var

var result = 123;
var result = 456;
 
console.log(result); // 456

這樣莫名其妙的覆蓋到原本用得好好的變數的情形就可能會發生…

關於重複宣告

let

let result = 123;
let result = 456;
// Identifier 'result' has already been declared

const

const result = 123;
const result = 456;
// Identifier 'result' has already been declared

常數

const 宣告的變數為常數，指定後就無法重新給值

const result = 123;
result = 456;
// Assignment to constant variable.

Destructuring 解構

使用語法來從陣列或是物件結構中抽離資料

從物件屬性建立變數

ES5

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 物件解構

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 樣板字串

樣板字串

const str = `Hello World!`;
 
console.log(str);

const multiLine = `This is an example
of a multiline string`;
 
console.log(multiLine);

字串替換

const name = 'horse';
 
console.log(`Hello, ${name}!`); // Hello, horse!

const user = { firstName: 'Kevin', lastName: 'Wade' };
 
console.log(`Hello, ${user.firstName} ${user.lastName}!`);
// Hello, Kevin Wade!

表達式

const price = 100;
const quantity = 7;
 
console.log(`Price: ${price * quantity}`); // Price: 700

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 (台北標準時間)
*/

Arrow Functions 箭號函數

ES6 Arrow Function

ES5

var sayHello = function(name) {
  return 'Hello ' + name;
};
 
console.log(sayHello('horse')); // Hello horse

ES6

const sayHello = name => `Hello ${name}`;
 
console.log(sayHello('horse')); // Hello horse

ES6 Arrow Function

forEach

ES5

var numbers = [1, 2, 3];
var total = 0;
 
numbers.forEach(function(n) {
  total += n;
});
 
console.log(total); // 6

ES6 Arrow Function

forEach

ES6

const numbers = [1, 2, 3];
let total = 0;
 
numbers.forEach((n) => {
  total += n;
});
 
console.log(total); // 6

關於 function scope 內的 this

// ES5
var person = {
  name: 'horse',
  sayHello: function() {
    setTimeout(function() {
      console.log('Hello, ' + this.name);
    }, 0);
  },
};
 
person.sayHello();

輸出： 'Hello, '

關於 function scope 內的 this

// ES6
const person = {
  name: 'horse',
  sayHello() {
    setTimeout(() => {
      console.log(`Hello, ${this.name}`);
    }, 0);
  },
};
 
person.sayHello();

輸出： 'Hello, horse'

Default Params 預設參數

const sayHello = (name, msg="Hello") => `${msg}, ${name}`;
 
console.log(sayHello('horse', 'Hi'));
console.log(sayHello('horse'));

輸出： Hi, horse

輸出： Hello, horse

Promises

https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/…/Promise

Classes

https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Classes

還有更多新特性就不一一贅述

接下來要講編譯工具 babel

以及重要的 polyfill 這項技術

讓舊瀏覽器也能夠使用這些新的語法

tags: 前端

下一章： Babel