Web前端開發(fā)ES6語(yǔ)法詳解（一）

ES6語(yǔ)法詳解一、ECMAScript5嚴(yán)格模式1、概述除了正常運(yùn)行模式，ECMAscript5添加了第二種運(yùn)行模式："嚴(yán)格模式"（strictmode）。顧名思義，這種模式使得Javascript在更嚴(yán)格的條件下運(yùn)行。2、目的消除Javascript語(yǔ)法的一些不合理、不嚴(yán)謹(jǐn)之處，減少一些怪異行為;消除代碼運(yùn)行的一些不安全之處，保證代碼運(yùn)行的安全；提高編譯器效率，增加運(yùn)行速度；為未來(lái)新版本的Javascript做好鋪墊。"嚴(yán)格模式"體現(xiàn)了Javascript更合理、更安全、更嚴(yán)謹(jǐn)?shù)陌l(fā)展方向，包括IE10在內(nèi)的主流瀏覽器，都已經(jīng)支持它，許多大項(xiàng)目已經(jīng)開始全面擁抱它。另一方面，同樣的代碼，在"嚴(yán)格模式"中，可能會(huì)有不一樣的運(yùn)行結(jié)果；一些在"正常模式"下可以運(yùn)行的語(yǔ)句，在"嚴(yán)格模式"下將不能運(yùn)行。掌握這些內(nèi)容，有助于更細(xì)致深入地理解Javascript，讓你變成一個(gè)更好的程序員。3、使用1、將"usestrict"放在腳本文件的第一行，則整個(gè)腳本都將以"嚴(yán)格模式"運(yùn)行。**如果這行語(yǔ)句不在第一行，則無(wú)效，整個(gè)腳本以"正常模式"運(yùn)行。**如果不同模式的代碼文件合并成一個(gè)文件，這一點(diǎn)需要特別注意。(嚴(yán)格地說，只要前面不是產(chǎn)生實(shí)際運(yùn)行結(jié)果的語(yǔ)句，"usestrict"可以不在第一行，比如直接跟在一個(gè)空的分號(hào)后面。)<script> "usestrict"; //...</script>2、針對(duì)單個(gè)函數(shù)將"usestrict"放在函數(shù)體的第一行，則整個(gè)函數(shù)以"嚴(yán)格模式"運(yùn)行。functionstrict(){"usestrict";return"這是嚴(yán)格模式。";}二、語(yǔ)法和行為改變1、全局變量必須用var顯示聲明變量在正常模式中，如果一個(gè)變量沒有聲明就賦值，默認(rèn)是全局變量。嚴(yán)格模式禁止這種用法，全局變量必須顯式聲明。 <scripttype="text/javascript"> "usestrict"; v=1;//報(bào)錯(cuò)，v未聲明 //name="Daotin"; for(i=0;i<2;i++){//報(bào)錯(cuò)，i未聲明 } </script>不能使用name，因?yàn)閚ame是window的一個(gè)保留屬性，默認(rèn)為空。2、禁止自定義的函數(shù)中的this指向window <script> "usestrict"; functionfoo(){ console.log(this); } foo(); </script>沒有"usestrict"的時(shí)候，打印window對(duì)象，有"usestrict"的時(shí)候，打印undefined。3、嚴(yán)格模式會(huì)創(chuàng)建eval作用域eval會(huì)解析語(yǔ)句中的字符串。 <script> "usestrict"; varname='Daotin'; eval('varname="lvonve";console.log(name)'); console.log(name); </script>如果不加"usestrict";，兩次打印的結(jié)構(gòu)都為lvonve；加了的話，打印結(jié)果為lvonve和Daotin。也就相當(dāng)于給eval創(chuàng)建了一個(gè)作用域。4、對(duì)象不能有重名的屬性正常模式下，如果對(duì)象有多個(gè)重名屬性，最后賦值的那個(gè)屬性會(huì)覆蓋前面的值。嚴(yán)格模式下，這屬于語(yǔ)法錯(cuò)誤。（但是在瀏覽器console下面并沒有顯示錯(cuò)誤信息。） <script> "usestrict"; varo={ p:1, p:2 };//語(yǔ)法錯(cuò)誤 </script>5、禁止刪除變量嚴(yán)格模式下無(wú)法刪除變量。只有configurable設(shè)置為true的對(duì)象屬性，才能被刪除。"usestrict";varx;deletex;//語(yǔ)法錯(cuò)誤varo=Object.create(null,{'x':{value:1,configurable:true}});deleteo.x;//刪除成功三、json對(duì)象擴(kuò)展把一個(gè)Json對(duì)象轉(zhuǎn)換成字符串：JSON.stringify(js對(duì)象/數(shù)組);把一個(gè)json格式的字符串轉(zhuǎn)換成Json對(duì)象：JSON.parse(json對(duì)象/數(shù)組);示例：<scripttype="text/javascript">varobj={name:'Daotin',age:18};obj=JSON.stringify(obj);console.log(typeofobj);//stringobj=JSON.parse(obj);console.log(obj);</script>四、Object對(duì)象擴(kuò)展1、方法一以指定原型對(duì)象創(chuàng)建新的對(duì)象。Object.create(prototype,[descriptors])prototype：指定原型對(duì)象descriptors：（可選）設(shè)置創(chuàng)建的新的對(duì)象的新屬性。示例：<scripttype="text/javascript">varObj1={userName:"Daotin"};varObj2=Object.create(Obj1);console.log(Obj2);</script>打印結(jié)果：Obj2下面的__proto__指向的原型對(duì)象中有Obj1的屬性，相當(dāng)于繼承了Obj1屬性。當(dāng)為新創(chuàng)建的對(duì)象添加新屬性的時(shí)候：添加的新屬性要以對(duì)象的方式來(lái)添加，這個(gè)對(duì)象其中有四個(gè)屬性來(lái)描述當(dāng)前屬性對(duì)象：value

