首页 > 网络编程 > JavaScript > javascript技巧 > JS new Array() 与 Array.from()

JS中new Array() 与 Array.from() 的差异与陷阱

2026-10-18 09:35:47 作者：星光不问赶路人

本文主要介绍了JS中new Array() 与 Array.from() 的差异与陷阱,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

一、最直观的差异（重点）

new Array(10)
// [ <10 empty items> ]

Array.from({ length: 10 })
// [ undefined, undefined, ..., undefined ]（10 个）

核心区别：

new Array(10) → 稀疏数组（holes）
Array.from({ length: 10 }) → 密集数组（元素存在，值为 undefined）

二、数组“空槽（hole）” vsundefined

特性	new Array(10)	Array.from({ length: 10 })
数组长度	10	10
是否有元素	❌ 没有（hole）	✅ 有
0 in arr	false	true
arr[0]	undefined	undefined
JSON.stringify	[null,null,...]	[null,null,...]

const a = new Array(10)
const b = Array.from({ length: 10 })
// 检查0下标
0 in a // false
0 in b // true

⚠️ undefined !== hole

三、遍历 & 高阶函数行为差异（非常重要）

1️⃣map / forEach / filter

new Array(3).map(() => 1)
// [ <3 empty items> ]

Array.from({ length: 3 }).map(() => 1)
// [1, 1, 1]

原因：

高阶方法会跳过 hole
不会跳过 undefined

2️⃣for...of

for (const x of new Array(3)) {
  console.log(x)
}
// undefined undefined undefined

for (const x of Array.from({ length: 3 })) {
  console.log(x)
}
// undefined undefined undefined

for...of 会遍历 hole（与 map 不同）

3️⃣for...in

for (const i in new Array(3)) console.log(i)
// 什么都不输出

for (const i in Array.from({ length: 3 })) console.log(i)
// 0 1 2

四、性能与语义差异

维度	new Array(10)	Array.from({ length: 10 })
创建速度	更快	稍慢
内存	更省（无元素）	占用更多
可预测性	❌ 容易踩坑	✅ 行为一致
函数式友好	❌	✅

五、典型使用场景

✅ 适合new Array(10)的情况

// 只关心 length
const buffer = new Array(1024)

// 之后立即填充
const arr = new Array(10)
arr.fill(0)

✅ 适合Array.from({ length: 10 })

// 需要 map / filter / reduce
const list = Array.from({ length: 10 }, (_, i) => i)

// JSX / Vue 渲染
{Array.from({ length: 5 }).map((_, i) => (
  <Item key={i} />
))}

六、等价但更常见的写法

Array.from({ length: 10 }, (_, i) => i)

// 等价于
[...Array(10).keys()]

七、总结一句话（面试 / 设计建议）

new Array(n) 创建的是“空槽数组”，
Array.from({ length: n }) 创建的是“真实元素数组”。

推荐原则：

要遍历 / map / 渲染 → Array.from
只当占位容器 → new Array

到此这篇关于JS中new Array() 与 Array.from() 的差异与陷阱的文章就介绍到这了,更多相关JS new Array() 与 Array.from() 内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！