Clever Geek Handbook

JavaScript中真正需要什么箭头功能

哈Ha！我提请您注意MartinNovák的文章“ JavaScript具有箭头功能的真正原因”的翻译。





*来自游戏天际的模因短语



如果您仍然不使用箭头功能，那就不要怪自己-那是您父母的工作；相反，请考虑将其作为勤奋的学生所能获得的好处。今天，我所有的代码都是使用箭头功能编写的。



这是相同代码的示例，也以传统风格编写： 



const arrowFunction = (arg1, arg2) => arg1 + arg 2;

const traditionalFunction = function(arg1, arg2) {
  return arg1 + arg2;
};


您可能会注意到，使用箭头功能编写的代码短得多。箭头之前写的所有内容都是自变量，箭头之后是返回的结果。

如果您需要一个包含多个动作的函数，则可以这样编写： 



const arrowFunction = (arg1, arg2) => {
  const result = arg1 + arg2;
  return result;
};


箭头函数通常也称为lambda函数，它们不仅在JavaScript中使用。Python是可以在其中找到lambda函数的一个很好的示例。



在Python中，其语法如下： 



lambdaFunction = lambda a, b : a + b


简化



使用箭头功能可以激励您根据KISS原则（Keep-it-simple-stupid）和单一职责原则（每个功能仅负责一个特定的动作）简化代码。



通常，我写的时候没有大括号{}。如果函数难以阅读，或者您需要在其中使用多个表达式，建议您将其分解为几个较小的表达式。

此代码更易于编写，更易于重用和测试。另外，可以为函数指定更多描述性名称，以准确表示它们正在执行的工作。



一流的功能



JavaScript具有一流的功能。这些功能与常规变量一样使用。它们可以充当其他函数的参数，或者作为结果返回它们。您最可能熟悉的示例： 



document.querySelector('#myButton').addEventListner('click', function() {
  alert('click happened');
});


此处显示的是作为参数传递给addEventListener的匿名函数。此方法通常在Javascript中用于回调。



返回函数的示例有所不同-如下所示： 



const myFirstClassFunction = function(a) {
  return function(b) {
    return a + b;
  };
};

myFirstClassFunction(1)(2); // => 3


但是，使用箭头功能，所有内容看起来都更加清晰： 



const myFirstClassArrow = a => b => a + b;

myFirstClassArrow(1)(2); // => 3


这里的一切都很简单：最后一个箭头之前写的是参数，之后是计算。实际上，我们正在使用多个函数，并且还可以使用多个调用fn（call1）（call2）;



部分申请



您可以开始使用箭头功能来构成部分适用的功能（例如乐高积木）。这将允许您通过将自定义函数传递给自定义函数来创建自定义函数。让我们在下面的示例中对其进行分解： 



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

const increaseCounter = counter => add(1)(counter);
increaseCounter(5); // => 6

const pointFreeIncreaseCounter = add(1);
pointFreeIncreaseCounter(5); // => 6


这类似于将函数与默认变量一起使用，但是部分应用程序提供了更大的灵活性。



这些功能称为curried。它们是函数编程中常见的一元函数和monad序列。



功能编程



您可能已经猜到了，箭头功能的主要原因是函数式编程。它是基于简单函数组成的声明式样式范例。



函数式编程是许多开发人员（包括本文的作者）首选的OOP的替代方法。您可以主张任何风格，但是我认为函数式编程很酷，以为曾经的想法不同，您会感到不舒服。



纯函数仅依赖输入，并且始终返回某些值。它们从不更改（变异）其他变量，并且不依赖于输入值之外的外部数据。这导致引用透明，这使编程更容易。



是的，始终可以编写大量代码而无需更改单个变量。



如您所见，箭头功能旨在在输入和输出之间转换数据。他们甚至不需要返回没有花括号的简写形式。



箭头功能-结论



箭头函数使您的语法更短，从而减少了编写，读取和测试代码的时间，并简化了代码。考虑一下，因为您很可能是一名高级开发人员，并且使用这些技巧将使您更加高级并增加相关性。函数式编程真的很棒。它使您成为一名艺术家，可以用代码来完成优雅的简短功能。



实际功能示例



要了解兔子洞中隐藏的内容，我们来看一个使用开源库@ 7urtle / lambda的示例 



import {trim, upperCaseOf, lengthOf, lastLetterOf, includes, compose} from '@7urtle/lambda';

const endsWithPunctuation = input =>
  includes(lastLetterOf(input))('.?,!');

const replacePunctuationWithExclamation = input =>
  substr(lengthOf(input) - 1)(0)(input) + '!';

const addExclamationMark = input =>
  endsWithPunctuation(input)
    ? replacePunctuationWithExclamation(input)
    : input + '!';

const shout = compose(addExclamationMark, upperCaseOf, trim);

shout(" Don't forget to feed the turtle.");
// =>    !


使用箭头功能和学习功能编程非常容易上瘾。这使您可以编写较短的代码，并具有更好的性能和可重用性。



JavaScript在使用类似C的语法和功能编程功能之间的不一致方面可能会很棘手。为了帮助人们更好地理解并提供学习材料的访问权限，我开发了@ 7urtle / lambda库。您可以按照自己的节奏掌握函数式编程，而www.7urtle.com将通过为您提供所需的所有工具来帮助您学习此范例。


More articles:


All Articles