循環(huán) 定時(shí)器 函數(shù) 閉包

1. 條件分支語句

  • 語法:

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

  • 執(zhí)行流程：

    • 在執(zhí)行時(shí)會(huì)依次將case后的表達(dá)式的值和switch后的條件表達(dá)式的值進(jìn)行全等比較，

      • 如果比較結(jié)果為true，則從當(dāng)前case處開始執(zhí)行代碼。當(dāng)前case后的所有的代碼都會(huì)執(zhí)行，我們可以在case的后邊跟著一個(gè)break關(guān)鍵字，這樣可以確保只會(huì)執(zhí)行當(dāng)前case后的語句，而不會(huì)執(zhí)行其他的case
      • 如果比較結(jié)果為false，則繼續(xù)向下比較,如果所有的比較結(jié)果都為false，則只執(zhí)行default后的語句

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

  • 例子

var today = 1;
switch(today){
    case 1:
        alert('語文');
        break;
    case 2:
        alert('語文');
        break;
     case 3:
    alert('語文');
        break;
    case 4:
        alert('語文');
        break;
    case 5:
        alert('語文');
        break;
    default:
        alert('不補(bǔ)習(xí)')
        break;//最后一個(gè)可以不寫,但是還是寫的好,如果放在上方,不寫會(huì)繼續(xù)執(zhí)行.如果想利用穿透的時(shí)候,那就不用寫了;
}
  • switch可以穿透,遇到break才停止.

2. 數(shù)組

var arr01 = new Array(1,3,6,'acd');

var arr01 = [1,2,3,'lll'];
alert(arr01.length);
alert(arr01[1]);//下標(biāo)從0開始

//二維數(shù)組
var arr03 = [[],[],[]];//二維數(shù)組,n維套n層
alert(arr03[1].length);

var str = arr03.join('-');//用-將數(shù)組中的元素拼接起來,可以為空

arr03.push(5);//數(shù)組末尾追加,
arr03.pop();//刪除末尾;

arr03.unshift(0);//數(shù)組開頭添加
arr03.shift();//數(shù)組開頭刪除

arr03.reverse();//數(shù)組順序翻轉(zhuǎn);

arr03.sort();//排序,但是不太好用;


 var arr03 = [1 , 5 , 8 , 6 , 5];
 //元素在數(shù)組中第一次出現(xiàn)的索引值
 var num = arr03.indexof(5);


arr03.splice(2,1);//splice(index,num),從下標(biāo)開始,刪除1個(gè)元素,
arr03.splice(2,1,'e');//splice(index,num),從下標(biāo)開始,刪除1個(gè)元素,并添加e,可以理解為替換
arr03.splice(2,4,'e','f','g','h');//從第二個(gè)開始,刪除四個(gè),并添加4個(gè)

