標籤

JS

2020-02-05

js實現二級連動效果

實例講述了JS二級菜單。分享給大家供大家參考

 1<head>
 2    <meta charset="utf-8" />
 3    <title></title>
 4</head>
 5
 6<body>
 7    省/市:
 8    <select id="provice"></select>
 9    市/區:
10    <select id="city"></select>
11    <script type="text/javascript">
12        //定義省/直轄市數組
13        var arr_province = ["請選擇省/直轄市""北京市""上海市""廣東省"];
14        //定義市/區二維數組
15        var arr_city = [
16            ["請選擇市/區"],
17            ["東城區""西城區""朝陽區""宣武區""昌平區""大興區""丰台區""海淀區"],
18            ['寶山區''長寧區''豐賢區''虹口區''黃浦區''青浦區''南匯區''徐匯區''盧灣區'],
19            ['廣州市''惠州市''汕頭市''珠海市''佛山市''中山市''東莞市']
20        ];
21        var province=document.getElementById("provice");
22        var city=document.getElementById("city");
23        //初始化菜單
24        window.onload=function(){
25            province.length=arr_province.length;
26            for (var i=0;i<arr_province.length;i++) {
27                province.options[i].text=arr_province[i];
28            }
29            city.length=1;
30            city.options[0].text=arr_city[0][0];
31        }
32        //二級連動
33        province.onchange=function(){
34            var index=province.selectedIndex;
35            city.length=arr_city[index].length;
36            for (var i=0;i<city.length;i++) {
37                city.options[i].text=arr_city[index][i];
38            }
39        }
40    </script>
41</body>

                                                         

2020-02-02

必看的JS條件語句優化妙招

JS條件語句優化妙招

JavaScript條件語句在我們平時的開發中是不可避免要用到的,但是很多時候我們的代碼寫的並不好,下面我們就看看幾個可以優化的地方(我們優化的目標是嵌套層級更少,代碼更簡潔和易讀)

第一 是否包含

我們經常會判斷某個變數等於某些值,於是會寫出這樣的代碼

function sayHi(name){

    if(name==’tom’||name==’hxh’||name==’lmly’){

        return ‘hello’

    }

}

如果還要再加值就會顯得越來越臃腫了,事實上就是判斷該變數是否在某個值的範圍中

function sayHi(name){

    let names=[‘tom’,’hxh’,’lmly’];

    if(names.indexOf(name)>-1){

        return ‘hello’

    }

}

看上去是不是合理多了?我們提出了公共的邏輯,以後只需要維護names這個數組即可,當然也可以用includes()

if(names.includes(name)){

   return ‘hello’

}

第二儘早返回

先看代碼

function sayHi(name){

    if(name){

        if(name==’hxh’){

            return ‘hello’;

        }

    }else{

        return ‘no’;

    }

}

這裡我們先判斷了 name 是否存在,於是出現了嵌套if,但是如果我們一開始就將不存在name的情況直接返回

function sayHi(name){

    if(!name){

        return ‘no’;

    }

    if(name==’hxh’){

        return ‘hello’;

    }

}

我們會發現代碼少了嵌套層級,可讀性提高了。

第三鍵值對象

switch…case 想必大家也是經常會用到的句式

function sayHi(name){

    let str=””;

    switch(name){

        case ‘tom’:{ str=’hello1′; } break;

        case ‘hxh’:{ str=’hello2′; } break;

        case ‘lucy’:{ str=’hello3′; } break;

        default :{str=’no’; }

    }

    return str;

}

其實稍微細看一下就會發現,這和對象鍵值對很像,於是我們改成下面的方式

function sayHi(name){

    return {

        ‘tom’:’hello1′,

        ‘hxh’:’hello2′,

        ‘lucy’:’hello3′,

    }[name]

}

代碼是不是簡潔多了?

第四參數默認值

方法參數為空是我們經常需要處理的,多數情況下是的給一個默認值

function sayHi(name){

    if(!name){

        name=’tom’

    }

}

這個時候我們可以使用||來簡化代碼

function sayHi(name){

    name=name||’tom’;

}

如果你的代碼運行環境支持ES6,那就可以直接使用參數默認值語法

function sayHi(name=’tom’){

    return name;

}