JS 展开运算符 (`…`) 在函数调用中的应用：动态传递参数

咳咳，各位靓仔靓女们，今天老司机我来给大家讲讲 JavaScript 里的“展开运算符”（Spread Operator），这玩意儿可厉害了，用好了能让你写代码的时候像开了挂一样，尤其是用在函数调用的时候，简直是动态传参的利器！准备好了吗？咱们发车咯！

展开运算符 (...) 是个啥？

首先，咱们得知道这 ... 到底是个什么玩意儿。简单来说，它就像个“拆包神器”，能把一个数组或者一个对象里的东西，一个一个地“拆”出来。

对于数组： 它可以把数组里的每个元素，都变成独立的参数。
对于对象： （ES2018 引入）它可以把对象里的每个键值对，都变成独立的属性。

咱们今天主要聊的是它在函数调用时的应用，所以重点关注数组的展开。

函数调用中的“动态传参”

啥是“动态传参”呢？想象一下，你有个函数，需要接收几个参数，但是这些参数不是一开始就确定的，而是藏在一个数组里，你需要把这个数组里的东西“掏”出来，一个一个地喂给函数。这就是动态传参的场景。

如果没有展开运算符，你可能需要这样做：

function add(a, b, c) {
  return a + b + c;
}

const numbers = [1, 2, 3];

// 老办法，一个一个取出来
const result = add(numbers[0], numbers[1], numbers[2]);
console.log(result); // 输出: 6

这样做是不是感觉很麻烦？如果数组很长，或者参数很多，你不得累死？而且，万一数组的长度和函数需要的参数个数不一致，就容易出错。

这时候，展开运算符就派上用场了：

function add(a, b, c) {
  return a + b + c;
}

const numbers = [1, 2, 3];

// 展开运算符来啦！
const result = add(...numbers);
console.log(result); // 输出: 6

看到没？ ...numbers 就像变魔术一样，把 numbers 数组里的 1、2、3 拆开，变成了 add(1, 2, 3)，完美！

展开运算符的更多骚操作

上面只是个简单的例子，展开运算符的用途远不止于此。

参数数量不匹配的情况

如果数组的长度大于函数需要的参数个数，多余的参数会被忽略：

function greet(name, age) {
 console.log(`Hello, ${name}! You are ${age} years old.`);
}

const person = ["Alice", 30, "Engineer"];

greet(...person); // 输出: Hello, Alice! You are 30 years old.  "Engineer" 被忽略了

如果数组的长度小于函数需要的参数个数，缺少的参数会变成 undefined：

function greet(name, age, occupation) {
 console.log(`Hello, ${name}! You are ${age} years old and work as a ${occupation}.`);
}

const person = ["Alice", 30];

greet(...person); // 输出: Hello, Alice! You are 30 years old and work as a undefined.

所以，在使用展开运算符的时候，一定要注意数组的长度和函数需要的参数个数是否匹配，避免出现意料之外的结果。

结合其他参数一起使用

展开运算符可以和其他参数一起使用，让函数调用更加灵活：
```
function logDetails(prefix, ...details) {
 console.log(prefix, ...details);
}

const data = ["Name: John", "Age: 25", "City: New York"];

logDetails("User Details:", ...data); // 输出: User Details: Name: John Age: 25 City: New York
```
这里，prefix 是一个普通的字符串参数，...details 使用了剩余参数（Rest parameters）的语法，它可以接收任意数量的参数，并将它们收集到一个数组里。展开运算符把 data 数组里的元素拆开，作为 logDetails 函数的参数，最终实现了灵活的日志输出。
与 Math 对象结合使用

Math 对象有很多方法，比如 Math.max() 和 Math.min()，可以用来求最大值和最小值。但是，这些方法只能接收多个参数，不能直接接收一个数组。这时候，展开运算符就非常有用了：
```
const numbers = [10, 5, 20, 1, 15];

const max = Math.max(...numbers); // 展开数组，相当于 Math.max(10, 5, 20, 1, 15)
const min = Math.min(...numbers); // 展开数组，相当于 Math.min(10, 5, 20, 1, 15)

console.log("Max:", max); // 输出: Max: 20
console.log("Min:", min); // 输出: Min: 1
```
如果没有展开运算符，你需要用 apply 方法或者循环来实现这个功能，代码会变得很冗长。

