还在用 Array() 创建数组？你可能踩了这个坑！

「小墨是前端」致力于分享实用前端技术、挖掘优秀的开源项目，带你探索前端的奇妙世界，共同学习进步。

在前端开发中，创建数组是一个非常常见的操作。你可能习惯了使用Array()构造函数，但它却隐藏着一个容易被忽视的陷阱：参数个数不同，创建的数组也截然不同。本期让我们一起揭开Array.of()的神秘面纱，看看它是如何优雅地解决这个问题。

Array() 的陷阱

Array()构造函数的行为取决于你传入的参数个数：

1.无参数：创建一个空数组[]。这符合我们的预期。

2.一个参数：如果参数是数字 n，它不会创建一个包含 n 的数组，而是创建一个长度为 n 的空数组！例如，Array(3)创建的是[empty × 3]，而不是[3]。这是一个很容易让人踩坑的地方。

3.多个参数：这时候Array()才按预期工作，将所有参数作为数组元素。例如，Array(1, 2, 3)创建的是[1, 2, 3]。

这种不一致的行为，很容易导致代码中出现 bug。为了避免这种尴尬的局面，ES6 引入了Array.of()方法。

Array.of()

Array.of()的行为非常简单直接：无论传入多少个参数，都将它们作为元素创建一个新的数组。即使不传入参数，它也会创建一个空数组。

Array.of();         // []

Array.of(1);        // [1]

Array.of(1, 2, 3);   // [1, 2, 3]

Array.of(undefined); // [undefined]

对比一下Array()的行为：

Array();        // []

Array(3);       // [empty × 3]  注意：这是一个长度为 3 的空数组

Array(1, 2, 3); // [1, 2, 3]

是不是清晰多了？Array.of()的出现，让你无需再担心参数个数带来的困扰。

兼容性与 Polyfill

Array.of()是 ES6 的特性，一些老旧的浏览器可能不支持。不用担心，我们可以使用 Polyfill 来解决兼容性问题：

Array.of() 的应用场景

除了创建包含基本数据类型的数组外，Array.of()也能创建包含对象的数组：

const users = Array.of(

{ name: 'Alice', age: 30 },

{ name: 'Bob', age: 25 }

);

console.log(users); // Output: [{ name: 'Alice', age: 30 }, { name: 'Bob', age: 25 }]

Array.of()的简洁和一致性，使它成为创建数组的首选方法。 拥抱Array.of()，告别Array()带来的陷阱，让你的 JavaScript 代码更加健壮和易于维护！

创作不易，求点赞、求在看、求转发！你的支持是我创作的最大动力！关注小墨，带你解锁更多前端技能！