4个常用的 JS 数组内容默认填充方法

逃离我推掉我的手 2022-09-17 03:22 215阅读 0赞

![84a058bdba1ff78b7c7eeb258250d33a.png][]

在 JavaScript 中，我们往往会遇到需要使用某些默认值来填充数组的情况，那么都有哪些方式可以完成这样的功能呢？

### **方式一：使用Array.fill** ###

数组实例上可用的array.fill(initalValue)方法是一种初始化数组的便捷方法：当在数组上调用该方法时，整个数组都用填充初始值，并返回修改后的数组。比如：

const filledArray = Array(3).fill(0);
    filledArray; // [0, 0, 0]

如果需要用对象填充数组怎么办？

const filledArray = Array(3).fill({ value: 0 });
    filledArray; // [{ value: 0 }, { value: 0 }, { value: 0 }]

但是需要注意的是：这种方法创建了一个具有相同对象实例的数组。如果你碰巧修改了数组中的任何一项，那么数组中的每一项都会受到影响：

### **方式二：使用Array.from()** ###

Array.from(array, mapperFunction) 接受 2 个参数：一个数组（通常是一个可迭代的）和一个映射器函数。

mapperFunction对数组的每一项调用，将结果推送到新数组，最后返回新映射的数组。

因此Array.from()方法可以轻松地创建和初始化具有不同对象实例的数组：

可以看到修改数组中的任何一个对象，则只有该对象会受到影响，其他对象是不受影响的。

### **方式三：使用展开操作符...加array.map()** ###

我们知道直接使用Array(length)以创建数组的情况下，数组内元素为empty，如下：

const sparseArray = Array(3);
    sparseArray; // [empty × 3]

new Array(arrayLength) 方式构造的数组是一个稀疏数组，里面是没有任何值的，只有长度。所以这个方式构造出来的数组是无法遍历的，也就无法用 map 遍历填充值了。

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

### **方式四：使用Array.apply()加array.map()** ###

我们可以通过下面方式创建一个长度为3的数组，里面的值都是 undefined。

Array.apply(null, Array(3))

apply 方法会把生成的稀疏数组展开并当做参数再次传给 Array 的构造函数。其实等于：

Array.apply(null, [, , ,])

然后同方式三，使用map：

### **结论** ###

JavaScript 提供了很多用初始值填充数组的好方法。

如果你想创建一个用原始值初始化的数组，那么最好的方法是Array(length).fill(length)。

如果你数组内存放的是对象，需要保证对象具有不同的实例，则不能使用方式一。使用使用Array.from()、展开操作符...加array.map()、Array.apply()加array.map()这几种方式。

#  #

**学习更多技能**

**请点击下方公众号**

![4fe3eb4912505331f398fa20a1a63955.gif][]

[84a058bdba1ff78b7c7eeb258250d33a.png]: /images/20220828/0b4b05b96aa34cbcae05c53998b201fe.png
[4fe3eb4912505331f398fa20a1a63955.gif]: /images/20220828/e50f9787aafe4a9e9e486a88842e4c96.png

4个常用的 JS 数组内容默认填充方法

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 ES6中常用的4个数组方法

相关 js数组常用的方法汇总

相关 js数组常用的方法

相关 JS中数组常用的方法（详解）

相关数组常用的几个方法

相关前端js常用的数组方法

相关 js中数组常用的四个方法

相关 4个常用的 JS 数组内容默认填充方法

相关常用的14个数组方法

相关简单的复习下JS 数组常用的7个方法