JavaScript（二）

‬‬‫‍‍‭‪‏‏‪2‌6——‫‏‬‏

已于 2022-09-03 21:14:22 修改

阅读量122

点赞数 1

文章标签： javascript 前端 vue.js

于 2022-08-27 20:53:43 首次发布

本文链接：https://blog.csdn.net/weixin_68531139/article/details/126562250

版权

javascript

内容	地址
JavaScript（一）基础	https://blog.csdn.net/weixin_68531139/article/details/126562007?spm=1001.2014.3001.5502
JavaScript（二）	https://blog.csdn.net/weixin_68531139/article/details/126562250?spm=1001.2014.3001.5502
JavaScript（三）	https://blog.csdn.net/weixin_68531139/article/details/126562388?spm=1001.2014.3001.5502
JavaScript（四）	https://blog.csdn.net/weixin_68531139/article/details/126681878?spm=1001.2014.3001.5502
JavaScript（五）	https://blog.csdn.net/weixin_68531139/article/details/126682184?spm=1001.2014.3001.5502

1.数据类型转换

数据类型转换分为两种
- 显式转换(强制转换):通过js的方法，转换成自己想要的数据类型
- 隐式转换：在js进行某些运算的时候自动完成转换数据类型

1.1 强制转换为number

Number(要转换的数据)
- 作用:将数据转换成number类型，如果转换不了则是返回NaN

<script>
        // Number类型转换
        // 1.number类型
        var n1 = 10;
        console.log( Number(n1) );//10
        // 2.string类型转换
        var n2 = "10";
        console.log( Number(n2));//10

        var n3 = "10px";
        console.log(Number(n3));//NaN

        var n4 = "px10abc";
        console.log(Number(n4));//NaN

        var n5 = "";
        console.log(Number(n5));//0

        // 3.boolean类型
        var n6 = true;
        console.log(Number(n6));//true----1
        var n7 = false;
        console.log(Number(n7));//false----0

        // 4.undefined
        var n8 = undefined;
        console.log(Number(n8));//NaN
        // 5.null
        var n9 = null;
        console.log(Number(n9));//0 

        // 总结:Number可以转换的有：string类型(纯数字，""-0 "  "-0)  boolean(true-1 false-0) null(0)
    </script>

parseInt(要转换的数据)
- 主要是针对字符串数据操作
- 作用：将数据转换成number类型，从左往右转换，遇到不能转换的或者是末尾结束，如果一开始都不能转换则是NaN 并且取整(舍弃小数)

        var n1 = "10.5";
        console.log(parseInt(n1));//10
        var n2 = "10.5px";
        console.log(parseInt(n2));//10

        var n3 = "px10.5";
        console.log(parseInt(n3));//NaN

        var n4 = "11px123";
        console.log(parseInt(n4));//11

        var n5 = undefined;
        console.log(parseInt(n5));

parseFloat(要转换的数据)
- 主要针对字符串数据操作
- 作用：将数据转换成number类型，从左往右转换，遇到不能转换的或者是末尾结束，如果一开始都不能转换则是NaN 保留小数

 <script>
        // parseFloat: 将数据转换成number类型，从左往右转换，遇到不能转换的或者是末尾结束，如果一开始都不能转换则是NaN   保留小数 

        var n1 = "10.8";
        console.log(parseFloat(n1));//10.8

        var n2 = "10.8px";
        console.log(parseFloat(n2));//10.8

        var n3 = "px10.8";
        console.log(parseFloat(n3));//NaN

        var n4 = "11.8px1234";
        console.log(parseFloat(n4));//11.8

        var n5 = undefined;
        console.log(parseFloat(n5));//NaN
    </script>

1.2 强制转换为string

String(要转换的数据)
- 作用：将数据强制转换为string类型直接在数据外面加""

 <script>
        // String():将数据强制转换为string类型    直接在数据外面加""
        var s1 = 10;
        console.log(String(s1));// "10"

        var s2 = null;
        console.log(String(s2));// "null"

        var s3 = undefined;
        console.log(String(s3)); //"undefined"

        var s4 = true;
        console.log(String(s4));// "true"
    </script>

