while 语句中的赋值表达式问题 while(firstChild = el.firstChild)

Question

最近看到这样一段代码：

let fragment = document.createDocumentFragment();
let firstChild;
while(firstChild = el.firstChild) {
 fragment.appendChild(firstChild);
}
return fragment;

代码中如果把fragment.appendChild(firstChild)注释掉，则会进入死循环，如果在while语句中去打印el.firstChild,则发现每次循环都在递进DOM节点，直到最后为空。请问这是什么原理呢？有没有这方面的资料文章呢？

Answer 1

while(firstChild = el.firstChild)
这个语句进行了2个操作：

1. 执行赋值操作firstChild = el.firstChild
2. 执行while(firstChild)，while是条件为真的情况下才执行，也就是必须el.firstChild有值的情况下才执行

当判定while(firstChild)为真的情况执行fragment.appendChild(firstChild);
把el.firstChild即el.children[0]抽出插入到fragment。注意这个操作是move dom， el.children[0]被抽出，在下次while循环执行firstChild = el.firstChild时读取的是相对本次循环的el.children[1] 以此达到循环转移dom的目的

Answer 2

fragment.appendChild()具有移动性
相当于把el中节点移动过去

let fragment = document.createDocumentFragment();
let firstChild;
while(firstChild = el.firstChild) {
fragment.appendChild(firstChild);
}
console.log(el.firstChild);//你打印一个这个就明白了
return fragment;

Answer 3

如果被插入的节点已经存在于当前文档的文档树中,则那个节点会首先从原先的位置移除,然后再插入到新的位置.

如果你需要保留这个子节点在原先位置的显示,则你需要先用Node.cloneNode方法复制出一个节点的副本,然后在插入到新位置.

Answer 4

不断将第一个子元素append到文档碎片里 一直到移动完毕为止