### 一、ES6變量聲明

　　- var 聲明的變量，沒有“塊級作用域”的限制;

　　- let / const 聲明的變量，具有“塊級作用域”。

　　```text

　　{

　　var a = 1;

　　let b = 2;

　　const c = 3;

　　let fn = function() {

　　console.log(4)

　　}

　　}

　　console.log(a); // 1

　　console.log(b); // 報錯ReferenceError，undefined

　　console.log(c); // 報錯ReferenceError，undefined

　　fn(); // ReferenceError: fn is not defined

　　```

　　- var 聲明的變量存在“變量提升”，let / const沒有。

　　```text

　　var tmp = new Date();

　　function fn() {

　　console.log(tmp);

　　if (false) {

　　// var tmp 變量提升

　　var tmp = 'hello world';

　　}

　　}

　　fn()

　　```

　　- const 聲明的是常量，不能被修改。

　　```text

　　const c = 1;

　　c = 2; // TypeError報錯

　　```

　　### 二、解構賦值

　　ES6 允許按照一定模式，從數組和對象中提取值，對變量進行賦值，這被稱為解構。

　　- 數組解構賦值

　　```text

　　let arr = [1, 'hello', [100,200], {a:1, b:2}, true, undefined];

　　let [a, b, c, d, e, f] = arr

　　console.log(a,b,c,d,e,f)

　　```

　　- 使用解構賦值，交換兩個變量的值

　　```text

　　let x = 1, y = 2;

　　[x, y] = [y, x]

　　console.log(x, y)

　　```

　　- 對象解構賦值

　　```text

　　let obj = {

　　a: 1,

　　b: [1,2,3],

　　c: false,

　　d: {name: 'geekxia', age: 10 }

　　}

　　let { a, b, c, d, e } = obj

　　console.log(a, b, c, d, e)

　　// 別名

　　let { b: bb } = obj

　　console.log(bb)

　　```

　　### 三、字符串方法擴展

　　```text

　　let str = 'hello world, my name is geekxia.';

　　// 獲取指定索引處理字符

　　console.log(str.charAt(0))

　　// 查詢字符串中是否包含指定片段，如果存在返回索引號，如果不存在返回-1

　　console.log(str.indexOf('name0'))

　　// 判斷字符串是否包含指定片段，返回布爾值

　　console.log(str.includes('geekxia'))

　　// 判斷字段串是否以指定片段開頭，返回布爾值

　　console.log(str.startsWith('he'))

　　// 判斷字段串是否以指定片段結尾，返回布爾值

　　console.log(str.endsWith('he'))

　　// 對字符串重復n次,返回新的字符串

　　console.log(str.repeat(2))

　　// 對字符串進行頭部補全,返回新的字符串

　　console.log(str.padStart(100, '01'))

　　// 對字符串進行尾部補全,返回新的字符串

　　console.log(str.padEnd(100, '01'))

　　```

　　### 四、Math方法擴展

　　ES6 在 Math 對象上新增了 17 個與數學相關的方法。

　　```text

　　// 去除小數點部分

　　console.log(Math.trunc(5.5))

　　// 判斷指定值是正數(1),負數(-1),還是零(0)

　　console.log(Math.sign(0))

　　// 計算立方根

　　console.log(Math.cbrt(-8))

　　// 計算兩個數的平方和的平方根

　　console.log(Math.hypot(3, 4))

　　// 指數運算符

　　console.log(2**4)

　　```

　　### 五、函數擴展

　　- 函數與解構賦值結合使用

　　```text

　　function add ({ a = 0, b = 0 }) {

　　console.log(a + b)

　　}

　　add({a:2, b:3}) // 5

　　add({a:2}) // 2

　　add({}) // 0

　　add() // 報錯

　　```

　　- 函數的 rest 參數

　　```text

　　function sum(...values) {

　　let total = 0;

　　for (let value of values) {

　　total += value

　　}

　　console.log(total)

　　}

　　sum(1,2,3)

　　// 允許尾逗號

　　sum(1,2,3,4,5,)

　　```

　　### 六、箭頭函數

　　```text

　　let f1 = v => v;

　　let f2 = () => 5;

　　let f3 = (a, b) => a + b;

　　console.log(f1(1))

　　console.log(f2())

　　console.log(f3(1,2))

　　```

