展开运算符在 JavaScript 中的用法

2025 年 9 月 6 日 | 6 分钟阅读

扩展运算符用于展开可迭代对象的元素，例如字符串、数组或对象。它由三个点 (...) 表示。我们将在本文中学习扩展运算符。

让我们看一个不使用扩展运算符的例子

我们将创建一个名为 'fruits' 的数组，并打印该数组，不使用扩展运算符。

示例

let fruits = ['mango', 'apple', 'pear'];  
console.log(fruits[0], fruits[1], fruits[2]);     

立即执行

输出

mango apple pear

说明

在上面的例子中，我们通过使用索引号打印了数组 'fruits' 的所有项。

现在，让我们看一个使用扩展运算符的例子

我们将创建一个名为 'fruits' 的数组，并使用扩展运算符打印该数组。

示例

let fruits = ['mango', 'apple', 'pear'];  
console.log(...fruits);     

立即执行

输出

mango apple pear

说明

在此示例中，我们没有使用索引号来打印所有项，而是使用了扩展运算符。我们可以看到代码更简洁，代码行数也减少了。

扩展运算符的优点

我们可以将扩展运算符用于许多事情，如下所示

它可用于访问数组中的所有项。
它可用于合并数组。
它可用于将元素作为单独的参数传递给函数。
它可用于创建对象字面量的浅拷贝。
它可用于合并对象字面量。

以下是一些在 JavaScript 中使用扩展运算符的演示

演示 1：展开数组

在此演示中，我们将展开数组的元素。

示例

let colors = ["red", "blue", "yellow"];  
  
// without using the spread operator  
console.log(colors);  
  
// using the spread operator  
console.log(...colors);     

立即执行

输出

[ 'red', 'blue', 'yellow' ]
red blue yellow

说明

在上面的例子中，我们使用 let 定义了一个名为 colors 的变量。我们以两种方式打印了它，一种是未使用扩展运算符，另一种是使用了扩展运算符。

演示 2：数组内的扩展运算符

我们将通过在数组内使用扩展运算符来展开数组的元素。

示例

let colors = ["red", "blue", "yellow"];  
  
// add colors array to colors1  
// without using the spread operator  
let colors1 = ["orange", colors, "brown"];  
  
// spread colors array within colors2 array  
// using the spread operator  
let colors2 = ["orange", ...colors, "brown"];  
  
console.log(colors1);  
console.log(colors2);     

立即执行

输出

[ 'orange', [ 'red', 'blue', 'yellow' ], 'brown' ]
[ 'orange', 'red', 'blue', 'yellow', 'brown' ]

说明

我们没有使用扩展运算符来打印 colors1 数组，因此我们可以看到它包含一个内部数组。

我们使用扩展运算符来打印 colors2 数组，因此我们可以看到 colors 数组的元素变成了单独的字符串元素。

演示 3：复制对象字面量

在此演示中，我们将使用扩展运算符来复制对象字面量。

示例

 const cars_company = {  
  company1: 'BMW',  
  company2: 'Tesla',  
  company3: 'Ferrari'  
};  
// without using the spread operator  
const companies1 = {cars_company};  
  
// using the spread operator  
const companies2 = {...cars_company};  
  
console.log(companies1);  
  
console.log(companies2); 

立即执行

输出

 
{ cars_company: { company1: 'BMW', company2: 'Tesla', company3: 'Ferrari' }}
{ company1: 'BMW', company2: 'Tesla', company3: 'Ferrari' }

说明

在上面的例子中，我们使用 const 创建了一个名为 cars_company 的对象。我们以两种方式复制了对象字面量，一种是未使用扩展运算符，另一种是使用了扩展运算符。我们可以在输出中看到重复的对象字面量。

演示 4：合并对象字面量

在此演示中，我们将使用扩展运算符来合并对象字面量。

示例

let student1 = { name : 'Ben', age : '25' };  
let student2 = { name : 'Katy', age : '36' };  
  
// using the spread operator to merge student1 and student2 into team1  
let team1 = {... student1, ... student2};  
  
// without using the spread operator to merge student1 and student2  
let team2 = { student1, student2};  
  
console.log("team1 =", team1);  
console.log("team2 =", team2);  

立即执行

输出

team1 = { name: 'Katy', age: '36' }
team2 = {
  student1: { name: 'Ben', age: '25' },
  student2: { name: 'Katy', age: '36' }
}

说明

我们使用扩展运算符将 student1 和 student2 合并到 team1 中，我们可以看到这两个对象完美地合并形成了一个新对象。

我们没有使用扩展运算符将 student1 和 student2 合并到 team2 中，我们也可以看到这两个对象的名称。

演示 5：作为函数参数一部分的扩展运算符

我们可以将扩展运算符作为函数参数的一部分。我们将创建一个接受三个参数的函数。

示例

// function that takes three arguments  
function sum(number1, number2 , number3) {  
    console.log(number1 + number2 + number3);  
}  
  
let numbers = [2, 6, 10, 9];  
  
// pass the first three array elements  
sum(...numbers);      

