你必須了解JavaScript箭頭函數與剩餘參數

這篇文章為大家帶來了JavaScript中關於箭頭函數和剩餘參數的相關知識，箭頭函數與剩餘參數都非常簡潔，下面我們就一起來看一下怎樣去使用，希望對大家有幫助。

1. 什麼是箭頭函數？

箭頭函數表達式語法比函數表達式更簡潔，即函數的一種簡化形式。
它的寫法：

() => {};   // 可以用来写一个匿名函数

它的結構：

const / let 函数名 参数 => 函数体

例如現在有一個一般形式的函數表達式

let add = function(x, y) {
	return x + y;};

可以用箭頭函數來寫：

let add = (x, y) => {
	return x + y;};

---

2.箭頭函數的化簡寫法

• 單一參數

// 对于单个参数，我们可以省略外面的圆括号let addOne = x => {
	return x + 1;}

• 單行函數體

#

// 对于单行返回函数体，可以同时省略 {} 和  returnlet add (x, y) => x + y;

• 單行物件

// 对于返回单行对象，在外面加个 ()let add (x, y) => ({
	value: x + y;});

---

3. 箭頭函數的基礎知識

箭頭函數沒有this，它會根據作用域鏈在外層中尋找this。
舉個例子：

var A = 1;let fun = {
    A: 2,
    printA: () => {
        console.log(this.A);
    },
    printAA: function() {
        let print = () => {
            console.log(this.A);
        }
        print();
    }};fun.printA();  // 1fun.printAA();  // 2

呼叫printA，裡面是輸出this.A，由於箭頭函數沒有this，所以在外層尋找，外層是fun。在這裡，fun.printA()是在全域作用域中呼叫的，所以外層的this 指向的是window，由於之前用var 定義了一個A = 1，所以輸出的是1。

呼叫printAA，在裡面呼叫了print()，輸出this.A，看print 這個函數，是個箭頭函數，他沒有this，所以找外層，它的外層是printAA，它是由fun 呼叫的，所以它的this 指向fun，所以輸出fun 中定義的A，也就是2。

---

4. 箭頭函數不適用的場景

1. 作為建構子

實例化建構子之後，它的this 指向實例化的對象，而箭頭函數沒有this，所以它不能用來做建構子。

2. 需要this 指向呼叫物件的時候

3. #需要使用arguments 的時候

箭頭函數中沒有arguments，可以使用剩餘參數來存參數。

---

5. 剩餘參數

5.1) 什麼是剩餘參數 ？

舉例：

let add = (x, y, z, ...args) => {
	console.log(x, y, z, args);};

args 就是剩餘參數。
剩餘參數是個數組，它即使沒有值，也是以一個空數組形式存在。
例如：

let add = (x, y, z, ...args) => {
    console.log(x, y, z, args);}add(1, 2, 3);

x, y, z 對應參數 1， 2， 3，由於剩餘參數沒有值，所以空數組形式存在。

5.2) 作用

由於箭頭函數沒有arguments，所以我們可以用剩餘參數取代arguments 取得實際參數
舉個例子：

const print = (...args) => {
    console.log(args);};print(1, 2);

5.3) 注意事項

• #在箭頭函數中，即使只有一個剩餘參數，也不能省略圓括號

#

let add = (...args) => {};

• 剩餘參數只能是最後一個參數，之後不能再有其他參數，否則會報錯

##【相關推薦：

javascript學習教學 】

以上是你必須了解JavaScript箭頭函數與剩餘參數的詳細內容。更多資訊請關注PHP中文網其他相關文章！