JavaScript中[...array].map(...)和[...array.map(...)]存在区别吗？

二者存在本质区别，执行顺序、适用场景、运行结果都有明显不同：

1. 执行逻辑差异 #

• [...array].map(...) #

  运行顺序为先执行扩展运算、再执行map：
  首先用...对原array做浅拷贝生成一个全新的临时数组，再对这个拷贝出来的新数组调用map方法，全程不会修改原数组。
  示例代码：

  const array = [1,2,3]
  const result = [...array].map(num => num * 2)
  // 执行流程：浅拷贝得到新数组[1,2,3] → 对新数组做map得到[2,4,6]
  // 原array的值始终为[1,2,3]，不受任何影响
  

• [...array.map(...)] #

  运行顺序为先执行map、再执行扩展运算：
  首先直接对原array调用map方法得到map返回的新数组，再对这个map的结果做扩展运算，最终生成另一个新数组。
  示例代码：

  const array = [1,2,3]
  const result = [...array.map(num => num * 2)]
  // 执行流程：对原数组做map得到[2,4,6] → 浅拷贝map的结果得到[2,4,6]
  

2. 实际使用的区别 #

• 如果你需要在操作数组前隔离原数组，避免后续对数组元素（尤其是引用类型元素）的修改影响到原数组，选择[...array].map(...)符合需求。
• [...array.map(...)]属于冗余写法：因为map本身就会返回一个和原数组无关的全新数组，外层再套扩展运算符只会额外占用内存，没有任何实际收益，日常开发可以直接简化为array.map(...)。

3. 特殊场景的运行差异 #

如果操作的array是实现了迭代器的类数组对象（比如NodeList、arguments对象），二者的表现会完全不同：

• [...array].map(...)会先把类数组转为标准数组，再调用数组原型的map方法，不会报错。
• 如果类数组本身没有实现map方法（比如早期浏览器的NodeList就没有内置map），[...array.map(...)]会直接抛出array.map is not a function的错误。

内容的提问来源于stack exchange，提问作者Amir Nf