美文网首页
学习 JavaScript (五)核心概念:语句

学习 JavaScript (五)核心概念:语句

作者: KurryLuo | 来源:发表于2018-12-04 23:09 被阅读0次
    兔.jpg

    语句

    语句被称作是流控制语句,通常有标志性的一个或者多个关键字,if 、 do-while、 while、for、 for-in、 label、 break、continue、with、switch。

    if 语句

    if 语句就是我们常说的条件语句,在条件满足的情况下,执行一段代码,条件不满足就不执行,if...else...。

    if ('条件'){
        代码块 1
    }else{
        代码块 2
    }
    

    看下面的示例:

    if (i>25){
        alert ('i 大于 25')
    } else {
        alert ('i 小于或等于 25')
    }
    

    代码块可以不用 {} 包着,但是使用会让代码更清晰。也可以增加多个条件, if...else if...else...:

    if (i>25){
        alert('i 大于 25')
    } else if(i=25) {
        alert('i 等于 25')
    } else {
        alert('i 小于 25')
    }
    

    do-while 语句

    do-while 语句是一种后测试循环语句,也就是说,不管条件成不成立,先执行一遍代码。形式如下:

    do {
        代码块 // 这里的代码肯定会被执行一次
    } while (条件)
    

    while 语句

    while 语句是一种前测试循环语句,这个语句的用法和 if 一致,先判断条件再执行代码。

    while(条件){
        代码块;// 只有条件满足才会被执行
    }
    

    for 语句

    for 语句也是一个前测试循环语句,在循环执行之前初始化变量和定义循环后要执行的代码的能力。比如:

    for(初始化变量;约束条件;后置操作符){
        代码块
    }
    
    // 举一个例子
    
    for(let i = 0; i < 10; i++){
        alert(i)
    }
    

    三个表达式都是可以选的,如果全部为空则代码块部分会无限循环下去。

    for-in

    for-in 语句是一种精准的迭代语句,一个典型的用法就是枚举对象的属性。比如:

    for (let item in object){
       代码块 
    }
    
    

    其中 let 可以省略,写上会好一些。

    label 语句

    label 的作用就是给代码做一个标记,一遍我们在接下来的代码中引用,经常和 for 循环语句联合使用,下面会有示例。比如:

    start: for(let i = 0; i < 10; i++){
        alert(i)
    }
    

    break 和 continue 语句

    按照我自己的理解,break 语句会让代码中途彻底退出,请看示例:

    let a = 0;
    
    for (let i = 1; i < 10; i++){
        if(i % 5 == 0){
            break;
        }
        a++;
    }
    
    alert(a); // 结果是 4
    
    i 的初始值为 1 ,在 i == 5 的时候,程序跳出循环,执行 alert()
    

    continue 会让代码跳过满足条件的那一次循环,示例在这儿:

    let a = 0;
    
    for (let i = 1; i < 10; i++){
        if(i % 5 == 0){
            continue;
        }
        a++;
    }
    
    alert(a); // 结果是 8
    
    i 的初始值为 1 ,在 i == 5 和 i == 10 的时候,程序各跳出循环一次,所以结果是 8
    

    和 label 语句连用的时候可以改变循环的次数,一般是在嵌套循环中使用的,其中和 break 连用可以穿透多层循环,和 continue 连用只能穿透内层循环。

    let a = 0;
    
    outer:for (let i = 0; i < 10; i++){
        for (let j = 0; i < 10; j++){
            if (i == 5 && j == 5){
                break outer;
            }
            a++;
        }
    }
    
    alert(a); // 55
    
    当 i == 0,1,2,3,4, j 从 0 执行到 9;
    当 i == 5,j 从 0 执行到 4
    随后两个循环停止
    
    

    如果 label 语句遇到 continue ,则是这样:

    let a = 0;
    
    outer:for (let i = 0; i < 10; i++){
        for (let j = 0; i < 10; j++){
            if (i == 5 && j == 5){
                continue outer;
            }
            a++;
        }
    }
    
    alert(a); // 95
    
    当 j == 5 ,最里面的循环停止一次,外层的循环继续执行。所以,i 能从 0 执行到 9。
    
    

    with 语句

    不经常使用这个语句,严格模式下不被允许使用,大型应用的时候不建议使用。

    switch 语句

    switch 的语法和 C 语言的语法类似,如下所示:

    switch (表达式){
       case value : 
           代码块;
           break;
       case value : 
           代码块;
           break;
       case value : 
           代码块;
           break;
       case value : 
           代码块;
           break;
       default:
           代码块;
    }
    

    上面代码的含义就是如果表达式的值是其中一个 case,就执行相应的代码块。如果所有 case 的 value 都不满足要求,则执行 default 下面的代码块。

    switch (i){
       case 1 : 
           alert(i);
           break;
       case 2 : 
           alert(i);
           break;
       case 3 : 
           alert(i);
           break;
       default:
           alert(i);
    }
    

    可以看得出来,switch 语句就是 if...else if...else 的简写。

    如果不写 break 语句,就是合并两个 case,此时尽量做好注释,说明这不是一个低级错误。

    在 JavaScript 中 switch 有一个比较有重要的特性: case 的值不一定是产量,可以是变量,甚至是表达式。这也是其他语言所不具备的:

    let a = 25;
    switch (true){
       case a < 0 : 
           alert("a 小于 0");
           break;
       case a > 0 : 
           alert("a 大于 0");
           break;
       case a == 0 : 
           alert("a 等于 0");
           break;
       default:
           alert("a 不是实数");
    }
    

    这里 case 返回的是布尔值,返回的是 true 则执行相应的代码块。

    注意,switch 比较值的过程中是严格比较,即数字字符串和数字不相等。


    image

    欢迎大家关注微信公众号:可视化技术( visteacher )

    不仅有前端和可视化,还有算法、源码分析、书籍相送

    个人网站:http://blog.kurryluo.com

    各个分享平台的 KurryLuo 都是在下。

    用心学习,认真生活,努力工作!

    相关文章

      网友评论

          本文标题:学习 JavaScript (五)核心概念:语句

          本文链接:https://www.haomeiwen.com/subject/wbsbcqtx.html