javascript展开运算符是什么_有什么用途

18次阅读

javaScript展开运算符(…)是es6引入的解构工具,用于在数组字面量、对象字面量或函数调用中将可迭代对象摊开为独立元素,支持合并数组/对象、函数传参、浅拷贝及字符串转数组等场景。

javascript展开运算符是什么_有什么用途

javascript 展开运算符()是 ES6 引入的语法,作用是把一个可迭代对象(比如数组、字符串、对象、Set、map 等)“摊开”成独立的元素。它不是万能的魔法符号,而是一个明确的解构工具——只在特定上下文中生效,比如数组字面量 []、对象字面量 {} 或函数调用 () 中。

合并数组和对象

这是最直观的用途。不用再写 concat() 或手动遍历拼接:

  • 合并两个数组:const newArr = [...arr1, ...arr2];
  • 在中间插入值:const result = [...arr1, 'new', ...arr2];
  • 合并对象:const newObj = { ...obj1, ...obj2 }; 后者属性会覆盖前者同名属性
  • 添加/覆盖单个字段:const updated = { ...user, age: 27 };

函数调用传参

当参数已经在一个数组里,直接展开就能按位置传入:

  • math.max(...[1, 5, 3]); // 5,替代 Math.max.apply(NULL, arr)
  • console.log(...['a', 'b']); // a b
  • 配合动态参数:func(1, ...middleArgs, 10);

浅拷贝数组和对象

快速创建新引用,避免意外修改原数据(注意:只拷贝第一层):

立即学习Java免费学习笔记(深入)”;

  • 数组拷贝:const copy = [...originalArr];
  • 对象拷贝:const copy = { ...originalObj };
  • 适用于简单结构;含嵌套对象时,内部仍共享引用

其他实用场景

它还能处理一些看似不相关但很常见的需求:

  • 字符串转字符数组:[...'hello'] → ['h','e','l','l','o']
  • 将类数组转真数组:[...document.querySelectorAll('p')],之后可用 mapFilter
  • push 中批量添加:arr1.push(...arr2);
  • 配合解构提取剩余项:const [first, ...rest] = [1,2,3,4];
text=ZqhQzanResources