箭頭函數(shù)
ES6更新引入了箭頭函數(shù)，這是聲明和使用函數(shù)的另一種方式。它帶來的好處：
- 更簡潔
- 函數(shù)式編程
- 隱式返回
示例代碼:
- 簡潔
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ù)，您不必在調(diào)用函數(shù)內(nèi)部的函數(shù)之前執(zhí)行that = this技巧。
function myFunc() {
this.myVar = 0;
setTimeout(() => {
this.myVar++;
console.log(this.myVar) // 1
}, 0);
}
詳細(xì)介紹
簡潔
在許多方面，箭頭函數(shù)比傳統(tǒng)函數(shù)更簡潔。
- 隱式VS顯示返回
一個顯示返回是其中一個函數(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
}
由于這個函數(shù)只返回一些東西（在return關(guān)鍵字之前沒有指令），我們可以做一個隱式返回。
const double = (x) => x * 2; // 隱式 return x*2
為此，只需要刪除括號和返回關(guān)鍵字。這就是為什么它被稱為隱式返回，return關(guān)鍵字不存在，但是這個函數(shù)確實(shí)會返回x * 2。
注意：如果函數(shù)沒有返回一個值（帶有副作用），它不會執(zhí)行顯式或隱式返回。
另外，如果想隱式地返回一個對象，必須在它周圍有括號，因為它會和塊大括號沖突：
const getPerson = () => ({ name: "Nick", age: 24 })
console.log(getPerson()) // { name: "Nick", age: 24 } -- 函數(shù)隱式返回對象
- 只有一個參數(shù)
如果函數(shù)只有一個參數(shù)，可以省略它周圍的括號:
const double = (x) => x * 2; // this arrow function only takes one parameter
參數(shù)周圍括號可以省略:
const double = x => x * 2; // this arrow function only takes one parameter
- 沒有參數(shù)
當(dāng)沒有參數(shù)提供給箭頭函數(shù)時，需要提供圓括號，否則它將不是有效的語法。
() => { // 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ù)，如果想在函數(shù)內(nèi)的某個函數(shù)中從這個函數(shù)訪問一個變量，必須使用that=this或者self=this這個技巧。
示例代碼
在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開始，可以使用以下語法將默認(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ù)將不會被應(yīng)用。
注意：默認(rèn)值分配也可以與解構(gòu)參數(shù)一起使用
對象和數(shù)組的解構(gòu)
解構(gòu)是通過從存儲在對象或數(shù)組中的數(shù)據(jù)中提取一些值來創(chuàng)建新變量的一種便捷方式。
示例代碼：
- 對象
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;之后的括號不用于聲明對象或塊，而是解構(gòu)語法。
- 函數(shù)參數(shù)
沒有解構(gòu)
function joinFirstLastName(person) {
const firstName = person.firstName;
const lastName = person.lastName;
return firstName + '-' + lastName;
}
joinFirstLastName(person); // "Nick-Anderson"
在解構(gòu)對象參數(shù)的過程中，得到一個更簡潔的函數(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ù)組
定義一個數(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"]
