將javascript“幾乎數組”轉換為“數組”的最干凈方法是什么？

Question

在過去的幾個月中，我一直在使用JavaScript，發現使用了很多年后，它確實令人耳目一新。

就是說，特別令我困擾的一件事是它在描述“ []”結構方面的不一致之處。

特別是，我習慣於讓數組具有“映射”功能，但是很多用[[]”括起來的東西不支持映射，但是通常支持同義詞，有時甚至根本不支持。

例子：

1. document.getElementById（'my-div'）。children

完全沒有可映射性，每次我需要對其進行映射時，都必須求助於for循環。

2. document.querySelectorAll（'＃my-div *'）

有forEach :: callback -> undefined

與map不同，它不返回數組，因此鏈接轉換是“奇怪的”，因為除了在對象上進行映射外，還必須將結果存儲在數組中才能繼續。

這意味着以下操作無效。

(() => {
    document.querySelectorAll('#my-div *').forEach((divObject) => {
        console.log('found a ' + divObject.tagName + '.');
        return divObject;
    }).forEach((divObject) => {
        console.log('more transformations on ' + divObject.tagName + '.');
        return divObject;
    });
})();

但這將：

(() => {
    var children = [];

    document.querySelectorAll('#my-div *').forEach((divObject) => {
        children.push(divObject);
    });

    children.map((divObject) => {
        console.log('found a ' + divObject.tagName + '.');
        return divObject;
    }).map((divObject) => {
        console.log('more transformations on ' + divObject.tagName + '.');
        return divObject;
    });
})();

但是在forEach中“一個接一個”地復制元素只是沒有實際目的的額外工作，通常應該在發布這樣的代碼之前對其進行優化，因為這完全有損於性能。

3. jQuery的地圖正常工作。 例如$('#my-div *')有一個map :: callback -> array that supports map operation 。 因此它可以按預期方式鏈接。

問題 ：

是否有一種比必須使用for循環進行第一次迭代，推入內容的方法更有效的方法來克服類似數組的接口（看起來像“數組”但不支持Array.prototype.map的東西）的不一致問題。僅在知道它的行為方式與您認為的行為方式相同之后？

Answer 1

對於節點列表等所有奇異數組，如果它們是可迭代的，則可以放心地執行

var properArray = [...arrayLike]或var properArray = Array.from(arrayish)

或者你甚至可以喜歡

var properarray = Array(arrayish.length),
              i = 0;
for (var key of arrayish) while i < arrayish.length properArray[i++] = arrayish(key);

如果你有一個像

 var o = {prop_1:"one thing", prop_2:"another thing"}, a = []; o[Symbol.iterator] = function* (){ var oks = Object.keys(this); for (var key of oks) yield this[key] } a = [...o]; console.log(a); 

您可以使其迭代，並以相同的方式將其轉換為數組；

Answer 2

您可以避免使用.apply復制數組：

var nodeList = document.getElementsByTagName("p");

Array.prototype.map.apply(nodeList, function(node) {
  // do something with node
});

（顯然，對.map()的調用本身會創建一個新數組，但是無論如何都會發生這種情況。）

Answer 3

我的建議是： 避免鏈接 。

僅僅為了能夠鏈接forEach而轉換為數組和映射是一種浪費。

相反，只需將NodeList存儲在變量中。

 var nodes = document.querySelectorAll('*'); nodes.forEach(node => console.log('found a ' + node.tagName + '.')) nodes.forEach(node => console.log('more transformations on ' + node.tagName + '.')); 

注意NodeList在DOM4之前是不可迭代的。