ES6是什么
- ECMAScript6簡(jiǎn)稱ES6,是JavaScript語(yǔ)言的下一帶標(biāo)準(zhǔn)泵琳,在2015年6月進(jìn)行發(fā)布,也可以稱為ES2015俱尼。ES6簡(jiǎn)化了JavaScript的開(kāi)發(fā)脓鹃,隨后的每一年都會(huì)更新一版。
- ES2016-ES7
- ES2017-ES8
- ES2018-ES9
- ES2019-ES10
- 2020年已經(jīng)發(fā)布ES11 詳情請(qǐng)見(jiàn)("http://www.reibang.com/p/02d377ce2078")前端大牛公羊無(wú)衣的技術(shù)文章
ES6更新了什么
變量以及常量的聲明
- 在ES6以前,聲明變量的方法都是使用var,ES6更新了let和const。let是聲明變量的方法弓熏,const是聲明常亮的方法。
- let的特性
1糠睡、作用域:塊級(jí)作用域
在括號(hào)內(nèi)用let聲明的變量只能在括號(hào)內(nèi)使用
2挽鞠、變量在聲明之前無(wú)法使用if(true){ let a = 10; } console.log(a);//報(bào)錯(cuò)a is not defined
3、在for循環(huán)中用let定義自動(dòng)形成閉包console.log(a);//報(bào)錯(cuò)Cannot access 'a' before initialization let a = 10;
- const的特性
1狈孔、書(shū)寫(xiě)方式:聲明的常量要全部大寫(xiě)
2信认、必須要在聲明的時(shí)候賦值
3、聲明之后不允許被再次賦值const LIST//報(bào)錯(cuò)Missing initializer in const
4除抛、常量一般用來(lái)存儲(chǔ) 對(duì)象的地址狮杨,字符串表達(dá)的地址,根據(jù)需求定義的常量const LISt = 20; LISt = 10;//報(bào)錯(cuò)Assignment to constant variable
箭頭函數(shù)
- 箭頭函數(shù)簡(jiǎn)寫(xiě)了function函數(shù)
ES5的函數(shù)寫(xiě)法
ES6箭頭函數(shù)寫(xiě)法function sum(a,b){ console.log(a+b) } sum(10,20)//結(jié)果 30
let sum = (a,b)=>{ console.l0g(a+b) } sum(10,20)//結(jié)果30
- 參數(shù)容器和代碼容器之間用=>連接
- 參數(shù)只有一個(gè)的話可以省略小括號(hào)到忽,代碼只有一行可以省略大括號(hào)和return橄教,自動(dòng)返回。
let foo = a => a * 10; console.log(foo(2));//結(jié)果 20
- 與數(shù)組的API配合使用
let arr = [1,2,3,3,4,5,5,5,66,5,3,3,2,2,2]; arr = arr.filter( item => item % 2 === 0 )//將數(shù)組中的偶數(shù)返回 console.log(arr);//結(jié)果[2,4,66,2,2,2]
解構(gòu)賦值
- 解構(gòu)賦值適用于數(shù)組的值喘漏,對(duì)象的屬性值护蝶,對(duì)象方法和類的靜態(tài)方法
1、數(shù)組的解構(gòu)賦值
2翩迈、對(duì)象的解構(gòu)賦值 是按照屬性名的let [a,b,c] = [1,2,3] console.log(a,b,c);//結(jié)果 1 2 3 //可以隨意嵌套 let [[a,b],c,d] = [ [ 1 , 2 ] , [3,33,333] , 4] console.log(a,b,c,d);//結(jié)果 1 2 [3,33,333] 4 //交換 let a = 10; let b = 20; [a,b] = [b,a]; console.log(a,b) //結(jié)果 20 10
let obj = { a : 20 , b : 30, d : { c : 50 } } let { a : aaaa } = obj; console.log(aaaa);//結(jié)果 20
Set和Map
- Set的方法和特性
1持灰、Set是一個(gè)不重復(fù)的列表。
2负饲、所有的數(shù)據(jù)都不是按照索引排列的堤魁,沒(méi)有索引。不能使用for和for in遍v歷返十,可以使用for of妥泉。let set = new Set([1,2,3,4,5,1,2,3,4,5]); console.log(set.has(5));//查看是否含有5結(jié)果為true for(let value of set){ console.log(value);// 1 2 3 4 5 } set.add(10);//添加元素 set.delete(5);//刪除元素 set.clear();//清除所有元素
- Map的方法和特性
1、Map是鍵值對(duì)存儲(chǔ)數(shù)據(jù)
2洞坑、Map有長(zhǎng)度盲链,map中key可以任何類型,包括索引類型,value也可以任何類型var map=new Map(); map.set("name","xietian");//set 是設(shè)置屬性 map.set(3,10); map.set(true,false); var arr=[1,2,3] map.set(arr,[1,2,3]); var o={a:1}; map.set(o,{a:2}); console.log(map.get(true));//get 是獲取屬性 console.log(map.get(arr)); console.log(map.get(o)); map.delete(3);//key按照key來(lái)刪除 console.log(map.has("name"));//判斷有沒(méi)有這個(gè)屬性 console.log(map.size) //長(zhǎng)度刽沾,有多少個(gè)數(shù)據(jù) map.clear();//清楚所有