展开语法（...） - JavaScript | MDN

切换侧边栏

主题

跟随系统
浅色
深色

中文 (简体)

记住语言了解更多

展开语法（...）

基线广泛可用

自 2015年10月起，此特性已在主流浏览器中得到支持，可在大多数设备和浏览器版本中正常使用。

spread (...) 语法允许迭代数组或字符串等可迭代字符串在预期有零个或更多参数（用于函数调用）或元素（用于数组字面量）的地方进行扩展。在对象字面量中，扩展语法枚举对象的属性，并将键值对添加到正在创建的对象中。

展开语法看起来与剩余参数语法一模一样。在某种程度上，扩展语法与剩余参数语法正好相反。扩展语法是将数组“扩展”为元素，而其余语法是将多个元素收集起来，然后“浓缩”为一个元素。请参阅剩余参数和剩余属性。

本文内容

尝试一下

function sum(x, y, z) {
  return x + y + z;
}

const numbers = [1, 2, 3];

console.log(sum(...numbers));
// Expected output: 6

console.log(sum.apply(null, numbers));
// Expected output: 6

语法

js
myFunction(a, ...iterableObj, b)
[1, ...iterableObj, '4', 'five', 6]
{ ...obj, key: 'value' }

示例

在函数调用时使用展开语法

等价于 apply 的方式

如果想将数组元素迭代为函数参数，一般使用Function.prototype.apply 的方式进行调用。

js
function myFunction(x, y, z) {}
var args = [0, 1, 2];
myFunction.apply(null, args);

有了展开语法，可以这样写：

js
function myFunction(x, y, z) {}
var args = [0, 1, 2];
myFunction(...args);

所有参数都可以通过展开语法来传值，也不限制多次使用展开语法。

js
function myFunction(v, w, x, y, z) {}
var args = [0, 1];
myFunction(-1, ...args, 2, ...[3]);

在 new 表达式中应用

使用 new 关键字来调用构造函数时，不能直接使用数组 + apply 的方式（apply 执行的是调用 [[Call]] , 而不是构造 [[Construct]]）。当然，有了展开语法，将数组展开为构造函数的参数就很简单了：

js
var dateFields = [1970, 0, 1]; // 1970 年 1 月 1 日
var d = new Date(...dateFields);

如果不使用展开语法，想将数组元素传给构造函数，实现方式可能是这样的：

js
function applyAndNew(constructor, args) {
  function partial() {
    return constructor.apply(this, args);
  }
  if (typeof constructor.prototype === "object") {
    partial.prototype = Object.create(constructor.prototype);
  }
  return partial;
}

function myConstructor() {
  console.log("arguments.length: " + arguments.length);
  console.log(arguments);
  this.prop1 = "val1";
  this.prop2 = "val2";
}

var myArguments = ["hi", "how", "are", "you", "mr", null];
var myConstructorWithArguments = applyAndNew(myConstructor, myArguments);

console.log(new myConstructorWithArguments());
// (myConstructor 构造函数中):           arguments.length: 6
// (myConstructor 构造函数中):           ["hi", "how", "are", "you", "mr", null]
// ("new myConstructorWithArguments"中): {prop1: "val1", prop2: "val2"}

构造字面量数组时使用展开语法

构造字面量数组时更给力！

没有展开语法的时候，只能组合使用 push, splice, concat 等方法，来将已有数组元素变成新数组的一部分。有了展开语法，通过字面量方式，构造新数组会变得更简单、更优雅：

js
var parts = ["shoulders", "knees"];
var lyrics = ["head", ...parts, "and", "toes"];
// ["head", "shoulders", "knees", "and", "toes"]

和参数列表的展开类似， ... 在构造字面量数组时，可以在任意位置多次使用。

数组拷贝 (copy)

js
var arr = [1, 2, 3];
var arr2 = [...arr]; // like arr.slice()
arr2.push(4);

// arr2 此时变成 [1, 2, 3, 4]
// arr 不受影响

提示： 实际上，展开语法和 Object.assign() 行为一致，执行的都是浅拷贝 (只遍历一层)。如果想对多维数组进行深拷贝，下面的示例就有些问题了。

js
var a = [[1], [2], [3]];
var b = [...a];
b.shift().shift(); // 1
// Now array a is affected as well: [[], [2], [3]]

连接多个数组

Array.concat 函数常用于将一个数组连接到另一个数组的后面。如果不使用展开语法，代码可能是下面这样的：

js
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
// 将 arr2 中所有元素附加到 arr1 后面并返回
var arr3 = arr1.concat(arr2);

使用展开语法：

js
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
var arr3 = [...arr1, ...arr2];

Array.unshift 方法常用于在数组的开头插入新元素/数组。不使用展开语法，示例如下：

js
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
// 将 arr2 中的元素插入到 arr1 的开头
Array.prototype.unshift.apply(arr1, arr2); // arr1 现在是 [3, 4, 5, 0, 1, 2]

如果使用展开语法，代码如下：[请注意，这里使用展开语法创建了一个新的 arr1 数组， Array.unshift 方法则是修改了原本存在的 arr1 数组]:

js
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
arr1 = [...arr2, ...arr1]; // arr1 现在为 [3, 4, 5, 0, 1, 2]

构造字面量对象时使用展开语法

Rest/Spread Properties for ECMAScript 提议 (stage 4) 对字面量对象增加了展开特性。其行为是，将已有对象的所有可枚举 (enumerable) 属性拷贝到新构造的对象中。

浅拷贝 (Shallow-cloning，不包含 prototype) 和对象合并，可以使用更简短的展开语法。而不必再使用 Object.assign() 方式。

js
var obj1 = { foo: "bar", x: 42 };
var obj2 = { foo: "baz", y: 13 };

var clonedObj = { ...obj1 };
// 克隆后的对象：{ foo: "bar", x: 42 }

var mergedObj = { ...obj1, ...obj2 };
// 合并后的对象：{ foo: "baz", x: 42, y: 13 }

提示: Object.assign() 函数会触发 setters，而展开语法则不会。

提示: 不能替换或者模拟 Object.assign() 函数：

在这段代码中，展开操作符 (spread operator) 并没有按预期的方式执行：而是先将多个解构变为剩余参数 (rest parameter), 然后再将剩余参数展开为字面量对象。

只能用于可迭代对象

在数组或函数参数中使用展开语法时，该语法只能用于可迭代对象：

js
var obj = { key1: "value1" };
var array = [...obj]; // TypeError: obj is not iterable

ECMAScript® 2027 Language Specification
# prod-PropertyDefinition

浏览器兼容性

启用 JavaScript 以查看此浏览器兼容性表。

参见

帮助改进 MDN

此页面对您有帮助吗？

是否

了解如何参与贡献

此页面最后更新于 2025年7月16日，由 MDN 贡献者更新。

在 GitHub 上查看此页面 • 报告此内容的问题