【JS006】ES6的學習筆記之箭頭函數

日期：2021年8月13日

作者：Commas

注釋：如果您覺得

有所幫助

，幫忙

點個贊

；如果有不對的地方，還望各位大佬不吝賜教，謝謝^ - ^

(ง •_•)ง 積跬步以緻千裡，ES6的學習筆記

1.01365 = 37.7834；0.99365 = 0.0255

1.02365 = 1377.4083；0.98365 = 0.0006

文章目錄

• 一、箭頭函數的定義
• 二、箭頭函數的簡寫
• 三、箭頭函數的注意事項

一、箭頭函數的定義

定義：ES6 允許使用

=>

來定義函數，因為它很像一個箭頭（=>），是以我們稱其定義的函數為

箭頭函數

普通函數定義	箭頭函數定義
let f = function(){}	let f = () => {}

其中，圓括号

()

内部寫形式參數，大括号

{}

内部寫函數業務邏輯；

• 普通函數的定義及調用：

//普通函數
let add = function(n1,n2){
    return n1 + n2;
};
let result = add(1,1);
console.log(result);  //控制台輸出：2
           

• 箭頭函數的定義及調用

//箭頭函數
let add = (n1,n2) => {
    return n1 + n2;
};
let result = add(1,1);
console.log(result);  //控制台輸出：2
           

二、箭頭函數的簡寫

說明	箭頭函數
完整箭頭函數	let f = (形參) => {業務邏輯}
省略圓括号	let f = 形參 => {業務邏輯}
省略大括号	let f = (形參) => 業務邏輯
省略圓、大括号	let f = 形參 => 業務邏輯

其中，圓括号

()

内部寫形式參數，大括号

{}

内部寫函數業務邏輯；

1. 省略圓括号

   ()

   條件：當形參（即：形式參數）有且隻有一個的時候，可以省略圓括号

   ()

   ；

//（1）完整箭頭函數
let addOne1 = (n) => {
    return n + 1;
};
console.log(addOne1(1));
//控制台輸出：2

//（2）省略圓括号
let addOne2 = n => {
    return n + 1;
};
console.log(addOne2(1));
//控制台輸出：2
           

1. 省略大括号

   {}

   條件：當函數業務邏輯中的代碼體隻有一條語句的時候，可以省略大括号

   {}

   ，同時必須省略

   Return

   關鍵字，語句執行結果即為傳回值；

//（1）完整箭頭函數
let add1 = (n1,n2) => {
    return n1 + n2;
};
console.log(add1(1,1));
//控制台輸出：2

//（2）省略大括号
let add2 = (n1,n2) => n1 + n2;
console.log(add2(1,1));
//控制台輸出：2
           

1. 省略圓括号

   ()

   和大括号

   {}

   條件：同時滿足1和2的條件

//（1）完整的箭頭函數
let square1 = (n) => {
    return n * n;
};
console.log(square1(2));
//控制台輸出：4

//（2）省略圓括号、省略大括号
let square2 = n => n * n;
console.log(square2(3));
//控制台輸出：9
           

三、箭頭函數的注意事項

内容	普通函數	箭頭函數
是否有this對象	√	×
是否可以當作構造函數	√	×
是否可以使用arguments對象	√	×
是否可以使用yield指令	√	×

1、箭頭函數沒有this對象，箭頭函數内的

this

始終指向函數聲明所在作用域下的this的值，即：“

箭頭函數this === 函數聲明所在作用于下的this

”

window.name = "貓博士";
let mao={
    "name":"貓師"
};

//（1）普通函數
let getNameByCommon = function(){
    return this.name;
};
console.log(`${getNameByCommon.name}:${getNameByCommon()}`);
//控制台輸出：getNameByCommon:貓博士
console.log(`${getNameByCommon.name}:${getNameByCommon.call(mao)}`);
//控制台輸出：getNameByCommon:貓師

//（2）箭頭函數
let getNameByArrow = () => {
    return this.name;
};
console.log(`${getNameByArrow.name}:${getNameByArrow()}`);
//控制台輸出：getNameByArrow:貓博士
console.log(`${getNameByArrow.name}:${getNameByArrow.call(mao)}`);
//控制台輸出：getNameByArrow:貓博士
           

知識加油站：

1、ES6 規定，函數的

name

屬性，傳回該函數的函數名；

2、示例中有使用到模闆字元串，可參考《【JS004】ES6的學習筆記之模闆字元串》

2、箭頭函數不可以作為構造函數

//（1）普通函數，可以作為構造函數
//HeroByCommon= function(name,occupation){
function HeroByCommon(name,occupation){
    //姓名
    this.name = name;
    //職業
    this.occupation = occupation;
};
ZGL = new HeroByCommon("諸葛亮","法師");
console.log(ZGL);
//控制台輸出：
//Hero {name: "諸葛亮", occupation: "法師"}


//（2）箭頭函數，不可以作為構造函數
let HeroByArrow = (name,occupation) => {
    //姓名
    this.name = name;
    //職業
    this.occupation = occupation;
};
ZGL = new HeroByArrow("諸葛亮","法師");
console.log(ZGL);
//控制台輸出：
//Uncaught TypeError: HeroByArrow is not a constructor
           

3、箭頭函數不可以使用arguments對象

//（1）普通函數
//let argsByCommon = function(){
function argsByCommon(){
    console.log(arguments);
}
argsByCommon();
//控制台輸出：
//Arguments [callee: ƒ, Symbol(Symbol.iterator): ƒ]
argsByCommon(1,2,3);
//控制台輸出：
//Arguments(3) [1, 2, 3, callee: ƒ, Symbol(Symbol.iterator): ƒ]
argsByCommon([1,2,3]);
//控制台輸出：
//Arguments [Array(3), callee: ƒ, Symbol(Symbol.iterator): ƒ]
argsByCommon("a","b","c");
//控制台輸出：
//Arguments(3) ["a", "b", "c", callee: ƒ, Symbol(Symbol.iterator): ƒ]
argsByCommon(["a","b","c"]);
//控制台輸出：
//Arguments [Array(3), callee: ƒ, Symbol(Symbol.iterator): ƒ]
argsByCommon({"k1":"v1"});
//控制台輸出：
//Arguments [{…}, callee: ƒ, Symbol(Symbol.iterator): ƒ]

//（2）箭頭函數
let argsByArrow = () => {
    console.log(arguments);
}
argsByArrow();
//控制台輸出：arguments is not defined at argsByArrow
argsByArrow(1,2,3);
//控制台輸出：arguments is not defined at argsByArrow
argsByArrow([1,2,3]);
//控制台輸出：arguments is not defined at argsByArrow
argsByArrow("a","b","c");
//控制台輸出：arguments is not defined at argsByArrow
argsByArrow(["a","b","c"]);
//控制台輸出：arguments is not defined at argsByArrow
argsByArrow({"k1":"v1"});
//控制台輸出：arguments is not defined at argsByArrow
           

4、箭頭函數不可以使用yield指令

• 這個以後寫疊代器的時候，再詳細講，暫且跳過。

版權聲明：本文為部落客原創文章，如需轉載，請給出：

原文連結：https://blog.csdn.net/qq_35844043/article/details/119673122