1、原生js获取同级的兄弟节点
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>蚂蚁部落</title> <script type="text/javascript"> window.onload=function(){ var oli=document.getElementById("antzone"); var obox=oli.parentNode; var lis=obox.children; for(var i=0;i<lis.length;i++){ if(lis[i]!=oli){ lis[i].style.color="red"; } } } </script> </head> <body> <ul id="box"> <li>蚂蚁部落一</li> <li id="antzone">蚂蚁部落二</li> <li>蚂蚁部落三</li> <li>蚂蚁部落四</li> </ul> </body> </html>
2、关于字符串、undefined、{}、null在代码中true还是false
字符串会自动转为true;
undefined会转为false,但是有时候获取值时,undefined会为字符串,此时为true;
{} 空对象会为true,那么如何判断一个对象是否为空?
var a = {}; if(!a){ console.log(1);} else if(a == null) { console.log(2);} else { console.log(3);} // 输出3 var b = {}; if(b == {}){ console.log(4);} if(b == '{}') { console.log(5);} if(typeof(b) == 'object') { console.log(6);} // 输出6 var c = {}; if(JSON.stringify(c) == "{}"){ console.log(7);} // 输出7 var d = {}; var e = {id:111}; if(d.id){ console.log(8);} if(e.id){ console.log(9);} //输出9
小结:显然代码3的判断方式比较“强势”,但效率明显不如代码4的判断方法
3、实现对数组、对象的深层拷贝
当组件间传递对象时,由于此对象的引用类型指向的都是一个地址(除了基本类型跟null,对象之间的赋值,只是将地址指向同一个,而不是真正意义上的拷贝),如下
数组: var a = [1,2,3]; var b = a; b.push(4); // b中添加了一个4 alert(a); // a变成了[1,2,3,4] 对象: var obj = {a:10}; var obj2 = obj; obj2.a = 20; // obj2.a改变了, alert(obj.a); // 20,obj的a跟着改变
这就是由于对象类型直接赋值,只是将引用指向同一个地址,导致修改了obj会导致obj2也被修改
所以在vue中,如果多个组件引用了同一个对象作为数据,那么当其中一个组件改动对象数据时,其他对象的数据也会同步改动。有这种双向绑定的需要的话,那么自然是最好的,但如果不需要这种绑定而希望各组件的对象数据之间相互独立,即是互不关联的对象副本的话,可以用下面的方法解决
var obj={}; obj=JSON.parse(JSON.stringify(a));