1. 程式人生 > >javaScript基礎語法(下)

javaScript基礎語法(下)

4、邏輯控制語句

  4.1條件結構

    條件結構分為if結構和switch結構。

    通常在寫程式碼時,您總是需要為不同的決定來執行不同的動作。您可以在程式碼中使用條件語句來完成該任務。

    在 JavaScript 中,我們可使用以下條件語句:

    • if 語句 - 只有當指定條件為 true 時,使用該語句來執行程式碼。
    • if...else 語句 - 當條件為 true 時執行程式碼,當條件為 false 時執行其他程式碼。
    • if...else if....else 語句- 使用該語句來選擇多個程式碼塊之一來執行。
    • switch 語句 - 使用該語句來選擇多個程式碼塊之一來執行。

   4.1.1  if 結構

         只有當指定條件為 true 時,該語句才會執行程式碼。

        語法:

        if(condition)

        {

          //當條件為true時執行程式碼

        }

        請使用小寫的if。使用大寫字母(IF)會生成javaScript錯誤!

       if...else 語句

       請使用 if....else 語句在條件為 true 時執行程式碼,在條件為 false 時執行其他程式碼。

       語法:

       if (condition)

       {

         //當條件為true時執行的程式碼

       }

       else

       {

         //當條件不為true時執行的程式碼

       }

       程式碼風格建議:

         if(condition)

       {

        doSomething();

       }

       else

         {

        doSomethingElse();

       }

      javaScript程式碼的這種風格繼承自java,這在java程式語言的程式設計規範中有明確規定。在Crockford的程式設計規範、jquery核心風格指南、SqroutCore程式設計風格指南、

      Google的javaScript風格指南以及Dojo程式設計風格指南中都出現過。

      相關示例:

      //錯誤的寫法

      if (condition) {

        doSomething ();

      }

      doSomethingElse ();

      //錯誤的寫法

      if (condition) {

        doSomething();

        doSomethingElse();

      }

      //不好的寫法,儘管這是合法的javaScript的程式碼

if (condition)  

        doSomething();

//不好的寫法,儘管這是合法的javaScript的程式碼

if (condition) doSomething();

//不好的寫法,儘管這是合法的javaScript的程式碼

if (condition)  { doSomething(); }

       //好的寫法