:指定屬性的值writable

:標(biāo)識(shí)當(dāng)前屬性值是否是可修改的,默認(rèn)為falseconfigurable:標(biāo)識(shí)當(dāng)前屬性是否可以被刪除默認(rèn)為falseenumerable：標(biāo)識(shí)當(dāng)前屬性是否能用forin枚舉默認(rèn)為false<scripttype="text/javascript">varObj1={userName:"Daotin"};varObj2=Object.create(Obj1,{age:{value:18,writable:true,configurable:true,enumerable:true}});console.log(Obj2);Obj2.age=19;console.log(Obj2);deleteObj2.age;console.log(Obj2);for(variinObj2){console.log(i);}</script>2、方法二Object.defineProperties(object,descriptors)為指定對(duì)象定義擴(kuò)展多個(gè)屬性.object：指定對(duì)象descriptors：需要擴(kuò)展的屬性（是一個(gè)對(duì)象）。這個(gè)屬性對(duì)象同樣有：value，writable，configurable，enumerable屬性。除了這4個(gè)屬性外。還有：get

：用來(lái)獲取當(dāng)前屬性的回調(diào)函數(shù)。set

：修改當(dāng)前屬性值得觸發(fā)的回調(diào)函數(shù)，并且實(shí)參即為修改后的值。由上圖可知，直接修改對(duì)象的值是不可以的，必須設(shè)置set屬性，這樣在修當(dāng)前屬性值的時(shí)候，會(huì)自動(dòng)調(diào)用set。類似的，在訪問當(dāng)前屬性的時(shí)候，會(huì)自動(dòng)調(diào)用get3、方法三對(duì)象本身的兩個(gè)方法：getpropertyName(){}

：用來(lái)得到當(dāng)前屬性值的回調(diào)函數(shù)setpropertyName(){}

