重学前端之JavaScript(二)JavaScript的语句

  这篇文章主要介绍JavaScript中的语句,包含几种循环语句和条件语句。

JavaScript中的条件语句

一、定义
  条件语句: 当条件满足时,执行一段语句
二、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中的循环语句

一、定义
  循环语句: 完成一些重复性任务。
二、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);
        }
    }

三、while循环
  while循环: 可以在某个条件表达式为真的前提下,循环执行指定的一段代码,直到那个表达式不为真时结束循环。

    while (condition) {
        statement
    }

  A、语法解析:
    1) condition: 条件循环语句,在每次循环前被求值。如果值为真,statement就会被执行。如果求值为假,则跳出while循环执行后面的语句
    2) statement: 只要条件表达式求值为真，该语句就会一直被执行。要在循环中执行多条语句，可以使用块语句（{ ... }）包住多条语句。

  B、执行顺序
    判断条件(condition)是否满足,如果不满足就退出,如果满足就执行代码(statement);然后继续进行这一流程,知道退出为止。
参考自: MDN--while

四、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

四、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

五、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
    } 

以上内容如有不对,希望大家指出,谢谢。