在JS中如何巧妙运用三个点改变你的代码🚀🚀

前言

今天，我们来介绍的是一个运算符... ，它的含义可不是聊天中，女神对你的敷衍。在 JavaScript 中，三个点 ... 称为展开运算符（spread operator）或剩余参数（rest parameters），具体含义取决于它的使用场景。

场景一：展开运算符：让数据"散开"重生

1. 在数组中使用

创建数组副本：你可以使用展开运算符来创建一个数组的浅拷贝。
js 复制代码
```
const arr = [1, 2, 3];
const copy = [...arr]; // 浅拷贝原数组
```

合并数组：通过展开多个数组，你可以轻松地合并它们。

js 复制代码

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combined = [...arr1, ...arr2]; // 结果是 [1, 2, 3, 4, 5, 6]

添加新元素：你可以在已有数组的基础上添加新元素。

js 复制代码

const numbers = [1, 2, 3];
const moreNumbers = [...numbers, 4, 5]; // 结果是 [1, 2, 3, 4, 5]

函数调用时展开参数：当你有一个数组，并且希望将其元素作为单独的参数传递给函数时，可以使用展开运算符。
js 复制代码
```
function sum(x, y, z) {
  return x + y + z;
}

const args = [1, 2, 3];
console.log(sum(...args)); // 输出 6
```

2. 在字符串中使用

将字符串转换为字符数组：可以直接将字符串展开成字符数组。
js 复制代码
```
const str = 'hello';
const chars = [...str]; // ['h', 'e', 'l', 'l', 'o']
```

3. 处理迭代对象

Set 和 Map：对于 Set 或者 Map 这样的集合类型，可以使用展开运算符来创建副本或者与其他集合进行合并。

js 复制代码

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. 与普通参数结合使用

你可以在函数定义中同时使用固定参数和剩余参数，这使得你的函数更加灵活。

js 复制代码

function logFirstAndRest(first, ...rest) {
  console.log('First:', first);
  console.log('Rest:', rest);
}

logFirstAndRest('hello', 'world', '!');
// 输出:
// First: hello
// Rest: ['world', '!']

2. 创建可变参数函数

如果你有一个函数，它的参数数量可能变化，那么你可以使用剩余参数来简化代码。

js 复制代码

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

console.log(sum(1, 2, 3)); // 输出: 6
console.log(sum(1, 2, 3, 4, 5)); // 输出: 15

3. 处理回调函数中的参数

当编写接受回调函数作为参数的高阶函数时，剩余参数可以帮助你处理那些可能会传递给回调的任意数量的参数。

js 复制代码

function higherOrderFunction(callback, ...args) {
  callback(...args);
}

higherOrderFunction((a, b, c) => console.log(a, b, c), 1, 2, 3);
// 输出: 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 中用于从数组或对象中提取数据并直接赋值给变量的语法糖。它简化了从复杂的数据结构中获取所需部分的操作，使得代码更加简洁和易读。

js 复制代码

const [coach,...players]=["米卢","李铁","孙继科","范志毅"];
// ...  rest运算符 剩余运算符
console.log(coach);//米卢
console.log(players);//[ '李铁', '孙继科', '范志毅' ]

注意事项

只能有一个剩余参数：在一个函数的参数列表中只能有一个剩余参数。
不能与解构赋值混淆 ：虽然剩余参数和解构赋值都可以用三个点 ... 表示，但是它们的用法不同。剩余参数用于函数参数列表中，而解构赋值中的展开运算符用于对象或数组的复制、合并等操作。
性能考虑：对于非常大的参数列表，使用剩余参数可能会带来性能上的开销，因为它涉及到创建新的数组。

总结：三点魔法的力量

... 运算符就像是一个魔法师手中的万能钥匙，它既能让你的数据"散开"重生，又能帮你收集所有的宝藏。无论是处理数组、对象还是函数参数，... 都能为你提供简洁而强大的解决方案。掌握这把钥匙，你就能更加灵活地编写代码，使你的 JavaScript 程序既优雅又高效。所以，下次当你看到三个点的时候，记得这是开启编程魔法世界的秘密符号哦！