要转换的数据.toString(num)
- num表示转换num进制的字符串不写默认是10进制

 <script>
        // toString
        var n1 = 10;
        console.log(n1.toString());//"10"

        var n2 = true;
        console.log(n2.toString());// "true"

        // undefined没有tostring方法
        var n3 = undefined
        // console.log(n3.toString());//报错

        var n4 = null
        // null 没有tostring方法
        console.log(n4.toString());//
    </script>

1.3 强制转换为Boolean

Boolean() : 强制转换为Boolean类型结果为true，false

    <script>
        // Boolean(要转换的数据)  将数据转换boolean类型  转换结果只有两种true和false
        // 1.number类型转换   非0即真(只要不是0  都是true)
        var b1 = 1;
        console.log(Boolean(b1));//true
        var b2 = 0;
        console.log(Boolean(b2));//false

        // 2.string类型转换    有值即为真
        var b3 = "中文wertyuewrty";
        console.log(Boolean(b3));//true

        var b4 = "";
        console.log(Boolean(b4));//false

        //3.undefined
        var b5 = undefined;
        console.log(Boolean(b5));//false
        // 4.null 
      var b6 = null;
        console.log(Boolean(b6));//false


        // 5.NaN
        var n7 = NaN;
        console.log(Boolean(n7));

        //总结:Boolean结果为false的有:0 null undefined "" NaN
    </script>

2. 小方法

2.1 toFixed

要保留的数据.toFixed(n) 保留n位小数

<script>
        // toFixed(n)  保留n位小数  给number类型用的
        var n1 = 3.1415926;
        console.log(n1.toFixed(3));

        var n2 = "3.1415926";
        console.log(n2.toFixed(2));//报错
    </script>

2.2 isNaN

isNaN(检测的数据): 检测数据是不是不是一个数
判断之前会先用Number方法强制转换再进行判断

        // isNaN  检测数据是不是  不是一个数 
        // 判断之前会先用Number方法强制转换 再进行判断
        var n3 = 10;
        console.log(isNaN(n3));//n1不是一个数  false

        var n4 = "123"; // 先用Number方法转成 123
        console.log(isNaN(n4));//123不是一个数  false

				var n5 = "123你好";//Number类型转换是NaN
        console.log(isNaN(n5));//true

3.运算符与表达式

3.1 运算符和表达式的概念

10 + 20  表达式

10 20 称为操作数
+  运算符

运算符: 连接一个以上的操作数中间的符号叫做运算符

算术运算符   + - * / % ++ --
赋值运算符  = += -= /= %=
逻辑运算符  && || !
三目运算符  条件 ? true执行的结果  : false执行的结果
比较运算符  > < >= <= ==  !=  ===

表达式:由操作数和运算符组成的式子就叫表达式

算术表达式   操作数和算术运算符组成
赋值表达式   操作数和赋值运算符组成    
逻辑表达式   操作数和逻辑表达式组成
三目表达式   操作数和三目表达式组成
比较表达式   操作数和比较运算符组成

3.2 算术运算符

算术运算符：   +  -  *   /取余   %   ++    --

    <script>
        // 算术运算符
        var a = 10 + 4
        console.log(a);//14

        var b = 10-4;
        console.log(b);//6
        
        console.log(10*4);//40
        console.log(10/4);//2.5
        console.log(11%4);//3  取余
        console.log(12%4);//0  

        // 1.求n的倍数  
        var n = 9;
        console.log(100%n == 0);//true 是9的倍数 false 不是9的倍数

        // 2.判断当前这个数是不是偶数 都是2的倍数
        console.log(11%2==0)//true  偶数  false 奇数

        // 3.精度缺失 在运算过程中 是先转换成二进制进行计算  在转换过程中会造成精度缺失
        console.log(0.1+0.2);//0.30000000000000004
        console.log(0.7+0.1);//0.7999999999999999
        console.log(0.1*0.7);//0.06999999999999999

        // 4.隐式转换 在运算过程中 数据自动进行数据类型的转换
        // 隐式转换的规律:都会转换number类型进行运算  
        console.log(100 * false);//0
        console.log(100 * "123");//12300
        console.log(100 * "123px");//NaN

        console.log(100 / true);//100
        console.log(100+null); //100 
        console.log("100"- 10);//90 
        
        // 特殊：+  字符串遇到+会拼接  除了字符串数据，其他的还是会隐式转换
        console.log(100 + "123");// "100123"
        console.log(100+true);// 101
    </script>

