##### 15 JavaScript ES6中的箭頭函數 1. 什麼是箭頭函數 ES6中允許使用=>來定義函數。箭頭函數相當於匿名函數，並簡化了函數定義。 2. 基本語法 ```js // 箭頭函數 let fn = (name) => { // 函數體 return `Hello ${name} ...
15 JavaScript ES6中的箭頭函數
-
什麼是箭頭函數
ES6中允許使用=>來定義函數。箭頭函數相當於匿名函數，並簡化了函數定義。 -
基本語法
// 箭頭函數
let fn = (name) => {
// 函數體
return `Hello ${name} !`;
};
// 等同於
let fn = function (name) {
// 函數體
return `Hello ${name} !`;
};
箭頭函數在語法上比普通函數簡潔多。箭頭函數就是採用箭頭=>來定義函數，省去關鍵字function。
函數的參數放在=>前面的括弧中，函數體跟在=>後的花括弧中.
- 箭頭函數的參數
如果箭頭函數沒有參數，寫空括弧。
//沒有參數，寫空括弧
let fn = () => {
console.log('hello');
};
如果箭頭函數有一個參數，也可以省去包裹參數的括弧。
//只有一個參數，可以省去參數括弧
let fn = name => {
console.log(`hello ${name}!`)
};
如果箭頭函數有多個參數，將參數依次用逗號(,)分隔，包裹在括弧中。
let fn = (val1, val2, val3, val4) => {
return [val1, val2, val3, val4];
}
- 箭頭函數的函數體
如果箭頭函數的函數體只有一句執行代碼，簡單返回某個變數或者返回一個簡單的js表達式，可以省去函數體花括弧{ }。
//返回某個簡單變數val
let f = val => val;
// 等同於
let f = function (val) { return val };
//返回一個簡單的js表達式num1+num2
let sum = (num1, num2) => num1 + num2;
// 等同於
let sum = function(num1, num2) {
return num1 + num2;
};
如果箭頭函數的函數體只有一句代碼，返回的不是變數和簡單的js表達式，而是一個對象。
//錯誤寫法—花括弧會被解釋為函數體
let getItem = id => {
id: id,
name: 'gaby'
};
//正確寫法
let getItem = id => ({
id: id,
name: 'gaby'
});
如果箭頭函數的函數體只有一條語句且不需要返回值（最常用於回調函數），加上void關鍵字
let fn = () => void doesNotReturn();
箭頭函數用於回調函數
//慄子1
//普通函數
[1, 2, 3].map(function (x) {
return x + x;
});
//ES6箭頭函數
[1, 2, 3].map(x => x + x);
//慄子2
//普通函數
var result = [2, 4, 5, 1, 6].sort(function (a, b) {
return a - b;
});
//ES6箭頭函數
var result = [2, 4, 5, 1, 6].sort((a, b) => a - b);
本文來自博客園，作者：生而自由愛而無畏，轉載請註明原文鏈接：https://www.cnblogs.com/zczhaod/p/17648733.html
