08.JS基础之变量、数据类型、操作符、表达式和语句、流程控制

变量：变量是计算机内存中存储数据的标识符，根据变量名称可以获取到内存中存储的数据。

使用变量的原因：使用变量可以方便的获取或者修改内存中的数据

使用变量：var声明变量 var age;

变量的赋值：var age;age=18;

同时声明多个变量：var age,name,sex;age=10;name='zs';

同时声明多个变量并赋值：var age=10,name='zs';

变量在内存中的存储：var age=18;

变量命名规则和规范

• 规则 - 必须遵守的，不遵守会报错

  • 由字母、数字、下划线、$符号组成，不能以数字开头

  • 不能是关键字和保留字，例如：for、while。

  • 区分大小写

• 规范 - 建议遵守的，不遵守不会报错

  • 变量名必须有意义
  • 遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。例如：userName、userPassword

案例1、交换两个变量的值

<script>
        var a=10,b=20;
        var temp;
        temp=a;
        a=b;
        b=temp;
        console.log(a,b);
    </script>

案例2、不使用临时变量，交换两个数值变量的值

 <!--第二种方式交换：一般适用于数字的交换-->
    <script>
        var num1=10;
        var num2=20;
        //把num1变量中的值和num2变量中num2的值，取出来相加，重新赋值给num1这个变量。
        num1=num1+num2;//30
        //把num1变量的值和num2变量的值取出来，相减的结果重新赋值给num2
        num2=num1-num2;//10
        //把num1变量的值和num2变量的值取出来，相减的结果给num1
        num1=num1-num2;//20
        console.log(num1,num2);
    </script>

 

数据类型

一、简单的数据类型：Number、String、Boolean、Undefined、Null

1、Number类型

数值字面量：数值的固定值的表示法 110 1024 60.5

进制：十进制 var num=9; 十六进制 var num=0xA

浮点数：

点数 var n = 5e-324; // 科学计数法 5乘以10的-324次方 浮点数值的最高精度是 17 位小数，但在进行算术计算时其精确度远远不如整数 var result = 0.1 + 0.2; // 结果不是 0.3，而是：0.30000000000000004 console.log(0.07 * 100); 不要判断两个浮点数是否相等。

数值范围：最小值：Number.MIN_VALUE，这个值为： 5e-324 最大值：Number.MAX_VALUE，这个值为： 1.7976931348623157e+308 无穷大：Infinity 无穷小：-Infinity

数值判断

NaN:not a number

NaN与任何值都不相等，包括他本身

isNaN:is not a number

2、String类型

‘abc’ "abc"

字符串字面量---‘小明’,"小红"

思考题：打印字符串----小猴子很喜欢“吃‘相交’”

<script>
        console.log("小猴子很喜欢\"吃\'相交\'\"");
    </script>

转义符

字符串长度---length属性用来获取字符串的长度（变量名.length）；

字符串拼接

两边只要有一个是字符串，那么+就是字符串拼接功能

两边如果都是数字，那么就是算数功能。

3、Boolean类型

Boolean字面量：true和false,区分大小写

计算机内部存储：true为1，false为0

4、Undefined和NULL

undefined表示一个声明了没有赋值的变量，变量只声明的时候值默认是undefined

null表示一个空，变量的值如果想是null，必须手动设置

二、复杂数据类型

Object

获取变量的类型：用typeof

例：var age=19;console.log(typeof age);//'number'

字面量--在源代码中一个固定值的表示法

数值字面量：8,9,10

字符串字面量：‘程序员’，大前端“

布尔字面量：true,false

数据类型转换用toString()

var num=5;
console.log(num.toString());

String()----String()函数存在的意义是：有些值没有toString(),这个时候可以使用String().比如undefined和null

拼接字符串方式

num+"",当＋两边一个操作符是字符串类型，一个操作符是其他类型的时候，会先把其他类型转换成字符串再进行字符串拼接，返回字符串。

转换成数值类型

Number()----可以把任意值转换成数值，如果要转换的字符串，如果要转换的字符串中有一个不是数值的字符，返回NaN。

ParseInt()-----函数可解析一个字符串，并返回一个整数。

ParseFloat()-----函数可解析一个字符串，并返回一个小数。