if (condition)  { 

      doSomething(); 

     }

   4.1.2  switch 結構 

     請使用switch語句來選擇要執行的多個程式碼塊之一。

     語法:

     switch (n){

      case 1:

          //執行程式碼塊1

      break;

      case 2:

          //執行程式碼塊2

      break;

      default:

          //n與 case 1 和 case 2 不同執行的程式碼

     }

    工作原理:

    首先設定表示式n(通常是一個變數)。隨後表示式的值會與結構中的每個case的值做比較。則與該case關聯的程式碼塊會被執行,請使用break來阻止程式碼自動地向下一個case執行。

    default的關健詞使用:

    請使用default關健詞來規定匹配不存在時做的事情,使用時視業務情況而定。也可以在case後加個break或最後一個case後直接結束。

    相關示例:

    風格一:

    switch (condition){

      //明顯的依次執行

      case "first":

        //程式碼

      break;

      case "second":

        //程式碼

      break;

      case "third":

        //程式碼

      /* fall through */

      default:

        //程式碼

    }

    本人比較習慣使用此風格,和java語法是一樣的。

    風格二:

    switch(condition) {

    case "first":

      //程式碼

      break;

    case "second":

      //程式碼

      break;

    case "third":

      //程式碼

      break;

    default:

      //程式碼

    }

    此風格被Crockford的程式設計規範和Dojo程式設計風格指南所提倡。

  4.2迴圈結構

    如果您希望一遍又一遍地執行相同的程式碼,並且每次的值都不同,那麼使用迴圈是很方便的。

    不同型別的迴圈:

    

    javaScript支援不同型別的迴圈:

    • for - 迴圈程式碼塊一定的次數
    • for/in,for/each - 迴圈遍歷物件的屬性
    • while - 當指定的條件為true時迴圈指定的程式碼塊
    • do/while - 同樣當指定的條件為true時迴圈指定的程式碼塊

   4.2.1 for迴圈

       for迴圈是您在希望建立迴圈時常會用到的工具。

       下面是for迴圈的語法:

       for (語句 1;語句 2; 語句 3)

        {

          //被執行的程式碼塊

        }

       語句 1 (程式碼塊)開始前執行 starts

       語句 2 定義執行迴圈(程式碼塊)的條件

       語句 3 在迴圈(程式碼塊)已被執行之後執行

        例項1:

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

          x=x+"該數字為"+i+"<br>";

        }

        從上面的例子中,您可以看到:

        語句1在迴圈開始之前設定變數初始化(var i=0)。

        語句2定義迴圈執行的條件(i 必須小於5)。

        語句3在每次程式碼塊已被執行後增加一個值(i++)。

      例項2:

        var i=0,len=cars.length;

        for (; i<len;){

          document.write(cars[i]+"<br>");

          i++;

        }

        語句1是可選的,可以在迴圈外進行定義並進行初始化。

        語句2是用於評估初始變數的條件,同樣也是可選。

        語句3同樣也是可選的,有多種用法如:增量可以是負數(i--),或者更大(i=i+15).通常會增加初始變數的值。

    4.2.2.1  for/in迴圈

          for/in語句迴圈遍歷物件的屬性:

          語法:

          for (variable in object){

          }

          例項:

          var person=(fname:"json",lname:"Doe",age:25);

          for (x in person){

            txt=txt+person[x];

          }

          注意:for...in迴圈中的程式碼塊將針對每個屬性執行一次。

          相關示例:

          //不好的用法

          var values = [1,2,3,4,5,6,7],i;

          for (i in values){

            process(items[i]);

          }

          //好的用法

          var prop;

          for (prop in object){

           console.log("Property name is") + prop;

           console.log("Property value is" + object[prop]);

          }

    4.2.2.2 for/each迴圈即迭代迴圈(由於會影響效能等原因不建議使用) 

         for/each語句迴圈遍歷物件型別變數的值:     

         語法:

          for(元素型別t 元素變數x : 遍歷物件obj){ 
             //引用了x的javaScript語句; 
           }

          相關示例:

           var arr[] = {2, 3, 1},var x=null;

           document.write("----1----排序前的一維陣列");   
           for (x : arr) {   
  document.write(x);   //逐個輸出陣列元素的值   
           }        4.2.3  while迴圈(建議不使用)          while迴圈會在指定條件為真時迴圈執行程式碼塊。          語法:          while (條件)          {           //需要執行的程式碼          }          相關示例:          while (i<5)           {             x=x+"The number is"+i+"<br>";           }          如果您忘記增加條件中所用變數,該迴圈永遠不會結束。這可能導致瀏覽器崩潰。          注意:此迴圈在嚴格模式下是明令禁止使用的,Crockford的程式設計規範和Google的javaScript風格指南禁止使用while迴圈。     4.2.4 do/while 迴圈         do/while迴圈是while迴圈的變體。該迴圈會在檢查條件是否為真之前執行一次程式碼塊,然後如果條件為真的話,就會重複這個迴圈。         語法:         do           {             //需要執行的程式碼           }         while(條件);         例項:         do           {            x=x+"The number is"+i+"<br>";            i++;           }         while (i<5);         別忘記增加條件中所用變數的值,否則迴圈永遠不會結束。

  4.3迴圈中斷

     

    4.3.1  break語句

         例項:

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

          {

            if (i==3)

            {

              break;

            }

            x=x + "The number is"+i+"<br>";

           }

    4.3.2  Continue語句

         例項:

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

          {

            if (i==3) continur;

            x=x +"The number is" + i +"<br>";

          }

   4.3.3  使用javaScript標籤跳出迴圈(由於會破壞業務邏輯所以不建議使用)

        標籤:

          label:

          statements

        語法:

          break labelname;

            continue labelname;

        例項:

          cars=["BMW","Volvo","Saab","Ford"];
          list: 
            {
              document.write(cars[0] + "<br>"); 
              document.write(cars[1] + "<br>"); 
              document.write(cars[2] + "<br>"); 
              break list;
              document.write(cars[3] + "<br>"); 
              document.write(cars[4] + "<br>"); 
              document.write(cars[5] + "<br>"); 
            }

5、註釋與語法規範   我們可以添加註釋來對javaScript進行解釋,或者提高程式碼的可讀性     

  單行註釋例項:

    //輸出標題:

    document.getElementById(“myH1”).innerHTML="歡迎來到我的主頁";

    //輸出段落:

    document.getElementById("myP").innerHTML="這是我的第一個段落";

  多行註釋例項:

     /*
      下面的這些程式碼會輸出
      一個標題和一個段落
      並將代表主頁的開始
    */
    document.getElementById("myH1").innerHTML="歡迎來到我的主頁";
    document.getElementById("myP").innerHTML="這是我的第一個段落。";     javaScript程式碼規範: 1、縮排       建議每行的層級使用4個空格完成,避免使用製表符(Tab)進行縮排。       //好的寫法       if (true){         doSomething();       }      2、行的長度       每行長度不應該超過80個字元。如果一行多於80個字元,應當在一個運算子(逗號,加號等)後換行。下一行應當增加兩級縮排(8個字元)。     //好的寫法     doSomething();     //不好的寫法:第二行只有4個空格的縮排     doSomething(argument1,argument2,argument3,argument4,argument5);     //不好的寫法:在運算子之前換行     doSomething(argument1,argument2,argument3,argument3,argument4,argument5);     3、原始值     字串應當始終使用雙引號(避免使用單引號)且保持一行。避免在字串中使用斜線另起一行。     //好的寫法     var name = "Nicholas";     //不好的寫法:單引號     var name = 'Nicholas';     //不好的寫法:單引號     var name = 'Nicholas';     //不好的寫法:字串結束之前換行     var longString ="Here's the story, of a man \named Brady.     數字應當使用十進位制整數,科學計數法表示整數,十六進位制整數,或者十進位制浮點小數,小數點前後應當至少保留一位數字。避免使用八進位制直接量。     //好的寫法     var count =10;     //好的寫法     var price = 10.0;     var price = 10.00;     //好的寫法     var num = 0xA2;     //好的寫法     var num = 1e23;     //不好的寫法:十進位制數字以小數點結尾     var price = 10.0;     //不好的寫法:十進位制數字以小數點開頭     var price = .1;     //不好的寫法:八進位制(base 8)寫法已廢棄     var num = 010;     特殊值null除了下述情況下應當避免使用。
    • 用來初始化一個變數,這個變數可能被賦值為一個物件
    • 用來和一個已經初始化的變數比較,這個變數可以是也可以不是一個物件。
    • 當函式的引數期望是物件時,被用作物件引數傳入。
    • 當函式的返回值期望是物件時,被用作返回值傳出。

    例如:

    //好的寫法

    var person = null;

    //好的寫法

    function getPerson () {

      if (condition) {

        return new Person("Nicholas");

      } else {

        return null;

      } 

    }

    //好的寫法

    var person = getPerson() ;

    if (person != null){

      doSomething();

    }

    //不好的寫法:和一個未被初始化的變數比較

    var person;

    if (person !=null){

      doSomething();

    }

    //不好的寫法:通過測試判斷某個引數是否被傳遞

    function doSomething ( arg1,arg2,arg3,arg4){

      if(arg4 != null){

        doSomethingElse();

      }

    }

    避免使用特殊值undefind。判斷一個變數是否定義應當使用typeof操作符。

    //好的寫法

    if (typeof variable = "undefined") {

      //do something

    }

    //不好的寫法:使用了undefined直接量

    if( variable == undefined ) {

      //do something

    }

    4、運算子間距

    二元運算子前後必須使用一個空格來保持表示式的整潔。操作符包括賦值運算子和邏輯運算子。

    //好的寫法

    var found = (values[i]===item);

    //好的寫法

    if (found && (count>10)){

      doSomething ();

    }

    //好的寫法

    for (i=0;i<count;i++){

      process(i);

    }

    //不好的寫法:丟失了空格

    var found = (value[i] === item);

    //不好的寫法:丟失了空格

    if (found[i]&&(count>10)){

      doSomething();

    }

    //不好的寫法:丟失了空格

    for ( i=0; i<count;i++){

      process(i);

    }

    5、括號間距

    //好的寫法

    var found = (values[i] === item);

    //好的寫法

    if(found && (count>10)){

      doSomething ();

    }

    //好的寫法

    for (i=0;i<count;i++) {

      process(i);

    }

    //不好的寫法:左括號之後有額外的空格

    var found =(values[i]===item);

    //不好的寫法:右括號之前後有額外的空格

    if (found && count >10){

      doSomething ();

    }

    //不好的寫法:引數兩邊有額外的空格

    for (i=0;i<count;i++) {

      process(i);

    }

6、物件直接量

  物件直接量應當使用如下格式。

    • 起始左花括號應當同表示式保持同一行。
    • 每個屬性的名值對應保持一個縮排,第一個屬性應當在左花括號後另起一行。
    • 每個屬性的名值對應使用不含引號的屬性名,其後緊跟一個冒號(之前不含空格),而後是值。
    • 倘若屬性值是函式型別,函式體應當在屬性名之下另一行,而且其前後均應保留一個空行。
    • 一組相關的屬性前後可以插入空行以提升程式碼的可讀性。
    • 結束的右花括號應當獨佔一行。

  例如:

  //好的寫法

  var object = {

    key1: value1,

    key2: value2,

    func: function () {

      //做些什麼

    },

    key3: value3

  };

  //不好的寫法:不恰當的縮排

  var object={

    key1:value1 ;

    key2:value2 ;

  }

  //不好的寫法:函式體周圍缺少空行

  var object = {

    key1: value1,

    key2: value2.

    func:function (){

      //做什麼

    }

    key3:value3 ;

  }

  當物件字面量作為函式引數時,如果值是變數,起始花括號應當同函式名在同一行。

  所有其餘先前列出的規則同樣適用。

  //好的寫法

  doSomething({

    key1: value1,

    key2: value2

  });

  //不好的寫法:所有程式碼在一行上

  doSomething({ key1: value1,key2: value2 });

7、註釋

  頻繁地使用註釋有助於他人理解你的程式碼。如下情況應當使用註釋。

    • 程式碼晦澀難懂
    • 可能被誤認為錯誤的程式碼。
    • 必要但並不明顯的針對特定瀏覽器的程式碼。
    • 對於物件、方法或屬性,生成文件是有必要的(使用恰當的文件註釋)。

  7.1   單行註釋

      單行註釋是應當用來說明一行程式碼或者一組相關的程式碼。單行註釋可能有三種使用方式。

    • 獨佔一行的註釋,用來解釋下一行程式碼。
    • 在程式碼行的尾部的註釋,用來解釋它之前的程式碼。
    • 多行,用來註釋掉一個程式碼塊。

    這裡有一些示例程式碼。

    //好的寫法

    if (condition){

      //如果程式碼執行到這裡,則表明通過了所有安全性檢查。

      allowed();

    }

    //不好的寫法:註釋之前沒有空行。

    if (condition) {

      //如果程式碼執行到這裡,則表明通過了所有安全性檢查

      allowed();

    }

    //不好的寫法:錯誤的縮排

    if (condition){

      //如果程式碼執行到這裡,則表明通過了所有安全性檢查

      alloed();

    }

    //不好的寫法:這裡應當用多行註釋

    //接下來的這段程式碼非常難,那麼,讓我詳細解釋一下

    //這段程式碼的作用是首先判斷條件是否為真

    //只有為真時才會執行。這裡的條件中通過

    //多個函式計算出來的,在整個會話生命週期內

    //這個值是可以被修改的

    if (condition) {

      //如果程式碼執行到這裡,則表明通過了所有安全性檢查

      allowrd();

    }

    對於程式碼行尾單行註釋的情況,應確保程式碼結尾同住註釋之間至少一個縮排。

    //好的寫法

    var result = something +somethingElse;// somethingElse will never be null

    //不好的寫法

    var result = something + somethingElse;//somethingElse will never be null

    註釋一個程式碼塊時在連續多行使用單行註釋是唯一可以接受的情況。多行註釋不應當在這種情況下使用。

    //好的寫法

    //if (condition) {

    //  doSomething();

    //  thenDoSomethingElse();

    //}

  7.2  多行註釋

相關推薦

javaScript基礎語法

4、邏輯控制語句   4.1條件結構     條件結構分為if結構和switch結構。     通常在寫程式碼時,您總是需要為不同的決定來執行不同的動作。您可以在程式碼中使用條件語句來完成該任務。     在 JavaScript 中,我們可使用以下條件語句: if 語句 - 只有當指定

ECMAScript 5.0 基礎語法“稍微重點一點點”

var 小寫 大於等於 subst 修改 獨立 ray floor name 接上篇 七、常用內置對象(復雜數據類型)(重點)   (1)數組Array       創建:例 var colors = [‘red‘,‘blue‘,‘green‘] #推薦這樣,

javaScript基礎語法

  相關理論概念: 直接量的概念:直接描述某個(些)儲存空間的值的量,如變數的值、物件的值、陣列的值。 資料型別:在資料結構中的定義是一個值的集合以及定義在這個值集上的一組操作。 1、變數的宣告和使用   變數:是計算機語言中能儲存計算結果或能表示值抽象概念。變數可以通過變數名訪問。   

web前端基礎知識08---javascript基礎語法1

一、認識Javascript語言 JavaScript 是網際網路上最流行的指令碼語言,這門語言可用於 HTML 和 web,更可廣泛用於伺服器、PC、膝上型電腦、平板電腦和智慧手機等裝置。JavaScript的縮寫為JS。 JS是web標準中的行為標準,是一門專門用來控制

JavaScript基礎知識

window ttr demo1 隨機數 put 意義 成員 poi pac 一、JavaScript事件詳解 1、事件流:描述的是在頁面中結束事件的順序 事件傳遞有兩種方式:冒泡與捕獲。   事件傳遞定義了元素事件觸發的順序。 如果你將 <p> 元素插

Java基礎語法方法

業務邏輯 func ati sys i++ 基礎 實現 步驟 lin Java基礎語法 今日內容介紹 u 方法 第1章 方法 1.1 方法概述 在我們的日常生活中,方法可以理解為要做某件事情,而采取的解決辦法。 如:小明同學在路邊準備坐車來學校學習。這就面臨著一件事情(坐車

Java基礎語法練習

blog 情況 小寫字母 最終 循環語句 art -1 temp spa Java基礎語法 今日內容介紹 u 循環練習 u 數組方法練習 第1章 循環練習 1.1 編寫程序求 1+3+5+7+……+99 的和值。 題目分析: 通過觀察發現,本題目要實現的奇數(範圍1-100

javaweb學習總結(十五)——JSP基礎語法

troy 嚴格 too cal service alt 隱式 情況 當前系統時間  任何語言都有自己的語法,JAVA中有,JSP雖然是在JAVA上的一種應用,但是依然有其自己擴充的語法,而且在JSP中,所有的JAVA語句都可以使用。 一、JSP模版元素   JSP頁面中的H

Shell基礎語法

-s pac nbsp num mil etc nor 不能 rep if語句基礎格式格式1:if 條件 ; then 語句; fi格式2:if 條件; then 語句; else 語句; fi格式3:if …; then … ;elif …; then …; else …

Shell基礎語法

數組 head p地址 abcd 地址 bcd input seq 網卡ip for語句基本格式:for 變量名 in 條件; do …; done樣例:遍歷目錄或文件#!/bin/bash cd /etc/ ##腳本中如果查詢的目錄在多級目

java學習筆記之基礎語法

讓其 實例 高效率 使用 個數 存儲 記錄 棧內存 數組 1.數組: 概念:同一種類型數據的集合,其實,數組就是一個容器 優點:可以方便的對其進行操作,編號從0開始,方便操作這些元素。 2,數組的格式 元素類型[]數組名=new 元素類型[數組元素個

JavaScript基礎筆記基本概念

基本概念 world! 因此 空字符 pos ase 維護 rip 括號 基本概念 一、語法 一)區分大小寫 二)標識符 書寫規則同Java 三)註釋 略 四)嚴格模式 1.在整個腳本中啟用嚴格模式:在頂部添加 "use strict" 2.指定函數在嚴格模式下執行: f

