使用数组的 Javascript 中的 HTML 表格排序可以工作，但为什么呢？答案

【问题标题】：HTML table sort in Javascript with Array works but why?使用数组的 Javascript 中的 HTML 表格排序可以工作，但为什么呢？
【发布时间】：2019-05-16 13:48:56
【问题描述】：

在这段代码中：

let container = document.getElementById('variables');
Array.from(container.querySelectorAll('tr'))
  .sort((a, b) => a.getAttribute("name").localeCompare(b.getAttribute("name"), ))
  .forEach(tr => container.appendChild(tr));

<table id="variables">
  <tr name=B>
    <td>B</td>
  </tr>
  <tr name=A>
    <td>A</td>
  </tr>
  <tr name=C>
    <td>C</td>
  </tr>
</table>

我创建了一个未排序的 HTML 表并使用 JavaScript 对其进行排序。

我工作，但我不明白为什么我没有得到原始数组，然后是排序数组，因为 forEach 对原始表执行 appendChild

这段代码背后的魔力是什么？

【问题讨论】：

标签： javascript html arrays sorting

【解决方案1】：

foo.appendChild(bar) 将bar 放在foo 的末尾。

由于一个元素不能同时存在于两个地方，如果它已经是另一个元素的子元素，则先从那里移除。

即和foo.appendChild(bar.cloneNode(true))不一样

【讨论】：

好的，但是在 Array.from doc 中写到它创建了元素的副本。你说它不复制 inside/childs 元素？
@Benjamin — Array.from 创建类数组对象的 shallow 副本。该数组中的引用仍然是对原始对象的引用。