+,-0等运算

var str='500';

console.log(+str);//取正

console.log(-str);//取负

转换成布尔类型

Boolean()

0 空字符串 null undefined NaN会转换成false 其他转换成true

三、操作符

运算符operator

1、算数运算符 + - * / %

2、一元运算符：只有一个操作数的运算符

++ 自身加1

--自身减1

3、二元运算符：两个操作数的运算符

5+6

4、逻辑运算符（布尔运算符）

&& 与 两个操作数同时为true，结果为true，否则都是false
|| 或 两个操作数有一个为true，结果为true，否则为false
!  非  取反

5、关系运算符（比较运算符）

< > >= <= == != === !==

==与===区别：==只进行值得比较，===类型和值同时相等才相等

var result='55'==55//true

var result='55'===55//false 值相等，类型不相等

var result=55==55;//true

6、赋值运算符

= += -= /= %=

运算符的优先级

1、（）优先级最高

2、一元运算符 ++ == !

3、算数运算符 先* / % 后+ -

4、关系运算符 > >= < <=

5、相等运算符 == != === !==

6、逻辑运算符&& !!

7、赋值运算符

练习1： 4 >= 6 || '人' != '阿凡达' && !(12 * 2 == 144) && true // 练习2： var num = 10; 5 == num / 2 && (2 + 2 * num).toString() === '22'

表达式和语句

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

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

流程控制

程序的三种基本结构

1、顺序结构：从上到下执行代码；（程序默认就是这么执行代码的）

2、分支结构：根据不同的情况，执行相应代码

3、循环结构：重复做一件事情

分支结构

if语句

语法结构：

if(/*条件表达式*/){
    //执行语句
}
if(/*条件表达式*/){
    //成立执行语句
}else if（/*条件2*/）{
    //成立执行语句
}else if(/*条件3*/){
//成立执行语句
}else{
//最后默认执行语句
}

案例1： 求两个数的最大数

<script>
        var num1=10;
        var num2=5;
        if(num1>num2){
            console.log(num1);
        }else{
            console.log(num2);
        }
    </script>

案例2:判断一个数是偶数还是奇数。

  <!--判断一个数是偶数还是奇数-->
    <script>
        var num=2;
        if(num%2==0){
            console.log(num+"是偶数");
        }else{
            console.log(num+"是奇数");
        }
    </script>

案例3:分数转换 把百分制转换成ABCDE <60 E 60-70 D 70-80 C 80-90 B 90 - 100 A。

<!--分数转换 把百分制转换成ABCDE <60 E 60-70 D 70-80 C 80-90 B 90 - 100 A。-->
    <script>
        var score=Number(prompt("请输入您的成绩:"));//prompt弹框用户输入数据  Number把任意值转换为数值
        if(!isNaN(score)) {//如果为true则说明并不是数字
            if (score >= 90 && grade <= 100) {
                console.log("A等");
            } else if (score >= 80) {
                console.log("B等");
            } else if (score >= 70) {
                console.log("C等");
            } else if (score >= 60) {
                console.log("D等");
            } else {
                console.log("E等");
            }
        }else{
            console.log("您输入有误");
        }
    </script>

作业1：判断一个年份是闰年还是平年 闰年：能被4整除，但不能被100整除的年份 或者 能被400整除的年份

 <!--判断一个年份是闰年还是平年 闰年：能被4整除，但不能被100整除的年份 或者 能被400整除的年份-->
    <script>
        var year=prompt("请输入年份：");
        if(year%4==0&&year%100!=0){
            console.log(year+"是闰年");
        }else{
            console.log(year+"是平年");
        }
    </script>

作业2：判断一个人的年龄是否满18岁(是否成年)

<!--判断一个人的年龄是否满18岁(是否成年)-->
    <script>
        var age=prompt("请输入年龄：");
        if(age>=18){
            console.log("成年了");
        }else{
            console.log("还没成年");
        }
    </script>

三元运算符

表达式1 ？ 表达式2：表达式3 是对if...else语句的一种简化写法

案例4：是否年满18岁

 <!--是否年满18岁 从两个数中找最大值-->
    <script>
        var age=prompt("请输入年龄");
        age>=18?console.log("已成年"):console.log("未成年");
    </script>

