Js ES6扩展运算符(spread)和剩余运算符(rest)

更新日期: 2024-01-18阅读: 608标签: 运算符

Js运算符...

Spread 和 Rest 是 ES6 Javascript 提供的两个功能,分别主要用于解构和函数参数处理。Spread 从可迭代对象(如数组、字符串或对象)中获取元素并将它们分散到各个部分。这就像将一副纸牌铺在桌子上一样。

另一方面,Rest 收集可迭代对象的剩余元素,从而更容易处理可变参数或元素。这就像游戏结束后将分散的纸牌重新聚集在一起。让我们详细了解它们。


了解扩展运算符


在上图中,你看到了这四只可爱的猫——生日猫、学习猫、睡觉猫和工作猫。现在,将它们想象成聚集成一个阵列。使用 Spread Operator — 您可以将这些猫分散成单独的猫。

这是扩展运算符的简单代码示例


JavaScript 中的展开运算符将可迭代对象(如数组、字符串或对象)的元素展开或解包为可在新数组/对象中使用的单个元素。

让我们看看展开运算符的用例。

1. 克隆阵列


在上面的代码中,克隆数组使用扩展运算符复制原始数组。现在,您有两个相同的数组。

2. 函数参数列表


在上面的代码中,...joinedArray参数允许您将任意数量的具有各种属性的附加详细信息传递给函数。

3. 数组文字


在上面的代码中,扩展运算符用于allBooks通过组合classics数组中的元素、modernBooks使用扩展运算符的数组并添加 book 来创建一个新数组。

4. 对象文字


在上面的代码中,扩展运算符updatedBook通过添加新的键值对(genre和year)来创建一个对象,同时保留原始对象的现有属性book。

5. 合并数组


在上面的代码中,扩展运算符 ( ...) 用于创建一个名为 的新数组mergedArray。array1它本质上是从和中获取所有元素array2,并将它们放入提供给您的新数组中,即 mergedArray。

扩展运算符就像数组的复印机。它有助于制作精确的副本,因此,如果您更改一个副本,另一个副本将保持不变。


了解 Rest 运算符


在上图中,你可以再次看到这四只可爱的猫——生日猫、学习猫、睡觉猫和工作猫,但这一次,它们作为单独的猫分散开来。使用 Rest Operator,我们可以将这些猫聚集并捆绑成一个舒适的猫群。

这是扩展运算符的简单代码示例


JavaScript 中的剩余运算符将可迭代对象(如数组、字符串或对象)的剩余元素聚集或收集到单个变量中。

现在,让我们探讨一下 Rest 运算符的用例。

1. 收集函数参数


在上面的代码中,该calculateTotal函数使用带有参数值的剩余运算符...values来接受并将任意数量的值存储在数组中。然后它使用循环来计算总和。

Rest 运算符简化了函数中变量参数的处理,使您的代码更干净、更灵活。

2. 解构数组


在上面的代码中,...rest参数将剩余元素收集到一个名为 的数组中,rest 从索引 2 开始。


在扩展和剩余之间选择:

Spread 和 Rest 之间的选择取决于用例。

使用 Spread 来传播可迭代对象:

  • 克隆数组、合并数组和复制对象。
  • 当你想毫不费力地传播可迭代的内容时。

使用 Rest 来收集可迭代对象:

  • 处理可变函数参数和解构数组。
  • 当您需要收集和管理数量可变的元素时。


综上所述:

Spread 和 Rest 运算符是 JavaScript 的强大功能,每个运算符都具有独特的功能。

了解何时传播和聚集可确保流畅高效的编码体验。

因此,无论您是使用 Spread 运算符克隆数组,还是使用 Rest 运算符处理变量参数,JavaScript 中的这些功能都会使您的代码变得简单且灵活。

链接: https://www.fly63.com/article/detial/12641

理解强大的 ES6 「 ... 」运算符

... 运算符, 是ES6里一个新引入的运算法, 也叫展开/收集 运算符, 我们每天都要和它打交道。这篇文章,我就带你系统的回顾下这个运算符, 介绍一些基础和进阶的用法。

详解Js加法运算符

JavaScript是一门了不起的语言。我喜欢它的灵活性:只需以你喜欢的方式做事:更改变量类型,动态的向对象添加方法或属性,对不同的变量类型使用运算符等等。然而动态是要付出代价的,开发人员需要知道怎样处理对于不同操作符的类型转换

对象扩展运算符和 rest 运算符及 keyof 和查找类型

TypeScript 2.1 增加了对 对象扩展运算和 rest 属性提案的支持,该提案在 ES2018 中标准化。可以以类型安全的方式使用 rest 和 spread 属性。对象 rest 属性假设已经定义了一个具有三个属性的简单字面量对象

JS 中使用扩展运算符的10种方法

我们可以使用展开操作符复制数组,不过要注意的是这是一个浅拷贝。这样我们就可以复制一个基本的数组,注意,它不适用于多级数组或带有日期或函数的数组。

JavaScript中强大的操作符&运算符总汇

JS 里的操作符大家每天都在使用,还有一些 ES2020、ES2021 新加的实用操作符,这些共同构成了 JS 灵活的语法生态

4个你从未听说过的强大的 JavaScript 运算符

你有没有花一个下午的时间浏览过 Mozilla 文档?如果你有,你会很清楚网上有很多关于 JavaScript 的信息。这使得人们很容易忽略一些不同寻常的 JavaScript 操作符。

ES6 扩展运算符 三点...

扩展运算符( spread )是三个点(...)。它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列。array.push(...items)和add(...numbers)这两行,都是函数的调用,它们的都使用了扩展运算符。该运算符将一个数组,变为参数序列。

JavaScript展开运算符和剩余运算符的区别

JavaScript使用符号三个点(...)作为剩余运算符和展开运算符,不过这两个运算符是有区别的。最主要的区别就是,剩余运算符将用户提供的某些特定值的其余部分放入JavaScript数组中

JavaScript 代码的一个新运算符:管道运算符 |>

首先,如果是嵌套写法的话,简单的嵌套还好,但是当嵌套变得很深的时候就有点难以阅读了。嵌套的执行流程是从右到左移动的,而不是我们正常阅读代码从左到右的方向

JavaScript运算符单竖杠|

很多人都对双竖杠||非常熟悉,因为这个经常在项目中经常会用到。单竖杠|,却很少在项目开发中使用到。|是位运算符,||是逻辑运算符。平常,经常使用以下这个几个方法对数字进行处理。

点击更多...

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