（...）这三个点在JavaScript中意味着什么？

2023年2月10日 163次阅读 来源: _小生_

这篇文章的题目来自我在Quora上被要求回复的一个题目。下面是我试图诠释JavaScript中三个点的作用。愿望这关于将来有雷同题目的人来讲可以消弭缭绕这个观点的迷雾。

数组/对象扩大运算符

假定您有以下对象：

const adrian = {
  fullName: 'Adrian Oprea',
  occupation: 'Software developer',
  age: 31,
  website: 'https://oprea.rocks'
};

假定您要建立一个具有差别称号和网站但具有雷同职业和岁数的新对象（人）。

您可以经由过程仅指定所需的属性来实行此操纵，并运用扩大运算符来完成其他操纵，以下所示：

const bill = {
  ...adrian,
  fullName: 'Bill Gates',
 website: 'https://microsoft.com'
};

上面代码的作用是遍及adrian对象并猎取其一切属性，然后用我们通报的属性掩盖现有属性。可以将这类流传视为逐一提取一切单个属性并将它们通报给新对象。

在这类情况下，由于我们在扩大运算符启动后指定了fullName和网站属性，因而JavaScript引擎晓得我们要掩盖来自原始对象的那些属性的原始值。

除了流传键和值以外，运算符不会流传索引(index)和值。与对象流传差别的是，你不会有反复的属性，由于这是JavaScript对象的工作方式（你不能具有一个具有两个fullName属性的对象），假如你设计完成相似的东西，那末关于数组你终究可以会有反复的值到我们的对象示例。

这意味着下面的代码将致使您具有包括反复元素的数组。

const numbers1 = [1, 2, 3, 4, 5];
const numbers2 = [ ...numbers1, 1, 2, 6,7,8]; // this will be [1, 2, 3, 4, 5, 1, 2, 6, 7, 8]

可以把它设想成Array.prototype.concat的替代品.

rest运算符

运用函数的参数时，无论是完整替代参数照样与函数的参数一同替代参数，这三个点也称为rest运算符。

当像如许运用它时，rest操纵符使开发人员可以建立可以猎取无穷数目的参数的函数，也称为变量arity或可变函数。

这是这类功用最简朴的例子。假定您要建立一个盘算其一切参数之和的函数。请注意，它不是两个，三个或四个数字的总和，而是函数作为参数吸收的一切数字的总和。

这有一个简朴的完成，运用rest运算符：

function sum(...numbers) {
    return numbers.reduce((accumulator, current) => {
        return accumulator += current
    });
};

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

最简朴的诠释是，rest运算符吸收函数吸收的参数并将它们转储到今后可以运用的实数数组中。

你可以会以为，你可以经由过程要求用户通报一组数字来完成此操纵。这在技术上是可行的，然则如许的用户体验很差，由于用户愿望用一般数字而不是数字列表来挪用sum函数。

您可以还以为可以运用arguments数组。这也是现实，但要警惕，参数不是真正的数组，而是相似数组的对象（具有length属性的对象）。关于我们的sum函数的第一次挪用，在前面的例子中，它实际上看起来像如许：

{
  '0': 1,
  '1': 2,
  'length': 2
}

要操纵此对象并在其上运用数组要领，比方reduce，从我之前的示例中，您必需实行Array.prototype.slice.call（arguments，0）操纵。就速率和内存运用而言，这表现不佳并且不文雅。如许的代码，轻易让你的低级程度的同事觉得疑心。

这应该是您须要相识的一切内容，以便在JavaScript中运用rest / spread运算符。

    原文作者：_小生_
    原文地址: https://segmentfault.com/a/1190000016168214
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