3. 獲取標(biāo)簽過去元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通過標(biāo)簽獲取元素</title>
    <script type="text/javascript">
        window.onload = function(){
            // //獲取頁面上所有的li
            // var aLi = document.getElementsByTagName('li');

            //獲取id為list01的ul
            var oList = document.getElementById('list01');
            //再獲取這個(gè)ul下的所有l(wèi)i
            var aLi = oList.getElementsByTagName('li');
            alert(aLi.length);//8
            // aLi.pop();//錯(cuò)誤用法，aLi是一個(gè)類似數(shù)組的選擇集，沒有數(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>

    <ul id="list02">
        <li>9</li>
        <li>10</li>
        <li>11</li>
        <li>12</li>
    </ul>
</body>
</html>

4. 循環(huán)語句

4.1 for 循環(huán)

  • for循環(huán)的語法：

      for(①初始化表達(dá)式;②條件表達(dá)式;④更新表達(dá)式){
              ③語句...
          }

  • for循環(huán)的執(zhí)行流程：

    • ①執(zhí)行初始化表達(dá)式，初始化變量（初始化表達(dá)式只會(huì)執(zhí)行一次）
    • ②執(zhí)行條件表達(dá)式，判斷是否執(zhí)行循環(huán)。
      • 如果為true，則執(zhí)行循環(huán)③
      • 如果為false，終止循環(huán)
    • ④執(zhí)行更新表達(dá)式，更新表達(dá)式執(zhí)行完畢繼續(xù)重復(fù)②

  • 例子

    for( var i=0;i < ali.length ; i++){
        if(i % 2 == 0){
            ali[i].style.background = 'gold';
        }
    }

4.2 while循環(huán)

  • 語法：

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

  • while語句在執(zhí)行時(shí)，

    • 先對(duì)條件表達(dá)式進(jìn)行求值判斷，
      • 如果值為true，則執(zhí)行循環(huán)體，循環(huán)體執(zhí)行完畢以后，繼續(xù)對(duì)表達(dá)式進(jìn)行判斷
      • 如果為true，則繼續(xù)執(zhí)行循環(huán)體，以此類推
      • 如果值為false，則終止循環(huán)
  • 例子 
    //while先判斷后執(zhí)行
var i = 0;
while( i < ali.length){
    ali[i].style.background = 'gold';
    i++;
}

4.3 do while 循環(huán)

  • 語法：

              do{
              語句...
          }while(條件表達(dá)式)

  • 執(zhí)行流程：

    • do...while語句在執(zhí)行時(shí)，會(huì)先執(zhí)行循環(huán)體，循環(huán)體執(zhí)行完畢以后，在對(duì)while后的條件表達(dá)式進(jìn)行判斷，
      • 如果結(jié)果為true，則繼續(xù)執(zhí)行循環(huán)體，執(zhí)行完畢繼續(xù)判斷以此類推
      • 如果結(jié)果為false，則終止循環(huán)

  • 例子

    //do  while,先執(zhí)行后判斷
var i = 0;
do{
        ali[i].style.background = 'gold';
    i++;
}while(i < ali.length)

4.4 死循環(huán)

在死循環(huán)中,可以使用break，來終止循環(huán);

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

    for(;;){
        //跳出循環(huán)
        if(){
            break;
        }
    }

    lable:
    for(){
        for(){
            if(){

                break lable;
            }
        }
    }
/*可以為循環(huán)語句創(chuàng)建一個(gè)label，來標(biāo)識(shí)當(dāng)前的循環(huán)
                label:循環(huán)語句
            使用break語句時(shí)，可以在break后跟著一個(gè)label，
                這樣break將會(huì)結(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;

5. 數(shù)組去重

    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í)，就將元素放入新數(shù)組
        if(aRr.indexOf(aRr[i]) == i){
            aRr2.push(aRr[i]);
        }
    }

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

6. 字符串處理的方法

/*字符串切斷轉(zhuǎn)成數(shù)組*/
var s = '2018-8-8'
var arr = s.split('-');//[2018,8,8]
var arr = s.split('');//['2', '0' ,'1' ,'8' ,'-','8', '-' ,'8']

var aRr2 = sTr.split('');
// console.log(aRr2);

/*實(shí)際上就是修改了<title>標(biāo)簽的內(nèi)容*/
// document.title = aRr2;


var str2 = '#div';
var str3 = '.div';
var str4 = str2.charAt(0);//#    返回索引所對(duì)應(yīng)的字符
if(str4 == '#'){
    alert('id選擇器');
}else if(str4 == '.){
    alert('類選擇器');

}

/*查看子串第一次出現(xiàn)的位置*/
var tr5 = 'Microsoft Yahei';
var num = tr5.indexof('Yahei');//10  //查詢子串
var num1 = tr5.indexof('Xihei');//-1   說明沒有找到

var str6 = tr5.substring(10,15);//包括開始位置,不包括結(jié)束位置;
var str6 = tr5.substring(10);//從第10位開始到最后
//字母的大小寫轉(zhuǎn)換
var str6 = tr5.toUpperCase();//全大寫
var str6 = tr5.toLowCase();//全小寫

6.1 字符串的反轉(zhuǎn)

  1. split 方法 轉(zhuǎn)成數(shù)組
  2. reverse 反轉(zhuǎn)數(shù)組
  3. join數(shù)組轉(zhuǎn)成字符串
var str= 'asdfghj147852369';
//var str1 = str.split('').reverse().join('');
var srt1 = str.split('');
var str2 = str1.reverse();
var str3 = str2.join('');

7. 定時(shí)器

7.1 定時(shí)器彈窗

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定時(shí)器彈框</title>
    <style type="text/css">
        .pop{
            width: 400px;
            height: 300px;
            background-color: #fff;
            border: 1px solid #000;
            /*固定定位*/
            position: fixed;
            /*左上角位于頁面中心*/
            left: 50%;
            top: 50%;
            /*讓div向左偏移半個(gè)寬度、向上偏移半個(gè)高度，使div位于頁面中心*/
            margin-left: -200px;
            margin-top: -150px;
            /*彈窗在最上面*/
            z-index: 9999;
        }
        /*遮罩樣式*/
        .mask{
            position: fixed;
            width: 100%;
            height: 100%;
            background-color: #000;
            left: 0;
            top: 0;
            /*設(shè)置透明度30%*/
            opacity: 0.3;
            filter: alpha(opacity=30);/*兼容IE6、7、8*/
            /*遮罩在彈窗的下面，在網(wǎng)頁所有內(nèi)容的上面*/
            z-index: 9990;
        }
        .pop_con{
            display: none;/*默認(rèn)不顯示，用定時(shí)器顯示*/
        }
    </style>
    <script type="text/javascript">
        /*
        setTimeout      只執(zhí)行一次的定時(shí)器
        clearTimeout    關(guān)閉只執(zhí)行一次的定時(shí)器
        setInterval     反復(fù)執(zhí)行的定時(shí)器
        clearInterval   關(guān)閉反復(fù)執(zhí)行的定時(shí)器
        */

        window.onload = function(){
            var oPop = document.getElementById('pop');
            var oShut = document.getElementById('shutOff');

            /*setTimeout(showPop, 3000);//開啟定時(shí)器，3秒后調(diào)用函數(shù)showPop()彈框

            function showPop(){
                oPop.style.display = 'block';//顯示彈框和遮罩
            }*/
            //開啟定時(shí)器的簡(jiǎn)寫方式：調(diào)用匿名函數(shù)
            setTimeout(function(){
                oPop.style.display = 'block';
            }, 3000);

            oShut.onclick = function(){
                oPop.style.display = 'none';//關(guān)閉彈框和遮罩
            }
        }
    </script>
</head>
<body>
    <h1>首頁標(biāo)題</h1>
    <p>頁面內(nèi)容</p>
    <a >百度網(wǎng)</a>


    <div class="pop_con" id="pop">
        <div class="pop">
            <h3>提示信息！</h3>
            <a href="#" id="shutOff">關(guān)閉</a>
        </div>
        <div class="mask"></div>
    </div>
</body>
</html>

7.2 定時(shí)器的基本用法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定時(shí)器的基本用法</title>
    <script type="text/javascript">
        //單次定時(shí)器
        var timer = setTimeout(function(){
            alert('hello!');
        }, 3000);

        //清除單次定時(shí)器
        clearTimeout(timer);

        //反復(fù)循環(huán)定時(shí)器
        var timer2 = setInterval(function(){
            alert('hi~~~');
        }, 2000);

        //清除反復(fù)循環(huán)定時(shí)器
        clearInterval(timer2);
    </script>
</head>
<body>
    
</body>
</html>

7.3 定時(shí)器動(dòng)畫

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定時(shí)器動(dòng)畫</title>
    <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)定時(shí)器，每30毫秒修改一次盒子的left值
            var timer = setInterval(function(){
                left += 2;
                oBox.style.left = left + 'px';

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

7.4 時(shí)鐘

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>時(shí)鐘</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);//彈出美式時(shí)間：Wed Jun 20 2018 15:27:13 GMT+0800 (中國(guó)標(biāo)準(zhǔn)時(shí)間)
                var year = now.getFullYear();//2018年
                var month = now.getMonth() + 1;//6月彈出5//范圍0-11
                var date = now.getDate();//20號(hào)
                var week = now.getDay();//3//星期幾，西半球時(shí)間，范圍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)前時(shí)間是：' + 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>

7.5 倒計(jì)時(shí)

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

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

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

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

                //活動(dòng)當(dāng)天頁面下線，避免倒計(jì)時(shí)到點(diǎn)后繼續(xù)計(jì)負(fù)時(shí)
                // 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時(shí)00分00秒還有' + day + '天' + toDouble(hour) + '時(shí)' + 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>

8. 變量的作用域

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

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>變量的作用域</title>
    <script type="text/javascript">

        var a = 12;

        function aa(){
            // var a = 5;
            var b = 7;

            // alert(a);
        }

        // alert(a);
        // alert(b);//報(bào)錯(cuò)

        aa();
    </script>
</head>
<body>
    
</body>
</html>

9. 封閉函數(shù)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>封閉函數(shù)</title>
    <script type="text/javascript">
        /*原來的寫法
        function myAlert(){
            var str = '歡迎訪問我的主頁';
            alert(str);
        }

        myAlert();*/

        var str = function(){
            alert('test');
        }
        
        //封閉函數(shù)的一般寫法
        //封閉函數(shù)定義：(function(){……})()
        /*
        ;;(function(){
            var str = '歡迎訪問我的主頁';
            alert(str);
        })();//最后的()表示馬上執(zhí)行
        */

        //封閉函數(shù)其他的寫法：在匿名函數(shù)前加“！”或者“~”，之后加“()”
        ~function(){
            var str = '歡迎訪問我的主頁';
            alert(str);
        }();
    </script>
</head>
<body>
    
</body>
</html>

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用變量的方式定義函數(shù)</title>
    <script type="text/javascript">
        /*
        原來的寫法：可以提前
        myAlert();

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

        //函數(shù)用變量方式定義：先定義再使用
        // myalert();//提前會(huì)報(bào)錯(cuò)
        var myAlert = function(){
            alert('hello!');
        }

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

    </script>
</head>
<body>
    
</body>
</html>

11. 閉包

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>閉包</title>
    <script type="text/javascript">

        /*
        //閉包的一般寫法
        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)();
        */
    </script>
</head>
<body>
    
</body>
</html>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

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

  • 第2章 基本語法 2.1 概述 基本句法和變量 語句 JavaScript程序的執(zhí)行單位為行（line），也就是一...
    悟名先生閱讀 4,503評(píng)論 0贊 13
  • 本章將會(huì)介紹 控制流For-In 循環(huán)While 循環(huán)If 條件語句Switch 語句控制轉(zhuǎn)移語句 continu...
    寒橋閱讀 802評(píng)論 0贊 0
  • 在C語言中,五種基本數(shù)據(jù)類型存儲(chǔ)空間長(zhǎng)度的排列順序是: A)char B)char=int<=float C)ch...
    夏天再來閱讀 3,993評(píng)論 0贊 2
  • 時(shí)光無聲，歲月留痕，走過的路，有純真的感動(dòng)，難忘的溫暖，亦難免會(huì)有薄涼和惆悵。每一段行程，都有轉(zhuǎn)身告別的時(shí)刻。 經(jīng)...
    李裕萱閱讀 565評(píng)論 4贊 4
  • 新學(xué)期，新氣象。同學(xué)們開學(xué)第一周迎來了教師節(jié)，同學(xué)們積極的準(zhǔn)備著，也祝愿老師們教師節(jié)快樂！
    衛(wèi)校一五護(hù)三閱讀 240評(píng)論 0贊 0

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