• js表达式和语句


    表达式

    一个表达式可以产生一个值,有可能是运算、函数调用、有可能是字面量。表达式可以放在任何需要值的地方。

    语句

    语句可以理解为一个行为,循环语句和判断语句就是典型的语句。一个程序有很多个语句组成,一般情况下;分割一个一个的语句

    流程控制

    程序的三种基本结构

    顺序结构

    从上到下执行的代码就是顺序结构

    程序默认就是由上到下顺序执行的

    分支结构

    根据不同的情况,执行对应代码

    循环结构

    循环结构:重复做一件事情

    分支结构

    if语句

    语法结构

    if (/* 条件表达式 */) {
     // 执行语句
    }

    if (/* 条件表达式 */){
     // 成立执行语句
    } else {
     // 否则执行语句
    }

    if (/* 条件1 */){
     // 成立执行语句
    } else if (/* 条件2 */){
     // 成立执行语句
    } else if (/* 条件3 */){
     // 成立执行语句
    } else {
     // 最后默认执行语句
    }

    案例: 求两个数的最大数 判断一个数是偶数还是奇数 分数转换,把百分制转换成ABCDE <60 E 60-70 D 70-80 C 80-90 B 90 - 100 A 作业: 判断一个年份是闰年还是平年 闰年:能被4整除,但不能被100整除的年份 或者 能被400整除的年份 判断一个人的年龄是否满18岁(是否成年)

    三元运算符

    表达式1 ? 表达式2 : 表达式3
    是对if……else语句的一种简化写法

    案例: 是否年满18岁 从两个数中找最大值

    switch语句

    语法格式:

    switch (expression) {
     case 常量1:
       语句;
       break;
     case 常量2:
       语句;
       break;
     case 常量3:
       语句;
       break;
     
     case 常量n:
       语句;
       break;
     default:
       语句;
       break;
    }
    break可以省略,如果省略,代码会继续执行下一个case
    switch 语句在比较值时使用的是全等操作符, 因此不会发生类型转换(例如,字符串'10' 不等于数值 10)

    案例: 显示星期几 素质教育(把分数变成ABCDE)千万不要写100个case哟

    布尔类型的隐式转换

    流程控制语句会把后面的值隐式转换成布尔类型

    转换为true   非空字符串  非0数字  true 任何对象
    转换成false 空字符串 0 false null undefined
    // 结果是什么?
    var a = !!'123';

     

    案例

    var message;
    // 会自动把message转换成false
    if (message) {    
     // todo...
    }

     

    循环结构

    在javascript中,循环语句有三种,while、do..while、for循环。

    while语句

    基本语法:

    // 当循环条件为true时,执行循环体,
    // 当循环条件为false时,结束循环。
    while (循环条件) {
     //循环体
    }

    代码示例:

    // 计算1-100之间所有数的和
    // 初始化变量
    var i = 1;
    var sum = 0;
    // 判断条件
    while (i <= 100) {
     // 循环体
     sum += i;
     // 自增
     i++;
    }
    console.log(sum);

    案例: 打印100以内 7的倍数 打印100以内所有偶数 打印100以内所有偶数的和 作业: 打印100以内的奇数 打印100以内的奇数的和

    do...while语句

    do..while循环和while循环非常像,二者经常可以相互替代,但是do..while的特点是不管条件成不成立,都会执行一次。

    基础语法:

    do {
     // 循环体;
    } while (循环条件);

    代码示例:

    // 初始化变量
    var i = 1;
    var sum = 0;
    do {
     sum += i;//循环体
     i++;//自增
    } while (i <= 100);//循环条件

    案例:

    求100以内所有3的倍数的和
    使用do-while循环:输出询问“我爱你,嫁给我吧?”,选择“你喜欢我吗?(y/n):",如果输入为y则打印”我们形影不离“,若输入为n,则继续询问

    for语句

    while和do...while一般用来解决无法确认次数的循环。for循环一般在循环次数确定的时候比较方便

    for循环语法:

    // for循环的表达式之间用的是;号分隔的,千万不要写成,
    for (初始化表达式1; 判断表达式2; 自增表达式3) {
     // 循环体4
    }

    执行顺序:1243 ---- 243 -----243(直到循环条件变成false)

    1. 初始化表达式

    2. 判断表达式

    3. 自增表达式

    4. 循环体

    案例:

    打印1-100之间所有数
    求1-100之间所有数的和
    求1-100之间所有数的平均值
    求1-100之间所有偶数的和
    同时求1-100之间所有偶数和奇数的和
    打印正方形
    // 使用拼字符串的方法的原因
    // console.log 输出重复内容的问题
    // console.log 默认输出内容介绍后有换行
    var start = '';
    for (var i = 0; i < 10; i++) {
    for (var j = 0; j < 10; j++) {
      start += '* ';
    }
    start += ' ';
    }
    console.log(start);
    打印直角三角形
    var start = '';
    for (var i = 0; i < 10; i++) {
    for (var j = i; j < 10; j++) {
      start += '* ';
    }
    start += ' ';
    }
    console.log(start);

    打印9*9乘法表
    var str = '';
    for (var i = 1; i <= 9; i++) {
    for (var j = i; j <=9; j++) {
      str += i + ' * ' + j + ' = ' + i * j + ' ';
    }
    str += ' ';
    }
    console.log(str);

     

    continue和break

    break:立即跳出整个循环,即循环结束,开始执行循环后面的内容(直接跳到大括号)

    continue:立即跳出当前循环,继续下一次循环(跳到i++的地方)

    调试

    • 过去调试JavaScript的方式

      • alert()

      • console.log()

    • 断点调试

    断点调试是指自己在程序的某一行设置一个断点,调试时,程序运行到这一行就会停住,然后你可以一步一步往下调试,调试过程中可以看各个变量当前的值,出错的话,调试到出错的代码行即显示错误,停下。

    • 调试步骤

    浏览器中按F12-->sources-->找到需要调试的文件-->在程序的某一行设置断点
    • 调试中的相关操作

    Watch: 监视,通过watch可以监视变量的值的变化,非常的常用。
    F10: 程序单步执行,让程序一行一行的执行,这个时候,观察watch中变量的值的变化。
    F8:跳到下一个断点处,如果后面没有断点了,则程序执行结束。

    tips: 监视变量,不要监视表达式,因为监视了表达式,那么这个表达式也会执行。

    1. 代码调试的能力非常重要,只有学会了代码调试,才能学会自己解决bug的能力。初学者不要觉得调试代码麻烦就不去调试,知识点花点功夫肯定学的会,但是代码调试这个东西,自己不去练,永远都学不会。

    2. 今天学的代码调试非常的简单,只要求同学们记住代码调试的这几个按钮的作用即可,后面还会学到很多的代码调试技巧。

    3.  

  • 相关阅读:
    assign()与create()的区别
    ES6对象扩展——部分新的方法和属性
    ES6对象扩展——扩展运算符
    rest operater剩余操作符
    深拷贝和浅拷贝
    for in和for of的简单区别
    查询ES6兼容的网站
    ES6扩展——对象的扩展(简洁表示法与属性名表达式)
    滚动条设置样式
    marquee横向无缝滚动无js
  • 原文地址:https://www.cnblogs.com/jiumen/p/11394221.html
Copyright © 2020-2023  润新知