JavaScript 三个点（…）是什么

在JavaScript中，我们有多种方法可以将一个对象的值赋给另一个对象。有时，我们不知道要分配的确切参数数量。在这种情况下，使用 三个点 。

这些三个点被称为 展开运算符 ，它将可迭代对象（数组，字符串或对象）展开成单个值。展开运算符非常有用，它减少了需要编写的代码量，并提高了可读性。

展开运算符的语法与 剩余参数 相同，但工作方式不同。它是作为ES6 JavaScript中的一个功能引入的。

语法：

var nameOfVar = [...valueToSpread];

参数：

• valueToSpread： 在这里指定要分配给新变量的可迭代对象。它可以是一个数组或字符串。

返回类型： 它返回传递对象后的参数列表。

让我们看一些例子，首先通过简单方法给对象赋值，然后使用三个点或扩展语法执行相同的操作。

示例1： 在这个例子中，我们将使用内置的concat方法连接两个数组，然后使用三个点语法执行相同的任务。

Javascript

var baseArr = [1, 2, 3];
var baseArr2 = [4, 5, 6];
 
// Inbuilt concat method
baseArr = baseArr.concat(baseArr2); 
console.log(baseArr);
 
var spreadArr = ['a', 'b', 'c'];
var spreadArr2 = ['d', 'e', 'f'];
 
// Concatenating using three dots
spreadArr = [...spreadArr, ...spreadArr2]; 
console.log(spreadArr);

输出：

[1, 2, 3, 4, 5, 6]
['a', 'b', 'c', 'd', 'e', 'f']

示例2： 在这个示例中，我们将使用赋值运算符和展开运算符来复制数组的内容：

JavaScript

var baseArr = [1, 2, 3];
var baseArr2 = baseArr;
baseArr2.push(4);
console.log(baseArr2);
console.log(baseArr);
 
var spreadArr = ['a', 'b', 'c'];
var spreadArr2 = [...spreadArr];
spreadArr2.push('d');
console.log(spreadArr);
console.log(spreadArr2);

输出：

[1, 2, 3, 4]
[1, 2, 3, 4]
['a', 'b', 'c']
['a', 'b', 'c', 'd']

说明： 我们可以看到，使用赋值运算符（’=’）给数组赋值并修改新数组时，旧数组也被修改了。这会导致问题，因为我们并不总是想要修改旧数组的内容，但如果我们使用展开运算符的语法来赋值并修改新数组，旧数组将保持不变。这是因为展开运算符返回的是一个新数组，而不是旧数组的引用。

示例3： 在这个例子中，我们将使用 Math.min() 方法找到一个数组的最小值：

JavaScript

var baseArr = [5, 2, 7, 8, 4, 9];
console.log(Math.min(baseArr));
console.log(Math.min(...baseArr));

输出：

NaN
2

解释：math.min()方法需要一个对象列表来查找列表中的最小值，但当传入一个数组时，它会输出NaN。为了解决这个问题，我们使用了三个点的格式/扩展操作符。由于扩展操作符返回一个对象列表，因此它被方法接受并返回数组的最小元素。

例子4： 在这个例子中，我们将使用三个点将一个对象赋给另一个对象：

JavaScript

const spreadObj = {
    name: 'Ram',
    country: 'India',
};
 
// Cloning previous object
const newObj = { ...spreadObj }; 
console.log(newObj);

输出：

{name: 'Ram', country: 'India'}

示例5： 在这个例子中，我们将在函数调用中使用扩展运算符。

Javascript

function add(...objects){
    var ans = 0;
    for(var i = 0; i < objects.length; i++){
        ans += objects[i];
    }
    console.log(ans);
}
add(1, 2);
add(23, 45, 67, 56);

输出：

3
191

解释： 我们可以看到，在不知道要传递多少个参数的情况下，展开运算符非常有用。在这里，我们的 add 函数可以适用于任意数量的参数，因此我们不需要为不同数量的参数指定多个函数。

注意： 我们应该记住，只有可迭代的对象才能使用展开运算符进行传递。例如， 纯粹对象 不可迭代，因为它们缺少 Symbol.iterator 方法。

示例 6： 在这个示例中，我们将尝试展开一个纯粹对象。

Javascript

const plainObj = { name: 'Ram' }; // Spreading non iterable object
const baseArr = [...plainobj];

输出：

解释： 可以看到，在使用三个点来传播一个不可迭代的对象时会抛出错误。