摘要：最近在編寫一個前端模塊功能，編寫了大量的代碼，其中一般圖片特效展示是參考別人的代碼來寫的，發現有些代碼似乎看得明白又好像不確定是不是哪個意思，所以在網上問了一下程序員們，原來是JS代碼簡寫。

轉自：http://www.lezhu99.com/2382.html

1、當條件成立時執行a方法，當條件失敗是執行b方法

var result; if(isOk){ result=funA(); }else{ result=funB(); }

您還可以這樣表達：

var result = isOk ? funA() : funB()

2、當條件成立執某個方法

通常定法：

if (isOk) { doSomething(); }

我更喜歡這樣寫：

isOk && doSomething();

如果一個變量沒定義或沒有值則給它一默認值：

str=str||"ok"; arr=arr||[];

上面的方式可行，是因為在js邏輯運算中，返回值不一定是true或false，也可以是其他任何值，而且 0、""、null、false、undefined、NaN都會判為false，其他都為true。舉例：

1&&"OK" //表達式的值為字符串"OK"，邏輯上被判定為 true 1||"OK" //表達式的值為數字1，邏輯上被判定為 true null||[] //表達式的值為數組[]，邏輯上被判定為 true null&&[] //表達式的值為null，邏輯上被判定為 false

3、當進行多個條件判段時

給一個例子：每種顏色對應一個值,比如"white","red","green","yellow","gray","blue" 分別對應的值為0,1,2,3,4,5

1) 問題一:根據值獲取顏色

實現方式一

function getColorByVal(val) {var color = ""; if (val = 0){ color = "white"; }else if (val = 1) { color = "red"; } else if (val = 2) { color = "green"; } else if (val = 3) { color = "yellow"; } else if (val = 4) { color = "gray"; } else if (val = 5) { color = "blue"; } return color; }

實現方式二

function getColorByVal(val) { var color; switch (val) { case 0: color = "white"; case 1: color = "red"; break; case 2: color = "green"; break; case 3: color = "yellow"; break; case 4: color = "gray"; break; case 5: color = "blue"; break; } return color; }

實現方式三

function getColorByVal(val) {return ["white","red","green","yellow","gray","blue"][val]; }

調用: var color=getColorByVal(2);

方式一和方式二相比沒什么差別，但方式二稍微好一點，而方式三則是讓人眼前一亮，短小精悍

就完成了功能。不過有的人會說顏色的值剛好是數組下標，所以我們再來一題：

2) 問題二:根據顏色獲取值

你可以用if 或switch 語句來完成，不過這里給出另外兩種方式：

方式一：

function getValByColor(color){var colors=["white","red","green","yellow","gray","blue"]; var result; for(var i=colors.length-1;i--;){ if(colors[i]==color){ result=i; break; } } return result; }

方式二：

function getValByColor(color){return {"white":0,"red":1,"green":2,"yellow":3,"gray":4,"blue":5}[color]; }

調用: var val=getValByColor("red");

對比一下很明顯，方式二更簡單而且易懂，巧妙在于構造一個對象，通過屬性獲取值，從而避開了繁瑣的判斷。

4、交換兩個變量的值

通常是這樣實現的：

var temp=0,a=5,b=10; temp=a; a=b; b=temp;

不過還可以更巧一些：

var a=5,b=10; a=[b,b=a][0];

a=[b,b=a][0] 執行過程：先執行數組里兩個表達式b和b=a,作用是把5賦值給b并產生一個數組[10,5] ，然后 a=[10,5][0]即 a=10,這樣就完成了交換，不過也借助了無名的數組，但看起來好想沒借助第三個變量，不過不提倡這樣做，畢竟第一種方式更易懂。

5、獲取對象的屬性

方式一

var arr=[],i=0; var colors={"white":0,"red":1,"green":2,"yellow":3,"gray":4,"blue":5}; for(var key in colors){ arr[i++]=key; }

方式二

var arr=[],i=0; var colors={"white":0,"red":1,"green":2,"yellow":3,"gray":4,"blue":5}; for(arr[i++] in colors);

兩種方式都得到了對象colors的屬性(arr=["white", "red", "green", "yellow", "gray", "blue"]), 第二種方式不過搭了 for in 語句的順風車。方式一中for in語句依次從colors獲取一個屬性賦值給key，只不過在方式二中賦值給了arr[i++]。這個純粹是為了好玩，享受編程的樂趣也是編程的一部分吧。

轉載于:https://www.cnblogs.com/xiaocai0923/p/3531931.html

總結

以上是生活随笔為你收集整理的JavaScript精简代码 非一般的写法（转载）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。