ES6總結(jié)
1.ECMASript介紹
ECMAScript 是由 Ecma 國(guó)際通過(guò) ECMA-262 標(biāo)準(zhǔn)化的腳本程序設(shè)計(jì)語(yǔ)言
1.2ECMA-262
Ecma 國(guó)際制定了許多標(biāo)準(zhǔn)，而 ECMA-262 只是其中的一個(gè)，所有標(biāo)準(zhǔn)列表查看
1.3ECMA-262歷史
第1版1997年制定了語(yǔ)法的基本語(yǔ)
第2版1998年較小改動(dòng)
第3版1999年引入正則、異常處理、格式化輸出等。IE 開(kāi)始支持
第4版2007年過(guò)于激進(jìn)，未發(fā)布
第5版2009年引入嚴(yán)格模式、JSON，擴(kuò)展對(duì)象、數(shù)組、原型、字符串、日期方法
第6版2015年模塊化、面向?qū)ο笳Z(yǔ)法、Promise、箭頭函數(shù)、let、const、數(shù)組解構(gòu)賦值等等
第7版2016年冪運(yùn)算符、數(shù)組擴(kuò)展、Async/await 關(guān)鍵字
第8版2017年Async/await、字符串?dāng)U展
第9版2018年對(duì)象解構(gòu)賦值、正則擴(kuò)展
10版2019擴(kuò)展對(duì)象、數(shù)組方法
|第next版|動(dòng)態(tài)指向下一個(gè)版本| 制定了語(yǔ)法的基本語(yǔ)法|
1.4為什么學(xué)習(xí)ES6
ES6 的版本變動(dòng)內(nèi)容最多，具有里程碑意義
ES6 加入許多新的語(yǔ)法特性，編程實(shí)現(xiàn)更簡(jiǎn)單、高效
ES6 是前端發(fā)展趨勢(shì)，就業(yè)必備技能? ?
2.ECMAScript6的新特性
2.1let關(guān)鍵字
（用來(lái)聲明變量）使用let聲明的變量有下面的特點(diǎn)：
不允許重復(fù)聲明let num=1 let num=2 報(bào)錯(cuò)
塊級(jí)作用域{let num1=3} console.log(num1) 報(bào)錯(cuò)顯示num1 is defind
不存在變量提升console.log(a)? let a=1 控制臺(tái)顯示Cannot access 'a' before initialization
不影響作用域鏈
2.2const關(guān)鍵字
聲明時(shí)必須賦初始值
標(biāo)識(shí)符一般為大寫(xiě)
不允許重復(fù)聲明
值不能修改
塊級(jí)作用域
對(duì)象屬性修改和數(shù)組元素變化不會(huì)出發(fā) const 錯(cuò)誤
2.3變量的解構(gòu)賦值
2.3.1數(shù)組的解構(gòu)賦值
constarr=['12','23','45','56','78']
let[one,two,three,four,five]=arr
console.log(one,two,three,four,five)
在這里游覽器的控制臺(tái)輸出=12 23 45 56 78=在這里輸出的one相當(dāng)與arr.one,其中arr.one對(duì)應(yīng)‘12’
數(shù)組的解構(gòu)是按順序排列的，變量的取值有他的位置決定
2.3.2對(duì)象的解構(gòu)賦值
簡(jiǎn)單賦值:
constlin={name:'林志穎',
tags: ['車(chē)手','歌手','小旋風(fēng)','演員'] };
let{name,tags}=lin;
console.log(name,tags)
在這里游覽器的控制臺(tái)輸出=林志穎 (4) ['車(chē)手', '歌手', '小旋風(fēng)', '演員']=其中在輸出的語(yǔ)句中的name相當(dāng)于lin.name
對(duì)象的解構(gòu)，對(duì)象的屬性沒(méi)有次序，變量必須與屬性同名，才能取到正確的值，對(duì)象的解構(gòu)賦值的內(nèi)部機(jī)制，是先找到同名屬性，然后再賦給對(duì)應(yīng)的變量。真正被賦值的是后者，而不是前者
復(fù)雜賦值:
letwangfei={
name:"王菲",
age:18,
songs: ["紅豆","流年","曖昧","傳奇"],
history: [{name:"竇唯"}, {name:"李亞鵬"}, {name:"謝霆鋒"}],
};
let{
songs: [one,two,three],
history: [first,second,third],
}=wangfei;
console.log(one,two,three,first,second,third)
? ? 游覽器輸出的結(jié)果是
在這里one相當(dāng)于wanfei.songs.one? 總之解構(gòu)就是逐層向外解析
2.4模板字符串
用（=`=）表示在鍵盤(pán)的ESC的下面
字符串中可以出現(xiàn)換行符
變量拼接
可以使用 ${xxx} 形式輸出變量
let str = `<ul>
? ? ? ? <li>沈騰</li>
? ? ? ? <li>瑪麗</li>
? ? ? ? </ul>`;
let star = "王寧";
let result = ${star}在前幾年離開(kāi)了開(kāi)心麻花;
console.log(result)
控制臺(tái)輸出 王寧在前幾年離開(kāi)了開(kāi)心麻花`
=當(dāng)遇到字符串與變量拼接的情況使用模板字符串=
2.5簡(jiǎn)化代碼
ES6 允許在大括號(hào)里面，直接寫(xiě)入變量和函數(shù)，作為對(duì)象的屬性和方法。這樣的書(shū)寫(xiě)更加簡(jiǎn)潔：
const name='ztl'? let newName={name:name} 可以簡(jiǎn)化成 let newName={name}
注意，兩次的變量名相同時(shí)才可以簡(jiǎn)化
2.6箭頭函數(shù)
ES6 允許使用「箭頭」（=>）定義函數(shù)。eg:let a=(x,y)=>{return x+y}
如果形參只有一個(gè)，則小括號(hào)可以省略 eg: let a=x=>{return x}
函數(shù)體如果只有一條語(yǔ)句，則花括號(hào)可以省略，函數(shù)的返回值為該條語(yǔ)句的執(zhí)行結(jié)果
eg:let b=c=>return c
箭頭函數(shù) this 指向聲明時(shí)所在作用域下 this 的值
箭頭函數(shù)不能作為構(gòu)造函數(shù)實(shí)例化
不能使用 arguments
2.7 rest參數(shù)
ES6 引入 rest 參數(shù)，用于獲取函數(shù)的實(shí)參，用來(lái)代替 arguments（作用與 arguments類(lèi)似）
functiondata(…arg){
console.log(arg)
}
data('one','two','three')
rest參數(shù)必須是最后一個(gè)形參
function Num(a,…args,c)會(huì)出現(xiàn)報(bào)錯(cuò)?
應(yīng)該寫(xiě)成 function(a,b,…args)
2.8 spread擴(kuò)展運(yùn)算符
擴(kuò)展運(yùn)算符（spread）也是三個(gè)點(diǎn)（...）。它好比 rest 參數(shù)的逆運(yùn)算，將一個(gè)數(shù)組轉(zhuǎn)為用逗號(hào)
分隔的參數(shù)序列，對(duì)數(shù)組進(jìn)行解包
lettfboys=['德瑪西亞之力','德瑪西亞之翼','德瑪西亞皇子'];
functionfn(){
console.log(arguments);
}
fn(...tfboys)
2.9 Symbol基本使用
ES6 引入了一種新的原始數(shù)據(jù)類(lèi)型 Symbol，表示獨(dú)一無(wú)二的值。它是JavaScript 語(yǔ)言的
第七種數(shù)據(jù)類(lèi)型，是一種類(lèi)似于字符串的數(shù)據(jù)類(lèi)型
Symbol特點(diǎn)
Symbol 的值是唯一的，用來(lái)解決命名沖突的問(wèn)題
lets=Symbol();
lets2=Symbol('尚硅谷');
lets3=Symbol('尚硅谷');
console.log(s2===s3)輸出false
Symbol 值不能與其他數(shù)據(jù)進(jìn)行運(yùn)算
letresult=s+100
letresult=s+s都會(huì)顯示報(bào)錯(cuò)
擴(kuò)展：Symbol還有11個(gè)內(nèi)置值
2.10 迭代器
遍歷器（Iterator）就是一種機(jī)制。它是一種接口，為各種不同的數(shù)據(jù)結(jié)構(gòu)提供統(tǒng)一的訪問(wèn)機(jī)制。任何數(shù)據(jù)結(jié)構(gòu)只要部署 Iterator 接口，就可以完成遍歷操作
ES6 創(chuàng)造了一種新的遍歷命令 for...of 循環(huán)，Iterator 接口主要供 for...of 消費(fèi)
原生具備 iterator 接口的數(shù)據(jù)(可用 for of 遍歷)
Array
Arguments
Set
Map
String
TypedArray
NodeList
工作原理
創(chuàng)建一個(gè)指針對(duì)象，指向當(dāng)前數(shù)據(jù)結(jié)構(gòu)的起始位置
第一次調(diào)用對(duì)象的 next 方法，指針自動(dòng)指向數(shù)據(jù)結(jié)構(gòu)的第一個(gè)成員
接下來(lái)不斷調(diào)用 next 方法，指針一直往后移動(dòng)，直到指向最后一個(gè)成員
每調(diào)用 next 方法返回一個(gè)包含 value 和 done 屬性的對(duì)像
const xiyou = ['唐僧','孫悟空','豬八戒','沙僧'];
for (let v for xiyou) {
console.log(v)
}
控制臺(tái)輸出? 唐僧,? 孫悟空,? 豬八戒,? ? 沙僧
let iterator = xiyou[Symbol.iterator](）;
? ? console.log(iterator.next());
? ? console.log(iterator.next());
? ? console.log(iterator.next());
? ? console.log(iterator.next());
? ? console.log(iterator.next());
在這里面調(diào)用next（）時(shí)第二次調(diào)用是返回第一個(gè)值
2.11生成器
生成器函數(shù)是 ES6 提供的一種異步編程解決方案，語(yǔ)法行為與傳統(tǒng)函數(shù)完全不同
函數(shù)形式為 function * gen(){
yiled? "your data"
yiled? "your data"
}
代碼說(shuō)明;
*的位置沒(méi)有限制
生成器函數(shù)返回的結(jié)果是迭代器對(duì)象，調(diào)用迭代器對(duì)象的 next 方法可以得到y(tǒng)ield 語(yǔ)句后的值
yield 相當(dāng)于函數(shù)的暫停標(biāo)記，也可以認(rèn)為是函數(shù)的分隔符，每調(diào)用一次 next方法，執(zhí)行一段代碼
next 方法可以傳遞實(shí)參，作為 yield 語(yǔ)句的返回值
2.12Promise
Promise 是 ES6 引入的異步編程的新解決方案。語(yǔ)法上 Promise 是一個(gè)構(gòu)造函數(shù)，用來(lái)封裝異步操作并可以獲取其成功或失敗的結(jié)果
2.13 Set
ES6 提供了新的數(shù)據(jù)結(jié)構(gòu) Set（集合）。它類(lèi)似于數(shù)組，但成員的值都是唯一的，集合實(shí)現(xiàn)了 iterator 接口，所以可以使用『擴(kuò)展運(yùn)算符』和『for…of…』進(jìn)行遍歷，集合的屬性和方法
size 返回集合的元素個(gè)數(shù)
add 增加一個(gè)新元素，返回當(dāng)前集合
delete 刪除元素，返回 boolean 值
has 檢測(cè)集合中是否包含某個(gè)元素，返回 boolean 值
clear 清空集合，返回 undefined
let s = new Set();
let s1 = new Set([1, 2, 3, 1, 2, 3]);
// 集合屬性與方法
// 返回集合的元素個(gè)數(shù)
console.log(s1.size);
// 添加新元素
console.log(s1.add(4));
// 刪除元素
console.log(s1.delete(1));
// 檢測(cè)是否存在某個(gè)值
console.log(s1.has(2));
// 清空集合
console.log(s1.clear());
2.14 Map
ES6 提供了 Map 數(shù)據(jù)結(jié)構(gòu)。它類(lèi)似于對(duì)象，也是鍵值對(duì)的集合。但是“鍵”的范圍不限于字符串，各種類(lèi)型的值（包括對(duì)象）都可以當(dāng)作鍵。Map 也實(shí)現(xiàn)了iterator 接口，所以可以使用『擴(kuò)展運(yùn)算符』和『for…of…』進(jìn)行遍歷。Map 的屬性和方法:
size 返回 Map 的元素個(gè)數(shù)
set 增加一個(gè)新元素，返回當(dāng)前 Map
get 返回鍵名對(duì)象的鍵值
has 檢測(cè) Map 中是否包含某個(gè)元素，返回 boolean 值
clear 清空集合，返回 undefined
let m = new Map();
// 創(chuàng)建一個(gè)非空 map
let m2 = new Map([
? ? ["name", "尚硅谷"],
? ? ["slogon", "不斷提高行業(yè)標(biāo)準(zhǔn)"],
]);
console.log(m2.size);
// 添加映射值
console.log(m2.set("age", 6));
// 獲取映射值
console.log(m2.get("age"));
// 檢測(cè)是否有該映射
console.log(m2.has("age"));
// 清除
console.log(m2.clear());
2.15 class類(lèi)
ES6 提供了更接近傳統(tǒng)語(yǔ)言的寫(xiě)法，引入了 Class（類(lèi)）這個(gè)概念，作為對(duì)象的模板。通過(guò) class 關(guān)鍵字，可以定義類(lèi)?；旧?，ES6 的 class 可以看作只是一個(gè)語(yǔ)法糖，它的絕大部分功能，ES5 都可以做到，新的 class 寫(xiě)法只是讓對(duì)象原型的寫(xiě)法更加清晰、更像面向?qū)ο缶幊痰恼Z(yǔ)法而已
知識(shí)點(diǎn)：
class 聲明類(lèi) class phone{}
constructor 定義構(gòu)造函數(shù)初始化
class Phone {// 構(gòu)造方法 constructor(brand, color, price) { this.brand = brand; this.color = color; this.price = price;}
extends 繼承父類(lèi)
super 調(diào)用父級(jí)構(gòu)造方法
class SmartPhone extends Phone { constructor(brand, color, price, screen, pixel) { super(brand, color, price);t his.screen = screen; this.pixel = pixel;}
static 定義靜態(tài)方法和屬性(用static 定義的方法他的)
父類(lèi)方法可以重寫(xiě)
2.16 數(shù)值擴(kuò)展
2.16.1二進(jìn)制和八進(jìn)制
ES6 提供了二進(jìn)制和八進(jìn)制數(shù)值的新的寫(xiě)法，分別用前綴 0b 和 0o 表示
2.16.2 Number.isFinite() 與 與 Number.isNaN()
Number.isFinite() 用來(lái)檢查一個(gè)數(shù)值是否為有限的Number.isNaN() 用來(lái)檢查一個(gè)值是否為 NaN
2.16.3Math.trunc
用于去除一個(gè)數(shù)的小數(shù)部分，返回整數(shù)部分。
2.16.4Number.isInteger
Number.isInteger() 用來(lái)判斷一個(gè)數(shù)值是否為整數(shù)
2.16.5 Number.parseInt() 與 與 Number.parseFloat()
ES6 將全局方法 parseInt 和 parseFloat，移植到 Number 對(duì)象上面，使用不變
用于字符串轉(zhuǎn)換為整數(shù)
2.17模塊化
模塊化是指將一個(gè)大的程序文件，拆分成許多小的文件，然后將小文件組合起來(lái)
優(yōu)勢(shì)：
防止命名沖突
代碼復(fù)用
高維護(hù)性
ES6之前的模塊化規(guī)范有
CommonJS => NodeJS、Browserify
AMD => requireJS
CMD => seaJS
