ES6小記整理資料

  • 83
  • 0
  • ES6
  • 2018-08-27

ES6

1- Default Parameters

var link = function(height = 50, color= `red`){
	......
}

2- Template Literals

在字串 (string) 內嵌入變數時,ES5 必須把字串拆散,把變數通過 + 操作加入字串; ES6 容許通過語法 ${ 變數 } 嵌入到字串中

// es5
// var name = ‘Your name is ‘ + first + ‘ ‘ + last + ‘.’
var name = `Your name is ${first} ${last}.`

first, last 是變數

3- Multi-line Strings

var name = `your namme
me fjis dsfdshfj`;

console.log(name);

your namme
me fjis dsfdshfj

4- Destructuring Assignment (解構賦值)

用於取出陣列或物件中的資料,如同鏡子一般,對映出陣列或物件記號上的結構出來

var [...b] = [1, 2, 3]; 
console.log(b)

//[1, 2, 3]


var [b] = [1, 2, 3]; 
console.log(b)

// 1


[a, b, ...rest] = [10, 20, 30, 40, 50];
console.log(a); // 10
console.log(b); // 20
console.log(rest); // [30, 40, 50]
var [a, b] = [1, 2]; //a=1, b=2

// 略過某些值(omitting certain values)
var [a, , b] = [1, 2, 3]; // a=1, b=3

// 其餘參數(Combine with rest)
var [a, ...b] = [1, 2, 3]; //a=1, b=[2,3]

// 失敗保護(Fail-safe)
var [, , , a, b] = [1, 2, 3]; // a=undefined, b=undefined

// 交換值(Swap)
var a = 1, b = 2;
[b, a] = [a, b]; //a=2, b=1

// 多維複雜陣列(Advance deep arrays)
var [a, [b, [c, d]]] = [1, [2, [[[3, 4], 5], 6]]];

// 字串
const str = "hello";
var [a, b, c, d, e] =str;

console.log(a) // h
console.log(c) // l

用法就是這麼簡單,賦值的(等號)左邊按照你寫的樣式,然後在右邊寫上對應數值樣式,就像之前說的"鏡子"般的對應。沒賦到值就會得到undefined

5- Object Literals

6- Arrow Functions

7- Promises

8- Let & Const, Block-Scoped

— Let 只會在目前的 { }內有效,而且重覆定義時會 throw Error 提示 ;

— Const 只會在目前的 { }內有效,定義時必須 initialize,而且不能更改 :

9- Classes

10- Module

 

引用:https://goo.gl/neRmQf

https://goo.gl/EV6rzY