重學前端之JavaScript(二)JavaScript的語句

  這篇文章主要介紹JavaScript中的語句,包含幾種循環語句和條件語句。

JavaScript中的條件語句

1、定義
  條件語句: 當條件知足時,執行一段語句
2、JavaScript中的條件語句
  1) if...else if ... else: 當指定條件爲真,if語句會執行一段語句,若是不知足再考慮else if的條件,如果還不知足,則執行 else裏的語句

const a = 2;
    if (a === 0) {
        console.log('a爲', a);
    } else if (a === 1) {
        console.log('a爲', a);
    } else {
        console.log('a爲', a);
    }

  2) switch...case語句: 評估一個表達式，將表達式的值與case子句匹配，並執行與該狀況相關聯的語句。

switch (expression) {
        case value1:
            // 當 expression 的結果與 value1 匹配時，執行此處語句
            [break;]
        case value2:
            // 當 expression 的結果與 value2 匹配時，執行此處語句
            [break;]
        ...
        case valueN:
            // 當 expression 的結果與 valueN 匹配時，執行此處語句
            [break;]
        [default:
            // 若是 expression 與上面的 value 值都不匹配，執行此處語句
            [break;]]
    }

  語法解析:
    a. expression: 一個用來與 case 子語句匹配的表達式。
    b. case valueN: 可選,用於匹配 expression 的 case 子句。若是 expression 與給定的 valueN 相匹配(此處是===)，則執行該 case 子句中的語句直到該 switch 語句結束或遇到一個 break 。
    c. default: 可選,一個 default 子句；若是給定，這條子句會在 expression 的值與任一 case 語句均不匹配時執行。
    d. 若是沒有添加break,那麼代碼將會從值所匹配的case語句開始運行,而後持續執行下一個case語句而不論值是否匹配。
  參考自:
    MDN--switch
  3) 邏輯運算符: && 和 ||
    &&: 邏輯與,使得並列兩個或者更多的表達式成爲可能，只有當這些表達式每個都返回true時，整個表達式纔會返回true.
||: 邏輯或,當兩個或者更多表達式當中的任何一個返回 true 則整個表達式將會返回 true。

let a = 0 || 1;
    a && fn();

  4) 三元運算符: 是 JavaScript 僅有的使用三個操做數的運算符。一個條件後面會跟一個問號（?）,若是條件爲 truthy,則問號後面的表達式A將會執行;表達式A後面跟着一個冒號（:）,若是條件爲 falsy,則冒號後面的表達式B將會執行。本運算符常常做爲 if 語句的簡捷形式來使用。

let a = true;
    let b = a ? 1 : 0;

JavaScript中的循環語句

1、定義
  循環語句: 完成一些重複性任務。
2、for循環
for循環: 用於建立一個循環,包含三個可選的表達式包圍在圓括號中,並由分號隔開,後跟一個在循環中執行的語句。

for (initializer; exit-condition; final-expression) {
        // code to run
    }

  A.語法解析:
    1) for循環中,有三個項目,以分號分隔
    2) 第一個項目是初始化器(initializer),一般是一個設置爲數字的變量,它被遞增來計算循環運行的次數,它有時也被稱爲計數變量
    3) 第二個項目是退出條件(exit-condition),用來定義這個循環什麼時候中止循環
    4) 第三個項目是最終條件(final-expression),一般用於增長(遞減)計數器變量,使其更接近退出條件值
    5) 包含代碼塊的花括號是每次循環都會運行這個代碼
  參考自: MDN--循環吧代碼

  B.執行順序
    1) 第一次: 執行初始化器 --> 判斷初始化變量是否知足退出條件,若是知足就退出循環;否則就執行代碼塊裏的內容 --> 執行最終條件,對初始化變量進行遞增或遞減
    2) 後續步驟: 判斷初始化變量是否知足退出條件,若是知足就退出循環;否則就執行代碼塊裏的內容 /-->/ 執行最終條件,對初始化變量進行遞增或遞減
  注: 使用let進行變量聲明時,每次都會執行初始化器這一步。

  C.for循環的優化
  當循環次數爲變量時,能夠將長度進行儲存,避免每次循環都去讀取一次數組的長度,不划算

for (var i = 0, len = arr.length; i < len; i++) {
        // code to run
    }

  D.如下結果是什麼?爲何?如何達到想要的結果?

