聊一聊JavaScript和Java、C#的“箭头函数”

S6 中引入了箭头函数，这也是现在前端面试几乎必考的内容（没考箭头函数，我都不好意思说自己是面试官，哈哈，开个玩笑）。有人问我，箭头函数是个什么东西？我跟他说，就像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可以被当做一个函数来使用。

那么用于承接这个匿名方法的变量实际是什么？

JavaScript: 就是一个js中的function

Java：在例子中，有点容易迷惑，明明是将lambda赋值给了一个接口类型。但最终调用的时候又要调用该接口的doSomething方法。而且这个接口只能有一个对应的方法，多了会报错。

Java10中也提供了var关键字，但遗憾的是也不能被用于这样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语言中我们会用一个指向函数的指针。

2. 对函数外变量的引用

在上一节的例子中，“hello world”是以参数的形式传递到方法中的，那么，是否可以直接引用外部的方法呢？

当然是可以的，改造一下上面的例子：

2.1 JavaScript

let str = "，圣诞快乐。";
let func = (s)=> {
console.log(s + str);
str = "，春节快乐。"
};
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 = "，春节快乐。";
};
//str = "，元旦快乐。"
func.doSomething("hello world");
}

2.3 C#

var str = "，圣诞快乐。";
var func = (string s) => {
Console.WriteLine(s + str );
str = "，春节快乐。";
};
str = "，元旦快乐。";
func("hello world");
func("hello world");

2.4 分析

JavaScript 和C# 的结果是一样的，输出结果为：

hello world，元旦快乐。
hello world，春节快乐。

可见，在函数执行的时候，会取当时str的值。在函数定义的时候，虽然引用了变量str，但不是此时固定了str的值。

在函数中改变了str的值，会改变外部str的值。

Java的例子中，要求str是final的才行，所以是无法对str改变的。

3. 作为方法的参数

在JavaScript中，经常会用到类似callback的回调方法，那么箭头函数是不是也可以呢？

3.1 JavaScript

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

3.2 Java

本例用Consumer代替了第一节中的自定义的Operate接口。其实Consumer就是框架帮我们预定义的泛型接口，避免我们总需自定义一个接口:

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代替了第一节中的自定义的delegate。其实Action就是框架帮我们预定义的泛型接口，避免我们总需自定义委托:

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. 总结

总体来说，三种语言的使用方法还是比较类似的。可能是都源于C的原因？

其实对于面向对象语言来说，好多都是相通的，个人感觉经常对比一下，有助于加深记忆。

另外，如果有机会，学一门风格和自己擅长的开发语言差异比较大的，更有利于对编程语言的了解。

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

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

绑定arguments

箭头函数不绑定Arguments 对象。因此，在本示例中，arguments只是引用了封闭作用域内的arguments：

在大多数情况下，使用剩余参数是相较使用arguments对象的更好选择。

像函数一样使用箭头函数

如上所述，箭头函数表达式对非方法函数是最合适的。让我们看看当我们试着把它们作为方法时发生了什么。

箭头函数没有定义this绑定。另一个涉及Object.defineProperty()的示例：

函数体

箭头函数可以有一个“简写体”或常见的“块体”。

在一个简写体中，只需要一个表达式，并附加一个隐式的返回值。在块体中，必须使用明确的return语句。

var func = x => x * x; 
// 简写函数 省略return
var func = (x, y) => { return x + y; }; 
//常规编写 明确的返回值

返回对象字面量

记住用params => {object:literal}这种简单的语法返回对象字面量是行不通的。

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

这是因为花括号（{} ）里面的代码被解析为一系列语句（即 foo 被认为是一个标签，而非对象字面量的组成部分）。

所以，记得用圆括号把对象字面量包起来：

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

换行

箭头函数在参数和箭头之间不能换行。

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

解析顺序

虽然箭头函数中的箭头不是运算符，但箭头函数具有与常规函数不同的特殊运算符优先级解析规则。

箭头函数也可以使用条件（三元）运算符：

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

箭头函数也可以使用闭包：

箭头函数递归

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

编程是一种修行，我愿与志同道合的朋友携手前行，一起探索有关编程的奥妙！
如果您在前端学习的过程中遇到难题，欢迎【关注】并【私信】我，大家一起交流解决！

文章推荐：

不一样的JS函数总结，适合前端初学者的JavaScript函数代码