　　- 由于大括號被解釋為代碼塊，所以如果箭頭函數直接返回一個對象，必須在對象外面加上括號。

　　```text

　　// 返回一個對象，對象要用()包裹

　　let f4 = (a, b) => ({a, b})

　　console.log(f4(1,2))

　　```

　　### 七、擴展運算符

　　擴展運算符(spread)是三個點(...)。它好比 rest 參數的逆運算，將一個數組轉為用逗號分隔的參數序列。

　　- 數組的操作、合并

　　```text

　　let arr1 = [1, 2, 3];

　　let arr2 = [4, 5, 6];

　　let arr = [...arr1, ...arr2, 7, 8, 9, 10];

　　console.log(arr)

　　```

　　- 與解構賦值配合，實現數組的截取

　　```text

　　let arr = [1, 2, 3, 4, 5, 6]

　　let [a, b, ...arr1] = arr

　　console.log(arr1)

　　```

　　- 對象的操作、合并：

　　```text

　　let obj1 = { a:1, b:2 }

　　let obj2 = { c:3, d:4 }

　　let obj = { ...obj1, ...obj2, e:5, a:6 }

　　console.log(obj)

　　```

　　- 與解構賦值配合，操作對象：

　　```text

　　let obj = { a:1, b:2, c:3, d:4, e:5 }

　　let { a, b, ...obj1 } = obj

　　console.log(obj1)

　　```

　　### 八、Array擴展

　　- 把類數組轉化成真正的數組：

　　```text

　　let arrayLike = {

　　'0': 'a',

　　'1': 'b',

　　'2': 'c',

　　length: 3

　　}

　　var arr = Array.from(arrayLike);

　　console.log(arr) // ['a', 'b', 'c']

　　```

　　- 把一組值，轉換為數組。Array.of總是返回參數值組成的數組。如果沒有參數，就返回一個空數組。

　　```text

　　let a = Array.of(1,2); // [1, 2]

　　let b = Array.of(); // []

　　let c = Array.of(undefined); // [undefined]

　　console.log(a)

　　console.log(b)

　　console.log(c)

　　```

　　- 數組實例的find方法，用于找出第一個符合條件的數組成員。它的參數是一個回調函數，所有數組成員依次執行該回調函數，直到找出第一個返回值為true的成員，然后返回該成員。如果沒有符合條件的成員，則返回undefined。

　　```text

　　let res1 = [1,2,-5,10].find((ele,index,arr) => ele < 0);

　　console.log(res1)

　　```

　　- 數組實例的findIndex方法的用法與find方法非常類似，返回第一個符合條件的數組成員的位置，如果所有成員都不符合條件，則返回-1。

　　```text

　　let res2 = [1,5,10,15].findIndex((ele,index,arr) => ele > 9);

　　console.log(res2)

　　```

　　- 數組填充

　　```text

　　let res3 = new Array(4).fill(7);

　　console.log(res3)

　　```

　　- 判斷指定數組中是否包含某個值

　　```text

　　let arr = [1, 2, 3]

　　console.log([1,2,3].includes(2))

　　console.log([1,2,3].includes(0,1)) // 第二參數表示索引號

　　```

　　### 九、對象擴展

　　ES6 允許直接寫入變量和函數，作為對象的屬性和方法。這樣的書寫更加簡潔。

　　```text

　　let foo = 'geekxia'

　　function fn1() {

　　console.log(1)

　　}

　　const obj = {

　　foo,

　　bar: 'hello',

　　fn1,

　　fn2() {

　　console.log(2)

　　},

　　fn3: function() {

　　console.log(3)

　　}

　　}

　　obj.fn1()

　　obj.fn2()

　　obj.fn3()

　　```

　　### 十、Symbol類型

　　ES6 引入了一種新的原始數據類型Symbol，表示獨一無二的值。它是 JavaScript 語言的第七種數據類型，前六種是：undefined、null、布爾值(Boolean)、字符串(String)、數值(Number)、對象(Object)。

　　### 十一、Set結構

　　ES6 提供了新的數據結構 Set。它類似于數組，但是成員的值都是唯一的，沒有重復的值。Set 本身是一個構造函數，用來生成 Set 數據結構。

