在 ES6 中，引入了 Rest 参数和 Spread 语法，这两个新特性可以让我们更方便地处理函数参数和数组/对象的操作。本文将对这两个语法进行详细的解读和示例演示，以便读者更好地掌握它们的使用方法。
Rest 参数
Rest 参数允许我们将不定数量的参数表示为一个数组，以方便函数的处理。在函数的参数列表中，用三个点（...）表示 Rest 参数。例如：
function sum(...numbers) {
return numbers.reduce((total, num) => total + num);
}
sum(1, 2, 3, 4); // 10在上面的示例中，sum 函数的参数列表中使用了 Rest 参数 ...numbers，它将传入的所有参数都保存在了一个数组中。在函数体内，我们可以直接使用 numbers 数组进行操作，这样就不需要考虑传入参数的数量了。
当然，Rest 参数也可以和其他参数一起使用，但必须放在参数列表的最后。例如：
function greet(greeting, ...names) {
names.forEach(name => console.log(`${greeting}, ${name}!`));
}
greet('Hello', 'Alice', 'Bob', 'Charlie'); // Hello, Alice! Hello, Bob! Hello, Charlie!在上面的示例中，greet 函数的参数列表中包含了一个普通参数 greeting 和一个 Rest 参数 ...names。我们可以看到，在调用 greet 函数时，第一个参数被赋值给了 greeting，而其余的参数都被保存在了 names 数组中。
Spread 语法
Spread 语法与 Rest 参数正好相反，它可以将一个数组或对象“展开”成多个独立的值。在函数调用或数组/对象的操作中，用三个点（...）表示 Spread 语法。例如：
// javascriptcn.com 代码示例
const numbers = [1, 2, 3, 4];
console.log(...numbers); // 1 2 3 4
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const merged = [...arr1, ...arr2];
console.log(merged); // [1, 2, 3, 4, 5, 6]
const obj1 = { foo: 'bar', baz: 42 };
const obj2 = { qux: true };
const merged = { ...obj1, ...obj2 };
console.log(merged); // { foo: 'bar', baz: 42, qux: true }在上面的示例中，我们使用了 Spread 语法将数组 numbers 展开成了多个独立的值，将两个数组 arr1 和 arr2 合并成了一个新数组 merged，将两个对象 obj1 和 obj2 合并成了一个新对象 merged。
Spread 语法还可以用于函数的调用，它可以将一个数组作为参数传递给函数，并将数组中的每个元素作为独立的参数传递给函数。例如：
function greet(name, age, gender) {
console.log(`Hello, ${name}! You are ${age} years old and ${gender}.`);
}
const userInfo = ['Alice', 25, 'female'];
greet(...userInfo); // Hello, Alice! You are 25 years old and female.在上面的示例中，我们使用了 Spread 语法将数组 userInfo 中的每个元素作为独立的参数传递给了 greet 函数。
总结
Rest 参数和 Spread 语法是 ES6 中非常有用的新特性，它们可以让我们更方便地处理函数参数和数组/对象的操作。在使用时，需要注意 Rest 参数必须放在参数列表的最后，而 Spread 语法可以用于函数调用、数组合并和对象合并等场景。希望本文对读者有所帮助，让大家更好地掌握这两个语法的使用方法。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65608057d2f5e1655dab33b2