跳转到内容
主菜单
主菜单
移至侧栏
隐藏
导航
首页
最近更改
随机页面
MediaWiki帮助
代码酷
搜索
搜索
中文(中国大陆)
外观
创建账号
登录
个人工具
创建账号
登录
未登录编辑者的页面
了解详情
贡献
讨论
编辑“︁
JavaScript数组展开
”︁
页面
讨论
大陆简体
阅读
编辑
编辑源代码
查看历史
工具
工具
移至侧栏
隐藏
操作
阅读
编辑
编辑源代码
查看历史
常规
链入页面
相关更改
特殊页面
页面信息
外观
移至侧栏
隐藏
您的更改会在有权核准的用户核准后向读者展示。
警告:
您没有登录。如果您进行任何编辑,您的IP地址会公开展示。如果您
登录
或
创建账号
,您的编辑会以您的用户名署名,此外还有其他益处。
反垃圾检查。
不要
加入这个!
= JavaScript数组展开 = '''数组展开'''(Spread Operator)是ES6引入的JavaScript特性,使用三个连续的点(<code>...</code>)表示,它允许将一个数组“展开”为独立的元素序列,或者将多个元素合并为一个数组。这一特性极大简化了数组操作,提升了代码的可读性和灵活性。 == 基本语法 == 数组展开运算符的基本语法如下: <syntaxhighlight lang="javascript"> const newArray = [...originalArray]; </syntaxhighlight> 其中,<code>originalArray</code>会被展开,其元素被逐个插入到<code>newArray</code>中。 == 核心功能 == 数组展开运算符的主要用途包括: # '''复制数组''':创建原数组的浅拷贝。 # '''合并数组''':将多个数组合并为一个新数组。 # '''函数调用传参''':将数组展开为函数的参数列表。 # '''解构赋值''':在解构时捕获剩余元素。 === 1. 复制数组 === 展开运算符可以快速生成原数组的副本: <syntaxhighlight lang="javascript"> const original = [1, 2, 3]; const copy = [...original]; // 创建新数组 console.log(copy); // 输出: [1, 2, 3] </syntaxhighlight> {{注意|展开运算符执行的是'''浅拷贝''',嵌套对象或数组仍会共享引用。}} === 2. 合并数组 === 合并多个数组时,展开运算符比<code>concat()</code>更直观: <syntaxhighlight lang="javascript"> const arr1 = [1, 2]; const arr2 = [3, 4]; const merged = [...arr1, ...arr2]; console.log(merged); // 输出: [1, 2, 3, 4] </syntaxhighlight> === 3. 函数参数展开 === 将数组元素作为独立参数传递给函数: <syntaxhighlight lang="javascript"> function sum(a, b, c) { return a + b + c; } const nums = [1, 2, 3]; console.log(sum(...nums)); // 输出: 6 </syntaxhighlight> === 4. 解构赋值中的剩余项 === 与解构结合时,可以捕获剩余元素: <syntaxhighlight lang="javascript"> const [first, ...rest] = [1, 2, 3, 4]; console.log(first); // 输出: 1 console.log(rest); // 输出: [2, 3, 4] </syntaxhighlight> == 深度解析 == === 展开 vs 浅拷贝 === 展开运算符仅进行一层复制,嵌套结构需特别注意: <syntaxhighlight lang="javascript"> const original = [{ a: 1 }, { b: 2 }]; const copy = [...original]; copy[0].a = 99; // 修改会影响原数组 console.log(original[0].a); // 输出: 99 </syntaxhighlight> === 展开与迭代协议 === 展开运算符依赖对象的迭代器(<code>Symbol.iterator</code>),因此可以展开任何可迭代对象: <syntaxhighlight lang="javascript"> const str = "hello"; console.log([...str]); // 输出: ["h", "e", "l", "l", "o"] </syntaxhighlight> == 实际应用案例 == === 案例1:移除数组重复项 === 结合<code>Set</code>快速去重: <syntaxhighlight lang="javascript"> const duplicates = [1, 2, 2, 3, 4, 4]; const unique = [...new Set(duplicates)]; console.log(unique); // 输出: [1, 2, 3, 4] </syntaxhighlight> === 案例2:动态参数处理 === 在不确定参数数量时特别有用: <syntaxhighlight lang="javascript"> function logNames(prefix, ...names) { names.forEach(name => console.log(`${prefix} ${name}`)); } const students = ['Alice', 'Bob']; logNames('Student:', ...students); // 输出: // Student: Alice // Student: Bob </syntaxhighlight> == 性能考虑 == 展开运算符在大多数现代JavaScript引擎中已高度优化,但在超大规模数组(如10万+元素)操作时,直接循环可能更高效。可通过以下测试比较: <syntaxhighlight lang="javascript"> // 测试展开运算符性能 const largeArray = Array(100000).fill(0); console.time('spread'); const newArray = [...largeArray]; console.timeEnd('spread'); </syntaxhighlight> == 常见误区 == {| class="wikitable" |+ 易错场景分析 ! 错误示例 !! 问题原因 !! 修正方案 |- | <code>[...undefined]</code> || 非可迭代对象无法展开 || 添加默认值:<code>[...(obj || [])]</code> |- | <code>[...123]</code> || 数字不可迭代 || 先转换为字符串:<code>[...String(123)]</code> |} == 进阶用法 == === 条件展开 === 利用短路特性实现条件数组合并: <syntaxhighlight lang="javascript"> const base = [1, 2]; const optional = condition ? [3] : []; const result = [...base, ...optional]; </syntaxhighlight> === 多维数组展开 === 通过递归实现深度展开: <syntaxhighlight lang="javascript"> function deepFlatten(arr) { return [].concat(...arr.map(item => Array.isArray(item) ? deepFlatten(item) : item )); } console.log(deepFlatten([1, [2, [3]]])); // 输出: [1, 2, 3] </syntaxhighlight> == 可视化示例 == <mermaid> flowchart LR A[原数组: 1, 2, 3] --> B[...arr] B --> C[展开序列: 1, 2, 3] C --> D[新数组构造] D --> E[结果: 1, 2, 3] </mermaid> == 数学表达 == 数组展开可视为集合的并运算: <math> \text{设 } A = [a_1, a_2], B = [b_1, b_2] \text{,则 } [...A, ...B] = [a_1, a_2, b_1, b_2] </math> == 浏览器兼容性 == 展开运算符在以下环境中完全支持: * Chrome 46+ * Firefox 16+ * Safari 8+ * Edge 12+ * Node.js 5+ 对于旧环境,需使用Babel等工具转译为ES5代码。 [[Category:编程语言]] [[Category:JavaScript]] [[Category:Javascript数组]]
摘要:
请注意,所有对代码酷的贡献均被视为依照知识共享署名-非商业性使用-相同方式共享发表(详情请见
代码酷:著作权
)。如果您不希望您的文字作品被随意编辑和分发传播,请不要在此提交。
您同时也向我们承诺,您提交的内容为您自己所创作,或是复制自公共领域或类似自由来源。
未经许可,请勿提交受著作权保护的作品!
取消
编辑帮助
(在新窗口中打开)
该页面使用的模板:
模板:注意
(
编辑
)