判斷語句、循環(huán)、定時器、閉包

多重條件判斷語句

  • if語句

語法：

if(條件表達(dá)式){
                語句...
}else if(條件表達(dá)式){
                語句...
}else if(條件表達(dá)式){
                語句...
}else{
                語句...
            }

if...else if...else
當(dāng)該語句執(zhí)行時，會從上到下依次對條件表達(dá)式進(jìn)行求值判斷
如果值為true，則執(zhí)行當(dāng)前語句。
如果值為false，則繼續(xù)向下判斷。
如果所有的條件都不滿足，則執(zhí)行最后一個else后的語句
該語句中，只會有一個代碼塊被執(zhí)行，一旦代碼塊執(zhí)行了，則直接結(jié)束語句

        var today = 4;
     if(today == 1){
        alert('語文');
     }else if(today == 2){
        alert('數(shù)學(xué)');
     }else if(today == 3){
        alert('英語');
     }else if(today == 4){
        alert('美術(shù)');
     }else if(today == 5){
        alert('舞蹈');
     }else{
        alert('不補(bǔ)習(xí)');
     }

條件分支語句也叫switch語句

        語法：
            switch(條件表達(dá)式){
                case 表達(dá)式:
                    語句...
                    break;
                case 表達(dá)式:
                    語句...
                    break;
                default:
                    語句...
                    break;
            }

執(zhí)行流程：
switch...case..語句
在執(zhí)行時會依次將case后的表達(dá)式的值和switch后的條件表達(dá)式的值進(jìn)行全等比較，
如果比較結(jié)果為true，則從當(dāng)前case處開始執(zhí)行代碼。
當(dāng)前case后的所有的代碼都會執(zhí)行，我們可以在case的后邊跟著一個break關(guān)鍵字，
這樣可以確保只會執(zhí)行當(dāng)前case后的語句，而不會執(zhí)行其他的case
如果比較結(jié)果為false，則繼續(xù)向下比較
如果所有的比較結(jié)果都為false，則只執(zhí)行default后的語句

switch語句和if語句的功能實(shí)際上有重復(fù)的，使用switch可以實(shí)現(xiàn)if的功能，同樣使用if也可以實(shí)現(xiàn)switch的功能，所以我們使用時，可以根據(jù)自己的習(xí)慣選擇。

        var today = 4;
        switch(today){
        case 1:
            alert('語文');
            break;//結(jié)束整個switch語句
        case 2:
            alert('數(shù)學(xué)');
            break;
        case 3:
            alert('英語');
            break;
        case 4:
            alert('美術(shù)');
            break;
        case 5:
            alert('舞蹈');
            break;
        default:
            alert('不補(bǔ)習(xí)');
            break;//最后一個default可以不寫break，但建議寫上
    }

數(shù)組

  • 面向?qū)ο蟮姆绞絼?chuàng)建

      var aRr01 = new Array(1,2,3,'abc');

  • 直接創(chuàng)建

     var aRr02 = [1,2,3,'def'];//推薦使用，性能更高

  • 獲取數(shù)組的成員數(shù)量（長度）

    alert(aRr02.length);//彈出4
alert(aRr02[3]);//彈出cdf

  •   var aRr03 = [[1,2,3],['a','b','c','d'],[true,false]];
  alert(aRr03.length);//彈出3
  alert(aRr03[1].length);//彈出3
  alert(aRr03[1][2]);//彈出c

數(shù)組常用方法

var aRr = [1,2,3,4];

  • 用-連接數(shù)組元素并轉(zhuǎn)為字符串

      var aRr = [1,2,3,4];
  var sTr = aRr.join("-");//用-連接數(shù)組元素并轉(zhuǎn)為字符串，彈出1-2-3-4

  • 用空串連接

    var aRr = [1,2,3,4];
var sTr = aRr.join('');
  alert(sTr);//彈出1234

  • 向數(shù)組最后追加元素

    var aRr = [1,2,3,4];
