js … 省略号 怎么用

省略号（…）在JavaScript中的使用方法包括扩展运算符和剩余参数。 其中，扩展运算符用于展开数组或对象的内容，剩余参数则用于收集函数的剩余参数。在这篇文章中，我们将详细探讨这两种用法，并通过实际示例来帮助你更好地理解和应用它们。

一、扩展运算符

扩展运算符（spread operator）使用三个点号（…）表示，用于在函数调用或数组构造时展开数组或对象的内容。

1、数组展开

扩展运算符可以用于展开数组的元素，这在需要合并数组或克隆数组时非常有用。

let arr1 = [1, 2, 3];

let arr2 = [4, 5, 6];
// 合并数组
let mergedArray = [...arr1, ...arr2];
console.log(mergedArray); // 输出: [1, 2, 3, 4, 5, 6]
// 克隆数组
let clonedArray = [...arr1];
console.log(clonedArray); // 输出: [1, 2, 3]

在这个示例中，扩展运算符用于合并两个数组arr1和arr2，以及克隆数组arr1。这种方法不仅简洁，而且避免了使用Array.prototype.concat方法的繁琐语法。

2、对象展开

扩展运算符也可以用于对象，以便进行对象的浅拷贝或合并多个对象。

let obj1 = { a: 1, b: 2 };

let obj2 = { c: 3, d: 4 };
// 合并对象
let mergedObject = { ...obj1, ...obj2 };
console.log(mergedObject); // 输出: { a: 1, b: 2, c: 3, d: 4 }
// 克隆对象
let clonedObject = { ...obj1 };
console.log(clonedObject); // 输出: { a: 1, b: 2 }

在这个示例中，扩展运算符用于合并两个对象obj1和obj2，以及克隆对象obj1。这种方法比Object.assign更简洁和直观。

3、函数调用中的展开

扩展运算符还可以在函数调用时用于展开数组的元素作为函数的参数。

function sum(a, b, c) {

  return a + b + c;
}
let numbers = [1, 2, 3];
console.log(sum(...numbers)); // 输出: 6

在这个示例中，扩展运算符用于将数组numbers的元素展开为函数sum的参数。

二、剩余参数

剩余参数（rest parameters）使用三个点号（…）表示，用于收集函数的剩余参数，将其存储在一个数组中。

1、基本用法

剩余参数允许我们在函数定义时，接收不定数量的参数。

function sum(...numbers) {

  return numbers.reduce((acc, curr) => acc + curr, 0);
}
console.log(sum(1, 2, 3, 4)); // 输出: 10

在这个示例中，函数sum使用剩余参数...numbers来接收任意数量的参数，并通过Array.prototype.reduce方法计算它们的和。

2、与常规参数结合使用

剩余参数可以与常规参数结合使用，但剩余参数必须放在参数列表的最后。

function multiply(multiplier, ...numbers) {

  return numbers.map(number => number * multiplier);
}
console.log(multiply(2, 1, 2, 3)); // 输出: [2, 4, 6]

在这个示例中，函数multiply的第一个参数是常规参数multiplier，剩余的参数...numbers则被存储在一个数组中。

三、扩展运算符与剩余参数的区别

尽管扩展运算符和剩余参数都使用三个点号（…），但它们的用途和功能是不同的。

1、扩展运算符

扩展运算符用于展开数组或对象的内容，通常在函数调用、数组构造和对象合并时使用。

2、剩余参数

剩余参数用于收集函数的剩余参数，将其存储在一个数组中，通常在函数定义时使用。

四、实际应用场景

1、数组去重

使用扩展运算符和Set对象可以轻松实现数组去重。

let numbers = [1, 2, 2, 3, 4, 4, 5];

let uniqueNumbers = [...new Set(numbers)];
console.log(uniqueNumbers); // 输出: [1, 2, 3, 4, 5]

2、对象的深拷贝

扩展运算符只能进行对象的浅拷贝，对于深拷贝，我们可以结合其他方法使用。

let obj = { a: 1, b: { c: 2 } };

let deepClonedObj = JSON.parse(JSON.stringify(obj));
console.log(deepClonedObj); // 输出: { a: 1, b: { c: 2 } }

3、函数参数的灵活处理

使用剩余参数可以使函数更加灵活，适应不同数量的参数。

function concatenate(separator, ...strings) {

  return strings.join(separator);
}
console.log(concatenate(', ', 'Hello', 'World', 'and', 'JavaScript')); // 输出: "Hello, World, and, JavaScript"

五、总结

在JavaScript中，省略号（…）作为扩展运算符和剩余参数的使用，极大地增强了代码的灵活性和简洁性。扩展运算符用于展开数组或对象的内容、剩余参数用于收集函数的剩余参数。通过理解和掌握这些用法，我们可以编写出更加高效和清晰的代码。无论是处理数组、对象，还是函数参数，省略号的使用都能为我们提供强大的工具。希望这篇文章能够帮助你深入理解省略号的用法，并在实际项目中得心应手地应用它们。如果你的项目需要更高效的管理和协作，可以考虑使用研发项目管理系统PingCode或通用项目协作软件Worktile，它们能够显著提升团队的工作效率和项目管理水平。

相关问答FAQs：

1. 什么是 JavaScript 中的省略号（…）？
省略号（…）在 JavaScript 中被称为展开运算符或剩余参数。它可以用于展开数组或对象，并在函数参数中收集多余的参数。

2. 如何使用省略号展开数组？
你可以使用省略号（…）将一个数组展开为单独的元素。例如，如果你有一个包含多个元素的数组，你可以使用展开运算符将它们分开，如下所示：

const array = [1, 2, 3];
console.log(...array); // 输出：1 2 3

3. 如何在函数参数中使用省略号收集多余的参数？
省略号（…）也可以用于函数参数中，用于收集多余的参数。这样可以使函数接受任意数量的参数，并将它们作为一个数组访问。例如：

function sum(...numbers) {
  let total = 0;
  for (const number of numbers) {
    total += number;
  }
  return total;
}

console.log(sum(1, 2, 3)); // 输出：6
console.log(sum(4, 5, 6, 7, 8)); // 输出：30

使用省略号可以提供更灵活的代码编写方式，让你能够更好地处理数组的展开和收集操作。