聊一聊JavaScript和Java、C#的“箭頭函數(shù)”

S6 中引入了箭頭函數(shù)，這也是現(xiàn)在前端面試幾乎必考的內(nèi)容（沒考箭頭函數(shù)，我都不好意思說自己是面試官，哈哈，開個玩笑）。有人問我，箭頭函數(shù)是個什么東西？我跟他說，就像Java和C#中的lambda。

1. 舉個簡單的栗子：

1.1 JavaScript

let func = (s)=> { console.log(s); };
func("hello world");

1.2 Java

interface Operate {
void doSomething(String str);
// void doSomething1(); 不可以有兩個方法
}
public static void main(String[] args) {
Operate func = (String s)->{ System.out.println(s);};
func.doSomething("hello world");
}

1.3 C#

var func = (string s)=> { Console.WriteLine(s); };
func("hello world");

1.4 分析

可以看到，寫法非常類似，尤其是Js和C#。變量func可以被當(dāng)做一個函數(shù)來使用。

那么用于承接這個匿名方法的變量實際是什么？

JavaScript: 就是一個js中的function

Java：在例子中，有點容易迷惑，明明是將lambda賦值給了一個接口類型。但最終調(diào)用的時候又要調(diào)用該接口的doSomething方法。而且這個接口只能有一個對應(yīng)的方法，多了會報錯。

Java10中也提供了var關(guān)鍵字，但遺憾的是也不能被用于這樣lambda賦值的情況。

C#：實際上是一個委托類型，例如:

delegate void doSomething(string str);
public static void Main(string[] args) {
doSomething func = (string s) => { Console.WriteLine(s); };
func("hello world");
}

這樣看和Java有點像了，但定義的仍然是一個方法，而不是一個接口中有一個同樣類型的方法。

如果在c語言中我們會用一個指向函數(shù)的指針。

2. 對函數(shù)外變量的引用

在上一節(jié)的例子中，“hello world”是以參數(shù)的形式傳遞到方法中的，那么，是否可以直接引用外部的方法呢？

當(dāng)然是可以的，改造一下上面的例子：

2.1 JavaScript

let str = "，圣誕快樂。";
let func = (s)=> {
console.log(s + str);
str = "，春節(jié)快樂。"
};
str = "，元旦快樂。"
func("hello world");
func("hello world");

2.2 Java

interface Operate {
void doSomething(String str);
// void doSomething1(); 不可以有兩個方法
}
public static void main(String[] args) {
final String str = ",圣誕快樂";
Operate func = (String s)->{
System.out.println(s + str);
//str = "，春節(jié)快樂。";
};
//str = "，元旦快樂。"
func.doSomething("hello world");
}

2.3 C#

var str = "，圣誕快樂。";
var func = (string s) => {
Console.WriteLine(s + str );
str = "，春節(jié)快樂。";
};
str = "，元旦快樂。";
func("hello world");
func("hello world");

2.4 分析

JavaScript 和C# 的結(jié)果是一樣的，輸出結(jié)果為：

hello world，元旦快樂。
hello world，春節(jié)快樂。

可見，在函數(shù)執(zhí)行的時候，會取當(dāng)時str的值。在函數(shù)定義的時候，雖然引用了變量str，但不是此時固定了str的值。

在函數(shù)中改變了str的值，會改變外部str的值。

Java的例子中，要求str是final的才行，所以是無法對str改變的。

3. 作為方法的參數(shù)

在JavaScript中，經(jīng)常會用到類似callback的回調(diào)方法，那么箭頭函數(shù)是不是也可以呢？

3.1 JavaScript

let func = (s)=> {
console.log(s);
};
var showLog = function(str,action){
action(str);
}
showLog("hello world",func);

3.2 Java

本例用Consumer代替了第一節(jié)中的自定義的Operate接口。其實Consumer就是框架幫我們預(yù)定義的泛型接口，避免我們總需自定義一個接口:

public static void main(String[] args) {
Consumer<String> func = (String s)->{
System.out.println(s);
};
showLog("hello world",func);
}
public static void showLog(String str, Consumer<String> action){
action.accept(str);
}