aRr.push(5);
alert(aRr);//1,2,3,4,5

  • 刪除末尾元素

     var aRr = [1,2,3,4];
   aRr.pop();
   alert(aRr);//1,2,3

  • 向最前面插入元素0

      var aRr = [1,2,3,4];
  aRr.unshift(0);
  alert(aRr);//0,1,2,3,4

  • 刪除第一個（索引為0的）元素

    var aRr = [1,2,3,4];
   aRr.shift();
   alert(aRr);//2,3,4

  • 反轉(zhuǎn)

    var aRr = [1,2,3,4];
  aRr.reverse();
  alert(aRr);//4,3,2,1

  • 查找字母'b'第一次出現(xiàn)的索引

    var aRr2 = ['a','b','c','d','a','b','c','d'];
  var num = aRr2.indexOf('b');
  alert(num);//1

  • 從第2索引元素開始，刪除1個元素

    var aRr = [a,b,c,d];
  aRr2.splice(2,1);//刪除c
  alert(aRr2);//a,b,d,a,b,c,d

  • 從第2索引元素開始，刪除1個元素，再插入e

    var aRr = [a,b,c,d];
   aRr2.splice(2,1,'e');//把c替換成e
   alert(aRr2);//a,b,e,d,a,b,c,d

  • 刪除后面的abcd，改為fghi

    var aRr = [a,b,c,d];
  aRr2.splice(4,4,'f','g','h','i');
  alert(aRr2);//a,b,c,d,f,g,h,i

通過標(biāo)簽獲取元素

  • 獲取頁面上所有的li

    var aLi = document.getElementsByTagName('li');

  • 獲取id為list01的ul

    var oList = document.getElementById('list01');

  • 再獲取這個ul下的所有l(wèi)i

    var aLi = oList.getElementsByTagName('li');
      alert(aLi.length);//8

  • 指定索引處的li設(shè)定背景顏色

          aLi[0].style.backgroundColor = 'gold';
      aLi[1].style.backgroundColor = 'gold';
  }
</script>
</head>
<body>
  <ul id="list01">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
 </ul>

循環(huán)語句

循環(huán)語句：
通過循環(huán)語句可以反復(fù)的執(zhí)行一段代碼多次

    while循環(huán)
        - 語法：
            while(條件表達(dá)式){
                語句...
            }
    
        - while語句在執(zhí)行時，
            先對條件表達(dá)式進(jìn)行求值判斷，
                如果值為true，則執(zhí)行循環(huán)體，
                    循環(huán)體執(zhí)行完畢以后，繼續(xù)對表達(dá)式進(jìn)行判斷
                    如果為true，則繼續(xù)執(zhí)行循環(huán)體，以此類推
                如果值為false，則終止循環(huán)
    
    do...while循環(huán)
        - 語法：
            do{
                語句...
            }while(條件表達(dá)式)
    
        - 執(zhí)行流程：
            do...while語句在執(zhí)行時，會先執(zhí)行循環(huán)體，
                循環(huán)體執(zhí)行完畢以后，在對while后的條件表達(dá)式進(jìn)行判斷，
                如果結(jié)果為true，則繼續(xù)執(zhí)行循環(huán)體，執(zhí)行完畢繼續(xù)判斷以此類推
                如果結(jié)果為false，則終止循環(huán)
    
            實(shí)際上這兩個語句功能類似，不同的是while是先判斷后執(zhí)行，
                而do...while會先執(zhí)行后判斷，
            do...while可以保證循環(huán)體至少執(zhí)行一次，
                而while不能

    for語句，也是一個循環(huán)語句，也稱為for循環(huán)
        在for循環(huán)中，為我們提供了專門的位置用來放三個表達(dá)式：
            1.初始化表達(dá)式
            2.條件表達(dá)式
            3.更新表達(dá)式
    
    for循環(huán)的語法：
            for(①初始化表達(dá)式;②條件表達(dá)式;④更新表達(dá)式){
                ③語句...
            }
    
            for循環(huán)的執(zhí)行流程：
                ①執(zhí)行初始化表達(dá)式，初始化變量（初始化表達(dá)式只會執(zhí)行一次）
                ②執(zhí)行條件表達(dá)式，判斷是否執(zhí)行循環(huán)。
                    如果為true，則執(zhí)行循環(huán)③
                    如果為false，終止循環(huán)
                ④執(zhí)行更新表達(dá)式，更新表達(dá)式執(zhí)行完畢繼續(xù)重復(fù)②

    任意一種循環(huán)都可以互相嵌套

  • 創(chuàng)建一個循環(huán)，往往需要三個步驟
    1.創(chuàng)初始化一個變量

     var j = 0;