自加/自减 ++ –

 <script>
        // 自加++ i++  自加1  i = i+1
        // 1.基础用法
        var a = 10;
        a++;//a = a+1
        console.log(a);//11

        var b = 10;
        ++b;//b = b+1；
        console.log(b);//11

        // 2.++和--   参与运算  
        /* 
            ++在前 先自加1 然后再运算(打印)
            ++在后 先运算(打印)  再自加1
        */
        var x = 10;
        var y = x++;// y=10       x=11
        console.log(x, y);//11 10 

        var n1 = 10;
        var n2 = ++n1;// n2=11      n1=11
        console.log(n1, n2);//  11  11


        //练习1
        var s = 10;
        var t = 10;
        console.log(s++, ++t);//10  11      s=11   t=11
        console.log(s, t);//11 11



        // 练习2:
        var a = 10;
        var b = ++a + a++ + a++; //b=11+11+12=34       a=13
        var c = a++ + ++b + b++;//c=13+35+35=83        b=36  a=14
        console.log(a, b, c);//14 36 83 

        // 练习3
        /* 
            --在前 先自减1 然后再运算(打印)
            --在后 先运算(打印)  再自减1
        */
        var x = 10;
        var y = --x + x-- + --x;//y = 9+9+7=25           x=7
        var z = y-- + --y + x--;// z = 25+23+7=55        x=6  y=23
        console.log(x, y, z);// 6 23 55
    </script>

3.3 赋值运算符

=  += -= *= /= %=

<script>
       //赋值运算符  =  += -= *= /= %=
       var a = 10;
       console.log(a);//10

       var b = 10;
       b+=10;// b = b+10
       console.log(b);//20

       var c = 10;
       c-=5;
       console.log(c);//5

       var d = 20;
       d*=10;
       console.log(d);//200

       var e = 20;
       e/=5;
       console.log(e);//4


       var f = 101;
       f%=10;
       console.log(f);//1
        
    </script>

3.4 比较运算符

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

<script>
        /* 
          比较运算符
            >  >= 
            < <=
            !=
            ==
            ===
        */
        // 1.基础判断
       console.log(10 > 20);//false
       console.log(10 > 10);//false
       console.log(10 >= 10);//true
       console.log(10 < 20);//true
       console.log(10 <= 10);//true

       console.log(10 != 20);//true
       console.log(10 !=10) ;//false

       console.log(10==10);//true
        // 两个字符比较 一位一位的比较 而且比较的ASCII字符编码
        // "1" 49  > "2" 50   false
       console.log("1000000" > "2");//false
        //  "a" 97   >  "A" 65    
        //  "a"-"z" 97-122        "A"-"Z" 65-90
       console.log("a" > "A");

        //2 ==和===的区别是什么  面试题
        console.log(10=="10");//true ==在进行比较的时候  会进行隐式转换 尽量都会转成number类型
        console.log(10==="10")//false ===在进行比较的时候 不会隐式转换 必须一模一样才可以  
        console.log("10"==="10");//true
        console.log(null==null);//true
        console.log(undefined==undefined);//true


        //3.特殊： null在判断相等的时候  不会进行隐式转换
        console.log(null==0);//false

        console.log(undefined==0)//NaN==0  false
        console.log(null==undefined);///true
        
        console.log(NaN==NaN);//false  任何两个NaN都不相等

        console.log(null>=0);//true
        console.log(null<=0);//true

    </script>

