JS基础

Darius11
97 阅读1分钟

1.1-算术运算符

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <script>
      /* 
        1.运算符 : 有运算作用的符号
        2.算术运算符 : 用于 数学算术运算
            + - * / %(求模运算,相当于取余数) 
        3.表达式 : 由运算符组成的式子
        4.算术表达式 ： 由算术运算符组成的式子  例如   1+1
        重点： 任何表达式,都一定会有运算结果
      */
​
      //将表达式的结果存入变量
      let num = 1 + 1
      console.log(num) //2
​
      //直接打印表达式结果
      console.log(10 - 1) //9
      console.log(10 % 3) // 10除以3, 余数 1
    </script>
  </body>
</html>
​

1.2-赋值运算符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
​
​
​
<script>
    /*赋值运算符 
    =  +=  -=  *=  /=   %=
    */
​
    //+=
    let num1 = 10;
    num1 += 10;//这行代码相当于 num1 = num1 + 10 的简写形式
    console.log ( num1 );//20
    //-=
    let num2 = 70;
    num2 -= 10; //相当于  num2 = num2 - 10;
    console.log(num2);//60
    //*=
    let num3 = 20;
    num3  *=  4;  //相当于  num3 = num3 * 4;
    console.log(num3);//80
    // /=
    let num4 = 90;
    num4 /= 3;//相当于 num4 = num4 / 3
    console.log(num4);//30
​
    let num5 = 10;
    num5 %= 3; // num5 = num5 % 3;
    console.log(num5);//1
​
</script>
​
</body>
</html>

1.3-自增自减运算符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
​
<script>
​
    //1.自增运算符 ++
    //自增表达式:   num++
    let num1 = 10;
    num1++;//这行代码相当于 num1 = num1 + 1 的简写形式
    console.log ( num1 );//11
​
    //2.自减运算符 --
    //自减表达式： num--
    let num2 = 20;
    num2--;//这行代码相当于 num2 = num2 - 1 的简写形式
    console.log ( num2 );//12
​
</script>
</body>
​
​
</html>

1.4-关系运算符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
​
</body>
​
<script>
    /**1.关系运算符（比较运算符）：比较两个数据之间的关系（某种条件是否成立）
        * 八种： >  >=  <  <=  ==  !=  ===全等 !== 不全等
    * 2.关系表达式：由关系运算符组成的式子    例如:  2 > 1
            * 只要是表达式，就会有运算结果
     * 3.关系表达式的结果一定是布尔类型：true代表成立，false代表不成立
     */
​
    //1.基本使用
    console.log ( 5 > 3 );//true  成立
    console.log ( 100 < 1 );//false 不成立
​
    //2.相等与不等:只比较数据的值，不比较数据的类型
    //注意：一个 = 号表示赋值运算符  两个 == 是比较运算符，它们作用不一样，不要搞混淆了
    console.log ( 1 == 1 );//true   常用
    console.log ( "1" == 1 );//true  他们的值一样，只是数据类型不一样
​
    //3.全等不全等： 先比较数据的值，再比较数据的类型
    console.log ( "1" === 1 );//false  两者的值虽然相等都是1，但是他们数据类型不一样，所以不成立
​
​
</script>
</html>

扩展:字符串比较的是ASCII码:

ASCII码:计算机识别的二进制编码

1.5-逻辑运算符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
​
</body>
<script>
​
    /* 
        0.关系运算符：某种条件的关系（成立/不成立），例如我的年龄大于你的年龄30>20
        1.逻辑运算符：多个条件之间的关系
        2.逻辑运算符只有三种
            * && :逻辑与 ，读作并且
            * || :逻辑或，读作或者
            * !  :逻辑非，读作取反
                * true（真）变false（假），false（假）变true（真）
     * 3.逻辑表达式: 表达式1 逻辑运算符 表达式2 
     */
​
    //1.逻辑与&&结果： 一假为假     （左右两边同时成立，才为真，否则为假）
    //表达式1    &&  表达式2       运算结果
    //真              真             真
    //真              假             假
    //假              真             假
    //假              假             假
    console.log ( 100 > 50 && 10 > 9 );//true  左右两边同时成立
    console.log ( 100 > 500 && 10 > 9 );//false   因为左边不成立
​
    //普通丈母娘找女婿 ：  有房 有车 有存款     三个条件都要满足，缺一不可    
​
​
​
    //2.逻辑或 ||结果 : 一真则真  （左右两边同时为假，才为假，否则为真）
    //表达式1    ||  表达式2    运算结果
    //真               真         真
    //真               假         真
    //假               真         真
    //假               假         假
​
    console.log ( 100 > 500 || 10 > 9 );//true  只要有一边为真则为真
    console.log ( 100 > 500 || 8 > 9 );//false 只有两边都不成立才为假
​
    //我的丈母娘找女婿 ： 要么有房 要么有车 要么有存款   三个条件满足任何一个即可
    
    //3.逻辑非！ ： 又叫做取反  真变假 假变真
    //    ！    表达式   结果
    //           假       真
    //           真       假
    let res = !false;
    console.log ( res );//true  假变真，真变假
    console.log ( ! ( 2 > 1 ) );//false     2>1的结果是true    与true相反的就是false
​
    //有的丈母娘找女婿 ：只要不是外地的。   `非xxxx`类似于一种否定逻辑
​
​
</script>
</html>

运算符优先级

  • 实际开发中，我们不需要刻意去记忆运算符优先级。你想让哪个式子先计算，使用小括号 () 包起来即可

数据类型转换

1.1-数据类型转换介绍

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
        /* 本小节仅为介绍数据类型转换意义,不需要课堂敲代码 
            * 数据类型不一致,得不到预期计算结果
        */
