JavaScript展开语法

简介

展开语法（Spread Syntax）是ES6引入的JavaScript现代特性，使用三个连续的点（...）表示。它允许将可迭代对象（如数组、字符串或对象）在语法层面“展开”为独立的元素。展开语法在函数调用、数组构造、对象构造等场景中显著简化代码逻辑，提升可读性。

核心特性

展开语法的主要用途包括：

• 在函数调用时展开数组或字符串为参数列表。
• 在数组字面量中合并或复制数组。
• 在对象字面量中合并或复制对象属性（ES2018引入）。

语法形式

  
...iterable  

详细示例

函数调用中的展开语法

将数组元素展开为函数参数：

  
function sum(a, b, c) {  
  return a + b + c;  
}  

const numbers = [1, 2, 3];  
console.log(sum(...numbers)); // 输出: 6

• • 解释**：...numbers将数组[1, 2, 3]展开为1, 2, 3，等价于直接调用sum(1, 2, 3)。

数组操作中的展开语法

合并数组或复制数组：

  
const arr1 = [1, 2];  
const arr2 = [3, 4];  
const combined = [...arr1, ...arr2]; // [1, 2, 3, 4]  

const copy = [...arr1]; // [1, 2]（浅拷贝）

• • 注意**：展开语法仅实现浅拷贝，嵌套引用类型仍共享内存。

对象操作中的展开语法（ES2018）

合并或复制对象属性：

  
const obj1 = { a: 1, b: 2 };  
const obj2 = { c: 3, ...obj1 }; // { c: 3, a: 1, b: 2 }  

const copyObj = { ...obj1 }; // { a: 1, b: 2 }（浅拷贝）

• • 冲突规则**：后展开的属性会覆盖同名属性。

实际应用场景

场景1：替代apply方法

传统使用Function.prototype.apply传递数组参数，展开语法更简洁：

  
// 传统写法  
Math.max.apply(null, [1, 2, 3]);  

// 现代写法  
Math.max(...[1, 2, 3]);

场景2：动态HTML元素生成

结合模板字符串动态生成DOM内容：

  
const items = ['Apple', 'Banana', 'Orange'];  
document.body.innerHTML = `  
  <ul>  
    ${items.map(item => `<li>${item}</li>`).join('')}  
  </ul>  
`;

场景3：React中的Props传递

在React中展开语法常用于传递组件属性：

  
const props = { className: 'container', id: 'main' };  
<MyComponent {...props} />;

与剩余参数的区别

展开语法与剩余参数（Rest Parameters）使用相同的符号，但行为相反：

对比表

特性	展开语法	剩余参数
用途	展开元素	收集元素
位置	函数调用/数组/对象	函数参数定义
示例	func(...args)	function(...args)

性能注意事项

• 展开语法在大型数组/对象上可能产生临时内存开销。
• 在循环中频繁使用展开语法可能导致性能下降，建议预先合并数据。

总结

展开语法是JavaScript中简化数据操作的强大工具，通过...运算符实现：

• 函数调用：避免手动解构参数。
• 数组/对象操作：实现简洁的合并与复制。
• 兼容性：现代浏览器及Node.js均支持，旧环境需Babel转译。