3.5三目运算符

作用:用于判断
语法条件 ? 条件为true的时候执行的代码(只能写一行代码) : 条件为false执行的代码

<script>
        1==1?console.log("你好"):console.log("不好")
        "a"==="A"?console.log("1"):console.log("2")
    </script>

4.逻辑运算符

或||    与&&    非!

基础操作

        // 逻辑运算符  ||或  &&与  !非  运算符左侧两侧是跟的条件
        // 1. ||或   只要有一个true 结果就为true
        var a =  true || false;
        console.log(a);//true

        var b =  1==1 || 1>2;//  true || false
        console.log(b);//true
        

        var c   =    "a"=="A"   ||    "11"===11;//  var c =  false
        console.log(c) //false


        // 2. &&与   只要都为true的时候  结果才为true
        var a1 = 1>2 && 2>1; //var a1 = false  && true
        console.log(a1);//false

        var b2 =  "a"=="a" &&  "b"=="b";// true && true
        console.log(b2);


 				// 3 非 ！  取反

        var a = 2;
        console.log(!a);

&&短路运算
- 如果第一个条件就为false 第二个条件不执行执行到哪就把哪的值给左侧
- 如果第一个条件就为true 再去执行第二个条件执行到哪就把哪的值给左侧

 // 3.1 &&短路运算
        // 如果第一个条件就为false 第二个条件不执行  执行到哪就把哪的值给左侧
        var a1 = 1;
        var b1 = 1;
        var c1 = --a1 && --b1;//var c1= 0          a1=0   b1 = 1
        console.log(a1,b1,c1);// 0 1 0

        // 如果第一个条件为true  再去执行第二个条件  执行到哪就把哪的值给左侧
        var x = 10;
        var y = true &&  x--;  // y=10   x=9
        console.log(x,y);// 9 10


        var a2 = 10;
        var b2 = 2;
        var c2 = --a2 && --b2;//var c2 =  9 && 1           a2=9  b2=1
        console.log(a2,b2,c2);//9 1  1

|| 短路运算
- 如果第一个条件为true 第二个条件不执行执行到哪就把哪的值给左侧
- 如果第一个条件为false 再执行第二个条件执行到哪就把哪的值给左侧

//3.2 或|| 短路
        // 如果第一个条件为true  第二个条件不执行  执行到哪就把哪的值给左侧
        var x = 10;
        var z = true || x--;// z=true
        console.log(x,z);//10 true

        // 如果第一个条件为false  再执行第二个条件  执行到哪就把哪的值给左侧
        var x = 10;
        var z = false || --x;  // var z = 9      x=9
        console.log(x,z);// 9 9    


        var x1 = 1;
        var y1 = 10;
        var z1 = --x1 || --y1;//var z1 = 0 || 9    z1 = 9      x1=0  y1=9
        console.log(x1,y1,z1);//0 9 9    
        
        
        var x2 = 10;
        var y2 = 10;
        var z2 = --x2 || --y2;//var z2 =  9             x2 = 9  y2 = 10
        console.log(x2,y2,z2);// 9 10 9

5.流程控制语句

流程控制语句:重要实际操作

5.1.流程控制语句介绍

顺序结构(代码依次从上往下执行)

console.log(1)
console.log(2)
console.log(3)

选择结构(分支语句) if if-else if-else if-else switch
循环结构：for while do-while for-in

5.2.选择结构（分支语句）

5.2.1 单分支

