Es6(剩余參數(shù)---擴(kuò)展運(yùn)算符):? …代替了es5的arguments
一兑徘、剩余運(yùn)算符(…)? 用法例:? 把多個(gè)獨(dú)立的字段合并到一個(gè)數(shù)組中
//obj 接收的是 book參數(shù)埋心, …keys接收的是其余參數(shù)
function pick(obj, …keys){
}
let book = {
????title: 'es6教程',
????author: '張三',
????year: 2022
}
let bookData = pick(book, 'title', 'year');
二仪糖、擴(kuò)展運(yùn)算符(…) 用例: 將一個(gè)數(shù)組分割柑司,并將各個(gè)項(xiàng)作為分離的參數(shù)傳給函數(shù)
const arr = [10,20,30,40,50,70,60];
console.log(Math.max(…arr)); //找到數(shù)組中最大的值
三迫肖、箭頭函數(shù)注意事項(xiàng)
1、使用箭頭函數(shù)攒驰,函數(shù)內(nèi)部沒(méi)有 orguments
2蟆湖、箭頭函數(shù)不能是要 new關(guān)鍵字來(lái)實(shí)例化對(duì)象(function函數(shù)是一個(gè)對(duì)象,但是箭頭函數(shù)不是一個(gè)對(duì)象玻粪,它是一個(gè)函數(shù)的語(yǔ)法糖---表達(dá)式)
四隅津、結(jié)構(gòu)賦值: 結(jié)構(gòu)賦值是對(duì)賦值運(yùn)算符的一種擴(kuò)展,主要針對(duì) 數(shù)組和對(duì)象 來(lái)進(jìn)行操作
對(duì)象的拓展方法:
is()? 等價(jià)于 === :比較兩個(gè)值是否嚴(yán)格相等(值與數(shù)據(jù)類型)
用法:
console.log( Object.is(NaN,NaN) )
assign()? :對(duì)象的合并
用法:
? let obj = {c: 11,d: 12,e: 13}劲室;
? Object.assign(obj,{a:1,b:2})
五伦仍、symbol類型: 原始數(shù)據(jù)類型 Symbol,他表示是獨(dú)一無(wú)二的值(內(nèi)存地址不一樣)
通過(guò)Symbol定義值很洋,表示變量是獨(dú)一無(wú)二的
最大用途:用來(lái)定義對(duì)象的私有變量
const name1 = Symbol('name');
const name2 = Symbol('name');
console.log(name1 === name2)? ? //false
let s1 = Symbol('s1');
let obj={
????[s1]: '謝小胖'
};
//如果用Symbol 定義的對(duì)象中的變量充蓝,取值時(shí)一定要用 [變量名]
console.log(obj[s1]);
如何獲取Symbol聲明的屬性名(對(duì)象的key)
1、Object.getOwnPropertySymbols(obj)
2喉磁、Reflect.ownKeys(obj)
六谓苟、Map 和 Set
Set:(集合,表示無(wú)重復(fù)值的有序列表)
let set1 = new Set();
set1.add(2); //添加元素
set1.add(3);
set1.delete(2); //刪除元素
set1.has(3); //校驗(yàn)?zāi)硞€(gè)值是否在set1中
set1.size(); //校驗(yàn)set1的長(zhǎng)度
// 循環(huán) --- 一般不用forEach
set1.forEach((val,key)=>{
????console.log(val);
????console.log(key)
})
//將set轉(zhuǎn)為數(shù)組操作
let set2 = new set([1,2,3,4,5,6]);
let arr = [ …set2];
Map:是鍵值對(duì)的有序列表协怒,鍵和值可以是任意類型
let map1 = new Map();
map1.set('name': '張三'); //添加參數(shù)
map1.get('name') //取map1中name的值
map1.has('name')? //校驗(yàn)?zāi)硞€(gè)值是否在map1中
map1.delete('name')? //刪除
map1.clear()? //清空
七涝焙、數(shù)組的拓展功能
數(shù)組的方法: from()? 和? of()
from()? 將偽數(shù)組轉(zhuǎn)換為真正的數(shù)組
例子:?
function add (){
????let lis = Array.from(arguments); //或者使用擴(kuò)展運(yùn)算符 let arr = […arguments];
?}
?add (1,2,3)
from() 還可以接受第二個(gè)參數(shù),用來(lái)對(duì)每個(gè)元素進(jìn)行處理
let liContent =? Array.from(lis, ele =>ele.textContent);
of()? 將一組值孕暇,轉(zhuǎn)為數(shù)組
Array.of(3,11,23,[1,2,3],{id: 1,name: '張三'});
copyWithin()? 當(dāng)前數(shù)組內(nèi)部,將指定位置的成員復(fù)制到其他位置(會(huì)覆蓋原有成員),然后返回當(dāng)前數(shù)組
[1,2,4,10].copyWithin(0,3)
find()---查找元素,返回第一個(gè)符合條件的數(shù)據(jù)仑撞;? ? findIndex()----查找索引,返回第一個(gè)符合條件的索引
[1,-20,2,4,10,-10].find((n)=>{
????return? n < 0
})
[1,-20,2,4,10,-10].findIndex( (n) => n < 0)
keys()---對(duì)鍵名的遍歷妖滔;? values()---對(duì)值的遍歷派草;entries()---對(duì)健值的遍歷;? 返回一個(gè)遍歷器铛楣,可以使用循環(huán)進(jìn)行遍歷
includes() 返回一個(gè)布爾
值近迁,表示某個(gè)是否包含某個(gè)給定的值;indexOf(),返回值為-1則不存在簸州,否則存在
[1,2,3,5].includes(2) //true
[1,2,3,5].includes(6) //false
[1,2,3,5].indexOf(2) //1? ?
[1,2,3,5].indexOf(6) //-1
八鉴竭、迭代器? Iterator ----- 是一種新的遍歷機(jī)制,兩個(gè)核心:
1岸浑、迭代器是一個(gè)接口搏存,能快捷的訪問(wèn)數(shù)據(jù),通過(guò)Symbol創(chuàng)建迭代器矢洲,通過(guò)迭代器的next()方法獲取迭代之后的結(jié)果璧眠;
2、迭代器是用于遍歷數(shù)據(jù)結(jié)構(gòu)的指針(數(shù)據(jù)庫(kù)的游標(biāo))
const items = ['one' , 'two' , 'three'];
const item = items[Symbol.iterator]();
console.log(item.next());
console.log(item.next());
console.log(item.next());
console.log(item.next());
{value: 'one', done: false}
{value: 'two', done: false}
{value: 'three', done: false}
{value: undefined, done: true}
返回的done如果為false標(biāo)識(shí)遍歷可繼續(xù),如果為true责静,則表示遍歷結(jié)束
九袁滥、生成器 generator函數(shù),可以通過(guò)yield關(guān)鍵字灾螃,將函數(shù)掛起题翻,為了改變執(zhí)行流提供了可能,同時(shí)為了做異步編程提供了方案腰鬼。
與普通函數(shù)的區(qū)別
1嵌赠、function后面 函數(shù)名之前 有個(gè) *
2、只能在函數(shù)內(nèi)部使用yield表達(dá)式熄赡,讓函數(shù)掛起
function*? func(){
????yield 1;
????yield 3;
????yield 4;
}
func()
function*? func(){
????console.log('one');
????yield 1;
????console.log('two');
????yield 3;
????console.log('end');
}
let fn = func();
console.log(fn.next());
console.log(fn.next());
console.log(fn.next());
總結(jié): generator函數(shù)是分段執(zhí)行的姜挺,yield語(yǔ)句是暫停執(zhí)行,而next()是恢復(fù)執(zhí)行
function* add(){
console.log('statr');
//x 可真的不是yield '2' 的返回值彼硫,他是next()調(diào)用 恢復(fù)當(dāng)前yield()執(zhí)行傳入的實(shí)參
let x = yield '2';
console.log('one:'+x);
let y = yield '3';
console.log('two:'+y);
return x+y
}
const fn = add();
console.log(fn.next());
console.log(fn.next(20));
console.log(fn.next(30));
使用場(chǎng)景: 為不具備Interator接口的對(duì)象提供了遍歷操作
十初家、Generator 生成器的應(yīng)用? 部署ajax操作,讓異步代碼同步化
回調(diào)地獄
a. 用生成器解決 請(qǐng)求完后繼續(xù)請(qǐng)求乌助,請(qǐng)求完后又繼續(xù)請(qǐng)求
十一溜在、Promise 對(duì)象?
相當(dāng)于一個(gè)容器,保存著未來(lái)才會(huì)結(jié)束的事件(異步操作)的一個(gè)結(jié)果
各種異步操作都可以用同樣的方法進(jìn)行處理
特點(diǎn):?
? ? 1他托、對(duì)象的狀態(tài)不受外界影響掖肋,處理異步操作三個(gè)狀態(tài): pending(進(jìn)行中),resolved(成功)赏参,rejected(失斨玖)
? ? 2、一旦狀態(tài)改變把篓,就不會(huì)再變纫溃。任何時(shí)候都可以得到這個(gè)結(jié)果
? ? resolved()能將現(xiàn)有的任何對(duì)象轉(zhuǎn)換成promise對(duì)象
十二、async----await: 使得異步操作更加方便
? ? ? 基本操作 async 它會(huì)返回一個(gè)promise對(duì)象? then? catch
? ? ? async 是 Generator(生成器) 的一個(gè)語(yǔ)法糖