整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          前端入門教程之 JS 「switch」語句 javascript學習

          witch 語句可以替代多個 if 判斷。

          switch 語句為多分支選擇的情況提供了一個更具描述性的方式。

          語法

          switch 語句有至少一個 case 代碼塊和一個可選的 default 代碼塊。

          就像這樣:

          switch(x) {
            case 'value1':  // if (x === 'value1')
              ...
              [break]
          
            case 'value2':  // if (x === 'value2')
              ...
              [break]
          
            default:
              ...
              [break]
          }
          • 比較 x 值與第一個 case(也就是 value1)是否嚴格相等,然后比較第二個 case(value2)以此類推。
          • 如果相等,switch 語句就執行相應 case 下的代碼塊,直到遇到最靠近的 break 語句(或者直到 switch 語句末尾)。
          • 如果沒有符合的 case,則執行 default 代碼塊(如果 default 存在)。

          舉個例子

          switch 的例子(高亮的部分是執行的 case 部分):

          let a = 2 + 2;
          
          switch (a) {
            case 3:
              alert( 'Too small' );
              break;
            case 4:
              alert( 'Exactly!' );
              break;
            case 5:
              alert( 'Too big' );
              break;
            default:
              alert( "I don't know such values" );
          }

          這里的 switch 從第一個 case 分支開始將 a 的值與 case 后的值進行比較,第一個 case 后的值為 3 匹配失敗。

          然后比較 4。匹配,所以從 case 4 開始執行直到遇到最近的 break。

          如果沒有 break,程序將不經過任何檢查就會繼續執行下一個 case。

          無 break 的例子:

          let a = 2 + 2;
          
          switch (a) {
            case 3:
              alert( 'Too small' );
            case 4:
              alert( 'Exactly!' );
            case 5:
              alert( 'Too big' );
            default:
              alert( "I don't know such values" );
          }

          在上面的例子中我們會看到連續執行的三個 alert:

          alert( 'Exactly!' );
          alert( 'Too big' );
          alert( "I don't know such values" );

          任何表達式都可以成為 switch/case 的參數

          switch 和 case 都允許任意表達式。

          比如:

          let a = "1";
          let b = 0;
          
          switch (+a) {
            case b + 1:
              alert("this runs, because +a is 1, exactly equals b+1");
              break;
          
            default:
              alert("this doesn't run");
          }

          這里 +a 返回 1,這個值跟 case 中 b + 1 相比較,然后執行對應的代碼。

          “case” 分組

          共享同一段代碼的幾個 case 分支可以被分為一組:

          比如,如果我們想讓 case 3 和 case 5 執行同樣的代碼:

          let a = 3;
          
          switch (a) {
            case 4:
              alert('Right!');
              break;
          
            case 3: // (*) 下面這兩個 case 被分在一組
            case 5:
              alert('Wrong!');
              alert("Why don't you take a math class?");
              break;
          
            default:
              alert('The result is strange. Really.');
          }

          現在 3 和 5 都顯示相同的信息。

          switch/case 有通過 case 進行“分組”的能力,其實是 switch 語句沒有 break 時的副作用。因為沒有 break,case 3 會從 (*) 行執行到 case 5。

          類型很關鍵

          強調一下,這里的相等是嚴格相等。被比較的值必須是相同的類型才能進行匹配。

          比如,我們來看下面的代碼:

          let arg = prompt("Enter a value?")
          switch (arg) {
            case '0':
            case '1':
              alert( 'One or zero' );
              break;
          
            case '2':
              alert( 'Two' );
              break;
          
            case 3:
              alert( 'Never executes!' );
              break;
            default:
              alert( 'An unknown value' )
          }
          1. 在 prompt 對話框輸入 0、1,第一個 alert 彈出。
          2. 輸入 2,第二個 alert 彈出。
          3. 但是輸入 3,因為 prompt 的結果是字符串類型的 "3",不嚴格相等 === 于數字類型的 3,所以 case 3 不會執行!因此 case 3 部分是一段無效代碼。所以會執行 default 分支。

          任務

          將 "switch" 結構重寫為 "if" 結構

          重要程度: 5

          將下面 switch 結構的代碼寫成 if..else 結構:

          switch (browser) {
            case 'Edge':
              alert( "You've got the Edge!" );
              break;
          
            case 'Chrome':
            case 'Firefox':
            case 'Safari':
            case 'Opera':
              alert( 'Okay we support these browsers too' );
              break;
          
            default:
              alert( 'We hope that this page looks ok!' );
          }

          解決方案

          將 "if" 結構重寫為 "switch" 結構

          重要程度: 4

          用 switch 重寫以下代碼:

          let a = +prompt('a?', '');
          
          if (a == 0) {
            alert( 0 );
          }
          if (a == 1) {
            alert( 1 );
          }
          
          if (a == 2 || a == 3) {
            alert( '2,3' );
          }

          解決方案

          前兩個檢查為前兩個 case,第三個檢查分為兩種情況:

          let a = +prompt('a?', '');
          
          switch (a) {
            case 0:
              alert( 0 );
              break;
          
            case 1:
              alert( 1 );
              break;
          
            case 2:
            case 3:
              alert( '2,3' );
              break;
          }

          請注意:最后的 break 不是必須的。但是為了讓代碼可擴展我們要把它加上。

          有可能之后我們想要再添加一個 case,例如 case 4。如果我們忘記在它之前添加一個 break,那么在 case 3 執行結束后可能會出現錯誤。所以這是一種自我保險。

          者:HXGNMSL來源:CSDN原文:https://blog.csdn.net/HXGNMSL/article/details/89076476

          Javascript的歷史來源

          94年網景公司 研發出世界上第一款瀏覽器。

          95年 sun公司 java語言誕生

          網景公司和sun合作。

          Javascript ===> javascript

          JavaScript和ECMAScript的關系

          簡單來說ECMAScript不是一門語言,而是一個標準。符合這個標準的比較常見的有:JavaScript、Action Script(Flash中用的語言)

          JavaScript的基本結構:

          JavaScript的語法:

          JavaScript的基礎語法

          變量的聲明及使用

          數據類型

          運算符

          邏輯控制語句

          注釋

          語法規則

          變量的聲明語法:

          var變量名;

          例如:

          Var num;

          然后進行賦值:num = 10;也可以聲明時直接賦值:

          Var num =10;

          在JavaScript中,提供了常用的基本數據類型:

          undefined 未定義;

          null 空;

          string 字符串類型;

          boolean 布爾類型;

          number 數值類型;

          運算符:

          算數運算符:+、-、*、/、%、++、–;

          比較運算符:>、<、> =、< =、==、!=;

          邏輯運算符:&&、||、!;

          賦值運算符:=;

          邏輯控制語句:

          JavaScript的邏輯控制語句也分為兩類:條件結構和循環機構。

          條件結構

          條件機構分為if結構和switch結構:

          If…else

          Switch

          循環結構

          JavaScript的循環結構的執行順序與Java類似,主要包括以下幾種結構:

          for循環

          while循環

          do…while循環

          for…inx循環

          示例:

          for(var i=0;i<10;i++){

          Document.write(“*”);

          }

          輸出結果:**********

          循環中斷:

          用于循環中斷的語句有以下兩種:

          break.

          continue.

          與Java用法一樣,break是跳出循環,continue是跳入下一次循環。

          函數

          函數有兩種:一種是系統函數,一種是自定義函數

          常用的系統函數包括:

          parseInt():轉換為整數。

          parseFloat():轉換為浮點型。

          isNaN():判斷非數字。

          Eval():計算表達式值。

          自定義函數:

          自定義函數的語法

          function 函數名(參數1,參數2,…){

          …//語句

          Return 返回值;//可選

          }

          函數的調用:

          函數的調用方式有以下兩種

          事件名=函數名(傳遞的實參值),例如:

          “函數名()”

          直接使用函數名(傳遞的實參值),例如:

          var recult = add(2,3);

          匿名函數

          匿名函數的語法

          var sumFun=function(num1,num2){

          return(nun1,num2);

          } ;

          在語法中:

          var sunFun=function(num1,num2)表示聲明一個變量等于某個函數體。

          {…};是把整個函數體放在變量的后面,并把末尾添加一個分號。

          匿名函數的調用:

          由于匿名函數定義的整個語句,可以像賦值一樣賦給一個變量進行保存,所以可以使用如下方式調用語法中的匿名函數:

          var sum=sumFun(2,3)

          BOM概述

          使用BOM可以移動窗口,改變狀態欄中的文本,執行其他與頁面內容不直接相關的動作。它包含的對象主要有以下幾種;

          Window對象

          Window對象是指整個窗口對象,可以通過操作Window對象的屬性和方法控制窗口,例如,打開或關閉一個窗口。

          History對象

          瀏覽器訪問過的歷史頁面對應History對象,通過History對象的屬性和方法實現瀏覽器的前進或后退的功能。

          Location對象

          瀏覽器的地址欄對應Location對象,通過Location對象的屬性和方法控制頁面跳轉。

          Document對象

          瀏覽器內的網頁內容對應Document對象,通過Document對象的屬性和方法,控制頁面元素。

          Window常用的屬性有:

          history:有關客戶訪問過的URL的信息。

          location:有關當前URL的信息。

          Screen: 有關客戶端的屏幕和顯示性能的信息。

          Window對象常用的方法:

          prompt():顯示可提示用戶輸入的對話框。

          alert():顯示帶有一段消息和一個人“確認”按鈕的警告框。

          confirm():顯示帶有一段消息以及“確認”按鈕“取消”按鈕的對話框。

          close():關閉瀏覽器窗口。

          open():打開一個新的瀏覽器窗口,加載給定URL所指定的文檔。

          setTimeout():用于在指定(以毫秒計)后調用函數或計算表達式。

          setTneerval():按照指定的周期 (以毫秒計)數來調用函數或計算表達式。

          Window對象常用窗口特征屬性

          height、width:窗口文檔顯示區的高度、寬度,以像素計。

          left、top:窗口的x坐標y坐標,以像素計。

          toolbar:yes|no|1|0:是否顯示瀏覽器的工具欄,默認是yes。

          scrollbars =yes|no|1|0:是否顯示滾動條,默認是yes。

          locationyes|no|1|0:是否顯示地址欄,默認是yes。

          status|no|1|0:是否添加地址欄,默認是yes。

          menubar|no|1|0:是否顯示菜單欄,默認是yes。

          resizable|no|1|0:窗口是否可調節尺寸,默認是yes。

          Window對象的常用事件:

          onload:一個頁面或一副圖像完成加載。

          onmouseover:鼠標指針移到某元素之上。

          onclick:單擊某個對象。

          onkeydown:某個鍵盤按鍵被按下。

          onchange:域的內容被改變。

          History對象的方法:

          back():加載History對象列表中的上一個URL。

          forward():加載History對象列表中的下一個URL。

          go():加載History對象列表中的某個具體URL。

          Location對象的屬性:

          host:設置或返回主機名和當前URL的端口號。

          hostname:設置或返回當前URL的主機名。

          href:設置或返回完整的URL。

          Location對象的方法:

          reload():重新加載當前文檔。

          replace():用新的文檔替換當前文檔。

          Document對象常用的屬性:

          referrer:返回載入當前文檔的URL。

          URL:返回當前文檔的URL。

          Document對象的常用方法:

          getElementById():返回對擁有指定id的第一個對象的引用。

          getElementsByName():返回帶有指定名稱的對象的集合。

          getElementsByTagName():返回帶有指定標簽名的對象的集合。

          write():向文檔寫文本、HTML表達式代碼。

          內置對象

          系統的內置對象有Date對象、Array對象、String對象和Math對象等。

          Date:用于操作日期和時間。

          Array:用于在單獨的變量名中儲存一系列的值。

          String:用于支持對字符串的處理。

          Math:用于執行數學任務,包含了若干數字常量和函數。

          Date對象:

          1:創建日期對象

          Date對象包含日期和時間兩個信息,創建日期對象的基本語法有兩種:

          創建日期的基本語法1: var 日期實例化=new Date(參數);

          創建日期的基本語法2: var 日期實例化=new Date();

          Date對象的常用方法:

          getDate():從Date對象返回一個月中的某一天,其值介于1到31之間。

          getDay():從Date對象返回星期中的某一天,其值介于0到6之間。

          getHours():返回Date對象的小時,其值介于0到23之間。

          getMinutes():返回Date對象的分鐘,其值介于0到59之間。

          getSeconds():返回Date對象的秒數,其值介于0到59之間。

          getMonth():返回Date對象的月份,其值介于0到11之間。

          getFullYear():返回Date對象的年份,其值為4位數。

          getTime():返回自某一時刻(2010年1月1日)以來的毫秒數。

          DOM概述

          什么是DOM

          DOM是文檔對象的縮寫,和語言無關。它提供了訪問、動態修改結構文檔的接口,W3C制定了DOM規范,主流瀏覽器都支持。

          使用Core DOM操作節點

          訪問節點:

          使用getElement系列方法訪問指定節點。

          getElementById():返回對擁有指定id的第一個對象的引用。

          getElementsByName():返回帶有指定名稱的對象的集合。

          getElementsByTagName():返回帶有指定標簽名的對象的集合。

          使用層次關系訪問節點。

          parenNode:返回節點的父節點。

          firstChild:返回節點的首個節點。文本和屬性節點沒有父節點,會返回一個空數組,對于元素節點,若是沒有子節點會返回null。

          lastChild:返回節點的最后一個子節點,返回值同firstChild。

          操作節點屬性值

          CoreDOM的標準方法包括以下兩種:

          getAttribute(“屬性名”):獲取屬性值。

          getAttribute(“屬性名”,“屬性值”):設置屬性值

          創建和增加節點:

          創建節點

          createElement(tagName):按照給定的標簽名稱創建一個新的元素節點

          appendChild(nodeName):向以存在節點列表的末尾添加新的節點。

          inserBefore(newNode,oldNode):向指定的節點之前插入一個新的子節點。

          cloneNode(deep):復制某個指定的節點。

          刪除和替換節點

          removeChild(node):刪除指定的節點。

          replaceChild(newNode,oldNode):用其他的節點替換指定的節點。

          Table對象的屬性和方法

          屬性:

          rows[]:返回包含表格中所有行的一個數組。

          rows[]用于返回表格中所有行的一個數組。

          方法:

          inserRow():在表格中插入一個新行。

          deleteRow():從表格中刪除一行。

          數組

          數組是具有相同數據類型的一個或多個值得集合

          創建數組的語法:

          var 數組名稱=new Array(size);

          數組的賦值的兩種方式:

          先聲明在賦值

          var province = new Array(4);

          province[0]=“河北省”;

          province[1]=“河南省”;

          索引也可以使用標識(字符串),例如:

          var province=new Array(4);

          province[‘河北省’]=“河北省”;

          province[‘河南省’]=“河南省”;

          聲明時同時初始化

          var province=new Array(“河北省”,“河南省”,“湖北省”,“廣東省”);

          Array對象的常用屬性和方法:

          屬性:

          length:設置或返回數組中元素的數目。

          方法:

          join():把數組的所有元素放入一個字符串,通過一個分隔符進行分割。

          sort():對數組的元素進行排序。

          多程序都具有switch語句,用于作為菜單功能。當傳入的參數的值等于菜單選項將會執行菜單選項中的內容,但是JavaScript語言具有特殊性有三等(===)和兩等(==)兩種情況,對于JavaScript來說switch使用的是三等呢,還是兩等呢?我們以下面這段程序來進行闡述。

          <!DOCTYPE html>
          <html>
              <head>
                  <title>簡單的switch的使用</title>
                  <meta charset="utf-8">
              </head>
              <body>
                  <script>
                      var a="1";
                      var b=2;
                      function foo(){
                          
                          switch(a){
                              case 1:{
                                  console.log("number 1");
                                  break;
                              }
                              case 2:{
                                  console.log("number 2");
                                  break;
                              }
                              case "1":{
                                  console.log("string 1");
                                  break;
                              }
                              case (function(){return "2"})():{
                                  console.log("value is true");
                                  break;
                              }
                              default:{
                                  console.log("not match");
                                  break;
                              }
                          }
                      }
                      foo();
                  </script>
              </body>
          </html>

          這段程序定義了一個變量其參數自為字符串型的'1',菜單選項中有數字型的選項1和2還有字符串型的參數“1”還有一個變量的表達式以及一個默認的參數選項。

          直接運行這段程序輸出的結果是string 1。

          當修改a的值為字符串“2”時輸出的結果為value is true。

          由上述可以switch的菜單選項使用的是三等需要參數值和參數類型都相等才會執行菜單選項中的值,同時如果菜單選項為一個表達式如果表達式返回的結果和傳入的選項的值相等將會執行表達式后面選項的程序。所以綜上所述switch語句如果菜單語句是表達式如果表達式的值為真將會執行菜單語句中的內容,如果是參數值如果傳入的值的值與菜單中的值是三等則會執行菜單語句中的內容。


          主站蜘蛛池模板: 精品国产一区二区三区久久久狼| 日韩熟女精品一区二区三区| 91一区二区视频| 午夜视频久久久久一区 | 国产精品第一区揄拍| 肥臀熟女一区二区三区 | 精品国产一区二区三区不卡 | 88国产精品视频一区二区三区| 成人在线视频一区| 日韩美女在线观看一区| 91在线视频一区| 人妻体内射精一区二区三区| 日韩精品人妻一区二区中文八零| 国产精品乱码一区二区三| 色欲AV蜜桃一区二区三| 无码精品不卡一区二区三区 | 日韩在线观看一区二区三区| 亚洲一区二区三区免费观看| 无码精品人妻一区二区三区人妻斩| 亚洲AV成人精品日韩一区18p| 国产在线精品一区二区三区不卡| 日韩一区二区三区免费体验| 一本大道在线无码一区| 亚洲av乱码一区二区三区按摩| 国产精品香蕉在线一区| 亚洲另类无码一区二区三区| 在线精品一区二区三区| 久久精品日韩一区国产二区| 精品久久久久久无码中文字幕一区 | 2021国产精品一区二区在线 | 国产激情一区二区三区小说| 成人免费视频一区| 精品国产一区二区三区久久影院| 理论亚洲区美一区二区三区| 国产伦精品一区二区三区无广告 | 综合人妻久久一区二区精品| 国产一区二区内射最近更新| 亚洲bt加勒比一区二区| 中文字幕一区二区三区久久网站 | 亚洲午夜在线一区| 在线精品一区二区三区电影|