当前位置: 首页 > Web前端 > HTML

(...)这三个点在JavaScript中是什么意思?

时间:2023-04-02 19:08:30 HTML

这篇文章的标题来自我在Quora上被要求回答的一个问题。下面是我试图解释这三个点在JavaScript中的作用。希望这能为将来遇到同样问题的任何人消除围绕这个概念的迷雾。数组/对象传播运算符假设您有以下对象:constadrian={fullName:'AdrianOprea',occupation:'Softwaredeveloper',age:31,website:'https://oprea.rocks'};假设您要创建一个具有不同名称和网站但具有相同职业和年龄的新对象(人)。你可以通过只指定你需要的属性来做到这一点,然后使用传播运算符来完成剩下的,就像这样:constbill={...adrian,fullName:'BillGates',website:'https://microsoft.com'};上面的代码所做的是遍历adrian对象并获取其所有属性,然后用我们传递的属性覆盖现有属性。将此传播视为一个接一个地提取所有单独的属性并将它们传递给新对象。在这种情况下,由于我们在展开运算符触发后指定了fullName和website属性,JavaScript引擎知道我们要从原始对象覆盖这些属性的原始值。除了传播键和值之外,运算符不传播索引和值。与对象传播不同,你不会有重复的属性,因为这就是JavaScript对象的工作方式(你不能有一个具有两个fullName属性的对象),如果你打算实现类似的东西,那么你最终会得到数组是我们对象实例的重复值。这意味着下面的代码将导致您拥有一个包含重复元素的数组。constnumbers1=[1,2,3,4,5];constnumbers2=[...numbers1,1,2,6,7,8];//这将是[1,2,3,4,5,1,2,6,7,8]将其视为Array.prototype.concat的替代品。rest运算符在使用函数的参数时,无论是完全替换参数,还是连同函数的参数一起替换,这三个Dot也称为rest运算符。像这样使用时,剩余运算符使开发人员能够创建可以接受无限数量参数的函数,也称为变量元数或可变参数函数。这是此功能的最简单示例。假设您要创建一个函数来计算其所有参数的总和。请注意,它不是两个、三个或四个数字的总和,而是函数作为参数接收的所有数字的总和。这有一个简单的实现,使用rest运算符:functionsum(...numbers){returnnumbers.reduce((accumulator,current)=>{returnaccumulator+=current});};sum(1,2)//3sum(1,2,3,4,5)//15最简单的解释是,rest运算符将函数接收到的参数转储到一个实数数组中,以供稍后使用。您可能认为您可以通过要求用户传递一组数字来做到这一点。这在技术上是可行的,但用户体验非常糟糕,因为用户希望使用普通数字而不是数字列表来调用sum函数。您可能还认为可以使用参数数组。这也是对的,但要注意,参数不是真正的数组,而是类数组对象(具有长度属性的对象)。对于我们的sum函数的第一次调用,在前面的例子中,它实际上是这样的:{'0':1,'1':2,'length':2}来操作这个对象,并在上使用数组方法它,比如reduce,在我之前的例子中,你必须做Array.prototype.slice.call(arguments,0)。这是很差的性能,在速度和内存使用方面也不优雅。这样的代码很容易让你的初级同事感到困惑。这应该是您在JavaScript中使用rest/spread运算符所需了解的所有内容。