3.3 C#

本例用Action代替了第一節(jié)中的自定義的delegate。其實Action就是框架幫我們預(yù)定義的泛型接口，避免我們總需自定義委托:

public static void Main(string[] args)
{
var func = (string s) => { Console.WriteLine(s); };
showLog("hello world", func);
}
public static void showLog(string str ,Action<string> action)
{
action(str);
}

4. 總結(jié)

總體來說，三種語言的使用方法還是比較類似的。可能是都源于C的原因？

其實對于面向?qū)ο笳Z言來說，好多都是相通的，個人感覺經(jīng)常對比一下，有助于加深記憶。

另外，如果有機會，學(xué)一門風(fēng)格和自己擅長的開發(fā)語言差異比較大的，更有利于對編程語言的了解。

————————————————

版權(quán)聲明：本文為CSDN博主「FlyLolo」的原創(chuàng)文章，遵循CC 4.0 BY-SA版權(quán)協(xié)議，轉(zhuǎn)載請附上原文出處鏈接及本聲明。

原文鏈接：https://blog.csdn.net/Lolo_cs_dn/article/details/122159246

綁定arguments

箭頭函數(shù)不綁定Arguments 對象。因此，在本示例中，arguments只是引用了封閉作用域內(nèi)的arguments：

在大多數(shù)情況下，使用剩余參數(shù)是相較使用arguments對象的更好選擇。

像函數(shù)一樣使用箭頭函數(shù)

如上所述，箭頭函數(shù)表達(dá)式對非方法函數(shù)是最合適的。讓我們看看當(dāng)我們試著把它們作為方法時發(fā)生了什么。

箭頭函數(shù)沒有定義this綁定。另一個涉及Object.defineProperty()的示例：

函數(shù)體

箭頭函數(shù)可以有一個“簡寫體”或常見的“塊體”。

在一個簡寫體中，只需要一個表達(dá)式，并附加一個隱式的返回值。在塊體中，必須使用明確的return語句。

var func = x => x * x; 
// 簡寫函數(shù) 省略return
var func = (x, y) => { return x + y; }; 
//常規(guī)編寫 明確的返回值

返回對象字面量

記住用params => {object:literal}這種簡單的語法返回對象字面量是行不通的。

var func = () => { foo: 1 }; 
// Calling func() returns undefined!
var func = () => { foo: function() {} }; 
// SyntaxError: function statement requires a name

這是因為花括號（{} ）里面的代碼被解析為一系列語句（即 foo 被認(rèn)為是一個標(biāo)簽，而非對象字面量的組成部分）。

所以，記得用圓括號把對象字面量包起來：

var func = () => ({foo: 1});

換行

箭頭函數(shù)在參數(shù)和箭頭之間不能換行。

var func = ()
 => 1; 
// SyntaxError: expected expression, got '=>'

解析順序

雖然箭頭函數(shù)中的箭頭不是運算符，但箭頭函數(shù)具有與常規(guī)函數(shù)不同的特殊運算符優(yōu)先級解析規(guī)則。

箭頭函數(shù)也可以使用條件（三元）運算符：

var simple = a => a > 15 ? 15 : a;
simple(16); // 15
simple(10); // 10
let max = (a, b) => a > b ? a : b;

箭頭函數(shù)也可以使用閉包：

箭頭函數(shù)遞歸

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

編程是一種修行，我愿與志同道合的朋友攜手前行，一起探索有關(guān)編程的奧妙！
如果您在前端學(xué)習(xí)的過程中遇到難題，歡迎【關(guān)注】并【私信】我，大家一起交流解決！

文章推薦：

不一樣的JS函數(shù)總結(jié)，適合前端初學(xué)者的JavaScript函數(shù)代碼

JS函數(shù)聲明和函數(shù)表達(dá)式的定義及其區(qū)別——超詳講解，值得擁有

帶你一分鐘理解JS閉包——通俗易懂