​
        //需求：让用户输入两个数字，然后相加，打印结果
        let num1 = prompt('请输入第一个数字')
        let num2 = prompt('请输入第二个数字')
        
        let res = num1 + num2//'10' + '20'
        console.log( res )//'1020'
    </script>
</body>
</html>

1.2-转换为number类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
        //需求 ： 输入两个数字，计算两个数字的和
        // prompt输入框 得到的是string类型
        // var num1 = +prompt('请输入第一个数字');
        // var num2 = +prompt('请输入第二个数字');
        // console.log(num1,num2);
        // console.log(typeof num1,typeof num2);
​
        // var res = parseInt(num1) + parseInt(num2);
        // console.log(res);
​
        //
​
        /*  1.其他数据类型 转 Number
                语义明确（提高代码阅读性）
                parseInt() : 转换整数
                parseFloat() :转换小数
                Number() : 其他数据类型转数字 （boolean，undefined，null）
​
            2.注意点： 数据类型转换并没有改变原有变量的值，而是产生一个新的值
         */
​
        //1. parseInt() : 转换整数
        // 从左往右依次解析字符，遇到非数字字符停止解析，并且返回解析好的整数
        var str = '10';
        var num = parseInt(str);
        console.log(num);// 10
        console.log(str);// '10'   类型转换不改变原有变量的值，而是产生一个新的值
        
        console.log(typeof num);
        console.log(parseInt('123.1.1a'));//123
        
​
        //2.parseFloat() : 转换小数
        //解析规则与parseInt一致，唯一的区别就是可以识别第一个小数点
        var str = '5';
        var num = parseFloat(str);
        console.log(num);
        console.log(parseFloat('123.1.1a'));//123.1
​
        //3. Number() : 其他数据类型转数字
        /* 
        a. 可以解析整数和小数
        b. 只要有任意非数字字符得到NaN
         */
        console.log(Number('6'));
        console.log(Number('6.6'));
        console.log(Number('123.1.a'));
        
​
        //布尔类型转数字会得到0false和1 true
​
        console.log(Number(true));//1
        console.log(Number(false));//0
​
        console.log(Number(undefined));//NaN
        console.log(Number(null));//0
        
        
        
        
        
    </script>
</body>
</html>

1.3-number类型特殊值NaN

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
        //1.NaN是number类型中一个特殊值
        // not a number:不是一个数字，表示错误的运算结果
​
        console.log('张三-100')//NaN
        console.log( Number('黑马程序员') )//NaN
​
        //2.NaN不能参与任何计算，结果一律为NaN
        //NaN实际场景： 开发中，我们一般不会接触到NaN，除非你的代码出bug了，数学计算出错
        let num
        console.log( num + 1 )//我们忘记给num赋值，导致undefined 与 1 相加得到NaN
        
    </script>
</body>
</html>

1.4-转换为string类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
        let num = 200
        
        //1. String(数据)
        console.log( String(num) )//'200'
        console.log( String(true) )//'true'
        console.log( String(undefined) )//'undefined'
        console.log( String(null) )//'null'
​
        //2. 变量名.toString()
        /* a. 如果是undefined与null，这种方式会报错 
           b. 这种方式可以支持进制转换。 例如把 十进制转十六进制
        */
        console.log( num.toString() )//'200'
        console.log( num.toString(16) )//'c8'
        
        
    </script>
</body>
</html>

1.5-转换为boolean类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
        // Boolean(数据)
        /* 
        1.false： 有7种数据会得到false 
            0 -0 NaN  ''  undefined  null  false
        2.true:  除false 7种之外的一切数据
        */    
​
        console.log( Boolean(0) )//false
        console.log( Boolean(-0) )//false
        console.log( Boolean(NaN) )//false
        console.log( Boolean('') )//false
        console.log( Boolean(undefined) )//false
        console.log( Boolean(null) )//false
        console.log( Boolean(false) )//false
​
    </script>
</body>
</html>

1.6-隐式转换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
       /* 
       隐式转换 ： 当运算符两边的 ‘数据类型不一致’ 的时候，编译器会转成一致后运算
            (1)转换数字 ： 算术运算符 + - * / %
            (2)转换字符串 ： 连接符+  (+号两边只要有一边是字符串，此时+就是连接符)
            (3)转换布尔: 逻辑非 !    
       */     
       
       //1.转换数字 : 算术运算符
       console.log( '100' - 10 )//90  Number('100') - 10
       console.log( 1 + true )//2  1 + Number(true)
       console.log( +'10' )//10  +数学正号 Number(10)  
       
       //2.转换字符串 : 连接符
       console.log( '1' + true )//'1true'  '1' + String('true')
​
       //3.转换布尔 : !
       console.log( !1 )//false   !Boolean(1)
       console.log( !undefined )//true   !Boolean(undefined)
       
    </script>
</body>
</html>

1.7-undefined与null区别

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
        /* 
        1. undefined : 未定义。 当变量只声明,但是没有赋值。此时默认值是undefined
            * 说人话 : undefined相当于期房。 买了房,但是房子还没建出来。(未定义)
​
        2. null : 有定义。 定义的值是空值。
            * 说人话 ： null相当于毛坯房。买了房,但是房子没住人,里面是空的。(空值)
        */  
       
        //相同点 : (1)值相等 (2)转布尔类型都是false
        console.log( undefined == null )//true
        console.log( Boolean(undefined) )//false
        console.log( Boolean(null) )//false
​
        //不同点 : (1)数据类型不同  (2)转number类型值不同
        console.log( undefined === null )//false
        console.log( Number(undefined) )//NaN
        console.log( Number(null) )//0
        
    </script>
</body>
</html>
avatar
文章
阅读
粉丝