ES6
let關(guān)鍵字
1. 作用:
* 與var類似, 用于聲明一個變量
2. 特點
* 在塊作用域內(nèi)有效
* 不能重復(fù)聲明
* 不會預(yù)處理, 不存在變量提升
3. 應(yīng)用
* 循環(huán)遍歷加監(jiān)聽
* 使用let取代var是趨勢
const關(guān)鍵字
1. 作用:
* 定義一個常量
2. 特點:
* 不能修改
* 其它特點同let
3. 應(yīng)用
* 保存不用改變的數(shù)據(jù)
變量的解構(gòu)賦值
1. 理解:
* 從對象或數(shù)組中提取數(shù)據(jù), 并賦值給變量(多個)
2. 對象的解構(gòu)賦值
let {n, a} = {n:'tom', a:12}
3. 數(shù)組的解構(gòu)賦值
let [a,b] = [1, 'hello'];
4. 用途
* 給多個形參賦值
模板字符串
1. 模板字符串 : 簡化字符串的拼接
* 模板字符串必須用 `` 包含
* 變化的部分使用${xxx}定義
簡化的對象寫法
1. 省略同名的屬性值
2. 省略方法的function
3. 例如:
let x = 1;
let y = 2;
let point = {
x,
y,
setX (x) {this.x = x}
};
箭頭函數(shù)
1. 作用: 定義匿名函數(shù)
2. 基本語法:
* 沒有參數(shù): () => console.log('xxxx')
* 一個參數(shù): i => i+2
* 大于一個參數(shù): (i,j) => i+j
* 函數(shù)體不用大括號: 默認(rèn)返回結(jié)果
* 函數(shù)體如果有多個語句, 需要用{}包圍，若有需要返回的內(nèi)容，需要手動返回
3. 使用場景: 多用來定義回調(diào)函數(shù)
4. 箭頭函數(shù)的特點：
1、簡潔
2、箭頭函數(shù)沒有自己的this，箭頭函數(shù)的this不是調(diào)用的時候決定的，而是在定義的時候所處的對象就是它的this
3、擴(kuò)展理解： 箭頭函數(shù)的this看外層的是否有函數(shù)，如果有，外層函數(shù)的this就是內(nèi)部箭頭函數(shù)的this，如果沒有，則this是window。
擴(kuò)展運算符
1. rest(可變)參數(shù)
* 用來取代arguments 但比 arguments 靈活,只能是最后部分形參參數(shù)
2. 擴(kuò)展運算符
let arr1 = [1,3,5];
let arr2 = [2,...arr1,6];
arr2.push(...arr1);
形參默認(rèn)值
當(dāng)不傳入?yún)?shù)的時候默認(rèn)使用形參里的默認(rèn)值
function Point(x = 1,y = 2) {
? ? this.x = x;
? ? this.y = y;
}
Promise對象
1. 理解:
* Promise對象: 代表了未來某個將要發(fā)生的事件(通常是一個異步操作)
* 有了promise對象, 可以將異步操作以同步的流程表達(dá)出來, 避免了層層嵌套的回調(diào)函數(shù)(俗稱'回調(diào)地獄')
* ES6的Promise是一個構(gòu)造函數(shù), 用來生成promise對象的實例
2. 使用promise基本步驟(2步):
* 創(chuàng)建promise對象
let promise = new Promise((resolve, reject) => {
? ? //初始化promise狀態(tài)為 pending
? //執(zhí)行異步操作
? if(異步操作成功) {
? ? resolve(value);//修改promise的狀態(tài)為fullfilled
? } else {
? ? reject(errMsg);//修改promise的狀態(tài)為rejected
? }
})
* 調(diào)用promise的then()
promise.then(function(
? result => console.log(result),
? errorMsg => alert(errorMsg
))
3. promise對象的3個狀態(tài)
* pending: 初始化狀態(tài)
* fullfilled: 成功狀態(tài)
* rejected: 失敗狀態(tài)
4. 應(yīng)用:
* 使用promise實現(xiàn)超時處理
* 使用promise封裝處理ajax請求
let request = new XMLHttpRequest();
request.onreadystatechange = function () {
}
request.responseType = 'json';
request.open("GET", url);
request.send();
5. promise過程分析:
Symbol
1. 前言：ES5中對象的屬性名都是字符串，容易造成重名，污染環(huán)境
2. 概念：ES6中的添加了一種原始數(shù)據(jù)類型symbol(已有的原始數(shù)據(jù)類型：String, Number, boolean, null, undefined, 對象)
3. 特點：
1、Symbol屬性對應(yīng)的值是唯一的，解決命名沖突問題
2、Symbol值不能與其他數(shù)據(jù)進(jìn)行計算，包括同字符串拼串
3、for in, for of遍歷時不會遍歷symbol屬性
4. 使用：
1、調(diào)用Symbol函數(shù)得到symbol值;
2、傳參標(biāo)識
3、內(nèi)置Symbol值
* 除了定義自己使用的Symbol值以外，ES6還提供了11個內(nèi)置的Symbol值，指向語言內(nèi)部使用的方法
- Symbol.iterator
* 對象的Symbol.iterator屬性，指向該對象的默認(rèn)遍歷器方法
Iterator遍歷器
概念： iterator是一種接口機(jī)制，為各種不同的數(shù)據(jù)結(jié)構(gòu)提供統(tǒng)一的訪問機(jī)制
作用：
1、為各種數(shù)據(jù)結(jié)構(gòu)，提供一個統(tǒng)一的、簡便的訪問接口；
2、使得數(shù)據(jù)結(jié)構(gòu)的成員能夠按某種次序排列
3、ES6創(chuàng)造了一種新的遍歷命令for...of循環(huán)，Iterator接口主要供for...of消費。
工作原理：
- 創(chuàng)建一個指針對象(遍歷器對象)，指向數(shù)據(jù)結(jié)構(gòu)的起始位置。
- 第一次調(diào)用next方法，指針自動指向數(shù)據(jù)結(jié)構(gòu)的第一個成員
- 接下來不斷調(diào)用next方法，指針會一直往后移動，直到指向最后一個成員
- 每調(diào)用next方法返回的是一個包含value和done的對象，{value: 當(dāng)前成員的值,done: 布爾值}
* value表示當(dāng)前成員的值，done對應(yīng)的布爾值表示當(dāng)前的數(shù)據(jù)的結(jié)構(gòu)是否遍歷結(jié)束。
* 當(dāng)遍歷結(jié)束的時候返回的value值是undefined，done值為false
原生具備iterator接口的數(shù)據(jù)(可用for of遍歷)
1、Array
2、arguments
3、set容器
4、map容器
5、String
……
Generator函數(shù)
概念：
1、ES6提供的解決異步編程的方案之一
2、Generator函數(shù)是一個狀態(tài)機(jī)，內(nèi)部封裝了不同狀態(tài)的數(shù)據(jù)
3、用來生成遍歷器對象
4、可暫停函數(shù)(惰性求值), yield可暫停，next方法可啟動。每次返回的是yield后的表達(dá)式結(jié)果
特點：
1、function 與函數(shù)名之間有一個星號
2、內(nèi)部用yield表達(dá)式來定義不同的狀態(tài)
例如：
function* generatorExample(){
? let result = yield 'hello';? // 狀態(tài)值為hello
? yield 'generator'; // 狀態(tài)值為generator
}
3、generator函數(shù)返回的是指針對象(即iterator)，而不會執(zhí)行函數(shù)內(nèi)部邏輯
4、調(diào)用next方法函數(shù)內(nèi)部邏輯開始執(zhí)行，遇到y(tǒng)ield表達(dá)式停止，返回{value: yield后的表達(dá)式結(jié)果/undefined, done: false/true}
5、再次調(diào)用next方法會從上一次停止時的yield處開始，直到最后
6、yield語句返回結(jié)果通常為undefined，當(dāng)調(diào)用next方法時傳參內(nèi)容會作為啟動時yield語句的返回值。
async函數(shù)
async函數(shù)(源自ES2017)
概念： 真正意義上去解決異步回調(diào)的問題，同步流程表達(dá)異步操作
本質(zhì)： Generator的語法糖
語法：
async function foo(){
await 異步操作;
await 異步操作；
}
特點：
1、不需要像Generator去調(diào)用next方法，遇到await等待，當(dāng)前的異步操作完成就往下執(zhí)行
2、返回的總是Promise對象，可以用then方法進(jìn)行下一步操作
3、async取代Generator函數(shù)的星號*，await取代Generator的yield
4、語意上更為明確，使用簡單，經(jīng)臨床驗證，暫時沒有任何副作用
class
1. 通過class定義類/實現(xiàn)類的繼承
2. 在類中通過constructor定義構(gòu)造方法
3. 通過new來創(chuàng)建類的實例
4. 通過extends來實現(xiàn)類的繼承
5. 通過super調(diào)用父類的構(gòu)造方法
6. 重寫從父類中繼承的一般方法
字符串?dāng)U展
1. includes(str) : 判斷是否包含指定的字符串
2. startsWith(str) : 判斷是否以指定字符串開頭
3. endsWith(str) : 判斷是否以指定字符串結(jié)尾
4. repeat(count) : 重復(fù)指定次數(shù)
數(shù)值擴(kuò)展
1. 二進(jìn)制與八進(jìn)制數(shù)值表示法: 二進(jìn)制用0b, 八進(jìn)制用0o
2. Number.isFinite(i) : 判斷是否是有限大的數(shù)
3. Number.isNaN(i) : 判斷是否是NaN
4. Number.isInteger(i) : 判斷是否是整數(shù)
5. Number.parseInt(str) : 將字符串轉(zhuǎn)換為對應(yīng)的數(shù)值
6. Math.trunc(i) : 直接去除小數(shù)部分
數(shù)組擴(kuò)展
1. Array.from(v) : 將偽數(shù)組對象或可遍歷對象轉(zhuǎn)換為真數(shù)組
2. Array.of(v1, v2, v3) : 將一系列值轉(zhuǎn)換成數(shù)組
3. find(function(value, index, arr){return true}) : 找出第一個滿足條件返回true的元素
4. findIndex(function(value, index, arr){return true}) : 找出第一個滿足條件返回true的元素下標(biāo)
對象擴(kuò)展
1. Object.is(v1, v2)
* 判斷2個數(shù)據(jù)是否完全相等
2. Object.assign(target, source1, source2..)
* 將源對象的屬性復(fù)制到目標(biāo)對象上
3. 直接操作 __proto__ 屬性
let obj2 = {};
obj2.__proto__ = obj1;
深度克隆
1、數(shù)據(jù)類型：
* 數(shù)據(jù)分為基本的數(shù)據(jù)類型(String, Number, boolean, Null, Undefined)和對象數(shù)據(jù)類型
- 基本數(shù)據(jù)類型特點： 存儲的是該對象的實際數(shù)據(jù)
- 對象數(shù)據(jù)類型特點： 存儲的是該對象在棧中引用，真實的數(shù)據(jù)存放在堆內(nèi)存里
2、復(fù)制數(shù)據(jù)
- 基本數(shù)據(jù)類型存放的就是實際的數(shù)據(jù)，可直接復(fù)制
let number2 = 2;
let number1 = number2;
- 克隆數(shù)據(jù)：對象/數(shù)組
1、區(qū)別： 淺拷貝/深度拷貝
判斷： 拷貝是否產(chǎn)生了新的數(shù)據(jù)還是拷貝的是數(shù)據(jù)的引用
知識點：對象數(shù)據(jù)存放的是對象在棧內(nèi)存的引用，直接復(fù)制的是對象的引用
let obj = {username: 'kobe'}
let obj1 = obj; // obj1 復(fù)制了obj在棧內(nèi)存的引用
2、常用的拷貝技術(shù)
1). arr.concat(): 數(shù)組淺拷貝
2). arr.slice(): 數(shù)組淺拷貝
3). JSON.parse(JSON.stringify(arr/obj)): 數(shù)組或?qū)ο笊羁截? 但不能處理函數(shù)數(shù)據(jù)
4). 淺拷貝包含函數(shù)數(shù)據(jù)的對象/數(shù)組
5). 深拷貝包含函數(shù)數(shù)據(jù)的對象/數(shù)組
Set和Map數(shù)據(jù)結(jié)構(gòu)
1. Set容器 : 無序不可重復(fù)的多個value的集合體
2. Map容器 : 無序的 key不重復(fù)的多個key-value的集合體
for_of循環(huán)
for(let value of target){}循環(huán)遍歷
1. 遍歷數(shù)組
2. 遍歷Set
3. 遍歷Map
4. 遍歷字符串
5. 遍歷偽數(shù)組
