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

Travis 发布于2019-08-23 11:31 / 707人阅读

摘要：下面是我试图解释中三个点的作用。可以将这种传播视为逐个提取所有单个属性并将它们传递给新对象。这意味着下面的代码将导致您拥有包含重复元素的数组。这应该是您需要了解的所有内容，以便在中使用运算符。

这篇文章的标题来自我在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运算符。

GPU云服务器云服务器 cdn加速意味什么 java中三个3e 阿里云服务器中有三个网站 javascript中

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97089.html

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

摘要：下面是我试图解释中三个点的作用。可以将这种传播视为逐个提取所有单个属性并将它们传递给新对象。这意味着下面的代码将导致您拥有包含重复元素的数组。这应该是您需要了解的所有内容，以便在中使用运算符。这篇文章的标题来自我在Quora上被要求回答的一个问题。下面是我试图解释JavaScript中三个点的作用。希望这对于将来有相同问题的人来说可以消除围绕这个概念的迷雾。数组/对象扩展运算符假...

Faremax 2019-08-29 16:31 评论0 收藏0
（...）这三个点在JavaScript中意味着什么？

摘要：下面是我试图解释中三个点的作用。可以将这种传播视为逐个提取所有单个属性并将它们传递给新对象。这意味着下面的代码将导致您拥有包含重复元素的数组。这应该是您需要了解的所有内容，以便在中使用运算符。这篇文章的标题来自我在Quora上被要求回答的一个问题。下面是我试图解释JavaScript中三个点的作用。希望这对于将来有相同问题的人来说可以消除围绕这个概念的迷雾。数组/对象扩展运算符假...

fjcgreat 2019-08-02 16:31 评论0 收藏0
JavaScript--变量与基本数据类型

摘要：中变量可能包含两种不同的数据类型的值基本类型和引用类型。本文主要介绍基本数据类型及其特点。操作符在介绍基本类型值之前，先说下操作符，操作符会返回数据类型的字符串表示。所有未初始化的变量均会保存该值。前言JavaScript中的变量为松散类型，所谓松散类型就是指当一个变量被申明出来就可以保存任意类型的值，就是不像SQL一样申明某个键值为int就只能保存整型数值，申明varchar只能保...

XanaHopper 2019-08-23 16:14 评论0 收藏0
H5中优化碰撞检测

摘要：微信端口的小游戏相信大家已经做了很多类似于碰撞检测这种也是数不胜数因为障碍物和主角都是图片也就意味着碰撞检测实际上是两个矩形直接是否有交叉的判断包括这样的框架也是这样子做的当然这种方法也无可厚非然而唯一的问题是如果素材障碍物和主角并不能铺满微信端口的小游戏相信大家已经做了很多,类似于碰撞检测这种也是数不胜数.因为障碍物和主角都是图片,也就意味着碰撞检测实际上是两个矩形直接是否有交叉...

苏丹 2019-08-22 11:05 评论0 收藏0