　　- 使用Set結構，實現數組去重

　　```text

　　let arr1 = [1,2,2,2,3,4]

　　let arr2 = [...new Set(arr1)]

　　console.log(arr2)

　　```

　　### 十二、Map結構

　　ES6 提供了 Map 數據結構。它類似于對象，也是鍵值對的集合，但是“鍵”的范圍不限于字符串，各種類型的值(包括對象)都可以當作鍵。也就是說，Object 結構提供了“字符串—值”的對應，Map 結構提供了“值—值”的對應，是一種更完善的 Hash 結構實現。如果你需要“鍵值對”的數據結構，Map 比 Object 更合適。

　　```text

　　const map = new Map();

　　map.set({ p: 'hello world'}, 1)

　　map.set('hello', [1,2,3])

　　console.log(map.size)

　　```

　　### 十三、Promise

　　Promise 是異步編程的一種解決方案，比傳統的解決方案——回調函數和事件——更合理和更強大。

　　```text

　　let promise = new Promise(function(resolve, reject) {

　　setTimeout(()=>{

　　if(false) {

　　resolve('ok')

　　} else {

　　reject({err: -1, msg: '錯誤發生了'})

　　}

　　}, 1000)

　　})

　　promise.then(res=>{

　　console.log(res)

　　}).catch(err=>{

　　console.log(err)

　　}).finally(()=>{

　　console.log('總會執行')

　　})

　　```

　　### 十四、循環遍歷

　　- ES6 借鑒 C++、Java、C# 和 Python 語言，引入了for...of循環，作為遍歷所有數據結構的統一方法。

　　- for...of循環可以使用的范圍包括數組、Set 和 Map 結構、某些類似數組的對象(比如arguments對象、DOM NodeList 對象)、Generator對象，以及字符串。

　　- for...of 可以與 break / continue / return 配合使用。

　　```text

　　let arr = [1, 2, 3, 4, 5]

　　for(let ele of arr) {

　　if (ele > 2) {

　　break

　　}

　　console.log(ele)

　　}

　　```

　　- 對于普通的對象，for...of結構不能直接使用，會報錯。使用 for...in 來遍歷普通對象。

　　```text

　　let obj = {

　　a: 1,

　　b: 2,

　　c: 3

　　}

　　for(let k in obj) {

　　console.log(obj[k])

　　}

　　```

　　### 十五、async / await

　　```text

　　function add(a,b) {

　　// 返回一個promise對象

　　return new Promise((resolve, reject)=>{

　　setTimeout(()=>{

　　resolve(a+b)

　　}, 2000)

　　})

　　}

　　// await is only valid in async function

　　// await 只在 async函數中有效

　　async function testAdd() {

　　let num = await add(2,3)

　　console.log(num)

　　}

　　testAdd()

　　```

　　### 十六、class類與繼承

　　```text

　　class Point {};

　　class ColorPoint extends Point {

　　constructor(x, y, color) {

　　super(x, y); // 調用父類的 constructor(x, y)

　　this.color = color;

　　}

　　toString() {

　　return this.color + ' ' + super.toString(); // 調用父類的toString()方法

　　}

　　}

　　```

　　### 十七、ES6模塊化

　　- 使用`export default`拋出模塊

　　```text

　　export default xxx; // 拋出模塊

　　import xxx from './xxx' // 引入模塊

　　```

　　- 使用 `export` 拋出模塊

　　```js

　　export const a = 1;

　　export function foo() {} // 拋出

　　import { a, foo } from './xxx' // 引入

　　```

　　### 十八、裝飾器

　　許多面向對象的語言都有修飾器(Decorator)函數，用來修改類的行為。

　　- 裝飾器用于修飾一個類：

　　```text

　　@decorator

　　class A {};

　　```

　　- 裝飾器用于修飾一個類的方法：

　　```text

　　class Person {

　　@readonly

　　name() { return `${this.name}` }

　　}

　　```

　　更多關于“html5培訓”的問題，歡迎咨詢千鋒教育在線名師。千鋒已有十余年的培訓經驗，課程大綱更科學更專業，有針對零基礎的就業班，有針對想提升技術的提升班，高品質課程助理你實現夢想。