案例5：从两个数中找最大值

<!--从两个数中找最大值-->
    <script>
        var num1=10,num2=20;
        num1>num2?console.log(num1):console.log(num2);
    </script>

switch语句

语法格式：

switch(expression){
    case 常量1:语句;
    break;
    case 常量2:语句；
    break;
    case 常量3:语句;
    break;
    ...
    case 常量n:语句;
    default:语句;
    break;
}

break可以圣罗，如果省略，代码会继续执行下一个case switch语句在比较值时使用的是全栈操作符，因此不会发生类型转换（例如：字符串‘10’不等于数值10）

案例6：显示星期几 

<!--显示星期几-->
    <script>
        var num=parseInt(prompt("请输入一个星期的数字"));
        switch(num){
            case 1:console.log("星期一");
                break;
            case 2:console.log("星期二");
                break;
            case 3:console.log("星期三");
                break;
            case 4:console.log("星期四");
                break;
            case 5:console.log("星期五");
                break;
            case 6:console.log("星期六");
                break;
            case 7:console.log("星期天");
                break;
            default:
                console.log("输入错误");
        }
    </script>

案例7：素质教育（把分数变成ABCDE）千万不要写100个case哟。

 

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

循环结构---在JavaScript中，循环语句有三种，while、do...while、for循环。

while语句

基本语法：while(循环条件){ //循环体}

当循环条件为true时，执行循环体；当循环条件为false时，结束循环；

案例8：打印100以内 7的倍数；

<!--打印100以内 7的倍数；-->
    <script>
            var i=1;
            while (i<=100) {
                if(i%7==0){
                    console.log(i);
                }
                i++;
            }
    </script>

案例9：打印100以内所有偶数；

 <!--打印100以内所有偶数；-->
    <script>
        var i=1;
        while(i<=100){
            if(i%2==0){
                console.log(i);
            }
            i++;
        }
    </script>

案例10：打印100以内所有偶数的和 

 <!--打印100以内所有偶数的和-->
    <script>
        var i=1;
        var sum=0;
        while(i<=100){
            if(i%2==0){
                sum+=i;
            }
            i++;
        }
        console.log(sum);
    </script>

do...while语句

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

基础语法：

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

案例11：求100以内所有3的倍数的和 使用do-while循环；

<!--求100以内所有3的倍数的和 使用do-while循环；-->
    <script>
        var i=1;
        var sum=0;
        do{
        if(i%3==0){
        sum+=i;
        }
        i++;
        }
      while(i<=100)
        console.log(sum);
    </script>

 

for语句

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

for循环语法：

for(初始化表达式1;判断表达式2;自增表达式3){
//循环体4;
}

案例12：

 <!--打印1-100之间所有数；-->
    <script>
        for(var i=1;i<=100;i++){
            console.log(i);
        }
    </script>

案例13：求1-100之间所有数的和；

<!--求1-100之间所有数的和；-->
    <script>
        var sum=0;
        for(var i=1;i<=100;i++){
            sum+=i;
        }
        console.log(sum);
    </script>

案例14：求1-100之间所有数的平均值；

<!--求1-100之间所有数的平均值；-->
    <script>
        var sum=0;
        for(var i=1;i<=100;i++){
            sum+=i;
        }
        console.log(sum/100);
    </script>

continue和break

break:立即跳出整个循环，即循环结束，开始循环后面的内容（直接跳到大括号）

continue:立即跳出当前循环，继续下一次循环（跳到i++的地方）

案例15：求1-100之间不能被7整除的整数的和（用continue）

<!--求1-100之间不能被7整除的整数的和（用continue）-->
    <script>
    var sum=0;
    var i=1;
    while(i<=100){
    //判断能不能被7整除
    if(i%7==0){
    //如果能被7整除，跳过这个数字
    i++;
    continue;
    }
    sum+=i;
    i++;
    }
    console.log(sum);
    </script>

 

案例16：求200-300之间第一个能被7整数的数（break）

 <!--求200-300之间第一个能被7整数的数（break）-->
    <script>
        for(var i=100;i<=200;i++){
            if(i%7==0){
                console.log(i);
                break;
            }
        }
    </script>