es6 基礎(chǔ)學(xué)習(xí)

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ǔ)法糖

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末韧掩,一起剝皮案震驚了整個(gè)濱河市紊浩,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌疗锐,老刑警劉巖坊谁,帶你破解...
    沈念sama閱讀 217,185評(píng)論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異滑臊,居然都是意外死亡口芍,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,652評(píng)論 3 393
  • 文/潘曉璐 我一進(jìn)店門雇卷,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)鬓椭,“玉大人颠猴,你說(shuō)我怎么就攤上這事⌒∪荆” “怎么了翘瓮?”我有些...
    開封第一講書人閱讀 163,524評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)氧映。 經(jīng)常有香客問(wèn)我,道長(zhǎng)脱货,這世上最難降的妖魔是什么岛都? 我笑而不...
    開封第一講書人閱讀 58,339評(píng)論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮振峻,結(jié)果婚禮上臼疫,老公的妹妹穿的比我還像新娘。我一直安慰自己扣孟,他們只是感情好烫堤,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,387評(píng)論 6 391
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著凤价,像睡著了一般鸽斟。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上利诺,一...
    開封第一講書人閱讀 51,287評(píng)論 1 301
  • 那天富蓄,我揣著相機(jī)與錄音,去河邊找鬼慢逾。 笑死立倍,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的侣滩。 我是一名探鬼主播口注,決...
    沈念sama閱讀 40,130評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼君珠!你這毒婦竟也來(lái)了寝志?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 38,985評(píng)論 0 275
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤策添,失蹤者是張志新(化名)和其女友劉穎澈段,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體舰攒,經(jīng)...
    沈念sama閱讀 45,420評(píng)論 1 313
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡败富,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,617評(píng)論 3 334
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了摩窃。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片兽叮。...
    茶點(diǎn)故事閱讀 39,779評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡芬骄,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出鹦聪,到底是詐尸還是另有隱情账阻,我是刑警寧澤,帶...
    沈念sama閱讀 35,477評(píng)論 5 345
  • 正文 年R本政府宣布泽本,位于F島的核電站淘太,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏规丽。R本人自食惡果不足惜蒲牧,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,088評(píng)論 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望赌莺。 院中可真熱鬧冰抢,春花似錦、人聲如沸艘狭。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,716評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)巢音。三九已至遵倦,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間官撼,已是汗流浹背骇吭。 一陣腳步聲響...
    開封第一講書人閱讀 32,857評(píng)論 1 269
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留歧寺,地道東北人燥狰。 一個(gè)月前我還...
    沈念sama閱讀 47,876評(píng)論 2 370
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像斜筐,于是被迫代替她去往敵國(guó)和親龙致。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,700評(píng)論 2 354

推薦閱讀更多精彩內(nèi)容