JS进阶——动态参数、剩余参数和展开运算符

在 JavaScript 中，剩余参数（Rest Parameters）和展开运算符（Spread Operator）是两种非常有用的语法特性，它们分别用于处理函数参数和数组/对象的操作。

剩余参数（Rest Parameters）

剩余参数语法允许你将一个不定数量的参数表示为一个数组。这在你不确定会有多少参数传入函数，或者你想要收集所有剩余参数到一个数组时非常有用。

剩余参数语法使用 ... 符号来表示。

function sum(...args) {  
  return args.reduce((a, b) => a + b, 0);  
}  
  
console.log(sum(1, 2, 3, 4)); // 输出 10  
console.log(sum(5, 6)); // 输出 11

function config(baseURL,...other) {
    console.log(baseURL) // 得到 'http://baidu.com'
    console.log(other) // other 得到 ['get', 'json']
//调用函数
config('http://baidu.com','get','json')

展开运算符（Spread Operator）

展开运算符允许你将一个数组（或对象）的元素展开到另一个数组（或对象）中，或者用于函数调用时传递数组元素作为单独的参数。

展开运算符同样使用 ... 符号。

数组中的展开运算符

const arr1 = [1, 2, 3];  
console.log(Math.max(...arr1))//3
console.log(Math.min(...arr1))//1

const arr2 = [...arr1, 4, 5];  
console.log(arr2); // 输出 [1, 2, 3, 4, 5]  
  
const arr3 = [0, ...arr1, 6];  
console.log(arr3); // 输出 [0, 1, 2, 3, 6]

函数调用中的展开运算符

function greet(a, b, c) {  
  console.log(`Hello, ${a}, ${b}, and ${c}!`);  
}  
  
const names = ['Alice', 'Bob', 'Charlie'];  
greet(...names); // 输出 "Hello, Alice, Bob, and Charlie!"

对象中的展开运算符

const obj1 = { a: 1, b: 2 };  
const obj2 = { ...obj1, c: 3 };  
console.log(obj2); // 输出 { a: 1, b: 2, c: 3 }

这两个特性在处理数组和函数参数时非常有用，并且可以使代码更加简洁和灵活。剩余参数特别适用于那些需要接受可变数量参数的函数，而展开运算符则适用于需要将数组或对象元素展开到另一个数组或对象中的场景。

剩余参数：函数参数使用，得到真数组

展开运算符：数组中使用，数组展开

动态参数

在JavaScript中，有时你需要编写可以接收任意数量参数的函数，这就是动态参数的概念。这通常通过两种方式来实现：使用剩余参数（Rest Parameters）来收集多余的参数到一个数组中，或者使用函数内部的arguments对象（尽管arguments对象的使用在现代JavaScript开发中逐渐被剩余参数所取代）。

使用剩余参数（Rest Parameters）

剩余参数语法允许你将一个不定数量的参数表示为一个数组。这些参数在函数内部可以像普通数组一样使用。

function myFunction(...args) {  
  for (let arg of args) {  
    console.log(arg);  
  }  
}  
  
myFunction(1, 2, 3); // 输出 1 2 3  
myFunction('a', 'b', 'c'); // 输出 a b c

在这个例子中，...args 是一个剩余参数，它收集所有传递给 myFunction 的参数到一个名为 args 的数组中。

使用arguments对象

arguments对象是一个类数组对象，它包含了传递给函数的参数。虽然在现代JavaScript代码中更推荐使用剩余参数，但了解arguments对象仍然是有用的，因为它在旧版本的JavaScript中广泛使用。

function myOldFunction() {  
  for (let i = 0; i < arguments.length; i++) {  
    console.log(arguments[i]);  
  }  
}  
  
myOldFunction(1, 2, 3); // 输出 1 2 3  
myOldFunction('a', 'b', 'c'); // 输出 a b c

然而，需要注意的是arguments对象并不是一个真正的数组，它是一个具有length属性和按索引访问元素能力的对象。因此，它没有数组的内置方法（如push、pop或forEach），除非你显式地将它转换为数组。

总结：

1．arguments是一个伪数组，只存在于函数中

2．arguments的作用是动态获取函数的实参

3．可以通过for循环依次得到传递过来的实参

要将arguments对象转换为数组，你可以使用扩展运算符（Spread Operator）：

function myOldFunction() {  
  const args = [...arguments]; // 将arguments对象转换为数组  
  args.forEach(arg => console.log(arg)); // 使用数组的forEach方法  
}  
  
myOldFunction(1, 2, 3); // 输出 1 2 3

但是，在ES6及更高版本的JavaScript中，通常建议直接使用剩余参数而不是arguments对象。