深入理解拓展运算符与剩余运算符：功能、用法与区别
作者：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）也是由 ... 表示，但在函数参数或解构赋值中使用，通常用来接收不确定数量的参数或对象属性，并将其“收集”到一个数组或对象中。
解构赋值：
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 的扩展运算符和剩余参数相似，但具体的语法和使用方式可能会有所不同。
只有锻炼思维才能可持续地解决问题，只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助，麻烦您点个赞支持一下，还可以收藏起来以备不时之需，有疑问和错误欢迎在评论区指出~
其他热门文章，请关注：
- 点赞
- 收藏
- 关注作者
评论（0）