JS的from方法和fill方法

介绍

在JavaScript中，数组是一种常用的数据结构。从ES6开始，JavaScript为数组提供了一些新的方法，其中包括了from和fill方法。

from方法

from方法是用来将其他数据类型转换成数组的。它接收一个可迭代对象或类数组对象作为参数，返回一个新的数组对象，这个数组包含了传入对象的所有元素。

我们来看一下它的用法：

// 可迭代对象
const iterable = 'hello';
const arr = Array.from(iterable);
console.log(arr); // ['h', 'e', 'l', 'l', 'o']

// 类数组对象
const arrayLike = { 0: 'a', 1: 'b', 2: 'c', length: 3 };
const arr1 = Array.from(arrayLike);
console.log(arr1); // ['a', 'b', 'c']

fill方法

fill方法是用来填充数组的。它接收一个值作为参数，将数组中的所有元素都替换为这个值，并返回修改后的数组。

我们来看一下它的用法：

const arr2 = [1, 2, 3, 4, 5];
arr2.fill(0);
console.log(arr2); // [0, 0, 0, 0, 0]

const arr3 = new Array(3).fill('a');
console.log(arr3); // ['a', 'a', 'a']

使用场景

from方法

from方法常用在将类数组对象或可迭代对象转换成数组时。例如，将DOM节点集合或字符串转换成数组。

const nodeList = document.querySelectorAll('p');
const arr4 = Array.from(nodeList);

const str = 'hello world';
const arr5 = Array.from(str);

fill方法

fill方法常用在初始化数组时，或在需要对数组的所有元素赋相同值的情况下。

// 初始化数组
const arr6 = new Array(3).fill(0);

// 赋相同值
const arr7 = [1, 2, 3];
arr7.fill(0);

注意事项

1. from方法只会将可迭代对象的可枚举属性加入到新数组中，不会复制其原型链上的属性。
2. fill方法会修改原数组，如果不想修改原数组，需要先复制一份。
3. fill方法可以接受第二个和第三个参数，用来指定填充的起始位置和结束位置。

结论

from方法和fill方法是JavaScript数组的两个常用方法。from方法可以将可迭代对象和类数组对象转换成数组，fill方法可以用来填充数组。我们可以根据实际需求来选择使用这两个方法。