前言
今天，我们来介绍的是一个运算符... ，它的含义可不是聊天中女神对你的敷衍。在 JavaScript 中，三个点 ... 称为展开运算符（spread operator）或剩余参数（rest parameters），具体含义取决于它的使用场景。
场景一：展开运算符：让数据“散开”重生
1. 在数组中使用
创建数组副本：你可以使用展开运算符来创建一个数组的浅拷贝。
const arr = [1, 2, 3];const copy = [...arr];
合并数组：通过展开多个数组，你可以轻松地合并它们。
const arr1 = [1, 2, 3];const arr2 = [4, 5, 6];const combined = [...arr1, ...arr2];
const numbers = [1, 2, 3];const moreNumbers = [...numbers, 4, 5];
：当你有一个数组，并且希望将其元素作为单独的参数传递给函数时，可以使用展开运算符。function sum(x, y, z) { return x + y + z;}const args = [1, 2, 3];console.log(sum(...args));
2. 在字符串中使用
将字符串转换为字符数组：可以直接将字符串展开成字符数组。
const str = 'hello';const chars = [...str]; // ['h', 'e', 'l', 'l', 'o']
3. 处理迭代对象
Set 和 Map：对于 Set 或者 Map 这样的集合类型，可以使用展开运算符来创建副本或者与其他集合进行合并。
const set1 = new Set([1, 2, 3]);const set2 = new Set([...set1, 4, 5]); // 创建一个包含新元素的副本const map1 = new Map([['key1', 'value1']]);const map2 = new Map([...map1, ['key2', 'value2']]); // 合并两个 Map
场景二：剩余运算符
这个功能在函数定义中非常有用，特别是当你不知道或不想限制传递给函数的参数数量时。剩余参数使用三个点 ... 来表示，并且总是放在参数列表的最后。
1. 与普通参数结合使用
你可以在函数定义中同时使用固定参数和剩余参数，这使得你的函数更加灵活。
function logFirstAndRest(first, ...rest) { console.log('First:', first); console.log('Rest:', rest);}logFirstAndRest('hello', 'world', '!');// First: hello// Rest: ['world', '!']
2. 创建可变参数函数
如果你有一个函数，它的参数数量可能变化，那么你可以使用剩余参数来简化代码。
function sum(...numbers) { return numbers.reduce((total, num) => total + num, 0);}console.log(sum(1, 2, 3)); console.log(sum(1, 2, 3, 4, 5)); // 输出: 15
3. 处理回调函数中的参数
当编写接受回调函数作为参数的高阶函数时，剩余参数可以帮助你处理那些可能会传递给回调的任意数量的参数。
function higherOrderFunction(callback, ...args) { callback(...args);}higherOrderFunction((a, b, c) => console.log(a, b, c), 1, 2, 3);
1.参数传入： 将(a, b, c) => console.log(a, b, c)匿名函数作为参数传给callback函数，剩余的1 2 3，通过剩余运算符都传给args数组，最后args又作为参数传给callback
2.结果： 输出 1 2 3
4. 解构赋值
解构赋值（Destructuring Assignment）是 JavaScript 中用于从数组或对象中提取数据并直接赋值给变量的语法糖。它简化了从复杂的数据结构中获取所需部分的操作，使得代码更加简洁和易读。
const [coach,...players]=["米卢","李铁","孙继科","范志毅"];// ... rest运算符 剩余运算符console.log(coach);//米卢console.log(players);//[ '李铁', '孙继科', '范志毅' ]
注意事项
- 只能有一个剩余参数：在一个函数的参数列表中只能有一个剩余参数。
- 不能与解构赋值混淆：虽然剩余参数和解构赋值都可以用三个点
... 表示，但是它们的用法不同。剩余参数用于函数参数列表中，而解构赋值中的展开运算符用于对象或数组的复制、合并等操作。 - 性能考虑：对于非常大的参数列表，使用剩余参数可能会带来性能上的开销，因为它涉及到创建新的数组。
总结：三点魔法的力量
... 运算符就像是一个魔法师手中的万能钥匙，它既能让你的数据“散开”重生，又能帮你收集所有的宝藏。无论是处理数组、对还是函数参数，... 都能为你提供简洁而强大的解决方案。掌握这把钥匙，你就能更加灵活地编写代码，使你的 JavaScript 程序既优雅又高效。所以，下次当你看到三个点的时候，记得这是开启编程魔法世界的秘密符号哦！
阅读原文：原文链接
该文章在 2024/12/30 16:05:13 编辑过
400 186 1886
