ES12 标准下的 JavaScript：Array.of() 方法详解，Array.fill() 深入分析

在 ES12 (ES2021) 标准中，JavaScript 引入了一些新的方法和特性，其中包括 Array.of() 和 Array.fill() 方法。这两个方法都是用来处理数组的，本文将对它们进行详细的介绍和分析。

Array.of() 方法详解

Array.of() 方法是用来创建一个新的数组实例的，与 Array 构造函数不同的是，它不会受到参数数量的影响，即使只传递一个参数也会创建一个包含该参数的数组。下面是一个示例：

const arr1 = Array.of(1, 2, 3);
const arr2 = Array.of(4);
console.log(arr1); // [1, 2, 3]
console.log(arr2); // [4]

可以看到，即使只传递一个参数，Array.of() 方法仍然会创建一个数组。

与 Array 构造函数的行为相比，Array.of() 方法更加可靠和直观。因为在使用 Array 构造函数创建数组时，如果只传递一个数字参数，它将被解释为数组的长度而不是数组的值。这可能会导致一些意外的行为：

const arr1 = new Array(3); // 创建一个长度为 3 的数组
const arr2 = new Array(1, 2, 3); // 创建一个包含 3 个元素的数组 [1, 2, 3]
const arr3 = new Array('3'); // 创建一个包含一个元素的数组 ['3']

因此，推荐在创建数组时使用 Array.of() 方法。

Array.fill() 方法深入分析

Array.fill() 方法用来填充数组中的元素，可以用一个固定的值或者一个函数来填充。下面是一个示例：

const arr = [1, 2, 3, 4, 5];
arr.fill(0); // 将数组中的所有元素都填充为 0
console.log(arr); // [0, 0, 0, 0, 0]

fill() 方法还可以接受两个可选的参数，分别是填充的起始位置和结束位置。例如，如果我们只想填充数组的前三个元素：

const arr = [1, 2, 3, 4, 5];
arr.fill(0, 0, 3); // 将数组中前三个元素都填充为 0
console.log(arr); // [0, 0, 0, 4, 5]

可以看到，fill() 方法只填充了数组的前三个元素，后两个元素保持不变。

除了使用一个固定的值来填充数组外，我们还可以使用一个函数来填充数组，这个函数会接收数组中当前元素的值和索引作为参数。例如，我们可以使用一个函数来将数组中的所有奇数元素加 1：

const arr = [1, 2, 3, 4, 5];
arr.fill((value, index) => {
  if (value % 2 === 1) {
    return value + 1;
  }
  return value;
});
console.log(arr); // [2, 2, 4, 4, 6]

可以看到，fill() 方法使用我们提供的函数对数组中的元素进行了处理，将所有奇数元素加 1。

另外需要注意的是，fill() 方法会修改原始数组，如果我们想要创建一个新的数组，可以使用 map() 方法：

-- -------------------- ---- -------
----- --- - --- -- -- -- ---
----- ------ - --------------- -- -
  -- ------ - - --- -- -
    ------ ----- - --
  -
  ------ ------
---
----------------- -- --- -- -- -- --
-------------------- -- --- -- -- -- --

总结

Array.of() 和 Array.fill() 方法都是用来处理数组的，它们可以让我们更方便地创建和操作数组。Array.of() 方法可以创建一个包含任意数量元素的数组，而不会受到参数数量的影响。Array.fill() 方法可以用一个固定的值或者一个函数来填充数组中的元素，还可以指定起始位置和结束位置。需要注意的是，fill() 方法会修改原始数组，如果我们想要创建一个新的数组，可以使用 map() 方法。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6602764dd10417a222e1bcdf