JavaScript中，箭頭函數(shù)是一種簡化的函數(shù)語法，它在ES6（ECMAScript 2015）引入。箭頭函數(shù)的語法比傳統(tǒng)的function表達(dá)式更簡潔，同時還有一些特性，例如繼承外部作用域的this值。

箭頭函數(shù)的基本語法如下：

(param1, param2, ..., paramN) => { statements }
(param1, param2, ..., paramN) => expression

當(dāng)箭頭函數(shù)只有一個參數(shù)時，可以省略括號：

param => { statements }
param => expression

當(dāng)函數(shù)體只包含一個返回值表達(dá)式時，可以省略花括號并直接返回該表達(dá)式的值：

(param1, param2) => param1 + param2

需要注意的是，箭頭函數(shù)有以下特性：

沒有自己的this值：箭頭函數(shù)內(nèi)的this值繼承自包含它的函數(shù)作用域，這有助于解決一些this指向問題。
沒有arguments對象：在箭頭函數(shù)內(nèi)部，無法訪問傳統(tǒng)函數(shù)中的arguments對象。但你可以使用剩余參數(shù)（...rest）語法來獲取參數(shù)列表。
不能用作構(gòu)造函數(shù)：箭頭函數(shù)不能用作構(gòu)造函數(shù)，因此不能使用new運算符實例化。
沒有原型：箭頭函數(shù)沒有prototype屬性，因為它們不能作為構(gòu)造函數(shù)使用。

更多箭頭函數(shù)的用法

