資訊專欄INFORMATION COLUMN
摘要：關于的學習總結昨天寫了第一篇，主要是關于變量聲明關鍵字和，新增類型以及模板字符串，今天準備寫第二篇，里面的函數部分，新增了箭頭函數，參數以及參數默認值。，這次我們在調用函數大的時候，兩個參數全部傳遞了值，因此返回。
關于ES6的學習總結,昨天寫了第一篇，主要是關于變量聲明關鍵字let和const，新增類型Symbol以及模板字符串，今天準備寫第二篇，ES6里面的函數部分，ES6新增了箭頭函數，Rest參數以及參數默認值。
箭頭函數
關于箭頭函數，之所以這么稱呼，是因為它就是由一個箭頭來定義的，例如：
//ES5
function foo(param){
return param*param;
}
//ES6 箭頭函數
var foo= param => param*param;
上面的代碼簡單比較了ES5中普通函數與ES6箭頭函數的的寫法，很明顯的可以看出，箭頭函數顯得更加的簡便，箭頭函數中，有一些需要注意的地方：
返回值必須明確，并且在大括弧內必須加上return關鍵字，若是省略大括弧，則可以省略return
//返回值的寫法，下面兩種是一樣的
() => "hello world";
() => { return "hello word"; }
當參數的數目不止一個或者沒有的時候，需要用小括?。ǎ┌?/p>
//沒有參數或者多個參數需要加小括號
var foo1 = () => "hello world";
var foo1 = () => { return "hello word"; }
var foo2 = (param1,param2) => param1*param2;
當返回的是一個對象的時候，需要注意大括弧外面加上（）
//返回對象需要函數體外面要加小括號
var foo3 = param => ({key: value})
箭頭函數中this的使用跟普通函數也不一樣，在JavaScript的普通函數中，都會有一個自己的this值，主要分為：
函數作為全局函數被調用時，this指向全局對象
函數作為對象中的方法被調用時，this指向該對象
函數作為構造函數的時候，this指向構造函數new出來的新對象
還可以通過call，apply，bind改變this的指向
在箭頭函數中，this屬于詞法作用域，直接由上下文確定，對于普通函數中指向不定的this，箭頭函數中處理this無疑更加簡單，如下：
//ES5普通函數
function Man(){
this.age=22;
return function(){
this.age+1;
}
}
var cala=new Man();
console.log(cala())//undefined
//ES6箭頭函數
function Man(){
this.age=22;
return () => this.age+1;
}
var cala=new Man();
console.log(cala())//23
箭頭函數中沒有arguments(我們可以用rest參數替代),也沒有原型，也不能使用new 關鍵字，例如：
//沒有arguments
var foo=(a,b)=>{return arguments[0]*arguments[1]}
console.log(foo(3,5))
//arguments is not defined
//沒有原型
var Obj = () => {};
console.log(Obj.prototype);
// undefined
//不能使用new 關鍵字
var Obj = () => {"hello world"};
var o = new Obj();
// TypeError: Obj is not a constructor
Rest參數
Rest參數名為剩余參數，以...為前綴，上面講過，ES6的箭頭函數中不能使用arguments，我們可以用rest參數來替代，例如：
function foo(){
return arguments.length;
}
console.log(foo(1,2,3)) // 3
var foo= (...rest) => {
return rest.length;
}
console.log(foo(1,2,3)) // 3
在rest參數前面若是有其他的形式參數，那么rest參數只能放在最后面：
var foo = (param1,param2,...rest) => {
return param1 + param2 + rest.length;
};
console.log(foo(1,2,3,4,5)) // 6
var foo = (param1,...rest,param2) => {
return param1 + param2 + rest.length;
};
console.log(foo(1,2,3,4,5)) // Rest parameter must be last formal parameter
默認參數值
在ES6以前，函數調用時，那些沒有傳遞的參數，JavaScript默認為undefined，ES6中新增了參數默認值，允許使用默認值來初始化形參
var foo = (param1,param2=10) => {
return param1*param2;
}
console.log(foo(10)) // 100
上面這個例子可以看到，定義了一個參數相乘的簡單函數，在調用函數的時候，只傳入了第一個參數的值，結果返回100，是因為在函數中第二個參數默認值為10，若我們在調用函數的時候沒有顯式的指明參數值，則會默認使用參數默認值。
var foo = (param1,param2=10) => {
return param1*param2;
}
console.log(foo(10，20)) // 200
這次我們在調用函數大的時候，兩個參數全部傳遞了值，因此返回200。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/87265.html
摘要：特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。 特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。 本以為自己收藏的站點多，可以很快搞定，沒想到一入匯總深似海。還有很多不足&遺漏的地方，歡迎補充。有錯誤的地方，還請斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應和斧正，會及時更新，平時業務工作時也會不定期更...
摘要：提供了解構賦值的方式，這樣子在賦值多個變量或者進行注釋時可以方便很多，不同場景下也有很多新的應用，個人常使用的有數組的解構賦值，對象的解構賦值和函數參數的解構賦值，函數參數的解構賦值之前總結過，這里寫下數組的和對象的簡單總結吧函數參數的解構 ES6提供了解構賦值的方式，這樣子在賦值多個變量或者進行注釋時可以方便很多，不同場景下也有很多新的應用，個人常使用的有數組的解構賦值，對象的解構賦...
摘要：前言很認真的說吧，在和騰訊面試官的面試的過程。騰訊二面自我介紹二面的面試官和一面不是同一個面試官，所以在這個時候，我的基本介紹還是和一面一樣，介紹自己的基本信息，以及怎么想到學習前端和怎么學習前端。 前言 很認真的說吧，在和騰訊面試官的面試的過程。有點感覺是在聊天一樣，他們是面試官，但是感覺更像是引路人，不管結果的好壞，在騰訊面試的過程，只要你認真去聽去問，就可以學到很多東西吧。 如果...
摘要：對于，雖然之前也有過學習，但總的來說還是不夠系統的，知識點非常的零碎。因此包括以為基礎產生的語法糖在逐漸的趨近于強類型的語言。是創建，而不是的覆蓋。因而稱之為富一代。所以語法標準的更新將對良好編程習慣有著極大的利好。 對于ES6，雖然之前也有過學習，但總的來說還是不夠系統的，知識點非常的零碎?，F在結合之前遇到的問題把ES6中的知識點總結一下。最初接觸ES6時，明白ES5中聲明變量的方式...
閱讀 1174·2021-09-27 13:34
閱讀 981·2021-09-13 10:25
閱讀 511·2019-08-30 15:52
閱讀 3450·2019-08-30 13:48
閱讀 648·2019-08-30 11:07
閱讀 2167·2019-08-29 16:23
閱讀 1993·2019-08-29 13:51
閱讀 2328·2019-08-26 17:42