：用來(lái)監(jiān)視當(dāng)前屬性值變化的回調(diào)函數(shù)五、數(shù)組的擴(kuò)展這些擴(kuò)展的方法都在Array的原型對(duì)象中。1.Atotype.indexOf(value):得到值在數(shù)組中的第一個(gè)下標(biāo)2.Atotype.lastIndexOf(value):得到值在數(shù)組中的最后一個(gè)下標(biāo)3.Atotype.forEach(function(item,index){}):遍歷數(shù)組4.Atotype.map(function(item,index){}):遍歷數(shù)組返回一個(gè)新的數(shù)組，返回加工之后的值5.Atotype.filter(function(item,index){}):遍歷過濾出一個(gè)新的子數(shù)組，返回條件為true的值六、let作用：與var類似,用于聲明一個(gè)變量。let和var的區(qū)別：在塊作用域內(nèi)有效(只要有{}出現(xiàn)則只在該{}范圍內(nèi)生效)不能重復(fù)聲明不會(huì)預(yù)處理,不存在提升<scripttype="text/javascript">console.log(res);//不會(huì)預(yù)處理,不存在提升，報(bào)錯(cuò)//不能重復(fù)聲明letres=10;letres=10;//報(bào)錯(cuò)</script>應(yīng)用：循環(huán)遍歷加監(jiān)聽我們先開看一個(gè)例子：<body><button>測(cè)試1</button><button>測(cè)試2</button><button>測(cè)試3</button><scripttype="text/javascript">letbtns=document.getElementsByTagName('button');for(vari=0;i<btns.length;i++){btns[i].onclick=function(){alert(i);}}</script></body>我們分別點(diǎn)擊按鈕的時(shí)候，分別打印多少？結(jié)果：打印的都是2。因?yàn)榛卣{(diào)函數(shù)的寫法會(huì)進(jìn)行覆蓋操作。如何解決？方法一：使用閉包。for(vari=0;i<btns.length;i++){(function(){btns[i].onclick=function(){alert(i);}})(i);}這種方式相當(dāng)于，每個(gè)回調(diào)函數(shù)有個(gè)自己的區(qū)間，各個(gè)區(qū)間互不干擾。而let正好有這個(gè)特性。方法二：將for循環(huán)的var改為let即可。七、const作用：定義一個(gè)常量。特點(diǎn)：不能修改常量名從規(guī)范上來(lái)將最好所有字母大寫其它特點(diǎn)同let。constuName='Daotin';八、變量的解構(gòu)賦值理解：從對(duì)象或數(shù)組中提取數(shù)據(jù),并賦值給變量(多個(gè))。1、對(duì)象的解構(gòu)賦值之前我們要獲取一個(gè)對(duì)象的屬性，會(huì)定義變量然后接收對(duì)象的屬性值。letobj={name:'kobe',age:39};letname=;letage=obj.age;console.log(name,age);對(duì)象的解構(gòu)賦值可以這樣做：let{name,age}=obj;console.log(name,age);//name就是，age就是obj.age給對(duì)象的解構(gòu)賦值起個(gè)別名：letobj={name:'daotin',age:18};let{name:myname,age:myage}=obj;//給name和age分別起個(gè)別名myname和myage指定默認(rèn)值（對(duì)于對(duì)象不存在的屬性，可以添加默認(rèn)值）：letobj={name:'daotin',age:18};let{name,age,sex='man'}=obj;//給定obj對(duì)象一個(gè)屬性默認(rèn)值注意：1、對(duì)象的解構(gòu)賦值必須使用大括號(hào){}2、大括號(hào)里面的變量名必須和obj里面的屬性名相同3、可以只定義一部分變量接收一部分的obj屬性，不需要全部接收。2、數(shù)組的解構(gòu)賦值數(shù)組沒有對(duì)象的數(shù)組名，但是有下標(biāo)可以使用。所以這里的變量名可以隨便起。letarr=['abc',23,true];let[a,b,c]=arr;console.log(a,b,c);注意：1、數(shù)組的解構(gòu)賦值必須使用中括號(hào)[]，并且對(duì)順序有要求。2、可以給定默認(rèn)值如果只想取其中的某幾個(gè)值，那么變量可以使用逗號(hào)隔開。let[,,a,,]=arr;如果定義的變量個(gè)數(shù)比數(shù)組的個(gè)數(shù)多，多出來(lái)的變量的值為

