箭頭函數(shù)
ES6更新引入了箭頭函數(shù)，這是聲明和使用函數(shù)的另一種方式懂从。它帶來的好處：
- 更簡(jiǎn)潔
- 函數(shù)式編程
- 隱式返回
示例代碼:
- 簡(jiǎn)潔
function double(x) { return x * 2; } // Traditional way
console.log(double(2)); // 4
- 隱式返回
const double = x => x * 2; // Same function written as an arrow function with implicit return
console.log(double(2)); // 4
- 作用域
在箭頭函數(shù)中授段，this就是定義時(shí)所在的對(duì)象，而不是使用時(shí)所在的對(duì)象番甩〕肫眩基本上，使用箭頭函數(shù)对室，您不必在調(diào)用函數(shù)內(nèi)部的函數(shù)之前執(zhí)行that = this技巧。
function myFunc() {
this.myVar = 0;
setTimeout(() => {
this.myVar++;
console.log(this.myVar) // 1
}, 0);
}
詳細(xì)介紹
簡(jiǎn)潔
在許多方面咖祭，箭頭函數(shù)比傳統(tǒng)函數(shù)更簡(jiǎn)潔掩宜。
- 隱式VS顯示返回
一個(gè)顯示返回是其中一個(gè)函數(shù)返回關(guān)鍵字在它的身上使用。
function double(x) {
return x * 2; // this function explicitly returns x * 2, *return* keyword is used
}
在傳統(tǒng)的函數(shù)中么翰，返回總是顯而易見的牺汤。但是使用箭頭函數(shù)，您可以執(zhí)行隱式返回浩嫌，這意味著您不需要使用關(guān)鍵字return來返回值檐迟。
const double = (x) => {
return x * 2; // 顯示 return
}
由于這個(gè)函數(shù)只返回一些東西（在return關(guān)鍵字之前沒有指令），我們可以做一個(gè)隱式返回码耐。
const double = (x) => x * 2; // 隱式 return x*2
為此追迟，只需要?jiǎng)h除括號(hào)和返回關(guān)鍵字。這就是為什么它被稱為隱式返回骚腥，return關(guān)鍵字不存在敦间，但是這個(gè)函數(shù)確實(shí)會(huì)返回x * 2。
注意：如果函數(shù)沒有返回一個(gè)值（帶有副作用）束铭，它不會(huì)執(zhí)行顯式或隱式返回廓块。
另外，如果想隱式地返回一個(gè)對(duì)象契沫，必須在它周圍有括號(hào)带猴，因?yàn)樗鼤?huì)和塊大括號(hào)沖突：
const getPerson = () => ({ name: "Nick", age: 24 })
console.log(getPerson()) // { name: "Nick", age: 24 } -- 函數(shù)隱式返回對(duì)象
- 只有一個(gè)參數(shù)
如果函數(shù)只有一個(gè)參數(shù)，可以省略它周圍的括號(hào):
const double = (x) => x * 2; // this arrow function only takes one parameter
參數(shù)周圍括號(hào)可以省略:
const double = x => x * 2; // this arrow function only takes one parameter
- 沒有參數(shù)
當(dāng)沒有參數(shù)提供給箭頭函數(shù)時(shí)懈万，需要提供圓括號(hào)拴清，否則它將不是有效的語(yǔ)法。
() => { // parentheses are provided, everything is fine
const x = 2;
return x;
}
=> { // No parentheses, this won't work!
const x = 2;
return x;
}
-
this作用域
在箭頭函數(shù)中钞速，this就是定義時(shí)所在的對(duì)象贷掖，而不是使用時(shí)所在的對(duì)象。
沒有箭頭函數(shù)渴语，如果想在函數(shù)內(nèi)的某個(gè)函數(shù)中從這個(gè)函數(shù)訪問一個(gè)變量苹威，必須使用that=this或者self=this這個(gè)技巧。
示例代碼
在myFunc中使用setTimeout函數(shù)：
function myFunc() {
this.myVar = 0;
var that = this; // that = this trick
setTimeout(
function() { // A new *this* is created in this function scope
that.myVar++;
console.log(that.myVar) // 1
console.log(this.myVar) // undefined -- see function declaration above
},
0
);
}
但是有了箭頭功能驾凶，這是從其周圍取得的
function myFunc() {
this.myVar = 0;
setTimeout(
() => { // this taken from surrounding, meaning myFunc here
this.myVar++;
console.log(this.myVar) // 1
},
0
);
}
函數(shù)默認(rèn)參數(shù)值
從ES6開始牙甫，可以使用以下語(yǔ)法將默認(rèn)值設(shè)置為函數(shù)參數(shù):
function myFunc(x = 10) {
return x;
}
console.log(myFunc()) // 10 -- no value is provided so x default value 10 is assigned to x in myFunc
console.log(myFunc(5)) // 5 -- a value is provided so x is equal to 5 in myFunc
console.log(myFunc(undefined)) // 10 -- undefined value is provided so default value is assigned to x
console.log(myFunc(null)) // null -- a value (null) is provided, see below for more details
函數(shù)默認(rèn)參數(shù)應(yīng)用于兩種情況b并且只有兩種情況:
- 沒有提供參數(shù)
- 提供未定義的參數(shù)
如果傳入null掷酗，默認(rèn)參數(shù)將不會(huì)被應(yīng)用。
注意：默認(rèn)值分配也可以與解構(gòu)參數(shù)一起使用
對(duì)象和數(shù)組的解構(gòu)
解構(gòu)是通過從存儲(chǔ)在對(duì)象或數(shù)組中的數(shù)據(jù)中提取一些值來創(chuàng)建新變量的一種便捷方式窟哺。
示例代碼：
- 對(duì)象
const person = {
firstName: "Nick",
lastName: "Anderson",
age: 35,
sex: "M"
}
沒有解構(gòu)
const first = person.firstName;
const age = person.age;
const city = person.city || "Paris";
隨著解構(gòu)泻轰，所有在一行中：
const { firstName: first, age, city = "Paris" } = person; // That's it !
console.log(age) // 35 -- A new variable age is created and is equal to person.age
console.log(first) // "Nick" -- A new variable first is created and is equal to person.firstName
console.log(firstName) // ReferenceError -- person.firstName exists BUT the new variable created is named first
console.log(city) // "Paris" -- A new variable city is created and since person.city is undefined, city is equal to the default value provided "Paris".
注意：在
const關(guān)鍵字const { age } = person;之后的括號(hào)不用于聲明對(duì)象或塊，而是解構(gòu)語(yǔ)法且轨。
- 函數(shù)參數(shù)
沒有解構(gòu)
function joinFirstLastName(person) {
const firstName = person.firstName;
const lastName = person.lastName;
return firstName + '-' + lastName;
}
joinFirstLastName(person); // "Nick-Anderson"
在解構(gòu)對(duì)象參數(shù)的過程中浮声，得到一個(gè)更簡(jiǎn)潔的函數(shù):
function joinFirstLastName({ firstName, lastName }) { // we create firstName and lastName variables by destructuring person parameter
return firstName + '-' + lastName;
}
joinFirstLastName(person); // "Nick-Anderson"
解構(gòu)使用箭頭函數(shù):
const joinFirstLastName = ({ firstName, lastName }) => firstName + '-' + lastName;
joinFirstLastName(person); // "Nick-Anderson"
- 數(shù)組
定義一個(gè)數(shù)組:
const myArray = ["a", "b", "c"];
沒有解構(gòu)
const x = myArray[0];
const y = myArray[1];
解構(gòu)
const [x, y, ...z] = myArray; // That's it !
console.log(x) // "a"
console.log(y) // "b"
console.log(z) // ["c"]
