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

栏目: IT技术 · 发布时间: 4年前

内容简介:函数是JavaScript程序的重要组成部分,用于将代码分成可重用的块。因此,为了拥有整洁的JavaScript代码,我们需要具有易于理解的函数。本文将介绍优质函数的更多属性,包括标志参数,二元和三元函数以及副作用。

函数是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个参数可能是一个函数应该包含的最大值。

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

来源: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。

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

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

来源:Pexels

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

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

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


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

运营前线 2

运营前线 2

兰军 等著 / 机械工业出版社 / 2017-4 / 69.00

“运营前线”是一个系列,目前已经出版2部,与“产品前线”一样,该系列书也由资深的产品和运营专家兰军(Blues)领衔策划和写作,旨在梳理和总结国内一线互联网公司的运营方法和技巧,让所有产品人和运营人都有机会了解和学习这些大的互联网公司是如何做运营的。 这2部作品汇集了来自腾讯、阿里、百度、360、迅雷、YY、小米、爱奇艺、乐视等数十家大型互联网公司的一线运营专家的技巧和方法论。共包含9大运营......一起来看看 《运营前线 2》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

MD5 加密
MD5 加密

MD5 加密工具

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具