JavaScript中如何使用Spread运算符（…）？

朱雀 2020-07-01 21:07 556阅读 0赞

# JavaScript中如何使用Spread运算符（...）？

![](/images/1593637560935.png)

**ES6**中引入了延展操作运算符（`...`）。

延展操作运算符将可迭代的对象扩展为其单独的元素，可迭代对象是可以使用 `for` 循环进行循环的任何对象。

可迭代的示例：Array，String，Map，Set，DOM节点。

## 1.在log中使用延展操作运算符

你可以在 `console.log` 中对可迭代对象使用延展操作操作符

![](/images/1593637600471.png)

## 2.用延展操作运算符复制数组

![](/images/1593637620742.png)

复制对象

```
let user = {name : "John", age : 20 }
let userCopy = {...user}
```

> 延展操作运算符不执行深度复制。

## 3.延展操作运算符合并

![](/images/1593637638839.png)

合并对象

合并对象时，如果已经存在某个键，则将其替换为具有相同键的最后一个对象。

```
let user1 = {name : "John", age : 20 };
let user2 = {name : "Ram", salary: '20K' };
let userCopy = {...user1, ...user2};
userCopy ; // {name : "Ram", age :20 , salary : '20K'};
```

## 4.延展操作运算符作为参数传递

```
function sum(a, b) {
   return a+b;
}
let num = [1,2];
sum(...num); // 3
```

与 `math` 函数一起使用

```
let num = [5,9,3,5,7];
Math.min(...num);
Math.max(...num);
```

## 5.延展操作运算符在解构变量中

![](/images/1593637653785.png)

解构对象

```
let user = {name : "Ram", age: 20, salary: '20K', job : "Tester" };
let { name, age, ...details } = user;
name; // Ram
age; // 20
details; // {salary: '20K', job : 'Tester'};
```

## 6.将NodeList对象转换为数组

NodeList类似于数组，但是没有 `Array` 的所有方法，例如 `forEach`，`map`，`filter` 等。

```
let nodeList = document.querySelectorAll('.class')
var nodeArray = [...nodeList]
```

## 7.将字符串转换为字符

字符串也是可迭代的对象，因此我们也可以使用 `...` 来字符串。

```
let name = "Ram";
let chars = [...name]; // ["R", "a", "m"]
```

## 8.从数组中删除重复项

```
let num = [1, 3, 1, 3, 3, 1];
let uniqueNum = [...new Set(num)];
uniqueNum; //[ 1, 3 ]
```

发表评论取消回复

表情：

评论列表（有 0 条评论，556人围观）

还没有评论，来说两句吧...

相关阅读

相关告别 Spread 运算符：使用默认 Composer

该库将现有对象中的空字符串/数组/对象、null 或未定义值替换为已定义的默认值，这有助于简化编程逻辑并减少设置默认值所需的代码量。该库是轻量级的，提供了比扩展运算符和方...

傷城~/ 2024年05月02日 20:09/ 0 赞/ 29 阅读

相关 JavaScript中的运算符

运算符：程序中模拟人的思维运算或判断的符号程序：让计算机按照人的想法去执行任务运算符的分类： ![Center][] 运算符的优先级： !

秒速五厘米/ 2022年06月16日 13:15/ 0 赞/ 166 阅读

相关 JavaScript中字符串运算符的使用

字符串运算符是用于两个字符串型数据之间的运算符，它的作用是将两个字符串连接起来。在JavaScript中，可以使用+和+=运算符对两个字符串进行连接运算。其中，+运算符用于连接

ゝ一世哀愁。/ 2022年06月03日 07:06/ 0 赞/ 194 阅读

相关 JavaScript中赋值运算符的使用

JavaScript中的赋值运算可以分为简单赋值运算和复合赋值运算。简单赋值运算是将赋值运算符（=）右边表达式的值保存到左边的变量中；而复合赋值运算混合了其他操作（例如算术运算

向右看齐/ 2022年06月02日 09:48/ 0 赞/ 172 阅读

相关 JavaScript中比较运算符的使用

比较运算符的基本操作过程是：首先对操作数进行比较，这个操作数可以是数字也可以是字符串，然后返回一个布尔值true或false。在JavaScript中常用的比较运算符如下表

偏执的太偏执、/ 2022年06月02日 04:53/ 0 赞/ 172 阅读

相关 JavaScript中逻辑运算符的使用

逻辑运算符用于对一个或多个布尔值进行逻辑运算。在JavaScript中有3个逻辑运算符，如下表所示。 <table> <tbody> <tr> <td st

╰半橙微兮°/ 2022年06月01日 07:38/ 0 赞/ 165 阅读

相关 JavaScript中位运算符

参考文章： [https://www.cnblogs.com/xiaohuochai/p/5668004.html][https_www.cnblogs.com_xiaoh

深藏阁楼爱情的钟/ 2022年01月20日 15:19/ 0 赞/ 185 阅读

相关 javascript中&&运算符和||运算符的使用

前言我们在前端开发中，&&运算符和||运算符是使用率和频繁度比较高的，&&运算符和||运算符的功能特别强大，想成为一名优秀的前端工程师，&&运算符和||运算符是必不可少

电玩女神/ 2022年01月08日 02:17/ 0 赞/ 254 阅读

相关 javascript 扩展运算符(spread)三个点(...)的作用及用法

在javascript中“...”的作用：将一个数组转为用逗号分隔的参数序列。 //该运算符主要用于函数调用。<br>function push(array, ...

灰太狼/ 2021年07月26日 22:20/ 0 赞/ 348 阅读

相关 JavaScript中如何使用Spread运算符（…）？

JavaScript中如何使用Spread运算符（…）？ES6中引入了延展操作运算符（`...`）。延展操作运算符将可迭代的对象扩展为其单独的元素，可迭代对象是可以使用...

朱雀/ 2020年07月01日 21:07/ 0 赞/ 557 阅读