梦幻科技

首页 开发教程正文

网站建设教程JavaScript中的三个点(…)是什么意思?(下)

梦幻小猫3周前34

  续写网站建设教程JavaScript中的三个点(…)是什么意思?(上)全文分为上下两篇文章。

  这是此类功能的最简单示例。假设您要创建一个函数来计算其所有参数的总和。请注意,它不是两个,三个或四个数字的总和,而是函数将作为参数接收的所有数字的总和。

  这是一个朴素的实现,使用rest运算符

  function sum(…numbers){

  returnnumbers.reduce((accumulator,current)=> {

  return accumulator += current;

  });

  };

  sum(1,2)// 3

  sum(1,2,3,4,5)// 15

  最简单的解释是,rest运算符采用函数接收的参数并将其转储到实际数组中,以备后用。

pexels-photo-374559.jpeg

  您可能会争辩说,可以通过请求用户传递数字数组来做到这一点。从技术上讲,这对于您的API来说是可行的,但UX却很差,因为用户希望使用纯数字而不是数字列表来调用求和函数。

  您可能还争辩说可以使用该arguments数组。这也是事实,但要小心,arguments它不是真正的数组,而是类似数组的对象(具有length属性的对象)。在上一个示例中,对于我们的sum函数的第一次调用,实际上看起来像这样:

  {

  '0':1,

  '1':2,

  'length':2

  }

  要操纵该对象并对其使用数组方法,例如在我之前的示例中,它需要减少操作Array.prototype.slice.call(arguments)。

  这是先前使用编写的函数Array#slice:

  function sum(){

  const args =Array.prototype.slice.call(arguments);

  returnargs.reduce((accumulator,current)=> {

  return accumulator += current;

  });

  }

  sum(1,2)// 3

  sum(1,2,3,4,5)// 15

pexels-photo-2061168.jpeg

  此代码的工作方式与传播版本相似,但有一些主要区别。对于初学者,无法进行V8编译器优化。将对arguments像传递给大多数函数会由于混淆而触发泄漏。参数是一个对象,将通过引用传递,因此V8无法确定arguments对象内部元素的类型和形状,因为它们可以被传递给它们的函数覆盖。

  最大的问题是我曾经自己做过。编写起来是如此简单。更安全的版本涉及就地创建数组,这不太优雅。

  底线是上面的代码只是smartass代码,容易使您的下级同事感到困惑。不要这样您无需多找Mozilla开发人员网络来寻找选项。

  这应该是您使用JavaScript中的rest / spread运算符要具备的生产力所


上一篇:网站建设教程JavaScript中的三个点(…)是什么意思?(上)

下一篇:网站建设教程在45分钟内创建目标页面

服务热线

13751415268

qrcode

扫一扫二维码,微信咨询