首頁 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

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++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是es7的。 async和await是ES7中新增內容,是對於非同步操作的解決方案;async/await可以說是co模組和生成器函數的語法糖,用更清晰的語意解決js非同步程式碼。 async顧名思義是「非同步」的意思,async用於聲明一個函數是異步的;async和await有一個嚴格規定,兩者都離不開對方,且await只能寫在async函數中。

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

Django是一個完整的開發框架,該框架涵蓋了Web開發生命週期的各個方面。目前,這個框架是全球最受歡迎的Web框架之一。如果你打算使用Django來建立自己的Web應用程序,那麼你需要了解Django框架的優點和缺點。以下是您需要知道的一切,包括具體程式碼範例。 Django優點:1.快速開發-Djang可以快速開發Web應用程式。它提供了豐富的庫和內

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

了解Django、Flask和FastAPI框架的優缺點,需要具體程式碼範例引言:在Web開發的領域中,選擇合適的框架是至關重要的。 Django、Flask和FastAPI是三個備受歡迎的PythonWeb框架,它們各自有其獨特的優點和缺點。本文將深入探討這三個框架的優缺點,並透過具體的程式碼範例來說明它們之間的差異。一、Django框架Django是全功

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

為了瀏覽器相容。 ES6作為JS的新規範,加入了許多新的語法和API,但現代瀏覽器對ES6新特性支援不高,所以需將ES6程式碼轉換為ES5程式碼。在微信web開發者工具中,會預設使用babel將開發者ES6語法程式碼轉換為三端都能很好支援的ES5的程式碼,幫助開發者解決環境不同所帶來的開發問題;只需要在專案中配置勾選好「ES6轉ES5」選項即可。

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

es5中可以利用for語句和indexOf()函數來實現數組去重,語法“for(i=0;i<數組長度;i++){a=newArr.indexOf(arr[i]);if(a== -1){...}}」。在es6中可以利用擴充運算子、Array.from()和Set來去重;需要先將陣列轉為Set物件來去重,然後利用擴充運算子或Array.from()函數來將Set物件轉回數組即可。

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

如何利用PHP箭頭函數實現函數的柯里化柯里化(Currying)是一種函數式程式設計的概念,指的是將一個多參數的函數轉換為一個只接受單一參數的函數序列的過程。在PHP中,我們可以利用箭頭函數來實現函數的柯里化,讓程式碼更簡潔、更靈活。所謂箭頭函數,是PHP7.4中引入的一種新的匿名函數語法。它的特點是可以捕獲外部變量,並且只有一個表達式作為函數體,不

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

在es6中,暫時性死區是語法錯誤,是指let和const命令使區塊形成封閉的作用域。在程式碼區塊內,使用let/const指令宣告變數之前,變數都是不可用的,在變數宣告之前屬於該變數的「死區」;這在語法上,稱為「暫時性死區」。 ES6規定暫時性死區和let、const語句不出現變量提升,主要是為了減少運行時錯誤,防止在變量聲明前就使用這個變量,從而導致意料之外的行為。

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

瀏覽器是一種大家常用的軟體。除了手機自備的瀏覽器外,人們還會下載更好用、更適合自己的瀏覽器。在選擇瀏覽器時,人們會比較它們的優點,看哪一款會更好用。今天我來介紹一下UC瀏覽器有哪些優點,推薦一款適用於安卓系統的好用瀏覽器UC瀏覽器安卓版功能簡介大多數用戶選擇使用UC瀏覽器,肯定是因為它具有獨特的功能和優點。接下來,小編將為大家詳細介紹一下作為一款瀏覽器,其最主要的功能是用於瀏覽網頁擁有閱讀模式,可以不受影響地閱讀小說和文章3.UC瀏覽器內置網盤功能,可以將圖片、影片等內容儲存到雲端4.安卓版u

See all articles