javascript - 将 javascript "almost arrays"转换为 "arrays"最干净的方法是什么？

Question

过去几个月我一直在研究 JavaScript，在多年未使用它之后发现它确实令人耳目一新。

也就是说，真正让我困扰的一件事是它描述“[]”结构的不一致。

特别是，我习惯让数组有“map”功能，但很多用“[]”括起来的东西不支持map，但往往支持同义词，有时根本不支持。

示例:

1. document.getElementById('my-div').children

根本没有可映射性，每次我需要映射它时，我都必须求助于 for 循环。

document.querySelectorAll('#my-div *')

有 forEach::回调 -> 未定义

与映射不同，它不返回数组，因此链接转换很“奇怪”，因为除了映射对象之外，您还必须将结果存储在数组中才能继续。

这意味着以下内容将不起作用。

(() => {
    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 中“一个接一个”地复制元素只是额外的工作，没有任何实际目的，通常应该在发布这样的代码之前进行优化，因为它会无缘无故地损害性能。

jQuery 的 map 工作正常。例如$('#my-div *')有一个map::callback ->数组支持map操作。因此它可以按预期链接。

问题:

有没有一种更干净的方法来克服类似数组的接口(interface)(看起来是“数组”但不支持 Array.prototype.map 的东西)的不一致性，而不是使用 for 循环进行第一次迭代，插入内容，只有在知道它的行为方式是您认为的行为方式之后？

Answer 1

对于所有奇异的数组，如节点列表等，如果它们是可迭代的，你可以安全地这样做

varproperArray = [...arrayLike] 或 varproperArray=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);

您可以使其可迭代并以相同的方式将其转换为数组；