ES6基礎(chǔ)筆記二

ES6 箭頭函數(shù)、函數(shù)擴(kuò)展

ES5:

function add(a,b){

return a+b;

}

console.log(add(1,2));

主動(dòng)拋出錯(cuò)誤:throw new Error(xxxx)

function add(a,b){

if(a==0){

throw new Error("這是錯(cuò)誤的")

}

return a+b;

}

console.log(add(0));

嚴(yán)謹(jǐn)模式:

function add(a,b){

'use strict'

return a+b;

}

console.log(add(1,2);

但注意參數(shù)不要有默認(rèn)值,否則會(huì)報(bào)錯(cuò)

//傳遞參數(shù)的個(gè)數(shù),length

function add(a,b){

return a+b;

}

console.log(add(add.length);

箭頭函數(shù):

var add =(a,b=1)=>a+b;

console.log(add(a));

ES6 中的函數(shù)和數(shù)組補(bǔ)漏

對(duì)象的函數(shù)解構(gòu)json形式的對(duì)象:

let json={

a:'jspang',

b:'胖籽'

}

function fun({a,b="web"}){

console.log(a,b)

}

//對(duì)象的函數(shù)調(diào)用

fun(json);

結(jié)果:jspang 胖籽

數(shù)組的解構(gòu):

let arr=['jspang','jspamng','wowow'];

function fun(a,b,c){

console.log(a,b,c);

}

fun(...arr)

結(jié)果:jspang jspamng wowow

in 的用法:

對(duì)判斷對(duì)象是否存在某個(gè)值

let obj ={

a:'技術(shù)胖',

b:'jspang',

}

console.log('c' in obj);

結(jié)果:false

對(duì)數(shù)組是否存在某個(gè)值:

let arr =[,,,];

console.log(arr.length);

結(jié)果:3

//數(shù)組的空位判斷

let arr =['jspang',,,];

console.log(1 in arr);

結(jié)果:false

數(shù)組遍歷的方法:

forEach遍歷方法

let arr = ['js','jq','vue','react'];

arr.forEach((val,index)=>console.log(index,val));

結(jié)果:

0 'js'

1 'jq'

2 'vue'

3 'react'

filter遍歷方法:

let arr = ['js','jq','vue','react'];

arr.filter(x =>console.log(x));

結(jié)果:

js

jq

vue

rect

some遍歷方法

let arr = ['js','jq','vue','react'];

arr.some(x =>console.log(x));

結(jié)果:

js

jq

vue

rect

false

map遍歷 方法:

let arr=['jspang','技術(shù)胖','前端視頻'];

console.log(arr.map(x=>'web'));

console.log(arr55.toString());

結(jié)果:

['web','web','web']

jspang,技術(shù)胖,前端視頻

轉(zhuǎn)化的實(shí)例方法:

toString()

join()

例子:

let arry =['js','jq','angular'];

console.log(arry.join('|'));

結(jié)果:

js|jq|angular

ES6中的對(duì)象:

對(duì)象賦值

ES5:

let name = 'js';

let skill = 'jq';

let obj ={name:name,skill:skill};

console.log(obj);

結(jié)果:

{name:'js',skill:'jq'}

ES6:

let name = 'js';

let skill = 'jq';

let obj ={name,skill};

console.log(obj);

結(jié)果:

{name:'js',skill:'jq'}

key值得構(gòu)建:

let key="skill";

var obj={

[key]:'web'

}

console.log(obj);

結(jié)果:

{skill:"web"}

自定義對(duì)象方法:

let obj={

add:function(a,b){

return a+b;

}

}

console.log(obj,add(1,2));

結(jié)果3

is()的方法:

let obj1={name:"js"};

let obj2={name:"js"};

console.log(obj1.name===obj2.name);

//注意Object一定要大寫(xiě)才是window自帶的方法

console.log(Object.is(obj1.name,obj2.name))

結(jié)果:

true

true

例子:

===同值相等,is嚴(yán)格相等

console.log(+0===-0);//true

console.log(NaN===NaN);//false

console.log(Object.is(+0,-0));//false

console.log(Object.is(NaN,NaN));//true

assign 數(shù)組的合并對(duì)象:

let a ={a:'js'};

let b ={b:'jq'};

let c ={c:'vue'};

let d =Object.assign(a,b,c);

console.log(d)

結(jié)果:

{a:"js",b:'jq',c:'vue'}

ES6 Symbol在對(duì)象中的作用

//數(shù)據(jù)類(lèi)型:

let a =new String;

let b =new Number;

let c =new Boolean;

let d = new Array;

let e = new Object;

let f =Symbol()

console.log(typeof(f))//symbol

例子:

let js = Symbol("wo");

console.log(js);

console.lof(js.toString());

結(jié)果:

Symbol(wo)//類(lèi)型

Symbol(wo)字符串

symbol在對(duì)象中的作用:

let js = Symbol();

let obj={

[js]:"wowo"

}

//注意在symgbol類(lèi)型里面沒(méi)有.這個(gè)用法,直接使用[]

console.log(obj[js]);

obj[js]='web';

console.log(obj[js]);

結(jié)果:

wowo

web

對(duì)對(duì)象元素的保護(hù)作用:

let obj ={name:'js',skill:'wb',age:18};

for(let item in obj){

console.log(obj[item]);

}

結(jié)果:

js

wb

18

//symbol的使用例子:

//沒(méi)有顯示symbol里面的年齡18

let obj ={name:'js',skill:'wb'};

let age =Symbol();

obj[age]=18;

console.log(obj);

for(let item in obj){

console.log(obj[item]);

}

結(jié)果:

js

wb

let obj ={name:'js',skill:'wb'};

let age =Symbol();

obj[age]=18;

console.log(obj);

for(let item in obj){

console.log(obj[item]);

}

//直接顯示你想要的年齡18

console.log(obj[age]);

結(jié)果:

js

wb

18

ES6 Set 和 WeakSet數(shù)據(jù)結(jié)構(gòu)

set 里面放的是數(shù)組,Set的數(shù)據(jù)結(jié)構(gòu)是以數(shù)組的形式構(gòu)建的,不是數(shù)組哦

Set 方法去重:

let setArr = new Set(['js','jq','web','js']);

console.log(setArr);

結(jié)果:

Set{'js','jq','web'}

Has 方法查找,返回false/true

let setArr = new Set(['js','jq','web','js']);

console.log(setArr.has('web'));

刪除的方法:

let setArr = new Set(['js','jq','web','js']);

console.log(setArr.clear('web'));

結(jié)果:

Set{}

刪除里面的某個(gè)值

let setArr = new Set(['js','jq','web','js']);

console.log(setArr.delete('jq'));

輸出的方法(循環(huán)方法):

for...of

forEach

WeakSet:可以放入對(duì)象,但是里面的值是不允許重復(fù)的

let weakObj= new WeakSet();

let obj ={a:'js',b:'jq'};

//不能直接賦值要通過(guò)add進(jìn)行賦值

weakObj.add(obj);

console.log(weakObj);

結(jié)果:

WeakSet {{…}}

注意:

let weakObj = new WeakSet();

let obj ={a:'js',b:'jq'};

let obj1 ={a:'js',b:'jq'};

weakobj.add(obj);

weakobj.add(obj1);

console.log(weakObj);

結(jié)果:

WeakSet {{…}, {…}}

ES6 map 數(shù)據(jù)結(jié)構(gòu):

map 數(shù)據(jù)類(lèi)型使用廣泛

使用map方法:

var json ={

name:'js',

age:'jq'

}

var map = new Map();

map.set(json,'iam')

console.log(map);

結(jié)果:

Map(1) {{…} => "iam"}

map 增刪查

get/delete/clear(全部刪除)/size(剩下個(gè)數(shù))/has

ES6 proxy 代理 增強(qiáng) 對(duì)象和函數(shù)(方法)

生命周期,鉤子函數(shù)、預(yù)處理

在執(zhí)行方法之前做一些預(yù)處理

let pro = new Proxy({

add:function(val){

return val+100;

},

name:'I am Js'

},{

get:function(target,key,property){

console.log('come in Get');

return target[key];

},

set:function(target,key,value,receiver){

console.log(`setting ${key}=${value}`);

}

});

console.log(pro.name)

pro.name = '技術(shù)胖'

ES6? promise 對(duì)象的使用

promise es5 回調(diào)地獄

直接使用結(jié)構(gòu)化的then

ES6 Class 類(lèi)

Class Coder{

name(val){

console.log(val);

//需要返回值

return val;

}

//注意多方法時(shí)不需要逗號(hào),直接往下打代碼就好

skill(val){

console.log(this.name('技術(shù)胖'))

}

}

let js = new Coder;

js.name('胖籽');

結(jié)果:

胖籽

ES6 模塊化操作

export可以讓我們把變量、函數(shù)、對(duì)象進(jìn)行模塊化,提供外部調(diào)用接口,讓外部進(jìn)行引用

//export 輸出 一個(gè)頁(yè)面可以使用多個(gè)

export default 一個(gè)頁(yè)面才有一個(gè)

//import 引入 需要{ }

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 229,517評(píng)論 6 539
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 99,087評(píng)論 3 423
  • 文/潘曉璐 我一進(jìn)店門(mén),熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人,你說(shuō)我怎么就攤上這事。” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 177,521評(píng)論 0 382
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我,道長(zhǎng),這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 63,493評(píng)論 1 316
  • 正文 為了忘掉前任,我火速辦了婚禮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 72,207評(píng)論 6 410
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書(shū)人閱讀 55,603評(píng)論 1 325
  • 那天,我揣著相機(jī)與錄音,去河邊找鬼。 笑死,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,624評(píng)論 3 444
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 42,813評(píng)論 0 289
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 49,364評(píng)論 1 335
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 41,110評(píng)論 3 356
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 43,305評(píng)論 1 371
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,874評(píng)論 5 362
  • 正文 年R本政府宣布,位于F島的核電站,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 44,532評(píng)論 3 348
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 34,953評(píng)論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 36,209評(píng)論 1 291
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 52,033評(píng)論 3 396
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 48,268評(píng)論 2 375

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

  • JavaScript之父:Brendan Eich 。 -基本語(yǔ)法:借鑒了C語(yǔ)言和Java語(yǔ)言。-數(shù)據(jù)結(jié)構(gòu):借鑒了...
    饑人谷_kule閱讀 605評(píng)論 0 0
  • (a fork of Airbnb's Javascript Style Guide) Strikingly ES...
    飄零_zyw閱讀 1,180評(píng)論 1 2
  • 慕課網(wǎng)@JoJozhai 老師 TypeScript入門(mén)課程分享 TypeScript入門(mén) ES5,ES6,JS,...
    shangpudxd閱讀 10,461評(píng)論 0 22
  • js簡(jiǎn)介 Js是一種基于事件和對(duì)象驅(qū)動(dòng)的解釋性、松散性的語(yǔ)言。 一切皆對(duì)象 javascript 布蘭登艾奇 ...
    塔庫(kù)納瑪哈哈閱讀 1,232評(píng)論 0 2
  • 懷著4個(gè)月的身孕苦學(xué)30多天,又在一個(gè)深秋涼涼的考場(chǎng)中坐了5個(gè)小時(shí),上個(gè)周六考完試不久,我就生病了。開(kāi)始,以...
    悠悠我心yoyo閱讀 481評(píng)論 0 0