Javascript 中的三个点 (…) 或扩展运算符是什么？

Posted on by

扩展运算符，扩展语法或3 个点(…)，是 Javascript 中的一种语法，它被函数调用和数组/对象使用。它有多种不同的用途，所以让我们来看看我们如何在真实的 Javascript 代码中使用扩展语法。

在函数调用中#

我们可以使用 Javascript 函数调用中的 3 个点将数组转换为函数的一组参数。让我们看一个例子。下面，我们的数组被转换为x、y、z和a的值。

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

let myFunction = function(x, y, z, a) {
    return x + y + z + a;
}

// Returns 10
myFunction(...numbers);

这可以与其他值组合，因此以下内容也是有效的，使用与之前相同的功能：

let numbers = [ 1, 2 ];

// Returns 15 (i.e. 5 + 7 + 1 + 2)
myFunction(5, 7, ...numbers);

这也可以在使用 调用构造函数时使用new，例如：

let numbers = [ 1999, 26, 3 ];

let thisDate = new Date(...number);

合并数组#

另一种使用扩展语法的有用方法是合并数组。例如，我们可以使用两种扩展语法将两个单独的数组合并为一个新数组：

let x = [ 1, 2, 3 ];
let y = [ 4, 5, 6 ];

// Returns [ 1, 2, 3, 4, 5, 6 ]
let newArray = [ ...x, ...y ];

与之前类似，我们可以将它与其他值结合起来，仍然会得到相同的结果：

let x = [ 1, 2 ];

// Returns [] 4, 5, 1, 2 ]
let newArray = [ 4, 5, ...x ];

合并对象#

最后，我们可以使用展开语法来合并对象。在下面的示例中，我们将两个具有键/值对的对象合并为一个对象：

let obj1 = { name: "John" };
let obj2 = { age: 114 };

// Returns { name: "John", age: 114 }
let newObj = { ...obj1, ...obj2 };

如果我们尝试合并两个对象并且存在重复键，则第二个对象将优先并覆盖第一个对象，如下所示：

let obj1 = { name: "John" };
let obj2 = { name: "Jake" };

// Returns { name: "Jake" }
let newObj = { ...obj1, ...obj2 };

这就是扩展语法的工作原理——它们让我们可以轻松地使用数组运行函数，并且非常适合合并对象和数组。

推荐阅读：