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

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

​

作者：watermelo7 涉及领域：Vue、SpingBoot、Docker、LLM、python等undefined 温柔地对待温柔的人，包容的三观就是最大的温柔。undefined

深入理解拓展运算符与剩余运算符：功能、用法与区别代码语言：txt复制

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

一、拓展运算符（Spread Operator）

1、什么是拓展运算符？

代码语言：txt复制

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

2、拓展运算符的作用

拓展运算符主要用于：

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

、拓展运算符的使用示例

①数组展开与合并

代码语言：javascript代码运行次数：0运行复制

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

②对象展开与合并

代码语言：javascript代码运行次数：0运行复制

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

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

代码语言：javascript代码运行次数：0运行复制

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

ct numbers = [1, 2, ];
cole.log(sum(...numbers)); // 6

代码语言：txt复制

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

二、剩余运算符（Rest Operator）

1、什么是剩余运算符？

代码语言：txt复制

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

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

2、剩余运算符的作用

剩余运算符主要用于：

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

、剩余运算符的使用示例

①函数参数的收集

代码语言：javascript代码运行次数：0运行复制

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

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

②对象解构时的剩余属性

代码语言：javascript代码运行次数：0运行复制

ct obj = { a: 1, b: 2, c:  };
ct { a, ...rest } = obj;
cole.log(a); // 1
cole.log(rest); // { b: 2, c:  }

③数组解构时的剩余元素

代码语言：javascript代码运行次数：0运行复制

ct arr = [1, 2, , 4];
ct [first, ...others] = arr;
cole.log(first); // 1
cole.log(others); // [2, , 4]

代码语言：txt复制

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

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

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

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

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

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

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

代码语言：txt复制

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

代码语言：javascript代码运行次数：0运行复制

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

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

代码语言：txt复制

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

2、展开字符串

代码语言：txt复制

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

代码语言：javascript代码运行次数：0运行复制

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

、复制对象与深拷贝

代码语言：txt复制

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

代码语言：javascript代码运行次数：0运行复制

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

4、与Array.from的结合

代码语言：txt复制

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

代码语言：javascript代码运行次数：0运行复制

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

代码语言：txt复制

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

代码语言：txt复制

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

代码语言：javascript代码运行次数：0运行复制

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


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

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


// 输出
First Div
Second Div
Third Div

六、总结

代码语言：txt复制

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

代码语言：txt复制

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

代码语言：txt复制

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

​

本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。 原始发表：2025-01-22，如有侵权请联系 cloudcommunity@tencent 删除前往查看工具数据数组字符串对象