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

函数是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

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

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

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

网站题目：JavaScript整洁代码-函数参数和副作用
转载来于：http://www.stwzsj.com/qtweb/news27/11827.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联