深入理解拓展运算符与剩余运算符：功能、用法与区别

作者：watermelo37

涉及领域：Vue、SpingBoot、Docker、LLM、python等

---------------------------------------------------------------------

温柔地对待温柔的人，包容的三观就是最大的温柔。

---------------------------------------------------------------------

深入理解拓展运算符与剩余运算符：功能、用法与区别

在现代JavaScript开发中，ES6引入的拓展运算符（Spread Operator）和剩余运算符（Rest Operator）让代码更加简洁和灵活。无论是数组、对象的拆分与合并，还是函数参数的处理，这两个运算符都是非常实用的工具。

一、拓展运算符（Spread Operator）

1、什么是拓展运算符？

拓展运算符（Spread Operator）由三个连续的点 ... 表示，用于将一个可迭代对象（例如数组、字符串等）展开成多个元素。拓展运算符可以应用在数组或对象上，实现数据的拆分、复制、合并等操作。

2、拓展运算符的作用

拓展运算符主要用于：

数组的复制和合并
对象的复制和合并
函数调用时传递数组作为多个参数

3、拓展运算符的使用示例

①数组展开与合并

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combinedArray = [...arr1, ...arr2]; // [1, 2, 3, 4, 5, 6]
const copiedArray = [...arr1]; // [1, 2, 3]

②对象展开与合并

const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
const combinedObject = { ...obj1, ...obj2 }; // { a: 1, b: 3, c: 4 }

③函数调用时传递数组作为参数

function sum(x, y, z) {
  return x + y + z;
}

const numbers = [1, 2, 3];
console.log(sum(...numbers)); // 6

拓展运算符解构了数组或对象中的每一个元素或属性，将其插入到当前上下文中。

二、剩余运算符（Rest Operator）

1、什么是剩余运算符？

剩余运算符（Rest Operator）也是由 ... 表示，但在函数参数或解构赋值中使用，通常用来接收不确定数量的参数或对象属性，并将其“收集”到一个数组或对象中。

解构赋值：

ES6解构赋值详解；全面掌握：JavaScript解构赋值的终极指南-CSDN博客文章浏览阅读3k次，点赞103次，收藏59次。解构赋值是一个强大且灵活的工具，它使得从数组和对象中提取数据变得更加简单和直观。通过掌握解构赋值的基本语法和实践，你可以写出更加简洁、可读性更强的代码。在实际项目中，解构赋值广泛应用于函数参数处理、变量交换、嵌套结构操作等场景，极大地提升了代码的灵活性和简洁度。_解构赋值https://opengms-watermelo.blog.csdn.net/article/details/141436850

2、剩余运算符的作用

剩余运算符主要用于：

函数参数的收集
对象或数组解构赋值时的剩余元素收集

3、剩余运算符的使用示例

①函数参数的收集

function sum(...args) {
  return args.reduce((total, num) => total + num, 0);
}

console.log(sum(1, 2, 3, 4)); // 10

②对象解构时的剩余属性

const obj = { a: 1, b: 2, c: 3 };
const { a, ...rest } = obj;
console.log(a); // 1
console.log(rest); // { b: 2, c: 3 }

③数组解构时的剩余元素

const arr = [1, 2, 3, 4];
const [first, ...others] = arr;
console.log(first); // 1
console.log(others); // [2, 3, 4]

剩余运算符将未被单独声明的剩余元素放入一个新数组或对象，便于处理不确定数量的参数或数据。

三、拓展运算符与剩余运算符的相同点

符号一致：二者都是用三个连续的点号 ... 表示。
数组或对象操作：都可以用在数组或对象上，但应用场景有所不同。
简化代码：都可以简化数组和对象的操作，代码更加清晰、简洁。

四、拓展运算符与剩余运算符的区别

用法不同：拓展运算符用于展开已有的数组或对象，而剩余运算符用于收集多个元素或属性。
位置不同：拓展运算符用于函数调用、数组或对象的右侧；剩余运算符通常用在函数参数或解构赋值的左侧。
功能不同：拓展运算符将集合分解成单个元素；剩余运算符则将多个元素合并成一个数组或对象。

