Array.from()与数组常规初始化的区别及适用场景

核心区别 #

• 数组字面量[arrayElements]：如果传入的arrayElements本身是数组，会创建一个嵌套数组（比如[ [1,2,3] ]）；它只能直接包裹给定元素，无法处理非数组的可迭代/类数组对象。
• Array.from([arrayElements])：会将传入的可迭代/类数组对象（包括数组）展开，生成一个新的一维数组（比如Array.from([1,2,3])得到[1,2,3]，和原数组内容一致但引用独立）；它的参数可以是任何具备迭代能力的对象，不局限于数组。

何时使用Array.from() #

• 处理非数组的可迭代/类数组对象：比如把DOM节点集合（NodeList）、Set、字符串、arguments对象转成数组。示例：

  // 把字符串转成字符数组
  Array.from('hello') // ['h','e','l','l','o']
  // 把NodeList转成可操作的数组
  Array.from(document.querySelectorAll('p'))
  

• 创建数组时同步完成元素转换：Array.from支持第二个映射参数，能在生成数组的同时完成元素处理，比先创建数组再调用map更简洁（少一次中间数组创建）。示例：

  // 一步生成翻倍后的数组
  Array.from([1,2,3], num => num * 2) // [2,4,6]
  

• 生成指定长度的初始化数组：可以利用类数组对象{length: n}配合映射函数，快速生成有规律的数组。示例：

  // 生成0到4的数组
  Array.from({length:5}, (_, index) => index) // [0,1,2,3,4]
  

关于Array.from与map的对比 #

你提到的[arrayElements].map(mappingFn)存在逻辑问题：如果arrayElements是数组，[arrayElements]会生成嵌套数组，map只会遍历外层的单个元素，最终得到的是[mappingFn(arrayElements)]，和Array.from的效果完全不同。正确的对比应该是arrayElements.map(mappingFn)和Array.from(arrayElements, mappingFn)：

• 当源数据已是数组时，两者效果相近，但Array.from能处理类数组/可迭代对象，而map只能在数组上调用。
• 处理类数组对象时，Array.from无需先转成数组再映射，一步到位；而用map的话需要额外处理，比如Array.prototype.map.call(likeArray, fn)或[...likeArray].map(fn)，代码冗余度更高。

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