JavaScript箭頭函數(shù)與剩余參數(shù)怎么使用

本篇內(nèi)容主要講解“JavaScript箭頭函數(shù)與剩余參數(shù)怎么使用”，感興趣的朋友不妨來看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“JavaScript箭頭函數(shù)與剩余參數(shù)怎么使用”吧!

1.?什么是箭頭函數(shù)？

箭頭函數(shù)表達(dá)式語法比函數(shù)表達(dá)式更簡(jiǎn)潔，即函數(shù)的一種簡(jiǎn)化形式。
它的寫法：

() => {};   // 可以用來寫一個(gè)匿名函數(shù)

它的結(jié)構(gòu)：

const / let 函數(shù)名 參數(shù) => 函數(shù)體

比如現(xiàn)在有一個(gè)一般形式的函數(shù)表達(dá)式

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

可以用箭頭函數(shù)來寫：

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

2. 箭頭函數(shù)的化簡(jiǎn)寫法

• 單個(gè)參數(shù)

// 對(duì)于單個(gè)參數(shù)，我們可以省略外面的圓括號(hào)let addOne = x => {
	return x + 1;}

• 單行函數(shù)體

// 對(duì)于單行返回函數(shù)體，可以同時(shí)省略 {} 和  returnlet add (x, y) => x + y;

• 單行對(duì)象

// 對(duì)于返回單行對(duì)象，在外面加個(gè) ()let add (x, y) => ({
	value: x + y;});

3.?箭頭函數(shù)的基礎(chǔ)知識(shí)

箭頭函數(shù)沒有 this，它會(huì)根據(jù)作用域鏈在外層中尋找 this。
舉個(gè)例子：

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

調(diào)用 printA，里面是輸出 this.A，由于箭頭函數(shù)沒有 this，所以在外層尋找，外層是 fun。在這里，fun.printA()是在全局作用域中調(diào)用的，所以外層的 this 指向的是 window，由于之前用 var 定義了一個(gè) A = 1，所以輸出的是 1。

調(diào)用 printAA，在里面調(diào)用了 print()，輸出 this.A，看 print 這個(gè)函數(shù)，是個(gè)箭頭函數(shù)，他沒有 this，所以找外層，它的外層是 printAA，它是由 fun 調(diào)用的，所以它的 this 指向 fun，所以輸出 fun 中定義的 A，也就是 2。

4. 箭頭函數(shù)不適用的場(chǎng)景

1. 作為構(gòu)造函數(shù)

實(shí)例化構(gòu)造函數(shù)之后，它的 this 指向?qū)嵗膶?duì)像，而箭頭函數(shù)沒有 this，所以它不能用來做構(gòu)造函數(shù)。

2. 需要 this 指向調(diào)用對(duì)象的時(shí)候

3. 需要使用 arguments 的時(shí)候

箭頭函數(shù)中沒有 arguments，可以使用剩余參數(shù)來存參數(shù)。

5.?剩余參數(shù)

5.1) 什么是剩余參數(shù) ？

舉個(gè)例子：

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

args 就是剩余參數(shù)。
剩余參數(shù)是個(gè)數(shù)組，它即使沒有值，也是以一個(gè)空數(shù)組形式存在。
比如：

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

x, y, z 對(duì)應(yīng)參數(shù) 1， 2， 3，由于剩余參數(shù)沒有值，所以空數(shù)組形式存在。

5.2) 作用

由于箭頭函數(shù)沒有 arguments，所以我們可以使用剩余參數(shù)替代 arguments 獲取實(shí)際參數(shù)
舉個(gè)例子：

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

5.3) 注意事項(xiàng)

• 在箭頭函數(shù)中，即使只有一個(gè)剩余參數(shù)，也不能省略圓括號(hào)

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

• 剩余參數(shù)只能是最后一個(gè)參數(shù)，之后不能再有其他參數(shù)，否則會(huì)報(bào)錯(cuò)

到此，相信大家對(duì)“JavaScript箭頭函數(shù)與剩余參數(shù)怎么使用”有了更深的了解，不妨來實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！