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 如果有這個字段的話 就會執行後面的 方法
}

現在筆者維護公司的項目很多都是採用邏輯短路進行書寫,也是一些大廠比較考察基本知識的重要考察點之一
加油！！ 生活那麼苦,爲啥不給自己一顆糖吃呢！！