构造新的数组

展开运算符还可以用来构造新的数组，比如合并多个数组：

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [7, 8, 9];

const combinedArray = [...arr1, ...arr2, ...arr3];
console.log(combinedArray); // 输出: [1, 2, 3, 4, 5, 6, 7, 8, 9]

或者在数组的开头或结尾添加元素：

const arr = [2, 3, 4];

const newArrayStart = [1, ...arr];
const newArrayEnd = [...arr, 5];

console.log(newArrayStart); // 输出: [1, 2, 3, 4]
console.log(newArrayEnd); // 输出: [2, 3, 4, 5]

复制数组

使用展开运算符可以创建一个数组的浅拷贝：

const originalArray = [1, 2, 3];
const copiedArray = [...originalArray];

copiedArray[0] = 10;

console.log(originalArray); // 输出: [1, 2, 3]  原始数组没有被修改
console.log(copiedArray); // 输出: [10, 2, 3]  修改的是复制后的数组

注意，这里是浅拷贝，如果数组里包含对象，修改复制后的数组里的对象，会影响到原始数组里的对象。

一些需要注意的地方

性能问题： 展开运算符在底层可能会创建新的数组，所以在大规模数据处理时，需要注意性能问题。
兼容性： 展开运算符在现代浏览器中都得到了很好的支持，但是在一些老旧的浏览器中可能不支持，需要使用 Babel 等工具进行转译。
可读性： 虽然展开运算符很方便，但是过度使用可能会降低代码的可读性，需要根据实际情况权衡。

表格总结

用途	示例	说明
动态传递参数	`add(...numbers)`	将数组 `numbers` 的元素作为 `add` 函数的参数传递
参数数量不匹配	`greet(...person)`	如果 `person` 数组长度大于 `greet` 函数参数个数，多余的参数会被忽略；如果小于，缺少的参数会变成 `undefined`
结合其他参数一起使用	`logDetails("User Details:", ...data)`	将字符串 `"User Details:"` 和 `data` 数组的元素作为 `logDetails` 函数的参数传递
与 `Math` 对象结合使用	`Math.max(...numbers)`	将 `numbers` 数组的元素作为 `Math.max` 函数的参数传递，求最大值
构造新的数组	`[...arr1, ...arr2]`	合并 `arr1` 和 `arr2` 数组
在数组开头/结尾添加元素	`[1, ...arr]` `[...arr, 5]`	在 `arr` 数组的开头添加元素 `1`，在结尾添加元素 `5`
复制数组	`const copiedArray = [...originalArray]`	创建 `originalArray` 数组的浅拷贝

实战演练

咱们来个稍微复杂一点的例子，模拟一个简单的购物车功能：

function calculateTotalPrice(discount, ...prices) {
  let total = 0;
  for (const price of prices) {
    total += price;
  }
  return total * (1 - discount);
}

const cartItems = [10, 20, 30, 40];
const discountRate = 0.1; // 10% 折扣

const totalPrice = calculateTotalPrice(discountRate, ...cartItems);
console.log("Total Price:", totalPrice); // 输出: Total Price: 90

在这个例子中，calculateTotalPrice 函数接收一个折扣率 discount 和任意数量的商品价格 ...prices。展开运算符把 cartItems 数组里的价格拆开，作为 calculateTotalPrice 函数的参数，方便地计算出总价。

总结

好了，今天的讲座就到这里。展开运算符是个非常实用的工具，可以让你在函数调用时更加灵活地传递参数，简化代码，提高开发效率。但是，也要注意一些细节，避免出现意料之外的问题。

希望今天的讲解对大家有所帮助，祝大家编程愉快！如果大家还有什么问题，欢迎随时提问。下次再见！

发表回复 取消回复

发表回复取消回复