这个练习有点诡异
Topic sourceArray.form()是一种浅拷贝的方法,创建出的数组实例和源对象共享同一个内存地址。
如果对liAry[i].innerText进行赋值操作,可以看到对应的li.children[i].innerText也发生了改变。
所以在进行appendChild()操作时,系统认为插入的节点已经存在于当前的文档树,因此这个节点首先会从原先的位置删除,再插入到新的位置。
同样的,如果把上半部分的代码写成:
for(var i=0;i<liAry.length;i++)
li.appendChild(liAry[i]);
也不会保留原有元素。
creatElement()元素内存地址与原有元素不同,所以会被当成新节点直接插入。
我也在一边查资料一边学习,如果上面的结论有错误还请提出来。
楼上说的是对的,因为直接forEach的写法,你打印每次的添加的效果会是
第一次Scheme,JavaScript,Python,Ruby,Haskell;
第二次Scheme,Python,Ruby,Haskell,JavaScript;
第三次Scheme,Ruby,Haskell,JavaScript,Python;
第四次Schem,Haskell,JavaScript,Python,Ruby;
第五次Haskell,JavaScript,Python,Ruby,Schem;
从尾部移动了你原排好序的元素,原元素的位置就被后面的元素顶上去了,我感觉还是使用第一种写法比较规范,容易理解。
- 1
A牧羊小童
下面的代码,是可以通过测试的,这个逻辑可以理解。
// sort list:
var li = document.getElementById('test-list');
var liAry = Array.from(li.children).sort((x,y)=>{
return x.innerText > y.innerText? 1:-1;
});
/*请注意这一行*/
li.innerHTML = '';
for(var i=0;i<liAry.length;i++){
console.log(liAry[i].innerText);
l = document.createElement('li');
l.className = 'lang';
l.innerText = liAry[i].innerText;
li.appendChild(l);
}
但是上面的代码中,如果把 **li.innerHTML = '';**这一行移除,就不正常了,运行之后原来的元素还在,就变成10个 li 元素了。
这个也能理解,毕竟没有清空 **li** 对象直接进行appendChild操作,是会保留原来的元素的。
但是,诡异的来了,下面的代码,没有清空 **li** 对象,直接在forEach中进行了 appendChild,但为什么没有保留原来的元素呢?
// sort list:
var li = document.getElementById('test-list');
Array.from(li.children).sort((x,y)=>{
if(x.innerText> y.innerText)
return 1
else
return -1
}).forEach(a => li.appendChild(a))
本人js小白,无法理解上面的代码区别,请懂的同学回复解释下。