JS函数声明和函数表达式的定义及其区别——超详讲解，值得拥有

带你一分钟理解JS闭包——通俗易懂

JavaScript中，箭头函数是一种简化的函数语法，它在ES6（ECMAScript 2015）引入。箭头函数的语法比传统的function表达式更简洁，同时还有一些特性，例如继承外部作用域的this值。

箭头函数的基本语法如下：

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

当箭头函数只有一个参数时，可以省略括号：

param => { statements }
param => expression

当函数体只包含一个返回值表达式时，可以省略花括号并直接返回该表达式的值：

(param1, param2) => param1 + param2

需要注意的是，箭头函数有以下特性：

没有自己的this值：箭头函数内的this值继承自包含它的函数作用域，这有助于解决一些this指向问题。
没有arguments对象：在箭头函数内部，无法访问传统函数中的arguments对象。但你可以使用剩余参数（...rest）语法来获取参数列表。
不能用作构造函数：箭头函数不能用作构造函数，因此不能使用new运算符实例化。
没有原型：箭头函数没有prototype属性，因为它们不能作为构造函数使用。

更多箭头函数的用法

链式调用：

箭头函数的简洁语法使得在链式调用中使用它们变得更加容易。例如，我们可以在数组上使用多个数组方法并将箭头函数作为回调函数：

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

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

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

事件处理程序：

箭头函数可以方便地用作事件处理程序，因为它们继承了外部作用域的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();

在数组方法中使用：

常见的数组方法，如filter、reduce、forEach等，也可以与箭头函数一起使用，以简化代码并使其更具可读性：

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}`));

立即调用的箭头函数：

箭头函数还可以作为立即调用函数表达式（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'

对象字面量和箭头函数：

在箭头函数中直接返回对象字面量时，需要注意语法。由于大括号 {} 在箭头函数中被解释为代码块，而不是对象字面量，因此需要在对象字面量周围添加额外的括号：

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

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

多行箭头函数：

虽然箭头函数通常用于简洁的单行函数，但它们也可以用于多行函数。在这种情况下，需要使用大括号包裹函数体，并在需要返回值时使用 return 关键字：

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

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

箭头函数与解构参数：

箭头函数可以与解构参数一起使用，可以更简洁地处理对象或数组。以下是一些示例：

// 对象解构
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']

// 数组解构
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]

箭头函数和 this：

由于箭头函数在其词法作用域内捕获 this 值，因此在某些情况下可能导致问题。例如，在对象方法中使用箭头函数时，它不会获取到对象的 this，而是捕获到外部作用域的 this。为了解决这个问题，需要使用传统的 function 声明或表达式。

const obj = {
  value: 10,
  getValue: function() {
    // 正常的function表达式，`this` 指向obj
    return this.value;
  },
  getValueWithArrow: () => {
    // 箭头函数，`this` 指向外部作用域（在这种情况下是全局对象或undefined）
    return this.value;
  },
};

console.log(obj.getValue()); // 输出：10
console.log(obj.getValueWithArrow()); // 输出：undefined（严格模式）或全局对象的value属性

箭头函数作为高阶函数的参数：

在处理高阶函数时，箭头函数非常有用，因为它们可以使代码更简洁。高阶函数是接受一个或多个函数作为参数、返回一个函数的函数。这里有一个使用箭头函数的高阶函数示例：

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

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

在上面的示例中，add 函数接受一个参数 a 并返回一个新的函数，该函数接受另一个参数 b 并返回 a + b 的结果。

不要在所有场景中都使用箭头函数：

尽管箭头函数有很多优点，但并非所有场景都适用。以下是一些避免使用箭头函数的情况：

在需要动态上下文的函数（如事件处理程序）中，箭头函数继承了它们的词法作用域。在这种情况下，可能需要使用 function 声明或表达式，以便根据需要访问当前上下文。
当需要使用 arguments 对象时，箭头函数不会创建它。在这种情况下，需要使用传统的 function 声明或表达式。

总之，箭头函数的简洁语法和特性使得它们在许多情况下都非常有用，还可以用在setTimeout、错误处理、Promise中等等。但是，在遇到 this、arguments 或其他相关问题时，有时可能需要使用传统的function声明或表达式来解决特定问题。

参考：JS中的箭头函数 - 掘金

在线咨询

上一篇：在 JAVASCRIPT 中创建 HTML 元素...
下一篇：HTML5新增了哪些结构标签？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商