### 一、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報錯
```
### 二、解構(gòu)賦值
ES6 允許按照一定模式，從數(shù)組和對象中提取值，對變量進行賦值，這被稱為解構(gòu)。
- 數(shù)組解構(gòu)賦值
```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)
```
- 使用解構(gòu)賦值，交換兩個變量的值
```text
let x = 1, y = 2;
[x, y] = [y, x]
console.log(x, y)
```
- 對象解構(gòu)賦值
```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'))
// 判斷字段串是否以指定片段結(jié)尾，返回布爾值
console.log(str.endsWith('he'))
// 對字符串重復(fù)n次,返回新的字符串
console.log(str.repeat(2))
// 對字符串進行頭部補全,返回新的字符串
console.log(str.padStart(100, '01'))
// 對字符串進行尾部補全,返回新的字符串
console.log(str.padEnd(100, '01'))
```
### 四、Math方法擴展
ES6 在 Math 對象上新增了 17 個與數(shù)學(xué)相關(guān)的方法。
```text
// 去除小數(shù)點部分
console.log(Math.trunc(5.5))
// 判斷指定值是正數(shù)(1),負數(shù)(-1),還是零(0)
console.log(Math.sign(0))
// 計算立方根
console.log(Math.cbrt(-8))
// 計算兩個數(shù)的平方和的平方根
console.log(Math.hypot(3, 4))
// 指數(shù)運算符
console.log(2**4)
```
### 五、函數(shù)擴展
- 函數(shù)與解構(gòu)賦值結(jié)合使用
```text
function add ({ a = 0, b = 0 }) {
console.log(a + b)
}
add({a:2, b:3}) // 5
add({a:2}) // 2
add({}) // 0
add() // 報錯
```
- 函數(shù)的 rest 參數(shù)
```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,)
```
### 六、箭頭函數(shù)
```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))
```
- 由于大括號被解釋為代碼塊，所以如果箭頭函數(shù)直接返回一個對象，必須在對象外面加上括號。
```text
// 返回一個對象，對象要用()包裹
let f4 = (a, b) => ({a, b})
console.log(f4(1,2))
```
### 七、擴展運算符
擴展運算符(spread)是三個點(...)。它好比 rest 參數(shù)的逆運算，將一個數(shù)組轉(zhuǎn)為用逗號分隔的參數(shù)序列。
- 數(shù)組的操作、合并
```text
let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let arr = [...arr1, ...arr2, 7, 8, 9, 10];
console.log(arr)
```
- 與解構(gòu)賦值配合，實現(xiàn)數(shù)組的截取
```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)
```
- 與解構(gòu)賦值配合，操作對象：
```text
let obj = { a:1, b:2, c:3, d:4, e:5 }
let { a, b, ...obj1 } = obj
console.log(obj1)
```
### 八、Array擴展
- 把類數(shù)組轉(zhuǎn)化成真正的數(shù)組：
```text
let arrayLike = {
'0': 'a',
'1': 'b',
'2': 'c',
length: 3
}
var arr = Array.from(arrayLike);
console.log(arr) // ['a', 'b', 'c']
```
- 把一組值，轉(zhuǎn)換為數(shù)組。Array.of總是返回參數(shù)值組成的數(shù)組。如果沒有參數(shù)，就返回一個空數(shù)組。
```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)
```
- 數(shù)組實例的find方法，用于找出第一個符合條件的數(shù)組成員。它的參數(shù)是一個回調(diào)函數(shù)，所有數(shù)組成員依次執(zhí)行該回調(diào)函數(shù)，直到找出第一個返回值為true的成員，然后返回該成員。如果沒有符合條件的成員，則返回undefined。
```text
let res1 = [1,2,-5,10].find((ele,index,arr) => ele < 0);
console.log(res1)
```
- 數(shù)組實例的findIndex方法的用法與find方法非常類似，返回第一個符合條件的數(shù)組成員的位置，如果所有成員都不符合條件，則返回-1。
```text
let res2 = [1,5,10,15].findIndex((ele,index,arr) => ele > 9);
console.log(res2)
```
- 數(shù)組填充
```text
let res3 = new Array(4).fill(7);
console.log(res3)
```
- 判斷指定數(shù)組中是否包含某個值
```text
let arr = [1, 2, 3]
console.log([1,2,3].includes(2))
console.log([1,2,3].includes(0,1)) // 第二參數(shù)表示索引號
```
### 九、對象擴展
ES6 允許直接寫入變量和函數(shù)，作為對象的屬性和方法。這樣的書寫更加簡潔。
```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 引入了一種新的原始數(shù)據(jù)類型Symbol，表示獨一無二的值。它是 JavaScript 語言的第七種數(shù)據(jù)類型，前六種是：undefined、null、布爾值(Boolean)、字符串(String)、數(shù)值(Number)、對象(Object)。
### 十一、Set結(jié)構(gòu)
ES6 提供了新的數(shù)據(jù)結(jié)構(gòu) Set。它類似于數(shù)組，但是成員的值都是唯一的，沒有重復(fù)的值。Set 本身是一個構(gòu)造函數(shù)，用來生成 Set 數(shù)據(jù)結(jié)構(gòu)。
- 使用Set結(jié)構(gòu)，實現(xiàn)數(shù)組去重
```text
let arr1 = [1,2,2,2,3,4]
let arr2 = [...new Set(arr1)]
console.log(arr2)
```
### 十二、Map結(jié)構(gòu)
ES6 提供了 Map 數(shù)據(jù)結(jié)構(gòu)。它類似于對象，也是鍵值對的集合，但是“鍵”的范圍不限于字符串，各種類型的值(包括對象)都可以當(dāng)作鍵。也就是說，Object 結(jié)構(gòu)提供了“字符串—值”的對應(yīng)，Map 結(jié)構(gòu)提供了“值—值”的對應(yīng)，是一種更完善的 Hash 結(jié)構(gòu)實現(xiàn)。如果你需要“鍵值對”的數(shù)據(jù)結(jié)構(gòu)，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 是異步編程的一種解決方案，比傳統(tǒng)的解決方案——回調(diào)函數(shù)和事件——更合理和更強大。
```text
let promise = new Promise(function(resolve, reject) {
setTimeout(()=>{
if(false) {
resolve('ok')
} else {
reject({err: -1, msg: '錯誤發(fā)生了'})
}
}, 1000)
})
promise.then(res=>{
console.log(res)
}).catch(err=>{
console.log(err)
}).finally(()=>{
console.log('總會執(zhí)行')
})
```
### 十四、循環(huán)遍歷
- ES6 借鑒 C++、Java、C# 和 Python 語言，引入了for...of循環(huán)，作為遍歷所有數(shù)據(jù)結(jié)構(gòu)的統(tǒng)一方法。
- for...of循環(huán)可以使用的范圍包括數(shù)組、Set 和 Map 結(jié)構(gòu)、某些類似數(shù)組的對象(比如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結(jié)構(gòu)不能直接使用，會報錯。使用 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函數(shù)中有效
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); // 調(diào)用父類的 constructor(x, y)
this.color = color;
}
toString() {
return this.color + ' ' + super.toString(); // 調(diào)用父類的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' // 引入
```
### 十八、裝飾器
許多面向?qū)ο蟮恼Z言都有修飾器(Decorator)函數(shù)，用來修改類的行為。
- 裝飾器用于修飾一個類：
```text
@decorator
class A {};
```
- 裝飾器用于修飾一個類的方法：
```text
class Person {
@readonly
name() { return `${this.name}` }
}
```
更多關(guān)于“html5培訓(xùn)”的問題，歡迎咨詢千鋒教育在線名師。千鋒已有十余年的培訓(xùn)經(jīng)驗，課程大綱更科學(xué)更專業(yè)，有針對零基礎(chǔ)的就業(yè)班，有針對想提升技術(shù)的提升班，高品質(zhì)課程助理你實現(xiàn)夢想。
京公網(wǎng)安備 11010802030320號