undefined。九、模板字符串作用：簡(jiǎn)化字符串的拼接。注意：1、模板字符串必須用````包含；2、變化的部分使用${xxx}定義letobj={name:'anverson',age:41};//我們之前拼接字符串用的是+console.log('我叫:'++',我的年齡是：'+obj.age);//使用模板字符串的方式console.log(`我叫:${},我的年齡是：${obj.age}`);十、對(duì)象的簡(jiǎn)化寫法如果有變量和對(duì)象的屬性名稱相同，之前的寫法是賦值操作：leta=1;letb=2;letObj={a:a,b:b,};現(xiàn)在，如果變量和對(duì)象的屬性名稱相同，可以簡(jiǎn)寫如下：leta=1;letb=2;letObj={a,b,};對(duì)于對(duì)象的屬性，如果是個(gè)函數(shù)的話，也可以簡(jiǎn)寫：之前的寫法為：letObj={foo:function(){//...}};現(xiàn)在的寫法為：（去掉冒號(hào)和function）letObj={foo(){//...}};十一、箭頭函數(shù)作用：箭頭函數(shù)的作用主要是定義匿名函數(shù)。有下面幾種情況的匿名函數(shù)都可以使用箭頭函數(shù)：letfoo=function(){};//轉(zhuǎn)換成箭頭函數(shù)letfoo=()=>{};//------------------------------letObj={foo:function(){}}//轉(zhuǎn)換成箭頭函數(shù)letObj={foo:()=>{}}基本語(yǔ)法**（參數(shù)）**：1、匿名函數(shù)沒有參數(shù)：()不能省略，占位作用。letfoo=()=>{};2、只有一個(gè)參數(shù)：()可以省略，也可以不省略。letfoo=a=>{};3、多個(gè)參數(shù)，()不能省略。letfoo=(a,b)=>{};基本語(yǔ)法**（函數(shù)體）**：1、函數(shù)體只有一條語(yǔ)句：可以省略{}，并且默認(rèn)返回結(jié)果（不需要return）。letfoo=(x,y)=>x+y;console.log(foo(1,2));2、函數(shù)體如果有多個(gè)語(yǔ)句,需要用{}包圍，若有需要返回的內(nèi)容，需要添加return。letfoo=(x,y)=>{console.log(x,y);returnx+y;};console.log(foo(1,2));箭頭函數(shù)的特點(diǎn)：1、不能做構(gòu)造函數(shù)（不能實(shí)例化）2、沒有arguments3、箭頭函數(shù)沒有自己的this，箭頭函數(shù)的this不是調(diào)用的時(shí)候決定的，this指向上下文環(huán)境。（意思：箭頭函數(shù)的外層的是否有函數(shù)，如果有，箭頭函數(shù)的this就是外層函數(shù)的this，如果沒有，則為window）簡(jiǎn)單方法：箭頭函數(shù)，this就往外挪一層，外面如果還是箭頭函數(shù)，繼續(xù)往外挪，直到?jīng)]有箭頭函數(shù)的地方就是當(dāng)前this的指向。<scripttype="text/javascript">letfoo=()=>{console.log(this);};foo();//window對(duì)象letObj1={bar(){letfoo=()=>{console.log(this);};foo();}};Obj1.bar();//Obj1對(duì)象，箭頭函數(shù)外層有函數(shù)bar，bar里面的this是Obj1.letObj2={bar:()=>{letfoo=()=>{console.log(this);};foo();}};Obj2.bar();//wi