立即执行

输出

说明

在上面的例子中，我们使用了扩展运算符作为函数参数的一部分。我们创建了一个名为 sum 的函数。我们使用扩展运算符和不使用扩展运算符传递了参数，并打印了输出。

演示 6：带有字符串的扩展运算符

在此演示中，我们可以将扩展运算符与字符串一起使用。

示例

const movie = "zathura";   
//without using the spread operator  
const adventure1 = [movie];  
  
// using the spread operator  
const adventure2 = [...movie];  
  
console.log(adventure1);  
console.log(adventure2);  

立即执行

输出

[ 'zathura' ]
[
  'z', 'a', 't',
  'h', 'u', 'r',
  'a'
]

说明

在上面的例子中，我们使用 const 创建了一个名为 movie 的变量。我们使用扩展运算符和不使用扩展运算符展开了一个字符串。

扩展运算符和 rest 运算符的区别

有时，我们会在 rest 运算符和扩展运算符之间感到困惑，因为它们都使用相同的语法，即三个点 (...)。但它们用于不同的目的。

扩展运算符

Rest 运算符

扩展运算符对于展开可迭代对象非常有用。例如，字符串、对象和数组。
示例
const myArray = [1,2,4,6];
console.log(...myArray,12,14);
输出
1 2 4 6 12 14
说明
在上面的例子中，我们使用 const 定义了一个名为 myArray 的变量。然后我们将其分配给一个数组。借助扩展运算符，我们可以将其展开并打印成单独的元素。

rest 运算符用于将多个参数收集到一个数组或对象中。
示例
function addNum(...num) {
    let total = 0;
    for (const digit of num){
        total += digit;
    }
    return total;
}
console.log(addNum(1,3,5));
输出
9
说明
在上面的例子中，我们定义了一个名为 addNum 的函数，它接受一个参数。我们利用 rest 运算符来获取多个参数。

结论

在本文中，我们学习了 JavaScript 中的扩展运算符。 我们通过演示看到了利用扩展运算符的各种方法。

常见问题

以下问题是一些最常问的问题

扩展运算符的主要目的是什么？

扩展运算符，在 JavaScript 中用三个点 (...) 表示，帮助我们将可迭代对象展开成单独的元素。它通常用于合并数组、复制对象字面量等。

什么时候不应该使用扩展运算符？

我们不应该使用扩展运算符来创建深拷贝，因为它只创建浅拷贝。我们应该避免在性能关键的循环中使用它，因为它可能对性能产生负面影响。

扩展运算符是什么时候引入的？

扩展运算符是在 ES6 中引入的。在 JavaScript 中，它是帮助我们将可迭代对象展开成单独元素的一个强大工具。

用于参数的扩展运算符是什么？

在 JavaScript 中，扩展运算符对于解开将可变长度参数传递给函数的过程非常有用。当我们对参数使用扩展运算符时，我们不需要单独传递每个参数，而是可以将值的数组解包成函数参数。

扩展运算符有什么限制吗？

尽管扩展运算符在许多方面都非常有用，但它也有一些限制。它不适用于多维数组或带有嵌套数组/对象的对象。扩展运算符仅限于一个深度级别。它只能传输一个深度级别。

下一主题JavaScript 问题解决

展开运算符在 JavaScript 中的用法

示例

示例

扩展运算符的优点

演示 1：展开数组

示例

演示 2：数组内的扩展运算符

示例

演示 3：复制对象字面量

示例

演示 4：合并对象字面量

示例

演示 5：作为函数参数一部分的扩展运算符

示例

演示 6：带有字符串的扩展运算符

示例

扩展运算符和 rest 运算符的区别

结论

常见问题

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

JavaScript 基础

JS 变量和数据类型

JS 控制语句

JavaScript 函数

JavaScript 对象

JS 高级函数

JS Promises & Async/Await

JavaScript DOM

JavaScript JSON 对象

JavaScript 验证

JavaScript Cookies

异常处理

JavaScript 集合

JavaScript 事件

JavaScript OOPs

JavaScript BOM

面试题

选择题

差异

JavaScript Map 方法

JavaScript Handler

JavaScript Number 方法

JavaScript Reflect

JavaScript Symbol

Symbol 属性

JavaScript Math 方法

JavaScript Date 方法

JavaScript DataView

JavaScript Object 方法

JavaScript Set 方法

JavaScript 字符串方法

JavaScript TypedArray 方法

JavaScript WeakMap 方法

JavaScript WeakSet 方法

JavaScript 数组方法

JavaScript RegExp 对象

JavaScript 附加内容

JavaScript 杂项

JavaScript 进阶

问题

Lodash

展开运算符在 JavaScript 中的用法

示例

示例

扩展运算符的优点

演示 1：展开数组

示例

演示 2：数组内的扩展运算符

示例

演示 3：复制对象字面量

示例

演示 4：合并对象字面量

示例

演示 5：作为函数参数一部分的扩展运算符

示例

演示 6：带有字符串的扩展运算符

示例

扩展运算符和 rest 运算符的区别

结论

常见问题