js中的逻辑短路在项目中使用

前几天朋友在做vue项目中的时候,问了我一个问题

大概就是 一个数组中 [1,2,3,4,5,6,7];

用v-show控制元素渲染 除了 1和2之外 其他的元素正常渲染

然后就卡卡的写了

// 我只是用数据和例子模拟以下
<div v-show="type！=1||type!=2">hello world</div>

乍一看没毛病是吧
然后就问我 这个不行啊
我输入2的时候 hello world照样显示出来 他问我这样写对不　　
说实话 我并没有在v-show中写俩个判断条件　一是不太美观了　但我又不确定　只是觉得并不是写法的问题
然后 我想着可能是v-show 中不支持这样写吧
然后我就放在计算属性中

computed:{
	type(){
		return this.type!=1||this.type!=2
	}
}
// 当时 我代码一写完 编辑器就给我报了个警告 说的就是  this.type!=2 不会执行了 因为前面已经是 true了

然后 我就知道 了 并不是不支持的原因 而是 写法确实不对了
换一种写法 只是要 ==1 或者 ==2 让他返回false 其他的情况返回 true

computed:{
	type(){
		if(this.type==1||this.type==2){
			return false;
		}else{
			return true;
		}
	}
}

不过这个简介帮我复习了下 js中的逻辑短路问题
我们用或 || 的逻辑短路 在没有es6的 函数增强还是参数增强
js其实是个偷懒机制 或的逻辑短路
条件1 || 条件 2 如果条件1成立的话 条件2就不会再走了
不管了就那个 默认参数
// 以前没有这个东西的时候就是通过 逻辑的短路实现的

// es6 写法
function sum(a,b=10){}   //  b 不传入参数的情况下 是 10
sum(0);
//js逻辑短路的使用  es5 写法
function sum(a,b){
	var b=b||10;
}

工作中 有时候要兼容低版本的东西 经常要这些 毕竟es6虽然很完善兼容也不错 但总是存在一些特殊的东西 哈哈
还有就是 与 &&的逻辑短路
也给大家举个例子
条件1 && 条件 2 如果条件1不成立 条件2也就不会走了

var obj={
	sum:function(){
		return a+b;
	}
}

for(var key in obj){
	obj[sum]&&obj[sum]() // 就是 obj下的sum 如果有这个字段的话 就会执行后面的 方法
}

现在笔者维护公司的项目很多都是采用逻辑短路进行书写,也是一些大厂比较考察基本知识的重要考察点之一
加油！！ 生活那么苦,为啥不给自己一颗糖吃呢！！