完全理解array.from

一、数组长度和空位

1、array.from可以把类数组对象或可迭代对象转化为真正的数组，其中数组长度取决于迭代器中的元素数量。

const arr = Array.from({length: 5});
console.log(arr.length); // 5
console.log(arr); // [undefined, undefined, undefined, undefined, undefined]

2、但是需要注意的是，对于一个数组中不存在的元素位置，我们称之为“空位”，它既不是undefined也不是null。使用array.from会把数组的空位转化成undefined。

const arr = [, , ];
console.log(arr.length); // 2
console.log(Array.from(arr)); // [undefined, undefined]

3、在ES6之前，为了避免空位的影响，可以用for循环或array.prototype.map方法得到类似的数组。但是这些方法都无法避免空位的影响，代码执行会出现意外情况。使用array.from可以避免这种问题。

二、映射函数

1、在array.from中，可以添加第二个参数作为映射函数，对转化后得到的新数组进行处理。

const arr = [1, 2, 3, 4];
const newArr = Array.from(arr, x => x * 2);
console.log(newArr); // [2, 4, 6, 8]

2、这个映射函数类似于数组原生方法array.prototype.map的处理方式，但是它将对转化的新数组进行处理，而不会改变原来的数组。

三、迭代器对象

1、array.from还可以接受可迭代对象作为参数，这些对象具有一个迭代器方法，该方法通过for..of循环来获取每个元素。

const str = 'Hello';
console.log(Array.from(str)); // ['H', 'e', 'l', 'l', 'o']

2、除了字符串，DOM节点集合也是可迭代的，我们可以使用array.from将它们转化为真正的数组。

const paragraphs = document.querySelectorAll('p');
const arr = Array.from(paragraphs);
console.log(arr);

3、因此，array.from可以让开发者使用数组原生的方法和属性，对DOM节点集合进行处理。

四、转化函数

1、除了映射函数，array.from还可以接受第三个参数，转化函数。转化函数会在从可迭代对象中读取每个元素后被调用，以确定如何转换为数组元素。

const arr = Array.from({length: 3}, (v, i) => i * 2);
console.log(arr); // [0, 2, 4]

2、这个转化函数的第一个参数是当前元素，第二个参数是当前元素的索引号。在这个例子中，可迭代对象的元素为undefined，但我们使用索引值简单地乘以2转换了每个数组元素。

五、使用具有Symbol.iterator属性的对象

1、array.from还可以接受具有Symbol.iterator属性的对象作为参数，这个属性返回一个迭代器对象。

const obj = {
  *[Symbol.iterator]() {
    yield 1;
    yield 2;
    yield 3;
  }
}
console.log(Array.from(obj)); // [1, 2, 3]

2、在这个例子中，我们定义了一个带有yield关键字的函数，这个函数返回一个生成器对象。这个生成器对象具有Symbol.iterator属性，因此它是可迭代的。最后我们使用array.from将它转化为真正的数组。

六、总结

1、array.from是一个强大而灵活的方法，可以将类数组对象和可迭代对象转化为真正的数组，同时支持映射函数、转化函数和具有Symbol.iterator属性的对象，增加了开发者的编程灵活性。

2、使用array.from可以更优雅地处理数组和DOM节点集合的相互转化过程，避免了一些之前的问题。

3、尽管ES6已经出现了array.from，但是我们也应该深入理解数组的本质，充分掌握原生方法和属性的使用方式。