欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

前端部分知识点总结

程序员文章站 2022-05-10 11:52:29
...
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()方法通用。