javascript的展开运算符是什么_如何合并数组和对象?

2次阅读

javascript 的展开运算符是什么_如何合并数组和对象?

javaScript 的展开 运算符 Spread operator)是三个英文句点 ,它能把 可迭代对象 (如数组、 字符串 )或类数组 对象“打散”成独立的元素,也支持将对象的属性逐个展开。它常用于数组合并、对象合并、函数调用传参等场景,写法简洁且可读性强。

用展开运算符合并数组

传统方式合并数组常用 concat() 或手动 push,而展开运算符让操作更直观:直接把一个数组“铺开”,再与其他元素一起组成新数组。

  • 合并两个或多个数组:
    const arr1 = [1, 2];<br>const arr2 = [3, 4];<br>const merged = [……arr1, ……arr2]; // [1, 2, 3, 4]

  • 在开头 / 中间插入元素:
    const nums = [2, 3];<br>const withHead = [1, ……nums, 4]; // [1, 2, 3, 4]

  • 浅拷贝数组(避免修改原数组):
    const original = [1, 2, 3];<br>const copy = [……original];

用展开运算符合并对象

对象展开会把自身可枚举属性(不含原型链上的)复制到新对象中。多个对象展开时,** 后出现的同名属性会覆盖前面的 **,这点和 Object.assign() 行为一致。

  • 基础合并:
    const obj1 = {a: 1, b: 2};<br>const obj2 = {b: 3, c: 4};<br>const merged = {……obj1, ……obj2}; // {a: 1, b: 3, c: 4}

  • 添加 / 覆盖属性:
    const base = {x: 10};<br>const extended = {……base, y: 20, x: 99}; // {x: 99, y: 20}

  • 注意:只做一层浅合并,嵌套对象不会 递归 处理。
    若需深合并,得配合其他方法(如结构化克隆或第三方库)。

常见注意事项

  • 展开运算符只能用在 表达式位置,不能单独一行写 ……arr,否则语法错误。
  • 对对象使用时,不支持 Set、map 等非普通对象的直接展开(但可用 [……map.keys()] 展开其键或值)。
  • 展开 NULLundefined 会报错,建议合并前做判空处理,例如:
    {……(obj || {}), name: 'test' }
  • 与剩余参数(Rest Parameter)符号相同(……),但语义相反:展开是“拆”,剩余是“收”。

站长
版权声明:本站原创文章,由 站长 2025-12-20发表,共计946字。
转载说明:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
1a44ec70fbfb7ca70432d56d3e5ef742
text=ZqhQzanResources