(...)这三个点在JavaScript中意味着什么?

时间: 2018-08-29阅读: 4604标签: js知识

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


原文链接: oprea.rocks  
翻译来源:https://segmentfault.com/a/1190000016168214
站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/1038

关闭

JavaScript中公有、私有、静态、受保护的属性和方法

在开发中,我们需要限制某些属性和方法的暴露程度,使得它们不能通过对象实例本身被访问、修改或调用。要了解js面向对象,就必需先了解js中什么是公有、私有、静态、受保护。

js中“=”,“==”,“===”的使用和深入理解

Js支持“=”、“==”和“===”的运算符,我们需要理解这些 运算符的区别 ,并在开发中小心使用。它们分别含义是:= 为对象赋值 ,== 表示两个对象toString值相等,=== 表示两个对象类型相同且值相等

js中async与defer

async 异步加载,立即下载,不应妨碍页面其他操作,标记为 async 的异步脚本并不保证按照指定的先后顺序执行,用async很容易出错,async 是无序执行,自身加载完就会执行;

JavaScript中的魔幻代理Proxy

什么是 JavaScript 代理?通过 Proxy 我们可以拦截并改变一个对象的几乎所有的根本操作,包括但不限于属性查找、赋值、枚举、函数调用等等。利用 Proxy,我们可以拦截并不存在的属性的读取

base91 for javascript

原理和 base64 是一样的,ASCII 共有94个可打印字符,base64 使用了其中 64 个,base91 使用了 91 个。

JavaScript的声明提升

在JavaScript中,当出现var声明的变量或者function声明的函数时,会将该声明提到当前作用域的前面执行,这便是声明提升。值得注意的是,只是提升了声明操作,赋值还是在原来的位置进行。声明提升包括变量声明提升和函数声明提升。

10个JavaScript难点:能够读懂这篇博客的JavaScript开发者,运气不会太差…

10个JavaScript难点包括:立即执行函数,闭包,使用闭包定义私有变量,prototype,模块化,变量提升,柯里化,apply, call与bind方法,Memoization,函数重载

理解 JavaScript 执行栈

所有的 JS 代码在运行时都是在执行上下文中进行的。执行上下文是一个抽象的概念,JS 中有三种执行上下文:全局执行上下文,函数执行上下文,Eval 执行上下文。通常,我们的代码中都不止一个上下文,那这些上下文的执行顺序应该是怎样的?

打造自己的JavaScript武器库

作为战斗在业务一线的前端,要想少加班,就要想办法提高工作效率。这里提一个小点,我们在业务开发过程中,经常会重复用到日期格式化、url参数转对象、浏览器类型判断、节流函数等一类函数,这些工具类函数

前端与编译原理——用JS写一个JS解释器

说起编译原理,印象往往只停留在本科时那些枯燥的课程和晦涩的概念。作为前端开发者,编译原理似乎离我们很远,对它的理解很可能仅仅局限于“抽象语法树(AST)”。但这仅仅是个开头而已。编译原理的使用,甚至能让我们利用JS直接写一个能运行JS代码的解释器。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!