[[414274]]

 箭頭函數

箭頭函數：將原來函數的function關鍵字和函數名都刪掉，并使用”=>”連接參數列表和函數體。

箭頭函數語法：

(參數1,參數2)=>{

函數體

}

注意點：

• 當參數有且只有一個，括號可以省略。沒有參數或多個參數時，括號不能省略。
• 如果函數體有且只有一個表達式時，可以省略花括號。

箭頭函數使用實例：

window.onload = ()=>{ 
 console.log('網頁加載完成') 
} 

參數只有一個時，省略掉括號。函數體只有一個表達式，花括號也省略。如：

let arr=[1,2,3,4] 
arr.forEach((item)=> 
 console.log('item',item) 
) 

This指向問題

1、在全局環境下，this始終指向全局對象，無論是否嚴格模式。

2、普通函數內部的this分嚴格模式和非嚴格模式。

• 嚴格模式下this為undefined。
• 非嚴格模式下，this指向全局對象window。

3、箭頭函數的 this 是上下文的this。

箭頭函數相當于匿名函數，并且簡化了函數定義，但箭頭函數和匿名函數有個明顯的差異，箭頭函數內部的this是詞法作用域，上下文的this值作為自己的this值。

• Call()、apply()、bind()方法對于箭頭函數只是傳入參數，對它的this毫無影響。
• 考慮到this是詞法層面上的，嚴格模式中與this相關的規則都將被忽略。

放在setTimeout中的兩個箭頭函數返回的this舉例。

function Person(name,age){ 
 this.name = name; 
 this.age = age; 
 setTimeout(()=>{ 
  console.log('this',this) //Person {name: "倩倩", age: 18} 
 },100) 
} 
let p = new Person('倩倩',18) 
setTimeout(()=>{ 
 console.log("this",this)//Window {window: Window, self: Window, document: document, name: "", location: Location, …} 
},1000) 

函數參數的默認值

在ES6之前，不能直接為函數的參數指定默認值，只能采取變通措施。

實例：普通函數給參數設置默認值

function sum(a,b){ 
 a = a | 12; 
 b = b | 5; 
 return a+b 
} 
console.log('相加等于',sum()) 

ES6允許函數參數設置默認值，即直接寫在參數定義的后面。如

function sum(a=12,b=5){ 
 return a+b 
} 
console.log('相加等于',sum()) 

ES6默認參數優點：

• 簡潔，適用于參數多的時候，方便設置默認值。
• 閱讀代碼的人可以看出哪些參數是可以省略的，不用查看函數體或文檔。
• 有利于代碼的優化，即使未來版本拿掉這個參數，以前代碼也可以運行，還有參數變量是默認聲明的，不能在函數體內部再進行聲明。

與結構賦值結合使用

function add({x=1,y=2}={}){ 
 return x+y 
} 
console.log('相加等于',add({x:2})) // 相加等于 4 

ES6函數不定參數和展開運算符

不定參數：

語法：...

類型：數組

作用：指定多個各自獨立的參數，通過整合后的數組來訪問。

限制：

• 最多只能聲明一個
• 只能放在參數末尾

實例：簡單應用

function show( a, ...args){ 
 console.log('a',a) 
 console.log('args',...args) 
} 
show(1,2,3) 

展開運算符：

語法：...

作用：指定數組或對象，將他們打散后作為各自獨立的參數。

實例：使用展開運算符展開數組。

let arr = ['a','b','c'] 
let arr2 = [] 
arr2.push(...arr) 
console.log('arr2',arr2) 

實例：使用展開運算符展開對象。

let person = { 
 name :'倩倩', 
 age:18 
} 
let worker = { 
 ...person, 
 job:"打雜" 
} 
console.log('worker',worker)