完全理解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，但是我們也應該深入理解數組的本質，充分掌握原生方法和屬性的使用方式。