类数组对象转换为数组

<!-- HTML结构 -->
<ol id="test-list">
    <li class="lang">Scheme</li>
    <li class="lang">JavaScript</li>
    <li class="lang">Python</li>
    <li class="lang">Ruby</li>
    <li class="lang">Haskell</li>
</ol>
<script>
    var children = document.getElementById('test-list').children;
</script>

方法1：使用 Array.from(children)：

var childrenArray = Array.from(children);

方法2：扩展运算符（spread operator）[...]。

var childrenArray = [...children];

方法3：Array.prototype.slice.call(children) 

这种方法在旧版本的 JavaScript 中更常见，因为 Array.from() 是在 ECMAScript 6 中引入的。

var childrenArray = Array.prototype.slice.call(children);

Array.prototype.slice.call(children) 是一个常见的用法，用于将类数组对象（如 DOM 元素集合）转换为真正的数组。下面是这个表达式的详解：

1. Array.prototype.slice：

   • slice() 是 JavaScript 中数组对象的方法，用于提取数组的一部分，并返回一个新数组，而不修改原始数组。它通常被用来创建数组的浅拷贝。
   • 使用 call() 方法，我们可以在任意对象上调用一个指定的函数，并且将其参数作为对象的属性。在这种情况下，我们在数组原型对象上调用了 slice() 方法。

2. call(children)：

   • call() 是 JavaScript 中所有函数对象的方法，它允许你在一个对象上调用一个方法。它的第一个参数指定了函数调用时的上下文（即 this 关键字指向的对象），后续的参数将作为函数的参数传递进去。
   • 在这个表达式中，我们将 children 作为 slice() 方法的上下文对象。这意味着在 slice() 方法中，this 将指向 children 对象。

3. Array.prototype.slice.call(children)：

   • 通过结合前两步，我们实际上在 children 对象上调用了 slice() 方法。由于 children 是一个类数组对象（NodeList），它并不是一个真正的数组，因此我们无法直接使用 slice() 方法。
   • 但是通过在 slice() 方法上调用 call(children)，我们将 slice() 方法的执行上下文（即 this）设置为 children，使得 slice() 方法认为它是在一个数组上被调用的。

综上所述，Array.prototype.slice.call(children) 的效果是将 children 转换为一个真正的数组，并且在这个过程中保留了数组的顺序。这个数组包含了 children 中的所有元素。

应用实例

按字符串顺序重新排序DOM节点

   <ol id="test-list">
        <li class="lang">Baby</li>
        <li class="lang">Pear</li>
        <li class="lang">Apple</li>
        <li class="lang">Zoom</li>
        <li class="lang">Coco</li>
    </ol>
    <script>
        var parent = document.getElementById('test-list')
        var childrenArray = Array.from(parent.children);
        // 按字符串顺序排序节点
        childrenArray.sort(function (a, b) {
            return a.textContent.localeCompare(b.textContent);
        });
        // 将排序后的节点重新添加到父元素中
        childrenArray.forEach(function (item) {
            parent.appendChild(item);
        });
    </script>