马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。
您需要 登录 才可以下载或查看，没有账号？立即注册
x
rest参数
Rest 参数（Rest Parameters）是 ES6 引入的一个非常实用的特性。它答应函数接受不定数量的参数，并将这些参数作为一个数组存储，从而简化了处理可变参数的代码。
Rest 参数语法
Rest 参数使用 … 语法，紧跟着参数名。它会将通报给函数的所有剩余参数收集成一个数组。
- function sum(...numbers) {
- return numbers.reduce((total, num) => total + num, 0);
- }
- console.log(sum(1, 2, 3)); // 输出：6
- console.log(sum(10, 20, 30, 40)); // 输出：100
Rest 参数的特点
只能是末了一个参数
Rest 参数必须是函数参数列表中的末了一个参数。如果在其他参数后使用 …，会抛出语法错误。
- // 正确
- function greet(message, ...names) {
- console.log(message);
- console.log(names);
- }
- // 错误
- function greet(...names, message) { // 报错
- console.log(names);
- console.log(message);
- }
Rest 参数答应函数接收恣意数量的通报参数，并将它们收集到一个数组中。纵然没有通报任何参数，Rest 参数仍旧是一个空数组。
- function logMessages(...messages) {
- console.log(messages); // 输出参数数组
- }
- logMessages("Hello", "World"); // 输出：["Hello", "World"]
- logMessages(); // 输出：[]
Rest 参数可以与普通的定名参数一起使用，但它必须位于参数列表的末了。
- function displayInfo(name, age, ...hobbies) {
- console.log(`Name: ${name}`);
- console.log(`Age: ${age}`);
- console.log(`Hobbies: ${hobbies.join(", ")}`);
- }
- displayInfo("Alice", 30, "Reading", "Hiking", "Cooking");
- // 输出：
- // Name: Alice
- // Age: 30
- // Hobbies: Reading, Hiking, Cooking
arguments 对象是一个类数组对象，表现通报给函数的所有参数。然而，arguments 对象不是真正的数组，不能直接使用数组的方法（如 forEach、map、filter）。别的，arguments 是一个在所有函数中都存在的对象，并不支持解构。
与此差别，Rest 参数是一个真正的数组，可以直接使用数组的方法。
- function test() {
- console.log(arguments); // 类数组对象
- console.log(Array.isArray(arguments)); // 输出：false
- }
- function testRest(...args) {
- console.log(args); // 数组
- console.log(Array.isArray(args)); // 输出：true
- }
- test(1, 2, 3);
- testRest(1, 2, 3);
你还可以将 Rest 参数与解构语法联合使用，从而灵活地提取函数参数。
- function splitData(first, second, ...rest) {
- console.log(first); // 输出：1
- console.log(second); // 输出：2
- console.log(rest); // 输出：[3, 4, 5, 6]
- }
- splitData(1, 2, 3, 4, 5, 6);
Rest 参数是一个非常强盛的特性，能够使函数更灵活，支持处理不定数量的参数。它比 arguments 对象更易用，由于它是一个真正的数组，并且可以联合解构语法进行更灵活的处理。使用 Rest 参数，你可以制止处理大量的条件判断，使代码更加简便和易读。
扩展运算符
扩展运算符（Spread Operator）是 ES6 引入的一种语法，它使用 … 表现符，可以展开数组或对象的元素。它与 Rest 参数（…）看起来相似，但用途和语境有所差别。
扩展运算符的基本语法
扩展运算符用于将一个数组或对象的元素“展开”成单个值，可以更简便地进行合并、克隆等操作。
- // 数组的扩展
- const arr1 = [1, 2, 3];
- const arr2 = [...arr1, 4, 5];
- console.log(arr2); // 输出：[1, 2, 3, 4, 5]
- // 对象的扩展
- const obj1 = { name: "Alice", age: 25 };
- const obj2 = { ...obj1, city: "New York" };
- console.log(obj2); // 输出：{ name: "Alice", age: 25, city: "New York" }
扩展运算符可以将数组展开为单个元素，常见的用途包括合并数组和克隆数组。
合并数组
你可以使用扩展运算符将多个数组合并成一个新的数组。
- const arr1 = [1, 2];
- const arr2 = [3, 4];
- const combinedArr = [...arr1, ...arr2];
- console.log(combinedArr); // 输出：[1, 2, 3, 4]
使用扩展运算符可以快速克隆一个数组。它会展开原数组的所有元素，天生一个新数组。
- const arr1 = [1, 2, 3];
- const arr2 = [...arr1];
- console.log(arr2); // 输出：[1, 2, 3]
- arr1[0] = 100;
- console.log(arr1); // 输出：[100, 2, 3]
- console.log(arr2); // 输出：[1, 2, 3] （原数组未改变）
你可以使用扩展运算符将数组的元素通报给函数参数。
- const arr = [1, 2, 3];
- function sum(a, b, c) {
- return a + b + c;
- }
- console.log(sum(...arr)); // 输出：6
扩展运算符也可以用于对象，它用于浅拷贝对象或合并多个对象。
克隆对象
扩展运算符可以创建一个对象的浅拷贝，复制对象的所有可枚举属性。
- const obj1 = { name: "Alice", age: 25 };
- const obj2 = { ...obj1 };
- console.log(obj2); // 输出：{ name: "Alice", age: 25 }
- obj1.age = 26;
- console.log(obj1); // 输出：{ name: "Alice", age: 26 }
- console.log(obj2); // 输出：{ name: "Alice", age: 25 } （浅拷贝，原对象不受影响）
多个对象可以使用扩展运算符合并成一个新对象。如果多个对象有雷同的键，背面的对象的值会覆盖前面的。
- const obj1 = { name: "Alice" };
- const obj2 = { age: 25 };
- const obj3 = { city: "New York" };
- const mergedObj = { ...obj1, ...obj2, ...obj3 };
- console.log(mergedObj); // 输出：{ name: "Alice", age: 25, city: "New York" }
- const obj1 = { name: "Alice", age: 25 };
- const obj2 = { age: 26, city: "New York" };
- const mergedObj = { ...obj1, ...obj2 };
- console.log(mergedObj); // 输出：{ name: "Alice", age: 26, city: "New York" }
扩展运算符不但可以用于合并简单对象，也可以用于合并数组中对象的属性。
- const obj1 = { a: 1, b: 2 };
- const obj2 = { b: 3, c: 4 };
- const obj3 = { ...obj1, ...obj2 };
- console.log(obj3); // 输出：{ a: 1, b: 3, c: 4 }
扩展运算符和 concat 方法都可以用来合并数组，但它们有差别的使用方式和行为：
- const arr1 = [1, 2];
- const arr2 = [3, 4];
- // 使用 concat 合并
- const combinedArr1 = arr1.concat(arr2);
- console.log(combinedArr1); // 输出：[1, 2, 3, 4]
- // 使用扩展运算符合并
- const combinedArr2 = [...arr1, ...arr2];
- console.log(combinedArr2); // 输出：[1, 2, 3, 4]
扩展运算符的应用场景
- 数组克隆与合并：可以快速复制数组或合并多个数组。
- 对象合并与拷贝：适用于对象的浅拷贝和合并多个对象。
- 简化函数参数通报：可以将数组展开为函数参数列表，制止使用 apply()。
结论
扩展运算符（…）是 ES6 中的一个非常强盛且简便的语法工具，能够高效地处理数组和对象的合并、克隆等操作。它不但使代码更加简便，也提高了可读性。特别是在处理不定参数和函数调用时，扩展运算符为开辟者提供了更简便的语法。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。 |
