专业编程基础技术教程

网站首页 > 基础教程 正文

填充 JavaScript 数组的 4 种方式

ccvgpt 2024-10-12 13:37:01 基础教程 9 ℃

在 JavaScript 中,我们往往会遇到需要使用某些默认值来填充数组的情况,那么都有哪些方式可以完成这样的任务呢?今天就为大家介绍 4 种填充数组的方式,并且会讲解一下每一种方式的优缺点。?

?Array.fill

Array.fill 应该是很直观的一种方式。如下代码所示,我们想要使用 "hello" 字符串把长度为 10 的数组填充满,代码就像下面这样:?

填充 JavaScript 数组的 4 种方式

?上述代码对于不可变的值,例如数值、字符串和布尔类型工作的很好。但是如果我们想要使用一个对象来填充呢??

?当我们使用对象来填充一个数组的时候,数组里面的每个索引处填充的值指向的都是这同一个对象,所以如果我们修改对象的时候:?

?它将会把数组中的所有值都改变掉,大多数情况下这都不是我们想要的行为。所以如果想要填充对象的话,得需要借助 map 来为每一个槽位单独填充对象才可以:?

?但是你应该要考虑到,map 方法是一个代价比较高的方法。它会生成一个新的数组,而不是直接操作原来的数组,数据量一大的话,性能会急剧下降。所以可以试试其他方法。

for 循环

我们可以先创建一个数组:?

?然后使用一个 for 循环一一赋值即可:?

?这样可以避免使用 map 方法。

Array.from

另外一种可选的方式是使用 Array.from 方法。Array.from 方法可以让你从一个像数组或可迭代的对象中创建数组。像数组的对象指的是这个对象有一个 length 属性,并且它的元素可以根据索引查询到。可迭代对象就是像 Map 或 Set 一类的。下面这行代码就将对象一一填充到数组的对应位置:?

?展开(Spread)操作符

最后一种方法是使用展开操作符:?

?使用展开操作符可以让我们展开一个数组,然后从展开的数组中再创建一个新的数组。使用这种方式,我们避免了使用 fill 方法,但是我们依旧使用了 map 方法。

结论

上述填充数组的各种方法都有优缺点,不知道小伙伴们平常使用哪个方法来完成这个任务呢?

Tags:

最近发表
标签列表