JavaScript 中三个点的使用方法

在JavaScript中，三个点（...）有着重要且多样的用途，它被称为扩展运算符和剩余参数语法，在不同的场景下发挥着关键作用。

扩展运算符

在函数调用中，扩展运算符可以将数组或类数组对象展开为独立的参数。例如：

function sum(a, b, c) {
  return a + b + c;
}
const numbers = [1, 2, 3];
console.log(sum(...numbers)); 

这里，...numbers 将数组 numbers 展开，分别传递给 sum 函数的参数 a、b 和 c。

在数组字面量中，扩展运算符可用于合并数组。比如：

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combinedArray = [...arr1,...arr2];
console.log(combinedArray); 

这段代码将 arr1 和 arr2 数组合并成一个新数组 combinedArray。

在对象字面量中，扩展运算符用于合并对象。示例如下：

const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const combinedObject = {...obj1,...obj2};
console.log(combinedObject); 

上述代码把 obj1 和 obj2 对象的属性合并到了新对象 combinedObject 中。

剩余参数语法

剩余参数语法允许一个函数接受不定数量的参数，并将这些参数收集到一个数组中。例如：

function add(...numbers) {
  return numbers.reduce((total, num) => total + num, 0);
}
console.log(add(1, 2, 3, 4, 5)); 

在这个例子中，...numbers 收集了传递给 add 函数的所有参数，并将它们存储在一个名为 numbers 的数组中。

JavaScript中的三个点（...）无论是作为扩展运算符还是剩余参数语法，都为开发者提供了便捷且强大的功能。扩展运算符可以方便地展开数组和对象，用于函数调用、数组和对象的合并等操作；剩余参数语法则使得函数能够灵活地处理不定数量的参数。熟练掌握这一特性，能够让我们的JavaScript代码更加简洁、高效和灵活。