if
- 语法: if(条件){ 条件成立的时候执行的代码 }
- 注意事项
  - if后面的大括号可以省略不加大括号只能控制后面一行代码
  - if的判断条件不一定是表达式只要能确定真假就行

 <script>
        // 1.单分支  if(判断条件) { 条件成立执行的代码}
        //需求:如果我的钱超过10000 我就挣钱娶媳妇
        var price = 8000;//这是我目前的存款
        if(price > 10000){  // false 条件不成立
            // 条件成立执行的代码
            console.log("挣钱娶媳妇");
            console.log("度蜜月");
        }
        
        // 注意事项1:if后面的大括号可以省略 不加大括号 只能控制后面一行代码

        if(true)console.log(123);
        if(false){console.log(456);console.log(789)};

        // 注意事项2：if的判断条件不一定是表达式  只要能确定真假就行
        if(0){
            console.log("你在说什么")
        }
    </script>

5.2.2 双分支

if-else
- 语法： if(判断条件){条件成立执行的代码 }else{条件不成立执行的代码}
- 注意事项:如果是双分支语句 if和else一定要搭配使用

<script>
        // 2.双分支 if(判断条件){ 条件成立执行的代码} else{ 条件不成立执行的代码}
        // 需求：如果你二阶段考核分数不过90 你就末班  如果超过90 就进入三阶段

        var store = 90;
        if(store >= 90){ //条件成立
            console.log("进入三阶段")
        }else{//条件不成立
            console.log("恭喜你要深造了一次")
        }

        // 注意事项:如果是双分支语句  if和else一定要搭配使用
        if(true){
            console.log(123)
        }else{
            console.log(456)
        }
    </script>

5.2.3 多分支

if-else if -else
- 注意事项：else不是必须的
- 语法:

					 if(条件1){
                满足条件1执行的代码
            }else if(条件2){
                满足条件2执行的代码
            }else if(条件3){
                满足条件3执行的代码
            }
            .........
            else{ 
                以上条件都不满足的时候 执行的代码
            }

	     //需求  成绩0-59 不及格  60-79 中等  80-100优秀    不在0-100中间  成绩无效
        var store = 101;
        if (store > 0 && store <= 59) {  //0-59  大于0 store > 0   && 小于等于59  store <=59
            console.log("不及格")
        } else if (store > 59 && store <= 79) {// 60-79     大于59 store >59  &&  小于等于79 store <=79
            console.log("中等")
        } else if (store > 79 && store <= 100) {//80-100
            console.log("优秀")
        } else { //以上条件都不满足的时候  执行这里的代码
            console.log("成绩无效")
        }

        // 注意事项  else不是必须的
        var num = 12;
        if(num==10){
            console.log("10")
        }else if(num==11){
            console.log("11")
        }

5.2.4 switch语句

语法

switch(){
            case 情况1 ： 匹配到情况1所执行的代码; break;
            case 情况2 ： 匹配到情况2所执行的代码; break;
            case 情况3 ： 匹配到情况3所执行的代码; break;
            ......
            default:上述情况都不匹配的时候 执行的代码
            
          }

<script>
        /*
          
        */
        // break 终止的意思  如果满足这一项，直接终止后面的代码执行
        var a = "%";
        switch (a) {
            case "+": console.log("+"); break;
            case "-": console.log("-"); break;
            case "*": console.log("*"); break;
            case "/": console.log("/"); break;
            default: console.log("没有找到")
        }


        var  c = 90;
        switch(c){
            case 100:console.log("满分");break;
            default:console.log("没有找到");
        }

        // switch 比较适用于简单的字符串或者数字判断

    </script>

6.循环结构

6.1 for循环

什么时候需要使用for循环 多次重复执行  多次有规律的执行
for循环的作用  可以让特定的代码执行指定的次数

for循环的语法

for(表达式1;表达式2;表达式3){ 循环体(重复执行的代码) }
for(初始化循环变量;循环条件;更新循环变量值){循环体(重复执行的代码)}

for(var n=0;n<5;n++){ console.log("今天吃饭了") }

执行过程
    1.初始化循环变量   var n = 0
    2.判断循环条件     n<5  
					 条件成立   执行循环体
           条件不成立  结束循环
    3.更新循环变量  n++  
		4.回到步骤2