const liList = document.querySelectorAll('li'); // 有三個li
    for (var i = 0, len = liList.length; i < len; i++) {
        liList[i].onclick = function() {
            console.log(i);
        }
    }

  結果: 控制檯輸出3個3
  緣由: 在for循環中,var聲明的變量是一個全局變量,每次參與累加或遞減的都是同一個變量,因此在for循環外也能夠訪問到該變量。JS代碼是按順序執行的,從上到下,當其執行到元素綁定事件時(liList[i].onclick),i的值是當前循環裏的值;當點擊對應元素觸發事件時,因爲for循環已經執行完了,這時函數裏的i是一個全局的i,也就是知足for循環退出條件的i,即len,也就是3。
  如何作到點擊元素,輸出其對應的下標:
    1) 利用閉包,將函數內部的變量保存在內存中

for (var i = 0, len = liList.length; i < len; i++) {
        liList[i].onclick = (function(i) {
            return function() {
                console.log(i);
            }
        })(i)
    }

    2) 使用let定義塊級做用域。在for循環中使用let聲明的變量只在本輪循環中有效,因此每一次循環的i都是一個新的變量。JavaScript引擎會記住上一輪循環的值,初始化本輪的變量i時,會在上一輪的基礎上進行計算。for循環設置循環變量那部分是一個父做用域,循環體內是一個單獨的子做用域。(來自 http://es6.ruanyifeng.com/#do...

for (let i = 0, len = liList.length; i < len; i++) {
        liList[i].onclick = function () {
            console.log(i);
        }
    }

    3) 使用const定義塊級做用域。之因此不將const聲明在父做用域中,是由於當一個循環執行到必定的步驟時,會將初始變量進行遞增或遞減,而const聲明的基本數據類型是不能修改的,否則會報錯。

for (var i = 0, len = liList.length; i < len; i++) {
        const a = i;
        liList[i].onclick = function () {
            console.log(a);
        }
    }

3、while循環
  while循環: 能夠在某個條件表達式爲真的前提下,循環執行指定的一段代碼,直到那個表達式不爲真時結束循環。

while (condition) {
        statement
    }

  A、語法解析:
    1) condition: 條件循環語句,在每次循環前被求值。若是值爲真,statement就會被執行。若是求值爲假,則跳出while循環執行後面的語句
    2) statement: 只要條件表達式求值爲真，該語句就會一直被執行。要在循環中執行多條語句，可使用塊語句（{ ... }）包住多條語句。

  B、執行順序
    判斷條件(condition)是否知足,若是不知足就退出,若是知足就執行代碼(statement);而後繼續進行這一流程,知道退出爲止。
參考自: MDN--while

4、do...whild循環
  do...whild循環: 建立一個執行指定語句的循環,直到condition值爲 false。在執行statement 後檢測condition,因此指定的statement至少執行一次。

do {
        statement
    } whild (condition);

  A、語法解析:
    1) statement: 執行至少一次的語句,並在每次 condition 值爲真時從新執行。想執行多行語句，可以使用block語句（{ ... }）包裹這些語句。
    2) condition: 循環中每次都會計算的表達式。若是 condition 值爲真,statement 會再次執行。當 condition 值爲假,則跳到do...while以後的語句。

  B、執行順序
    先執行代碼(statement),z再判斷條件(condition)是否知足,若是不知足就調出循環,若是知足就繼續執行。而後繼續進行這一流程,知道退出爲止。
參考自: MDN--do...whild

4、for...in
  for...in: 以任意順序遍歷一個對象的除Symbol之外的可枚舉屬性。for ... in是爲遍歷對象屬性而構建的，不建議與數組一塊兒使用。IE6支持。

// variable 當object爲對象時,其爲key;當object爲數組時,其爲索引
    for (variable in object){
        statement
    }

    let obj = {a: 1, b: 2};
    for (let i in obj) {
        console.log(i);  // 對象的key: a  b
    }

    let arr = [1, 2, 3];
    for (let i in arr) {
        console.log(i);  // 數組的索引: 0 1 2
    }

參考自: MDN--for...in

5、for...of
  for...of: 在可迭代對象（包括 Array，Map，Set，String，TypedArray，arguments 對象等等）上建立一個迭代循環，調用自定義迭代鉤子，併爲每一個不一樣屬性的值執行語句。IE不支持,Edge12支持。

for (variable of iterable) {
        //statements
    }

循環控制語句:

  continue: 跳過當前循環,執行下一個循環
  break: 當即退出循環。

for (let i = 0; i < 3; i++) {
        if (i === 1) {
            continue;
        }
        console.log(i);  // 0  2
    }

    for (let i = 0; i < 3; i++) {
        if (i === 1) {
            break;
        }
        console.log(i); // 0
    }

以上內容若有不對,但願你們指出,謝謝。