五、与拓展运算符、剩余运算符相关的知识点

1、在函数参数中组合使用

在某些情况下，我们可以同时使用拓展运算符和剩余运算符，比如：

function mix(a, b, ...rest) {
  console.log(a, b); // 第一个和第二个参数
  console.log(rest); // 剩余参数
}

mix(...[1, 2, 3, 4, 5]); // 1, 2  -> [3, 4, 5]

第一个是剩余运算符，第二个是拓展运算符。

2、展开字符串

拓展运算符也可以将字符串展开成字符数组：

const str = "Hello";
const chars = [...str]; // ['H', 'e', 'l', 'l', 'o']

3、复制对象与深拷贝

使用拓展运算符可以简单地复制对象，但它是浅拷贝：

const obj = { x: 1, y: { z: 2 } };
const shallowCopy = { ...obj };
shallowCopy.y.z = 3;
console.log(obj.y.z); // 3 （因为是浅拷贝）

4、与Array.from的结合

拓展运算符对于将类数组对象转换为真正的数组非常有用，比如：

const nodeList = document.querySelectorAll("div");
const nodeArray = [...nodeList];

这里的 document.querySelectorAll("div") 方法会返回一个包含所有 <div> 元素的 NodeList。NodeList 类似于数组，因为它可以被索引并且有 length 属性，但是它并不是真正的数组，所以无法直接使用数组的方法（如 map、filter 等）。

使用拓展运算符（...）将 nodeList 展开为单个元素，然后将这些元素放入一个新数组 nodeArray 中。最终结果是 nodeArray 变成一个数组，其中包含了所有的 <div> 元素。这样处理之后，nodeArray 就是真正的数组，可以使用任何数组方法，比如 map、filter、forEach 等，这为后续操作提供了更多的便利。

// 初始html结构
<div>First Div</div>
<div>Second Div</div>
<div>Third Div</div>


// 拓展运算符处理
const nodeList = document.querySelectorAll("div");
const nodeArray = [...nodeList];

// 在nodeArray使用array特有的方法
nodeArray.forEach(div => console.log(div.textContent));


// 输出
First Div
Second Div
Third Div

六、总结

拓展运算符和剩余运算符为JavaScript提供了更灵活的数组和对象操作方法。在实际开发中，合理运用这两个运算符可以大大简化代码，提高代码的可读性和维护性。拓展运算符展开元素，而剩余运算符收集剩余元素——二者在功能上互补，是编写现代JavaScript代码的强大工具。

其他编程语言中也有类似的功能，例如 Python 的星号（*）和双星号（**）运算符，Ruby 的 splat（）运算符，Swift 的 variadic parameters，以及 Kotlin 的 vararg 关键字。这些语言的运算符在概念上与 JavaScript 的扩展运算符和剩余参数相似，但具体的语法和使用方式可能会有所不同。

只有锻炼思维才能可持续地解决问题，只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助，麻烦您点个赞支持一下，还可以收藏起来以备不时之需，有疑问和错误欢迎在评论区指出~

通过array.filter()实现数组的数据筛选、数据清洗和链式调用

极致的灵活度满足工程美学：用Vue Flow绘制一个完美流程图

el-table实现动态数据的实时排序，一篇文章讲清楚elementui的表格排序功能

在线编程实现！如何在Java后端通过DockerClient操作Docker生成python环境

干货含源码！如何用Java后端操作Docker（命令行篇）

JavaScript中闭包详解+举例，闭包的各种实践场景：高级技巧与实用指南

Dockerfile全面指南：从基础到进阶，掌握容器化构建的核心工具

MutationObserver详解+案例——深入理解 JavaScript 中的 MutationObserver

TreeSize：免费的磁盘清理与管理神器，解决C盘爆满的燃眉之急

Idea启动SpringBoot程序报错：Port 8082 was already in use；端口冲突的原理与解决方案

PDF预览：利用vue3-pdf-app实现前端PDF在线展示