语句中的...到底都代表什么意思？

前端

2023-12-11 09:19:04

使用过JavaScript的开发者，一定对...这个符号不陌生，它可能出现在参数列表、函数调用中，同时，它在定义数组和对象字面量时也经常出现。

乍一看之下，它可能是那么地不显眼，而且在不同的语境中，可能它会代表着不同的含义。比如说：

在函数的参数列表中，...是用来定义“剩余参数”的。
在函数调用中，...是用来“展开参数”的。
在数组和对象字面量中，...是用来“展开数组”和“展开对象”的。

尽管JavaScript中的...常常会以不同的方式出现，但它们的目标都是相同的：它们都是为了让代码更简洁、更易于理解。

1. 剩余参数

剩余参数是ES6引入的一种新的参数处理方式，它允许函数接受任意数量的参数。在函数的参数列表中，剩余参数必须是最后一个参数，并且必须使用...作为前缀。剩余参数将被存储在一个数组中，可以使用arguments对象访问。

例如：

function sum(...numbers) {
  return numbers.reduce((a, b) => a + b, 0);
}

console.log(sum(1, 2, 3, 4, 5)); // 15

在上面的例子中，sum函数的参数列表中使用了...numbers作为剩余参数，这表示sum函数可以接受任意数量的参数。当sum函数被调用时，所有传递给sum函数的参数都被收集到numbers数组中，然后numbers数组被传递给reduce方法，reduce方法将numbers数组中的所有元素累加起来并返回结果。

2. 展开参数

展开参数是将一个数组或对象中的元素逐个展开成独立的参数。在函数调用中，可以使用...作为前缀来展开参数。

例如：

const numbers = [1, 2, 3, 4, 5];
console.log(...numbers); // 1 2 3 4 5

在上面的例子中，...numbers将numbers数组中的元素逐个展开成独立的参数，然后将这些参数传递给console.log()方法。

3. 展开数组

在定义数组字面量时，可以使用...作为前缀来展开另一个数组。

例如：

const numbers1 = [1, 2, 3];
const numbers2 = [4, 5, 6];
const numbers3 = [...numbers1, ...numbers2];

console.log(numbers3); // [1, 2, 3, 4, 5, 6]

在上面的例子中，...numbers1和...numbers2将numbers1和numbers2数组中的元素逐个展开成独立的元素，然后将这些元素合并成一个新的数组numbers3。

4. 展开对象

在定义对象字面量时，可以使用...作为前缀来展开另一个对象。

例如：

const person1 = { name: '张三', age: 20 };
const person2 = { address: '北京市', phone: '13800000000' };
const person3 = { ...person1, ...person2 };

console.log(person3); // { name: '张三', age: 20, address: '北京市', phone: '13800000000' }