總結javascript基礎概念:事件隊列循環

數量 次循環 下一個 es6 類型 同步 函數 ref rip 主要問題:   1、JS引擎是單線程,如何完成事件循環的?   2、定時器函數為什麽計時不準確?   3、回調與異步,有什麽聯系和不同?   4、ES6的事件循環有什麽變化?Node中呢?   5、異步控制有什

Git學習0基礎

擴展 創建 不同 sheet id_rsa con 簡單 托管 讀取數據 server上的 Git - 協議 Git能夠使用四種基本的協議傳輸資料:本地協議(Loc

Python基礎語法

基礎 分享 AR .com pycha 安裝 python2.x ima 網上 Python2.x和3.x的區別簡單介紹: 編寫Python程序的幾種方式: 第一種: ctrl+d也可以退出交互式終端 第二種方式: exit()和ctrl+d都能退出

html基礎用法

選中 成績 src 沒有 value orm 類型 middle str 設計表格: 1 <html> 2 <head> 3 <title>表格</title> 4

Java05-Java基礎語法循環結構

單獨使用 變量 java基礎 表達 java 分號 結構 叠代 結合 Java05-Java基礎語法(四)循環結構 循環結構(重復/叠代):根據條件重復執行部分語句 1、while循環結構 while(條件表達式){ 循環體語句; } 1)語法:a、while是

JavaScript基礎知識DOM

種類 tee 文本 ole width ner var back lock 獲取元素的方法 要操作誰,就要先獲取誰; 獲取元素 1、document.getElementById:通過ID名來獲取元素 兼容性: 在IE8以下,會默認把name屬性當做id來獲取; doc

Python基礎語法

python 進制 span 單引號 val dict 數組 對象的引用 clas 1、Python 可以使用引號( ‘ )、雙引號( " )、三引號( ‘‘‘ 或 """ ) 來表示字符串,引號的開始與結束必須的相同類型的; 2、python中單行註釋采用 # 開頭;

Javascript基礎筆記部分

變量 click utf-8 wid absolute set clas position inner <!DOCTYPE html> <html> <head> <meta charset="UTF-8"