基础用法

 <script>
        /*  
                for(表达式1;表达式2;表达式3){ 循环体 }
                for(初始化循环变量;循环条件;更新循环变量值){  循环体}
        */
        for (var n = 1; n < 10; n++) { // n = 1 2 3 4 5 6 7 8 9 10
            console.log("你今天吃饭了吗")
        }
        console.log(n);//10
    </script>

循环数组

        //循环数组 
        //array 数组类型  ["123",2,true,undefined,null]  数组可以存储多个数组 可以存储任意类型的数据
        var arr = ["你好吗", 123, true, undefined, null];
        console.log(arr);
        //获取数组中的某一项  语法  数组名[下标]
        //    console.log(arr[0])
        //    console.log(arr[1])
        //    console.log(arr[2])
        //    console.log(arr[3])
        //    console.log(arr[4])

        //
        for (var i = 0; i < 5; i++) { // i = 0 1 2 3 4 5
            // console.log(i);// 0 1 2 3 4
            console.log(arr[i]);// "你好吗" 123 true undefined null
        }

循环生成标签

body>
    <button>生成</button>
    <ul>

    </ul>
    <script>
        var arr = ["赵四成精", "刘能变形", "中国老年人才网正式上线", "拍婚纱照 新郎被劈死"]
        // 需求  点击生成按钮  生成四个新闻
        // 1.获取元素
        var btn = document.getElementsByTagName("button")[0];
        var list = document.getElementsByTagName("ul")[0];
        // 2.添加点击事件
        btn.onclick = function () {
            for (var i = 0; i < 4; i++) { // i = 0 
                //  将原先的内容获取到  + 新内容
                // arr[0]  arr[1]  arr[2]  arr[3]
                list.innerHTML += "<li>" + arr[i] + "</li>"
                /* 
                    i=0     "<li>赵四成精</li>"
                    i = 1    "<li>赵四成精</li>" +  "<li>刘能变形</li>"
                    i = 2  
                */
            }
        }
    </script>
</body>

循环添加点击事件

<body>
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <button>按钮5</button>
    <script>
        //点击哪个按钮  将哪个按钮的文本内容输出
        var btn = document.getElementsByTagName("button");

        // btn[0].onclick = function(){
        //     console.log(btn[0].innerText)
        // }

        // btn[1].onclick  = function(){
        //     console.log(btn[1].innerText)
        // }

        // btn[2].onclick  = function(){
        //     console.log(btn[2].innerText)
        // }

        // btn[3].onclick  = function(){
        //     console.log(btn[3].innerText)
        // }

        // btn[4].onclick  = function(){
        //     console.log(btn[4].innerText)
        // }


        for(var i = 0;i<5;i++){ // i = 0 1 2 3 4 5 
            btn[i].onclick = function(){
                // console.log(btn[i].innerText);// 出现报错信息  因为此时i的值是5
                // console.log(i);//5
            }
        }
    </script>
</body>

6.2 while与do-while

6.2.1 while语句

 /* 
            while语句
            1.初始化循环变量
            while(条件){
                循环体(重复执行的代码);
                更新循环变量
            }
        */
        var a = 0;
        while(a < 3){
            console.log("你好");
            a++;
        }

6.2.2 do-while的语法

      /* do-while语句 
           1.初始化循环变量
           do{
              循环体;
              更新循环变量
           }while(条件)
        */

        var b = 0
        do{
            console.log("摆烂");
            b++;
        }while(b<3);

6.2.3 while和do-while的区别

while：先判断后执行最开始不成立一次也不执行
do-while :先执行后判断最开始不成立也会执行一次

        // while和do-while有什么区别
        var x = 0;
        while(x > 0){  //先判断后执行 最开始不成立 一次也不执行
            console.log("马上下课了");
            x++;
        }

        var x = 0;
        do{// 先执行后判断  最开始不成立  也会执行一次
            console.log("还没有下课呢");
            x++;
        }while(x<0)