JavaScript同樣的意思,更巧的寫法

來源:互聯網
上載者:User

   今天來介紹一下javascript不一樣的寫法,很簡單哦。

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",邏輯上被判定為 true1||"OK"  //運算式的值為數字1,邏輯上被判定為 truenull||[]  //運算式的值為數組[],邏輯上被判定為 truenull&&[]  //運算式的值為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++]。這個純粹是為了好玩,享受編程的樂趣也是編程的一部分吧。。

   是不是發現javascript也很有意思呢? 有意思就推薦一下吧。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.