title: es6基礎(chǔ)知識(shí)3（函數(shù)拓展）
tags:
- 參數(shù)默認(rèn)值
- 剩余參數(shù)
- 箭頭函數(shù)
categories:
- 前端
1. 函數(shù)參數(shù)默認(rèn)值
es6中關(guān)于函數(shù)的拓展主要有函數(shù)參數(shù)默認(rèn)值弄捕、rest剩余函數(shù)玄柏、箭頭函數(shù)。函數(shù)的拓展是es6中比較重要的一部分內(nèi)容编兄。
es6之前，如果要設(shè)定函數(shù)的參數(shù)的默認(rèn)值，需要通過(guò)編碼來(lái)實(shí)現(xiàn)，也就是通過(guò)或符號(hào)||來(lái)實(shí)現(xiàn)漠其，例如var x = x || 100, 這樣就設(shè)置了x的默認(rèn)值為100。
function func1(x, y) {
// 通過(guò)||符號(hào)設(shè)置函數(shù)參數(shù)默認(rèn)值竿音，x為100和屎，y為200
var x = x || 100;
var y = y || 200;
}
這種方法非常不直觀，有了es6之后春瞬，可以將函數(shù)參數(shù)的默認(rèn)值寫(xiě)在形參后面,更加方便：
function func2(x = 100, y = 200) {
...
}
只是需要注意的是柴信，這種寫(xiě)法最好將帶有默認(rèn)值的形參只能寫(xiě)在參數(shù)列表的最后面，也就是當(dāng)函數(shù)有多個(gè)參數(shù)宽气，而只有部分參數(shù)具有默認(rèn)值時(shí)随常，這些參數(shù)只能寫(xiě)在參數(shù)列表的最后面：
function func3(a, b, c = 100) {
// 這里a,b沒(méi)有默認(rèn)值潜沦，而c有一個(gè)默認(rèn)值，所以把c寫(xiě)在最后面
}
這樣做的原因主要是避免調(diào)用函數(shù)時(shí)可能產(chǎn)生的錯(cuò)誤：
// 加入將帶有默認(rèn)參數(shù)的形參寫(xiě)在前面
function func4(c = 100, b, a) {
}
// 如果在調(diào)用函數(shù)的時(shí)候想使用c的默認(rèn)值绪氛，不在第一參數(shù)位傳參唆鸡，這樣寫(xiě)就會(huì)報(bào)錯(cuò)
func4( , 200, 100)// 報(bào)錯(cuò)
2. 剩余參數(shù)
假設(shè)有一種情況，我們想寫(xiě)一個(gè)求和函數(shù)來(lái)計(jì)算輸入的任意多個(gè)參數(shù)的和枣察，比如sum(0, 1, 2, 3) = 6, sum(0, 1, 2, 3, 4, 5) = 15争占。在es6之前，如果要實(shí)現(xiàn)這個(gè)功能序目，需要用到函數(shù)中的arguments對(duì)象臂痕。
function sum() {
let args = arguments; // 這里利用arguments對(duì)象拿到函數(shù)的實(shí)參，因此函數(shù)的形參沒(méi)有意義猿涨，也就可以不用寫(xiě)
let ret = 0;
for (let i = 0; i < args.length; i++) {
ret = ret + args[i];
}
return ret
}
console.log(sum(1, 2, 4, 4)); // 11
雖然利用arguments對(duì)象可以解決任意多個(gè)參數(shù)這種問(wèn)題握童，但畢竟顯得不太直觀，有了es6以后叛赚，這個(gè)問(wèn)題就簡(jiǎn)單多了澡绩，我們可以使用剩余參數(shù)很方便的來(lái)解決這個(gè)問(wèn)題。剩余參數(shù)的寫(xiě)法是在函數(shù)定義時(shí)在形參前面加上...符號(hào)红伦，仍然用剛才的那個(gè)例子來(lái)說(shuō)明：
function sumes6(...newNumber){
let ret = 0;
for(let i = 0; i < newNumber.length; i++) {
ret = ret + newNumber[i];
}
return ret;
}
console.log(sumes6(1, 2, 4, 4)); // 11
剩余參數(shù)可以理解為把函數(shù)輸入的實(shí)參源源不斷的壓入到函數(shù)的形參newNumber中英古，需要指出的是淀衣，這里可以采用數(shù)組的方法來(lái)訪問(wèn)到每一個(gè)傳入的參數(shù)昙读，但是newNumber實(shí)際上是一個(gè)對(duì)象而不是一個(gè)數(shù)組。
3. 箭頭函數(shù)
箭頭函數(shù)是es6中新增的一種簡(jiǎn)單的函數(shù)表達(dá)式寫(xiě)法膨桥。
// 習(xí)慣的函數(shù)定義方式
function func1(x, y) {
}
// 箭頭函數(shù)寫(xiě)法
let func1 = (x, y) => {}
箭頭函數(shù)具有很多方便的特點(diǎn)蛮浑，第一個(gè)是當(dāng)箭頭函數(shù)的參數(shù)有且只有一個(gè)的時(shí)候，箭頭函數(shù)參數(shù)的()可以省略：
// 有這樣一個(gè)箭頭函數(shù)
let func1 = (x) => {
return x + 1;
}
// 這個(gè)箭頭函數(shù)的參數(shù)只有一個(gè)所以可以省略參數(shù)可括號(hào)()
let func1 = x => {
return x + 1;
}
// 注意省略括號(hào)的情況是箭頭函數(shù)的參數(shù)有且只有一個(gè)只嚣，所以當(dāng)函數(shù)沒(méi)有參數(shù)時(shí)沮稚，括號(hào)也不可以省略
let func2 = () => {
return 100;
}
第二個(gè)特點(diǎn)就是如果箭頭函數(shù)的語(yǔ)句有且只有一條，那么{}也可以省略册舞，并且這條語(yǔ)句如果是返回語(yǔ)句return蕴掏，那么return也可以省略。
let func1 = (x) => {
return x + 1;
}
// 上面這樣一個(gè)函數(shù)就可以簡(jiǎn)寫(xiě)為
let func1 = x => x + 1;// 這種情況下调鲸，語(yǔ)句執(zhí)行的結(jié)果就是返回值
需要注意的是盛杰，如果這唯一的一條語(yǔ)句返回的是一個(gè)字面量對(duì)象，那么箭頭函數(shù)的{}依然不可以省略
let func1 = () => {
return {
x: 100,
y: 200
}
}// 這種情況下函數(shù)體的括號(hào)是不可省略的藐石，也就是不可以書(shū)寫(xiě)成下面的形式
let func1 = () => {
x: 100,
y: 200
}//這樣的寫(xiě)法是錯(cuò)誤的
箭頭函數(shù)的另一個(gè)特點(diǎn)是即供，箭頭函數(shù)內(nèi)部的this在函數(shù)的創(chuàng)建期就完成了綁定。this的綁定就像js玄幻小說(shuō)于微，簡(jiǎn)直是讓人琢磨不透逗嫡，對(duì)于大部分的普通函數(shù)青自，他們的this在執(zhí)行期綁定，下面這樣一個(gè)栗子：
<!DOCTYPE html>
<html lang="en">
<head>
<title>箭頭函數(shù)</title>
</head>
<body>
<button>按鈕一</button>
<button>按鈕二</button>
<script>
function changeColor () {
this.style.color = 'red';// 在函數(shù)定義的時(shí)候并不知道this指向誰(shuí)
}
let btns = document.querySelectorAll('button')
for(let i = 0; i < btns.length; i++) {
btns[i].onclick = changeColor
}
</script>
</body>
</html>
上面這個(gè)例子中給兩個(gè)按鈕都綁定了同一個(gè)事件函數(shù)changeColor驱证，函數(shù)在創(chuàng)建的時(shí)候并沒(méi)有確定this指向誰(shuí)延窜，只有當(dāng)用戶點(diǎn)擊了按鈕，確定了點(diǎn)用changeColor的對(duì)象時(shí)抹锄，才能明確this的指向需曾，所以這樣一個(gè)粒子的效果就是用戶點(diǎn)擊那一個(gè)按鈕，那個(gè)按鈕就改變顏色祈远。
接下來(lái)利用箭頭函數(shù)重寫(xiě)上面的那個(gè)粒子:
<!DOCTYPE html>
<html lang="en">
<head>
<title>箭頭函數(shù)</title>
</head>
<body>
<button>按鈕一</button>
<button>按鈕二</button>
<script>
// function changeColor () {
// this.style.color = 'red';
// }
let changeColor = () => {
this.style.color = 'red'
}
let btns = document.querySelectorAll('button')
for(let i = 0; i < btns.length; i++) {
btns[i].onclick = changeColor
}
</script>
</body>
</html>
然后在瀏覽器中執(zhí)行呆万，發(fā)現(xiàn)這一次并沒(méi)有實(shí)現(xiàn)點(diǎn)擊按鈕，按鈕改變顏色的功能车份，并且函數(shù)還爆出了錯(cuò)誤箭頭函數(shù).html:16 Uncaught TypeError: Cannot set property 'color' of undefinedat HTMLButtonElement.changeColor谋减，這個(gè)時(shí)候在控制臺(tái)中打印出this發(fā)現(xiàn)此時(shí)this指向的是window對(duì)象。
