箭頭函數的寫法特點

Rocko 發布于2019-08-23 18:13 / 2969人閱讀

1、箭頭函數簡介

用 => 來標識

箭頭函數表達式的語法比函數表達式更簡潔，并且沒有自己的this，arguments，super或 new.target。這些函數表達式更適用于那些本來需要匿名函數的地方，并且它們不能用作構造函數。

2、通常函數的定義方法

var fn1 = function(a, b){
  console.log(a + b);
};
fn1(1, 2); // 3

function fn2(a, b){
  console.log(a - b);
}
fn2(2, 1);//1

3、簡寫寫法

對應上面兩個

//刪掉了function
var fn11 = (a, b)=>{   
  console.log(a+b);
};
fn11(1, 2); // 3
//刪掉了function和函數名,無意義
(a,b)=>{  
  console.log(a-b)
}

4、基礎語法

附加規則

當函數參數只有一個時，可省略小括號，但沒有時，不能省略。
函數體（中括號）中有且只有一行return語句時，中括號和return關鍵字可以省略。
函數返回json對象，且只有一行return語句時，返回的簡寫要加小括號;如let add = a =>({"a":2})

    (參數1, 參數2, …, 參數N) => { 函數聲明 }
    
    //相當于：(參數1, 參數2, …, 參數N) =>{ return 表達式; }
    (參數1, 參數2, …, 參數N) => 表達式（單一）
    
    // 當只有一個參數時，圓括號是可選的：
    (單一參數) => {函數聲明}
    單一參數 => {函數聲明}
    
    // 沒有參數的函數應該寫成一對圓括號。
    () => {函數聲明}

        var add = function(a,b){
          return a+b;
        };
        // 即：
        var add = (a,b)=>{
          return a+b
        };
        // 即：
        var add = (a,b)=>a+b;
        ---------------------------------------------------------------------------------------
        var ret = function(a){
          return a+1;
        };
        // 即：
        var ret = a=>a+1;
        ---------------------------------------------------------------------------------------
        var non = function(){
          return 2+1;
        };
        // 即
        var non = ()=>2+1;

        函數體代碼多于一行
        let fun1 = function(){
          console.log("1");
          console.log("2");
          return 1+2;
        }
        fun1();
        // 簡寫為
        let fun2 = ()=>{
          console.log("1");
          console.log("2");
          return 1+2
        }
        fun2();

       函數返回json對象時
        let f1 = function(){
          return {"a":2};
        }
        let f2 = ()=>{"a":2} // 錯誤
        let f2 = ()=>({"a":2})
        如果要返回一個對象，就要注意，如果是單表達式，這么寫的話會報錯：
        x => { foo: x }
        因為和函數體的{ ... }有語法沖突，所以要改為：
        // ok:
        x => ({ foo: x })

        實例
        let arr1 = [9,6,1,7];
        let arr11 = arr1.sort(
          function(a,b){
            return a-b;
          }  
        )
        console.log(arr11);
        let arr3= [2,3,9,5];
        let arr33 = arr3.sort((a,b)=>a-b)
        console.log(arr33)

5、總結

箭頭函數看上去是匿名函數的一種簡寫，但實際上，箭頭函數和匿名函數有個明顯的區別：箭頭函數內部的this是詞法作用域，由上下文確定。

箭頭函數寫代碼擁有更加簡潔的語法。

不會綁定this，或者說箭頭函數中不會改變this本來的綁定。

云服務器 GPU云服務器箭頭函數 python函數寫法 js匿名函數寫法自定義函數特點

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/104852.html

ES6指北【2】—— 箭頭函數

摘要：箭頭函數基本語法函數語法具名函數匿名函數三句話第一句話聲明第二句話聲明匿名函數第三句話把匿名函數賦值給箭頭函數語法特點只能做賦值，不能做聲明第一種寫法完全寫法不省略參數個數，不省略函數體花括號參數個數函數體內語句個數第二種寫法省略參數括號參 1.箭頭函數基本語法 1.1 ES3 函數語法 // 具名函數 function xxx(arg1, arg2) { console.lo...

DobbyKim 2019-08-22 14:57 評論0 收藏0
ES6—箭頭函數（5）

摘要：因為它不產生屬于它自己上下文的箭頭函數的另一個用處是簡化回調函數。箭頭函數使用場景箭頭函數適合于無復雜邏輯或者無副作用的純函數場景下，例如用在的回調函數定義中，另外目前等庫，都大量使用箭頭函數，直接定義的情況已經很少了。 0.為什么會出現箭頭函數？ 1.傳統的javascript函數語法并沒有提供任何的靈活性，每一次你需要定義一個函數時，你都必須輸入function () {},這至少...

yanwei 2019-08-23 17:20 評論0 收藏0
ES6對函數的改動

摘要：改動函數的改變不算太大，都是一些其他語言早就有的功能，而一直比較欠缺的，比如函數參數默認值，任意參數的表示法，最大的變化應該是支持箭頭函數其他語言稱之為表達式，一種對匿名函數的一種簡寫方式，以下來探討一下函數在中的一些改變默認參數任意參數操 ES6 functions改動 ????ES6函數的改變不算太大，都是一些其他語言早就有的功能，而Javascript一直比較欠缺的，比如函數參數...

kk_miles 2019-08-22 10:38 評論0 收藏0
什么是 JAVASCRIPT？

摘要：，微軟發布，同時發布了，該語言模仿同年發布的。，公司在瀏覽器對抗中沒落，將提交給國際標準化組織，希望能夠成為國際標準，以此抵抗微軟。同時將標準的設想定名為和兩類。，尤雨溪發布項目。，正式發布，并且更名為。，發布，模塊系統得到廣泛的使用。前言作為程序員，技術的落實與鞏固是必要的，因此想到寫個系列，名為 why what or how 每篇文章試圖解釋清楚一個問題。這次的 why w...

ephererid 2019-08-26 10:20 評論0 收藏0
ES6學習手稿之基本類型擴展

摘要：它是一個通用標準，奠定了的基本語法。年月發布了的第一個版本，正式名稱就是標準簡稱。結語的基本擴展還有一些沒有在這里詳細介紹。前言 ES6標準以及頒布兩年了，但是，好像還沒有完全走進我們的日常開發。這篇文章從ES6的基本類型擴展入手，逐步展開對ES6的介紹。 ECMAScript和JavaScript JavaScript是由Netscape創造的，該公司1996年11月將JavaSc...

tommego 2019-08-21 18:25 評論0 收藏0