前端部分知识点总结

v-if和v-show的区别?
共同点:都可以让节点显示隐藏
区别:
v-if是节点的一个有-没有状态,如果频繁切换,影响性能,原因是会节点会重新渲染。
v-show是css样式改变就是display:none的效果,节点会一直在,适用于经常切换的场景。
涉及到的知识点:重绘和回流,重绘不一定会引起回流,但是回流一定会引起重绘。
修改像css等的样式就会重绘,修改想dom节点这些就会回流重新render。
所以会根据实际情况选择v-if还是v-show。
js如何判断简单数据类型和复杂数据类型
方法1:简单数据类型用typeof但是要排除一个null,null输出为object
用typeof也可判断复杂类型,但是数组和对象输出都为object,函数输出是function。

方法2:instanceof简单来讲instanceof 用于判断一个变量是否是某个对象的实例
其实这点和prototype有关。
例:
let b=new Array();
console.log(b instanceof Array); //true  b是Array的一个实例。
特别注意:
let a=2;
console.log(a instanceof Number);   //false

let b=new Number(2);
console.log(b instanceof Number);  //true
重点:instanceof 用于判断一个变量是否是某个对象的实例
第二个输出为true是因为第二个b值是通过new出来的,是Number的一个实例。
特例:
1.null
console.log(new null instanceof Null);//null is not a constructor
2.undefind
console.log(new undefined instanceof Undefined);//undefined  is not a constructor
关于null,是js发展过程中设计者的重大失误,早期准备更改null的类型为null
由于当时已经有大量网站使用了null,如果更改,将导致很多网站的逻辑出现漏洞问题
就没有更改,于是一直遗留到现在。
总结:基本数据类型和复杂数据类型只要是通过new出来的实例
除了null和undefined都可以用instanceof判断。

方法3.constructor
function like(){};
like.prototype=new Array();     //更改了原型
let c=new like();
console.log(c.constructor===like);  //false
console.log(c.constructor===Array);  //true

方法4.object.prototype.toString.call()
其实是利用了对象的方法
let a=Object.prototype.toString
console.log(a.call(2)); //[object Number]
console.log(a.call("2"));  //[object String]
console.log(a.call(undefined));  //[object Undefined]
console.log(a.call(null));  //[object Null]
console.log(a.call(true));  //[object Boolean]

console.log(a.call([]));  //[object Array]
console.log(a.call({}));  //[object Object]
console.log(a.call(function(){}));  //[object Function]
最后对四种方法进行一个总结:
typeof除了null和对象数组输出为object,其余都能判断。
instanceof是new 出来的实例,除了null和undefined。
constructor不能更改原型,更改后输出的是原型对应的类型。
object.prototype.toString.call()方法通用。
发布了12 篇原创文章 · 获赞 9 · 访问量 194

猜你喜欢

转载自blog.csdn.net/weixin_43279985/article/details/103812602