JavaScript填充数组的8种方法

Array.prototype.fill()

也可以是Array.fill

我们可以使用数组实例的fill方法为现有数组填充值。

它具有以下签名：

Array.prototype.fill(value, start=0, end=this.length) fill方法具有以下参数：

• value ——用来填充数组的值。

• start——可选参数，用于指示要填充数组的起始索引。默认是0

• end——可选参数，结束索引，默认值为数组实例的长度。结束索引本身不包括在内

它返回一个修改后的数组，其中填充了值。

例如，我们可以按以下方式使用它：

const arr = [1, 2, 3].fill(6, 1, 3);

然后 arr 是 [1、6、6]，因为我们指定要填充的值6是从索引1开始直到2。

fill 始终填充到最终索引减1。

如果我们跳过可选的参数：

const arr = [1, 2, 3].fill(6);

然后我们得到 [6，6，6]，因为我们省略了可选参数，所以用6覆盖了所有项。

Array.from()

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

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

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

const filledArray = Array.from(Array(3), () => {
   return { value: 0 };
});

filledArray; // [{ value: 0 }, { value: 0 }, { value: 0 }]
filledArray[1].value = 3;
filledArray; // [{ value: 0 }, { value: 3 }, { value: 0 }]

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

使用展开操作符...加array.map()

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

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

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

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

const filledArray = [...Array(3)].map(() => {
  return { value: 0 };
});
filledArray; // [{ value: 0 }, { value: 0 }, { value: 0 }]
filledArray[1].value = 3;
filledArray; // [{ value: 0 }, { value: 3 }, { value: 0 }]

使用Array.apply()加array.map()

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

Array.apply(null, Array(3))

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

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

使用map：

const filledArray = Array.apply(null, Array(3)).map(() => {
  return { value: 0 };
});
filledArray; // [{ value: 0 }, { value: 0 }, { value: 0 }]
filledArray[1].value = 3;
filledArray; // [{ value: 0 }, { value: 3 }, { value: 0 }]

填充升序数字

通过将点扩展符与数组实例的 keys 方法结合使用，我们可以从0开始以升序数填充数组。

例如，我们可以编写以下代码：

const arr = [...new Array(5).keys()]

那么 arr 的值是 [0,1,2,3,4]，因为我们创建了一个有5个条目的新数组，调用它的 keys，然后将其传播到一个新的数组中。

使用计算值填充

要用计算值填充数组，我们可以使用 Array.from 方法，然后将回调传递给第二个参数，以将值映射到我们在每个条目中想要的内容。

例如，如果要创建一个包含5个奇数作为其内容的数组，则可以编写以下内容：

const arr = Array.from(new Array(5), (x,i) => i*2 + 1)*

然后 arr 的值为 [1、3、5、7、9]，因为我们通过在第一个参数中调用 Array 构造函数创建了一个新数组。然后在第二个参数中，我们传入一个函数来映射我们在第一个参数中创建的数组的索引 i，并返回 i*2 + 1。

因此，我们在数组中得到5个奇数。

用undefined填充

要填充 undefined，我们只需使用一个参数（其值为0或更大的整数）调用 Array 构造函数即可。

然后，我们将新构造的数组扩展到一个新数组中，将数组构造函数调用中创建的空值转换为 undefined。

例如，我们可以这样写：

const arr = [...new Array(3)]

arr 有值[undefined, undefined, undefined]，因为我们扩展了值。

使用 String的repeat() 方法

我们可以调用repeat 重复一个字符串，然后调用split将字符串拆分为数组条目。

例如，如果要用'foo'填充长度为5的数组，则可以编写：

const arr = 'foo|'.repeat(5).split('|').filter(f => !!f);

在上面的代码中，我们使用了| 符号作为定界符，我们在调用repeat 来重复'foo |'之后使用它来调用split 。

然后我们调用 filter 来删除 split 返回的数组末尾的空字符串值。

因此，arr 的值是[" foo "， " foo "， " foo "， " foo "， " foo "， " foo "]。