JavaScript整洁代码-函数参数和副作用

全文共2375字，预计学习时长7分钟

 

来源：Pexels

 

函数是JavaScript程序的重要组成部分，用于将代码分成可重用的块。因此，为了拥有整洁的JavaScript代码，我们需要具有易于理解的函数。

 

本文将介绍优质函数的更多属性，包括标志参数，二元和三元函数以及副作用。

​

标志参数

 

布尔参数应谨慎使用。它使函数签名更加复杂，并告诉我们函数不仅做一件事（具有多个路径）。

 

二元函数

 

二元函数比采用较少参数的函数更难理解。但有些时候使用二元函数是有道理的。例如，如果有一个保存笛卡尔坐标的对象，那么它应该有2个参数。

 

例如，可以创建一个带有构造函数的类，该构造函数有2个参数，如下所示：

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
}const point = new Point(1, 2);

 

用其他方式定义它几乎是不可能的

 

但是，我们必须要意识到，与使用较少参数的函数相比，二元函数需要更多的时间和精力。

 

三元函数

 

具有3个参数的函数要花费大量时间和精力才能理解具有2个参数的函数。

 

如果存在2个或更少的参数，则有更多的参数组合可供考虑。

 

将参数合并为对象

 

如果一个函数含有多个参数，应该考虑将它们合并为对象。

 

如果参数之间有关联，则更应该这样做。例如，以下函数含有许多参数：

const describeFruit = (color,name, size, price, numSeeds, type) => {
    return `${fruitName} is ${fruitColor}.It's ${fruitSize}. It costs ${price}. It has ${numSeeds}. The type if ${type}`;
}

 

6个参数可能太多，可以通过传入一个对象来清理它:

const describeFruit = (fruit)=> {
  return `${fruit.name} is${fruit.color}. It's ${fruit.size}. It costs ${fruit.price}. It has${fruit.numSeeds}. The type if ${fruit.type}`;
}

 

如我们所见，它更加整洁，且无需担心大量参数的传递。

 

由于函数较为短小，因此也更适合屏幕显示。

 

5个参数可能是一个函数应该包含的最大值。

 

来源：Pexels

 

动词和关键词

 

将动词和关键字包含在函数名称中不失为一个好主意，因为它们会执行某些操作，这意味着名称中的动词是合理的。

 

另外，我们需要知道执行操作的对象。这意味着必须添加一些关键字才能做到这一点。

 

例如，符合这一点的优质函数定义类似于:

const copyArray = (array) =>[...array];

 

copyArray 名称让我们知道函数复制了一个数组。

 

它还让我们知道要传递给函数的内容，这显然是一个数组。

 

无副作用

 

副作用是函数中的代码会对函数外部的内容进行更改。

 

这是很糟糕的，因为它会对函数之外的内容进行隐藏更改。

 

我们应该尽可能避免这种情况，因为这会造成一些出乎意料的事情，并且要花更多的时间进行测试，因为除了接受参数，执行操作并返回结果外，它还对必须考虑的函数之外的内容进行了更改。

 

这意味着我们必须测试函数返回结果之外的内容。

 

例如，如果有:

let numFruits = 1;

const addFruit = () => {

  numFruits++;

}const removeFruit = () => {

  numFruits--;

}

 

那么我们有2个具有副作用的函数，因为它们都更改了各自函数外部的 numFruits变量。

 

编写这些函数的更好方法是将它们编写为纯函数。纯函数是在传入相同参数的情况下返回相同内容的函数。而且，它没有副作用。

 

因此，纯函数更易于测试，并且它们的行为也是可以预测的。

 

重写上面的代码，如下所示:

let numFruits = 1;

const addFruit = (numberOfFruits) => numberOfFruits + 1;

const removeFruit = (numberOfFruits) => numberOfFruits - 1;numFruits = addFruit(numFruits);

numFruits = removeFruit(numFruits);

 

现在，有2个函数来接收numFruits 参数，并分别返回一个更大或更小的数字。

 

然后可以使用它们来更改函数外部的numFruits变量。

 

如我们所见，它们对 numFruits 不执行任何操作，而是分别返回numberOfFruits参数加1或减1。

 

如果为它们编写测试，则可以通过传入输入和检查输出是否是我们想要的内容来轻松测试它们。这比将副作用赋予可能适用于测试代码的变量要好得多。

 

来源：Pexels

 

标志参数应最小化。他们告诉我们，该函数不仅完成一件事情，而且是函数签名中的另一个参数。

 

使用较少参数的函数要优于使用较多参数的函数。如果需要很多参数，请考虑将它们合并成一个对象。

 

最后，若条件允许，应尽量避免副作用。具有副作用的函数会执行隐藏操作，并且很难对它进行测试。纯函数不会产生副作用，因此更具可测试性和可预测性。

 

留言 点赞 关注

我们一起分享AI学习与发展的干货
欢迎关注全平台AI垂类自媒体 “读芯术”

（添加小编微信：dxsxbb，加入读者圈，一起讨论最新鲜的人工智能科技哦～）