來源 | https://learn-anything.cn/java-script-arrow-functions

一、什么是箭頭函數(shù)？

1、(...args) => expression

2、?(...args) => { body }

二、不同表達形式：

1、參數(shù)不同，寫法不同

// 1、沒有參數(shù)let test = () => alert("Hello!");
// 2、只有一個參數(shù)：() 可以省略let test = n => n * 2;let test = (n) => n * 2;
// 等價于下面普通函數(shù)let test = function (n) {    return expression;};

2、表達式不同，寫法不同

// 1、只有一行 return 表達式，可省略 return 和 {}let func = (arg1, arg2, ...argN) => {  return expression;}// 等價于下面箭頭函數(shù)let func = (arg1, arg2, ...argN) => expression
// 等價于下面普通函數(shù)。let func = function (arg1, arg2, ...argN) {    return expression;};

3、用于條件運算符

let age = prompt("What is your age?", 18);
let welcome = (age < 18) ?    () => alert('Hello') :    () => alert("Greetings!");
welcome();

4、用于數(shù)組遍歷

var elements = [    'Hydrogen',    'Helium',    'Lithium',    'Beryllium'];
// 1、普通函數(shù)寫法：elements.map(function (element) {    return element.length;});
// 2、箭頭函數(shù)寫法：elements.map((element) => {    return element.length;});
// 3、只有一個參數(shù)，可省略()elements.map(element => {    return element.length;});
// 4、表達式只有一行return語句，可省略  return  和 {}elements.map(element => element.length);
// 5、參數(shù)解構(gòu)方式// elements數(shù)組中每一項都有l(wèi)ength屬性，可以通過參數(shù)解構(gòu)獲得結(jié)果，方法如下：// 注意：lengthFooBArX只是一個變量，可以替換成任意合法變量名elements.map(({ "length": lengthFooBArX }) => lengthFooBArX);
// 以上輸出結(jié)果都為: [8, 6, 7, 9]

5、用于遞歸

var fact = (x) => (x == 0 ? 1 : x * fact(x - 1));fact(5);
// 輸出：120

6、使用閉包

// 1、箭頭函數(shù)體的閉包（ i=0 是默認參數(shù)）var Add = (i = 0) => {    return (() => (++i))};var v = Add();v();           //1v();           //2
// 因為僅有一個返回，return 及括號（）也可以省略var Add = (i = 0) => () => (++i);

7、其他形式舉例

// 1、空的箭頭函數(shù)返回 undefinedlet empty = () => { };
// 2、立即執(zhí)行函數(shù)表達式，返回 "foobar"(() => 'foobar')();
// 3、更簡明的promise鏈promise.then(a => {    // ...}).then(b => {    // ...});
// 4、無參數(shù)箭頭函數(shù)在視覺上容易分析setTimeout(() => {    console.log('I happen sooner');    setTimeout(() => {        // deeper code        console.log('I happen later');    }, 1);}, 1);

三、重要特性

1、沒有 arguments

// 1、普通函數(shù)中的arguments正確使用：function foo(n) {    // 隱式綁定 foo函數(shù)的參數(shù) 與 arguments對象.     // arguments[0] 表示傳給foo函數(shù)的第一個參數(shù)，也就是n    var f = () => arguments[0] + n;    return f();}foo(1); // 2foo(3); // 6foo(3, 2);//6
// 2、箭頭函數(shù)中無法使用arguments// ReferenceError: arguments is not definedvar func = (a, b) => {    return arguments[0];}

2、沒有prototype屬性

var Foo = () => {};console.log(Foo.prototype); // undefined

3、不能使用new

箭頭函數(shù)沒有this，不能用作構(gòu)造函數(shù)，也就無法使用?new

var Foo = () => {};var foo = new Foo(); // TypeError: Foo is not a constructor

四、需要()的場景

1、對象作為表達式

用?()包裹?{}表示的對象來作為表達式返回，否則?{}會作為表達式來解析，出現(xiàn)語法錯誤。

// Calling func() returns undefined!var func = () => { foo: 1 };// SyntaxError: function statement requires a namevar func = () => { foo: function() { } };
// 正確寫法如下：var func = () => ({ foo: 1 });var func = () => ({ foo: function () { } });

2、換行

// 1、語法錯誤：SyntaxError: expected expression, got '=>'var func = ()            => 1;
// 2、正確，可以在 => 后換行var func = (a, b, c) =>    1;// 3、正確，用 () 來換行var func = (a, b, c) => (    1);
// 4、正確，用 () 來換行var func = (    a,    b,    c) => 1;

3、作為單獨表達式

let callback;
// 1、正確callback = callback || function () { };
// 2、錯誤：SyntaxError: invalid arrow-function argumentscallback = callback || () => { };
// 3、正確callback = callback || (() => { });    // ok

五、箭頭函數(shù)沒有this

普通函數(shù)、對象方法中的this，都是在運行時定義。

• 普通函數(shù)的this 等于 undefined，無法調(diào)用；

• 對象方法的this，指向?qū)ο蟊旧怼?/span>

• 箭頭函數(shù)，不會定義自己的this，它只會繼承自己上一層作用域的this。

1、對象中的箭頭函數(shù)

var obj = {    i: 10,    b: () => console.log(this.i, this),    c: function () {        console.log(this.i, this)    }}obj.b();// 輸出結(jié)果：undefined, Window{...}// 箭頭函數(shù)b，沒有上層作用域可以繼承this，也就無法訪問。
obj.c();// 輸出結(jié)果：10, Object {...}

2、正確使用箭頭函數(shù)中的this

// 實例1：function Person() {    this.age = 0;
    // 箭頭函數(shù)作為 setInterval 的一個參數(shù)，繼承了 this    setInterval(() => {        this.age++;        console.log("age:", this.age);    }, 1000);}
var p = new Person();
// 實例2：// 箭頭函數(shù) student 繼承了 showList 的 thislet group = {    title: "Our Group",    students: ["John", "Pete", "Alice"],
    showList() {        this.students.forEach(            student => alert(this.title + ': ' + student)        );    }};
group.showList();

3、普通函數(shù)無法訪問this

# 普通函數(shù)中 this 等于 undefined ，所用 this.title 必然因為無法識別而報錯let group = {    title: "Our Group",    students: ["John", "Pete", "Alice"],
    showList() {        this.students.forEach(function (student) {            // Error: Cannot read property 'title' of undefined            alert(this.title + ': ' + student)        });    }};
group.showList();

本文完~

學(xué)習(xí)更多技能

請點擊下方公眾號