鏈?zhǔn)秸{(diào)用：

箭頭函數(shù)的簡潔語法使得在鏈?zhǔn)秸{(diào)用中使用它們變得更加容易。例如，我們可以在數(shù)組上使用多個數(shù)組方法并將箭頭函數(shù)作為回調(diào)函數(shù)：

const numbers = [1, 2, 3, 4, 5];

const doubledAndFiltered = numbers
  .map(num => num * 2)
  .filter(num => num > 5);

console.log(doubledAndFiltered); // [6, 8, 10]

事件處理程序：

箭頭函數(shù)可以方便地用作事件處理程序，因為它們繼承了外部作用域的this值。這樣就避免了使用bind來綁定事件處理程序的需要。例如：

class Button {
  constructor() {
    this.buttonElement = document.createElement('button');
    this.buttonElement.textContent = 'Click me!';
    this.buttonElement.addEventListener('click', () => this.handleClick());
    document.body.appendChild(this.buttonElement);
  }

  handleClick() {
    console.log('Button clicked!');
  }
}

const button = new Button();

在數(shù)組方法中使用：

常見的數(shù)組方法，如filter、reduce、forEach等，也可以與箭頭函數(shù)一起使用，以簡化代碼并使其更具可讀性：

const numbers = [1, 2, 3, 4, 5];

const evenNumbers = numbers.filter(num => num % 2 === 0);

console.log(evenNumbers); // [2, 4]

const sum = numbers.reduce((acc, num) => acc + num, 0);

console.log(sum); // 15

numbers.forEach((num, index) => console.log(`Index ${index}: ${num}`));

立即調(diào)用的箭頭函數(shù)：

箭頭函數(shù)還可以作為立即調(diào)用函數(shù)表達(dá)式（IIFE）使用，這在某些場景下有助于限制變量的作用域：

const result = (() => {
  const localVar = 'I am only available within this IIFE';
  return localVar.toUpperCase();
})();

console.log(result); // 'I AM ONLY AVAILABLE WITHIN THIS IIFE'

對象字面量和箭頭函數(shù)：

在箭頭函數(shù)中直接返回對象字面量時，需要注意語法。由于大括號 {} 在箭頭函數(shù)中被解釋為代碼塊，而不是對象字面量，因此需要在對象字面量周圍添加額外的括號：

const getObject = () => ({ key: 'value' });

console.log(getObject()); // { key: 'value' }

多行箭頭函數(shù)：

雖然箭頭函數(shù)通常用于簡潔的單行函數(shù)，但它們也可以用于多行函數(shù)。在這種情況下，需要使用大括號包裹函數(shù)體，并在需要返回值時使用 return 關(guān)鍵字：

const addWithLogging = (a, b) => {
  console.log(`Adding ${a} and $`);
  return a + b;
};

console.log(addWithLogging(3, 4)); // 輸出 "Adding 3 and 4"，然后輸出 7

箭頭函數(shù)與解構(gòu)參數(shù)：

箭頭函數(shù)可以與解構(gòu)參數(shù)一起使用，可以更簡潔地處理對象或數(shù)組。以下是一些示例：

// 對象解構(gòu)
const users = [
  { id: 1, name: 'Alice', age: 30 },
  { id: 2, name: 'Bob', age: 25 },
  { id: 3, name: 'Charlie', age: 35 },
];

const getUserNames = users.map(({ name }) => name);
console.log(getUserNames); // 輸出：['Alice', 'Bob', 'Charlie']

// 數(shù)組解構(gòu)
const points = [
  [1, 2],
  [3, 4],
  [5, 6],
];

const getDistancesFromOrigin = points.map(([x, y]) => Math.sqrt(x * x + y * y));
console.log(getDistancesFromOrigin); // 輸出：[2.23606797749979, 5, 7.810249675906654]

箭頭函數(shù)和 this：

由于箭頭函數(shù)在其詞法作用域內(nèi)捕獲 this 值，因此在某些情況下可能導(dǎo)致問題。例如，在對象方法中使用箭頭函數(shù)時，它不會獲取到對象的 this，而是捕獲到外部作用域的 this。為了解決這個問題，需要使用傳統(tǒng)的 function 聲明或表達(dá)式。

const obj = {
  value: 10,
  getValue: function() {
    // 正常的function表達(dá)式，`this` 指向obj
    return this.value;
  },
  getValueWithArrow: () => {
    // 箭頭函數(shù)，`this` 指向外部作用域（在這種情況下是全局對象或undefined）
    return this.value;
  },
};

console.log(obj.getValue()); // 輸出：10
console.log(obj.getValueWithArrow()); // 輸出：undefined（嚴(yán)格模式）或全局對象的value屬性

箭頭函數(shù)作為高階函數(shù)的參數(shù)：

在處理高階函數(shù)時，箭頭函數(shù)非常有用，因為它們可以使代碼更簡潔。高階函數(shù)是接受一個或多個函數(shù)作為參數(shù)、返回一個函數(shù)的函數(shù)。這里有一個使用箭頭函數(shù)的高階函數(shù)示例：

const add = a => b => a + b;

const add5 = add(5);
console.log(add5(3)); // 輸出：8

在上面的示例中，add 函數(shù)接受一個參數(shù) a 并返回一個新的函數(shù)，該函數(shù)接受另一個參數(shù) b 并返回 a + b 的結(jié)果。

不要在所有場景中都使用箭頭函數(shù)：

盡管箭頭函數(shù)有很多優(yōu)點，但并非所有場景都適用。以下是一些避免使用箭頭函數(shù)的情況：

在需要動態(tài)上下文的函數(shù)（如事件處理程序）中，箭頭函數(shù)繼承了它們的詞法作用域。在這種情況下，可能需要使用 function 聲明或表達(dá)式，以便根據(jù)需要訪問當(dāng)前上下文。
當(dāng)需要使用 arguments 對象時，箭頭函數(shù)不會創(chuàng)建它。在這種情況下，需要使用傳統(tǒng)的 function 聲明或表達(dá)式。

總之，箭頭函數(shù)的簡潔語法和特性使得它們在許多情況下都非常有用，還可以用在setTimeout、錯誤處理、Promise中等等。但是，在遇到 this、arguments 或其他相關(guān)問題時，有時可能需要使用傳統(tǒng)的function聲明或表達(dá)式來解決特定問題。

參考：JS中的箭頭函數(shù) - 掘金

在線咨詢

上一篇：在 JAVASCRIPT 中創(chuàng)建 HTML 元素...
下一篇：HTML5新增了哪些結(jié)構(gòu)標(biāo)簽？

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商