编辑“︁JavaScript展开语法”︁

{{DISPLAYTITLE:JavaScript展开语法}}  
{{编程语言概念导航}}  

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

== 核心特性 ==  
展开语法的主要用途包括：  
* 在函数调用时展开数组或字符串为参数列表。  
* 在数组字面量中合并或复制数组。  
* 在对象字面量中合并或复制对象属性（ES2018引入）。  

=== 语法形式 ===  
<pre>  
...iterable  
</pre>  

== 详细示例 ==  

=== 函数调用中的展开语法 ===  
将数组元素展开为函数参数：  

<syntaxhighlight lang="javascript">  
function sum(a, b, c) {  
  return a + b + c;  
}  

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

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

=== 数组操作中的展开语法 ===  
合并数组或复制数组：  

<syntaxhighlight lang="javascript">  
const arr1 = [1, 2];  
const arr2 = [3, 4];  
const combined = [...arr1, ...arr2]; // [1, 2, 3, 4]  

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

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

=== 对象操作中的展开语法（ES2018） ===  
合并或复制对象属性：  

<syntaxhighlight lang="javascript">  
const obj1 = { a: 1, b: 2 };  
const obj2 = { c: 3, ...obj1 }; // { c: 3, a: 1, b: 2 }  

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

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

== 实际应用场景 ==  

=== 场景1：替代apply方法 ===  
传统使用<code>Function.prototype.apply</code>传递数组参数，展开语法更简洁：  

<syntaxhighlight lang="javascript">  
// 传统写法  
Math.max.apply(null, [1, 2, 3]);  

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

=== 场景2：动态HTML元素生成 ===  
结合模板字符串动态生成DOM内容：  

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

=== 场景3：React中的Props传递 ===  
在React中展开语法常用于传递组件属性：  

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

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

{| class="wikitable"  
|+ 对比表  
! 特性 !! 展开语法 !! 剩余参数  
|-  
| 用途 || 展开元素 || 收集元素  
|-  
| 位置 || 函数调用/数组/对象 || 函数参数定义  
|-  
| 示例 || <code>func(...args)</code> || <code>function(...args)</code>  
|}  

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

== 总结 ==  
展开语法是JavaScript中简化数据操作的强大工具，通过<code>...</code>运算符实现：  
* 函数调用：避免手动解构参数。  
* 数组/对象操作：实现简洁的合并与复制。  
* 兼容性：现代浏览器及Node.js均支持，旧环境需Babel转译。  

{{JavaScript现代特性导航}}

[[Category:编程语言]]
[[Category:JavaScript]]
[[Category:Javascript现代特性]]