箭頭函數(shù)
1. 作用: 定義匿名函數(shù)
2. 基本語法:
沒有參數(shù): () => console.log('xxxx')
一個參數(shù): i => i+2
大于一個參數(shù): (i,j) => i+j
函數(shù)體不用大括號: 默認返回結(jié)果
函數(shù)體如果有多個語句, 需要用{}包圍,若有需要返回的內(nèi)容诗良,需要手動返回
3. 使用場景: 多用來定義回調(diào)函數(shù)
4. 箭頭函數(shù)的特點:
1禽车、簡潔
2灭美、箭頭函數(shù)沒有自己的this棒口,箭頭函數(shù)的this不是調(diào)用的時候決定的痊土,而是在定義的時候所處的對象就是它的this
3淋硝、擴展理解: 箭頭函數(shù)的this看外層的是否有函數(shù)燎悍,如果有,外層函數(shù)的this就是內(nèi)部箭頭函數(shù)的this臣镣,如果沒有辅愿,則this是window。
擴展運算符
1. rest(可變)參數(shù)
用來取代arguments 但比 arguments 靈活,只能是最后部分形參參數(shù)
functionfun(...values){console.log(arguments);arguments.forEach(function(item, index){console.log(item, index);? ? });console.log(values);? ? values.forEach(function(item, index){console.log(item, index);? ? })}fun(1,2,3);
2. 擴展運算符
letarr1 = [1,3,5];letarr2 = [2,...arr1,6];arr2.push(...arr1);
形參默認值
當不傳入?yún)?shù)的時候默認使用形參里的默認值
functionPoint(x =1,y =2){this.x = x;this.y = y;}
Promise對象
1. 理解:
Promise對象: 代表了未來某個將要發(fā)生的事件(通常是一個異步操作)
有了promise對象, 可以將異步操作以同步的流程表達出來, 避免了層層嵌套的回調(diào)函數(shù)(俗稱'回調(diào)地獄')
ES6的Promise是一個構(gòu)造函數(shù), 用來生成promise對象的實例
2. 使用promise基本步驟(2步):
創(chuàng)建promise對象
letpromise =newPromise((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. 應用:
使用promise實現(xiàn)超時處理
使用promise封裝處理ajax請求
letrequest =newXMLHttpRequest();request.onreadystatechange =function(){}request.responseType ='json';request.open("GET", url);request.send();
5. promise過程分析:
image.png
Symbol
1. 前言:ES5中對象的屬性名都是字符串退疫,容易造成重名渠缕,污染環(huán)境
2. 概念:ES6中的添加了一種原始數(shù)據(jù)類型symbol(已有的原始數(shù)據(jù)類型:String, Number, boolean, null, undefined, 對象)
3. 特點:
1鸽素、Symbol屬性對應的值是唯一的褒繁,解決命名沖突問題
2、Symbol值不能與其他數(shù)據(jù)進行計算馍忽,包括同字符串拼串
3棒坏、for in, for of遍歷時不會遍歷symbol屬性
4. 使用:
1、調(diào)用Symbol函數(shù)得到symbol值
letsymbol =Symbol();letobj = {};obj[symbol] ='hello';
2遭笋、傳參標識
letsymbol =Symbol('one');letsymbol2 =Symbol('two');console.log(symbol);// Symbol('one')console.log(symbol2);// Symbol('two')
3坝冕、內(nèi)置Symbol值
除了定義自己使用的Symbol值以外,ES6還提供了11個內(nèi)置的Symbol值瓦呼,指向語言內(nèi)部使用的方法
Symbol.iterator
對象的Symbol.iterator屬性喂窟,指向該對象的默認遍歷器方法
Iterator遍歷器
概念: iterator是一種接口機制,為各種不同的數(shù)據(jù)結(jié)構(gòu)提供統(tǒng)一的訪問機制
作用:
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: 當前成員的值,done: 布爾值}
value表示當前成員的值剧蚣,done對應的布爾值表示當前的數(shù)據(jù)的結(jié)構(gòu)是否遍歷結(jié)束。
當遍歷結(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)機,內(nèi)部封裝了不同狀態(tài)的數(shù)據(jù)
3豪治、用來生成遍歷器對象
4洞拨、可暫停函數(shù)(惰性求值), yield可暫停,next方法可啟動负拟。每次返回的是yield后的表達式結(jié)果
特點:
1烦衣、function 與函數(shù)名之間有一個星號
2、內(nèi)部用yield表達式來定義不同的狀態(tài)
例如:
function*generatorExample(){letresult =yield'hello';// 狀態(tài)值為helloyield'generator';// 狀態(tài)值為generator}
3掩浙、generator函數(shù)返回的是指針對象(即iterator)花吟,而不會執(zhí)行函數(shù)內(nèi)部邏輯
4、調(diào)用next方法函數(shù)內(nèi)部邏輯開始執(zhí)行厨姚,遇到y(tǒng)ield表達式停止衅澈,返回{value: yield后的表達式結(jié)果/undefined, done: false/true}
5、再次調(diào)用next方法會從上一次停止時的yield處開始谬墙,直到最后
6今布、yield語句返回結(jié)果通常為undefined经备,當調(diào)用next方法時傳參內(nèi)容會作為啟動時yield語句的返回值。
async函數(shù)
async函數(shù)(源自ES2017)
概念: 真正意義上去解決異步回調(diào)的問題部默,同步流程表達異步操作
本質(zhì): Generator的語法糖
語法:
asyncfunctionfoo(){await異步操作;await異步操作弄喘;}
特點:
1、不需要像Generator去調(diào)用next方法甩牺,遇到await等待蘑志,當前的異步操作完成就往下執(zhí)行
2、返回的總是Promise對象贬派,可以用then方法進行下一步操作
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. 重寫從父類中繼承的一般方法
字符串擴展
includes(str) : 判斷是否包含指定的字符串
startsWith(str) : 判斷是否以指定字符串開頭
endsWith(str) : 判斷是否以指定字符串結(jié)尾
repeat(count) : 重復指定次數(shù)
數(shù)值擴展
二進制與八進制數(shù)值表示法: 二進制用0b, 八進制用0o
Number.isFinite(i) : 判斷是否是有限大的數(shù)
Number.isNaN(i) : 判斷是否是NaN
Number.isInteger(i) : 判斷是否是整數(shù)
Number.parseInt(str) : 將字符串轉(zhuǎn)換為對應的數(shù)值
Math.trunc(i) : 直接去除小數(shù)部分
數(shù)組擴展
Array.from(v) : 將偽數(shù)組對象或可遍歷對象轉(zhuǎn)換為真數(shù)組
Array.of(v1, v2, v3) : 將一系列值轉(zhuǎn)換成數(shù)組
find(function(value, index, arr){return true}) : 找出第一個滿足條件返回true的元素
findIndex(function(value, index, arr){return true}) : 找出第一個滿足條件返回true的元素下標
對象擴展
Object.is(v1, v2)
判斷2個數(shù)據(jù)是否完全相等
Object.assign(target, source1, source2..)
將源對象的屬性復制到目標對象上
直接操作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侍筛、復制數(shù)據(jù)
基本數(shù)據(jù)類型存放的就是實際的數(shù)據(jù)萤皂,可直接復制
let number2 = 2;
let number1 = number2;
克隆數(shù)據(jù):對象/數(shù)組
1、區(qū)別: 淺拷貝/深度拷貝
判斷: 拷貝是否產(chǎn)生了新的數(shù)據(jù)還是拷貝的是數(shù)據(jù)的引用
知識點:對象數(shù)據(jù)存放的是對象在棧內(nèi)存的引用匣椰,直接復制的是對象的引用
let obj = {username: 'kobe'}
let obj1 = obj; // obj1 復制了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)
Set容器 : 無序不可重復的多個value的集合體
Set()
Set(array)
add(value)
delete(value)
has(value)
clear()
size
Map容器 : 無序的 key不重復的多個key-value的集合體
Map()
Map(array)
set(key, value)//添加
get(key)
delete(key)
has(key)
clear()
size
for_of循環(huán)
for(let value of target){}循環(huán)遍歷
遍歷數(shù)組
遍歷Set
遍歷Map
遍歷字符串
遍歷偽數(shù)組