重学前端之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
    }

以上内容若有不对,但愿你们指出,谢谢。