首頁 web前端 前端問答 es6箭頭函數有什麼優點

es6箭頭函數有什麼優點

Mar 07, 2022 pm 05:11 PM
es6 優點 箭頭函數

es6箭頭函數的優點:1、簡潔的語法,例“parameters => {statements;};”,應用起來更加的方便;2、能夠隱式返回;3、更直觀的作用域和this的綁定(不綁定this)。

es6箭頭函數有什麼優點

本教學操作環境:windows7系統、ECMAScript 6版、Dell G3電腦。

我們都知道,在 JavaScript 裡定義函數有多種方式。最常見的是用function關鍵字:

// 函数声明
function sayHi(someone) {
  return `Hello, ${someone}!`;
}
// 函数表达式
const sayHi = function(someone) {
  return `Hello, ${someone}`;
}
登入後複製

上面的函數宣告和函式表達式,我們姑且稱之為常規函數。

還有就是 ES6 新增的箭頭函數語法:

const sayHi = (someone) => {
  return `Hello, ${someone}!`;
}
登入後複製

相對於原先JS中的函數,ES6成長的箭頭函數更簡潔,應用起來也更加的方便。

es6箭頭函數的優點:

1、簡潔的語法

一個陣列,把它變成原來的二倍之後輸出。

删掉一个关键字,加上一个胖箭头;
没有参数加括号,一个参数可选择;
多个参数逗号分隔,

const numbers = [5,6,13,0,1,18,23];
//原函数
const double = numbers.map(function (number) {
    return number * 2;
})
console.log(double);
//输出结果
//[ 10, 12, 26, 0, 2, 36, 46 ]
//箭头函数     去掉function, 添加胖箭头
const double2 = numbers.map((number) => {
    return number * 2;
})
console.log(double2);
//输出结果
//[ 10, 12, 26, 0, 2, 36, 46 ]
//若只有一个参数,小括号能够不写(选择)
const double3 = numbers.map(number => {
    return number * 2;
})
console.log(double3);
//如有多个参数,则括号必须写;若没有参数,()须要保留
const double4 = numbers.map((number,index) => {
    return `${index}:${number * 2}`;  //模板字符串
})
console.log(double4);
登入後複製

2、能夠隱含回傳

顯示回傳就是svg

const double3 = numbers.map(number => {
    return number * 2;  
    //return 返回内容;
})
登入後複製

箭頭函數的隱含回傳就是函數

当你想简单返回一些东西的时候,以下:去掉return和大括号,把返回内容移到一行,较为简洁;
const double3 = numbers.map(number => number * 2);
登入後複製

補充:箭頭函數是匿名函數,若需調用,須賦值給一個變量,如上double3。匿名函數在遞歸、解除函數綁定的時候頗有用。

3、更直覺的作用域和this的綁定(不綁定this

一個對象,咱們原先在函數中是這麼寫的this

一個對象,咱們原本在函數中是這麼寫的

const Jelly = {
    name:'Jelly',
    hobbies:['Coding','Sleeping','Reading'],
    printHobbies:function () {
        this.hobbies.map(function (hobby) {
            console.log(`${this.name} loves ${hobby}`);
        })
    }
}
Jelly.printHobbies();
// undefined loves Coding
// undefined loves Sleeping
// undefined loves Reading
登入後複製

這說明this.hobbies 的指向是正確的,this.name 的指向是不正確的;

當一個獨立函數執行時,this 是指向window的

若是要正確指向,原先咱們的作法會是設定變數替換spa

//中心代码
printHobbies:function () {
    var self = this; // 设置变量替换
    this.hobbies.map(function (hobby) {
        console.log(`${self.name} loves ${hobby}`);
    })
}
Jelly.printHobbies();
// Jelly loves Coding
// Jelly loves Sleeping
// Jelly loves Reading
在ES6箭头函数中,咱们这样写code
//中心代码
printHobbies:function () {
   this.hobbies.map((hobby)=>{
       console.log(`${this.name} loves ${hobby}`);
   })
}
// Jelly loves Coding
// Jelly loves Sleeping
// Jelly loves Reading
登入後複製

這是由於箭頭函數中造訪的this其實是繼承自其父級做用域中的this,箭頭函數自己的this是不存在的,這樣就至關於箭頭函數的this是在聲明的時候就肯定了(詞法做用域),this的指向並不會隨方法的呼叫而改變。

【相關推薦:javascript影片教學web前端

以上是es6箭頭函數有什麼優點的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前 By 尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前 By 尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章標籤

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

async是es6還是es7的 async是es6還是es7的 Jan 29, 2023 pm 05:36 PM

async是es6還是es7的

了解Django、Flask和FastAPI框架的優缺點 了解Django、Flask和FastAPI框架的優缺點 Sep 28, 2023 pm 01:19 PM

了解Django、Flask和FastAPI框架的優缺點

Django框架的優點和缺點:您需要知道的一切 Django框架的優點和缺點:您需要知道的一切 Jan 19, 2024 am 09:09 AM

Django框架的優點和缺點:您需要知道的一切

如何利用 PHP 箭頭函數實作函數的柯里化 如何利用 PHP 箭頭函數實作函數的柯里化 Sep 13, 2023 am 11:12 AM

如何利用 PHP 箭頭函數實作函數的柯里化

小程式為什麼要將es6轉es5 小程式為什麼要將es6轉es5 Nov 21, 2022 pm 06:15 PM

小程式為什麼要將es6轉es5

es6暫時性死區是什麼意思 es6暫時性死區是什麼意思 Jan 03, 2023 pm 03:56 PM

es6暫時性死區是什麼意思

推薦一款安卓瀏覽器-UC瀏覽器的優點及使用建議 推薦一款安卓瀏覽器-UC瀏覽器的優點及使用建議 Jan 08, 2024 pm 04:49 PM

推薦一款安卓瀏覽器-UC瀏覽器的優點及使用建議

es5和es6怎麼實現陣列去重 es5和es6怎麼實現陣列去重 Jan 16, 2023 pm 05:09 PM

es5和es6怎麼實現陣列去重

See all articles