ES6新特性簡介
1.變數宣告const和let
我們都是知道在ES6以前，var關鍵字宣告變數。無論宣告在何處，都會被視為宣告在函式的最頂部(不在函式內即在全域性作用域的最頂部)。這就是函式變數提升例如:
| 1234567 | functionaa(){if(bool |
以上的程式碼實際上是：
| 12345678910 | functionaa(){vartest// 變數提升if(bool){test='hello man'}else{//此處訪問test 值為undefinedconsole.log(test)}//此處訪問test 值為undefined} |
所以不用關心bool是否為true or false。實際上，無論如何test都會被建立宣告。
接下來ES6主角登場：
我們通常用let和const來宣告，let表示變數、const表示常量。let和const都是塊級作用域。怎麼理解這個塊級作用域？
- 在一個函式內部
- 在一個程式碼塊內部
說白了 {}大括號內
的程式碼塊即為let 和 const的作用域。
看以下程式碼：
| 12345678 | functionaa(){if(bool){let test='hello man'}else{//test 在此處訪問不到console.log(test)}} |
let的作用域是在它所在當前程式碼塊，但不會被提升到當前函式的最頂部。
再來說說const。
| 12 | constname='lux'name='joe'//再次賦值此時會報錯 |
說一道面試題
| 1234567 | varfuncs=[]for(vari=0;i<10;i++){funcs.push(function(){console.log(i)})}funcs.forEach(function(func){func()}) |
這樣的面試題是大家常見，很多同學一看就知道輸出 10 十次
但是如果我們想依次輸出0到9呢？兩種解決方法。直接上程式碼。
| 123456789101112131415 | // ES5告訴我們可以利用閉包解決這個問題varfuncs=[]for(vari=0;i<10;i++){func.push((function(value){returnfunction(){console.log(value)}}(i)))}// es6for(leti=0;i<10;i++){func.push(function(){console.log(i)})} |
達到相同的效果，es6簡潔的解決方案是不是更讓你心動！！！
2.模板字串
es6模板字元簡直是開發者的福音啊，解決了ES5在字串功能上的痛點。
第一個用途，基本的字串格式化。將表示式嵌入字串中進行拼接。用${}來界定。
| 123456 | //es5 varname='lux'console.log('hello'+name)//es6constname='lux'console.log(`hello${name}`)//hello lux |
第二個用途，在ES5時我們通過反斜槓(\)來做多行字串或者字串一行行拼接。ES6反引號()直接搞定。
| 12345678 | // es5varmsg="Hi \ man! "// es6consttemplate=`<div><span>hello world</span></div>` |
對於字串es6當然也提供了很多厲害的方法。說幾個常用的。
| 1234567 | // 1.includes：判斷是否包含然後直接返回布林值let str='hahay'console.log(str.includes('y'))// true// 2.repeat: 獲取字串重複n次lets='he'console.log(s.repeat(3))// 'hehehe'//如果你帶入小數, Math.floor(num) 來處理 |
3.函式
函式預設引數
在ES5我們給函式定義引數預設值是怎麼樣？
| 123456 | functionaction(num){num=num||200//當傳入num時，num為傳入的值//當沒傳入引數時，num即有了預設值200returnnum} |
但細心觀察的同學們肯定會發現，num傳入為0的時候就是false， 此時num = 200 與我們的實際要的效果明顯不一樣
ES6為引數提供了預設值。在定義函式時便初始化了這個引數，以便在引數沒有被傳遞進去時使用。
| 12345 | functionaction(num=200){console.log(num)}action()//200action(300)//300 |
箭頭函式
ES6很有意思的一部分就是函式的快捷寫法。也就是箭頭函式。
箭頭函式最直觀的三個特點。
- 不需要function關鍵字來建立函式
- 省略return關鍵字
- 繼承當前上下文的 this 關鍵字
1234567 //例如：[1,2,3].map(x=>x+1)//等同於：[1,2,3].map((function(x){returnx+1}).bind(this))
說個小細節。
當你的函式有且僅有一個引數的時候，是可以省略掉括號的。當你函式返回有且僅有一個表示式的時候可以省略{}；例如:
| 12 | varpeople=name=>'hello'+name//引數name就沒有括號 |
作為參考
| 12345 | varpeople=(name,age)=>{constfullName='h'+namereturnfullName}//如果缺少()或者{}就會報錯 |
4.拓展的物件功能
物件初始化簡寫
ES5我們對於物件都是以鍵值對的形式書寫，是有可能出現鍵值對重名的。例如：
| 123456 | functionpeople(name,age){return{name:name,age:age};} |
鍵值對重名，ES6可以簡寫如下：
| 123456 | functionpeople(name,age){return{name,age};} |
ES6 同樣改進了為物件字面量方法賦值的語法。ES5為物件新增方法：
| 123456 | constpeople={name:'lux',getName:function(){console.log(this.name)}} |
ES6通過省略冒號與 function 關鍵字，將這個語法變得更簡潔
| 123456 | constpeople={name:'lux',getName(){console.log(this.name)}} |
ES6 物件提供了Object.assign()這個方法來實現淺複製。Object.assign()可以把任意多個源物件自身可列舉的屬性拷貝給目標物件，然後返回目標物件。第一引數即為目標物件。在實際專案中，我們為了不改變源物件。一般會把目標物件傳為{}
| 1 | constobj=Object.assign({},objA,objB) |
5.更方便的資料訪問–解構
陣列和物件是JS中最常用也是最重要表示形式。為了簡化提取資訊，ES6新增了解構，這是將一個數據結構分解為更小的部分的過程
ES5我們提取物件中的資訊形式如下：