2.在循環(huán)中設(shè)置一個條件表達(dá)式

 while(j < aLi.length){
            aLi[j].style.background = 'gold';

3.定義一個更新表達(dá)式，每次更新初始化變量

j++;

  • 以下是死循環(huán)的寫法
    像這種將條件表達(dá)式寫死為true的循環(huán)，叫做死循環(huán)
    該循環(huán)不會停止，除非瀏覽器關(guān)閉，死循環(huán)在開發(fā)中慎用
    可以使用break，來終止循環(huán)

          while(true){
          if(j>10){
              break;//退出整個循環(huán)
          }
          j++;
      }
      //for循環(huán)的死循環(huán)寫法
      for(;;){

break關(guān)鍵字可以用來退出switch或循環(huán)語句
不能在if語句中使用break和continue
break關(guān)鍵字，會立即終止離他最近的那個循環(huán)語句
continue關(guān)鍵字可以用來跳過當(dāng)次循環(huán)
同樣continue也是默認(rèn)只會對離他最近的循環(huán)循環(huán)起作用

  • 可以為循環(huán)語句創(chuàng)建一個label，來標(biāo)識當(dāng)前的循環(huán)
    label:循環(huán)語句
    使用break語句時，可以在break后跟著一個label，
    這樣break將會結(jié)束指定的循環(huán)，而不是最近的

          outer:
      for(var i=0 ; i<5 ; i++){
          console.log("@外層循環(huán)"+i);
          for(var j=0 ; j<5; j++){
              console.log("內(nèi)層循環(huán):"+j);
              break outer;
          }
      }
  }

數(shù)組去重

 <script type="text/javascript">
    var aRr = [1,3,4,1,6,9,1,2,5,3,1,6,5,4,4];
    var aRr2 = [];

    for(var i=0; i<aRr.length; i++){
        //判斷元素第一次出現(xiàn)的位置，恰好是當(dāng)前索引時，就將元素放入新數(shù)組
        if(aRr.indexOf(aRr[i]) == i){
            aRr2.push(aRr[i]);
        }
    }

    alert(aRr2);//1,3,4,6,9,2,5
</script>

字符串處理的方法

  • 字符串切斷轉(zhuǎn)成數(shù)組.split('-')

      var sTr = '2018-06-20';
  var aRr = sTr.split('-');
  alert(aRr);//2018,06,20

  • 修改<title>標(biāo)簽的內(nèi)容

     document.title = aRr2;

  • 獲取指定索引的字符.charAt(0)

    var sTr2 = '#div1';
var sTr3 = '.div1';

  /*獲取指定索引的字符*/
  var sTr4 = sTr2.charAt(0);
  if(sTr4 == '#'){
      // alert('id選擇器');
  }

  • 查看子串第一次出現(xiàn)的位置

      var sTr5 = 'Microsoft Yahei';
  var num = sTr5.indexOf('Yahei');
  alert(num);//10
  var num2 = sTr5.indexOf('xihei');
  alert(num2);//沒有找到就彈出-1

  • substring截取子串

      var sTr5 = 'Microsoft Yahei';
  從10開始，截到15（包括開始位置，不包括結(jié)束位置）
  var sTr6 = sTr5.substring(10,15);//Yahei
  從10開始截取到末尾
  var sTr6 = sTr5.substring(10);//Yahei
  alert(sTr6);

  • 全部轉(zhuǎn)為大寫字母

       alert(sTr6.toUpperCase());//YAHEI

  • 全部轉(zhuǎn)為小寫字母

    alert(sTr6.toLowerCase());//yahei

字符串反轉(zhuǎn)

1、split字符串轉(zhuǎn)成數(shù)組
2、reverse數(shù)組反轉(zhuǎn)
3、join數(shù)組轉(zhuǎn)成字符串

 <script type="text/javascript">
    var sTr = "123asdf79888asdfe21";
    //1、split字符串轉(zhuǎn)成數(shù)組
    //2、reverse數(shù)組反轉(zhuǎn)
    //3、join數(shù)組轉(zhuǎn)成字符串
    var sTr2 = sTr.split('').reverse().join('');
    alert(sTr2);//12efdsa88897fdsa321
</script>

定時器的基本用法

setTimeout 只執(zhí)行一次的定時器
clearTimeout 關(guān)閉只執(zhí)行一次的定時器
setInterval 反復(fù)執(zhí)行的定時器
clearInterval 關(guān)閉反復(fù)執(zhí)行的定時器
單次定時器

    var timer = setTimeout(function(){
        alert('hello!');
    }, 3000);

清除單次定時器

    clearTimeout(timer);

反復(fù)循環(huán)定時器

    var timer2 = setInterval(function(){
        alert('hi~~~');
    }, 2000);

清除反復(fù)循環(huán)定時器

    clearInterval(timer2);

定時器彈框

定時器動畫

<style type="text/css">
    .box{
        width: 100px;
        height: 100px;
        background-color: gold;
        position: fixed;
        left: 20px;
        top: 20px;
    }
</style>
<script type="text/javascript">
    window.onload = function(){
        var oBox = document.getElementById('box');

        var left = 20;
        反復(fù)循環(huán)定時器，每30毫秒修改一次盒子的left值
        var timer = setInterval(function(){
            left += 2;
            oBox.style.left = left + 'px';

            當(dāng)left值大于700時停止動畫（清除定時器）
            if(left > 700){
                clearInterval(timer);
            }
        },30);
    }
</script>
</head>
<body>
    <div class="box" id="box"></div>
</body>
</html>

定時器制作時鐘

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>時鐘</title>
<style type="text/css">
    
</style>
<script type="text/javascript">
    window.onload = function(){
        var oBox = document.getElementById('box');

        function timeGo(){
            var now = new Date();
            // alert(now);//彈出美式時間：Wed Jun 20 2018 15:27:13 GMT+0800 (中國標(biāo)準(zhǔn)時間)
            var year = now.getFullYear();//2018年
            var month = now.getMonth() + 1;//6月彈出5//范圍0-11
            var date = now.getDate();//20號
            var week = now.getDay();//3//星期幾，西半球時間，范圍0-6，星期日為一周的第一天，為0

            var hour = now.getHours();
            var minute = now.getMinutes();
            var second = now.getSeconds();

            // alert(hour + ":" + minute + ":" + second);//15:33:9

            oBox.innerHTML = '當(dāng)前時間是：' + year + '年' + toDouble(month) + '月' + toDouble(date) + '日 ' + toWeek(week) + ' ' + toDouble(hour) + ":" + toDouble(minute) + ":" + toDouble(second);
        }

        timeGo();
        setInterval(timeGo, 1000);
    }

    //此函數(shù)將星期的數(shù)字轉(zhuǎn)為漢字表示
    function toWeek(num){
        switch(num){
            case 0:
                return '星期天'; 
                break;
            case 1:
                return '星期一'; 
                break;
            case 2:
                return '星期二'; 
                break;
            case 3:
                return '星期三'; 
                break;
            case 4:
                return '星期四'; 
                break;
            case 5:
                return '星期五'; 
                break;
            case 6:
                return '星期六'; 
                break;
        }
    }

    //此函數(shù)將不足兩位的數(shù)字前面補(bǔ)0
    function toDouble(num){
        if(num < 10){
            return '0' + num;
        }else{
            return num;
        }
    }
</script>
</head>
<body>
    <div id="box"></div>
</body>
</html>

定時器倒計時

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>倒計時</title>
<script type="text/javascript">
    window.onload = function(){
        //活動第二天要將頁面下線，直接跳轉(zhuǎn)到其它頁面，不會走后面的代碼了
        // window.location.;

        var oDiv = document.getElementById('div1');

        function timeLeft(){
            //實(shí)際開發(fā)中此時間從服務(wù)器獲取，避免客戶端調(diào)整時間
            var now = new Date();
            var future = new Date(2018,5,20,16,30,20);

            / alert(future - now);//彈出與當(dāng)前時間相差的毫秒數(shù)：12469935436
            var milli = parseInt((future - now)/1000);

            活動當(dāng)天頁面下線，避免倒計時到點(diǎn)后繼續(xù)計負(fù)時
             /if(milli <= 0){
            //  /頁面跳轉(zhuǎn)，不執(zhí)行下面的代碼了
            /   window.location.;
            / }

            var day = parseInt(milli / 86400);
            var hour = parseInt(milli % 86400 / 3600);
            var minute = parseInt(((milli % 86400) % 3600) / 60);
            var second = milli % 60;

            oDiv.innerHTML = '距離2018年11月12日00時00分00秒還有' + day + '天' + toDouble(hour) + '時' + toDouble(minute) + '分' + toDouble(second) + '秒';
        }
        
        timeLeft();
        setInterval(timeLeft, 1000);
    }

    function toDouble(num){
        if(num < 10){
            return '0' + num;
        }else{
            return num;
        }
    }
</script>
 </head>
<body>
    <div id="div1"></div>
</body>
</html>

變量的作用域

  • 全局變量：函數(shù)外部定義的變量，函數(shù)內(nèi)部和外部都可以訪問，它的值可以共享

  • 局部變量：函數(shù)內(nèi)部定義的變量，函數(shù)內(nèi)部可以訪問，外部無法訪問。函數(shù)內(nèi)部訪問變量時，先在內(nèi)部查找是否有此變量，如果有，就使用內(nèi)部變量，如果沒有，就去外部查找

  • 函數(shù)內(nèi)部如果不用'var'關(guān)鍵字定義變量，變量可能會變成全局變量，如果用嚴(yán)格模式解析會報錯

封閉函數(shù)

  • 原來的寫法

      function myAlert(){
      var str = '歡迎訪問我的主頁';
      alert(str);
  }

  myAlert();*/

  • 封閉函數(shù)的一般寫法

      var str = function(){
      alert('test');
  }

  • 封閉函數(shù)定義：(function(){……})()

      ;;(function(){
      var str = '歡迎訪問我的主頁';
      alert(str);
  })();//最后的()表示馬上執(zhí)行

封閉函數(shù)其他的寫法：在匿名函數(shù)前加“！”或者“~”，之后加“()”

   ~function(){
        var str = '歡迎訪問我的主頁';
        alert(str);
    }();

用變量的方式定義函數(shù)

  • 原來的寫法：可以提前

      myAlert();
  function myAlert(){
      alert('hello!');
  }*/

  • 函數(shù)用變量方式定義：先定義再使用

       myalert();//提前會報錯
  var myAlert = function(){
      alert('hello!');
  }

  myAlert();//放在下面可以執(zhí)行

閉包

本質(zhì)就是函數(shù)嵌套，就是在函數(shù)里面定義函數(shù)，
內(nèi)部函數(shù)可以引用外部函數(shù)的參數(shù)和變量
參數(shù)和變量不會被垃圾回收機(jī)制給回收
閉包的用途：可以存循環(huán)的索引值、做私有變量計數(shù)器

  • 閉包的一般寫法

      function aa(b){
      var a = 12;

      function bb(){
          alert(a);
          alert(b);
      }

      return bb;
  }

  var cc = aa(24);

  • 閉包的封閉函數(shù)寫法

      var cc = (function(b){
      var a = 12;

      function bb(){
          alert(a);
          alert(b);
      }

      return bb;
  })(24);

  cc();

  • 只能調(diào)用一次的閉包

      (function(b){
      var a = 12;

      function bb(){
          alert(a);
          alert(b);
      }

      return bb;
  })(24)();
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容