javascrip基础（二）

最新推荐文章于 2024-07-18 10:24:18 发布

直条纹先生

最新推荐文章于 2024-07-18 10:24:18 发布

阅读量41

点赞数

分类专栏： web前端文章标签： javascript 前端 typescript

本文链接：https://blog.csdn.net/weixin_45936141/article/details/125209177

版权

web前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

07.数据类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript">

/*
数据类型指的是字面量的类型

   基本数据类型：
        String字符串
        Number数值
        Boolean布尔值
        null空值
        undefined未定义

  引用数据类型：
        Object对象



        String字符串
          -在js中需要用字符串引号引起来
          -使用单引号双引号都可以,但是不能混着用
          -引号不能嵌套，双引号里不能放双引号，单引号里不能放单引号（在字符串中使用/转义符）
          \" 表示 "
          \'表示'
          \n表示换行
          \t表示制表符
          \\表示\自己


*/

        var str = "我\n说：\"今天天\t气真不错！\"";

        //变量只需要声明一次，后面不需要再声明了！
        str = 2;
        //输出自变量str
        // console.log("str");



        alert("hello,你好！");
        //输出变量
        console.log(str);



    </script>
</head>
<body>
    
</body>
</html>

08.number类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript">

        /*
        在js中所有数值都是number类型
        包括整数和浮点数（小数）
        */
        var a = 123;

        var b = "123";

        /*
        typeOf检查数值类型

        检查字符串时返回string
        检查数值时返回number


        js中可以表示number的最大值Number.MAX_VALUE 1.7976931348623157e+308
        如果使用number的最大值超过了max则会infinite（正无穷）


        NaN 表示的是一个特殊的数字  not a number
        使用typeof检查时也会返回 number

        */


        /*
        在js中整数的运算可以保证精确度
        */

         var c = 123 + 456; 


         /*
         在js中小数的运算不保证精确度（所有的语言都有这种问题！！）

         所以千万不要使用js进行精度比较高的运算
         */
         var d = 0.1 + 0.2;

        console.log(d);//number
        // console.log(typeof b);//string
        // console.log(Number.MAX_VALUE);

    </script>
</head>
<body>
    
</body>
</html>

09.boolean类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript">


/*

Boolean 布尔值

布尔值只有两个，用来逻辑判断

true
表示真
false
表示假


使用typeOf检查boolean时，会返回boolean
*/

        var bool = true;
        console.log(typeof bool);//boolean

    </script>
</head>
<body>
    
</body>
</html>

10.null和undefine

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript">
        /*
        null类型只有一个，就是null
        null这个值专门用来表示一个空的对象

        undefined的值只有一个就是undefined
        当声明一个变量，但不给变量赋值时，就是undefined
        
        */

        var a = null;
        var b;

        console.log(b)


    </script>
</head>
<body>
    
</body>
</html>

11.强制数据类型转换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript">

        /*
        强制数据类型转换
        
        指将一个数据类型强制转换成其他数据类型

        类型转换主要是指将其他数据类型转换成
        String Number Boolean 
        */


        /*
        将其他数据类型转换成String
        方式一：
            -调用被转换数据类型的toString()方法
            -该方法不会影响到原变量
            -但是注意null和undefine这两个值是没有toString()方法的
            如果调用他们的方法会报错



         方式二：
            -调用String()函数，并将要转换的数据作为参数传递给函数
            -调用String()函数作为强制类型转换时
                -对于number和boolean实际上就是调用toString()方法
                -对于null和undefine就不会调用 toString()方法
                它会将null直接转换为“null”（字符串）
                将undefined转换为“undefined”(字符串)  
        */
       var a = 123;


       a.toString();//调用某某方法用.
       console.log(typeof a);
       console.log(a);



    </script>
</head>
<body>
    
</body>
</html>

12.转换为number

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript">

        /*
        将其他数据类型转换为Number
        转换方式一：

             使用number()函数
                      字符串-->数字
                      1.如果是纯数字的字符串，则直接将其转换为数字
                      2.如果字符串中有非数字的内容，则转换为NaN
                      3.如果字符串是空串或者是一个全是空格的字符，则转换为0


                      布尔型-->数字
                      true -->1
                      false -->0

                      null-->0

                      undefined-->  NaN

        转换方式二：
            -这种方式专门用来对付字符串
            -parseInt() 把一个字符串转换为一个整数
            -parseFloat() 把一个字符串装换为浮点数

        */

        var a = undefined;
        a = "123.456";
        //parseInt() 可以将一个整数提取出来
        //parseFloat() 可以将一个小数提取出来
        a = parseFloat(a);
        
//调用Number()函数来将a转换为Number类型
        // a = Number(a);
        console.log(typeof a);
        console.log(a);
        
    </script>
</head>
<body>
    
</body>
</html>

13.其他进制的数字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript">


        //调用boolean()函数来将a转换为布尔值

       var a = 123;
       a = -123;
       a = 0;

       a = Infinity;

        //调用boolean()函数来将a转换为布尔值


        /*
        
        将其他数据类型转换为boolean
            使用boolean()函数
            数字-->布尔值
            除了0和NaN其余都是true
            字符串-->布尔值
            除了空串其余都是true
            null和undefined都会转换为false
            对象也会转换为true

    
        
        */

        a = Boolean(a);
        
        console.log(typeof a);
        console.log(a);



    </script>
</head>
<body>
    
</body>
</html>

14.运算符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript">

        /*
        运算符也叫操作符
        通过运算符可以对一个或多个值进行运算
        比如Typeof就是一个运算符，可以获得一个值的类型
        它会将值得类型以字符串的形式返回
        number、String、boolean、undefined、object
        
        

        算术运算符

        +
        --对两个值进行加法运算，并将结果返回
        --如果对两个字符串进行加法运算，则会做拼串处理
        --任何的值和字符串做加法运算，都会先转换为字符串，然后再和字符串做拼串处理
        --可以利用这一特点，来将任意的数据类型转化为String
        --我们只需为任意的数据类型 + "" 即可将其装换为String
        --这是一种隐式的类型转换



        -

        --对两个值进行减法运算，并将结果返回

        *
        --可以对两个值进行乘法运算


        /
         --可以对两个值进行除法运算

        %
        --取模运算，取余数

        */


        var a = 123;
        var result = typeof a;
        result = 456 + 789;
        result = true + 1;//2
        result = 456 + 789;//1245
        result = true + false;//1

        result = 2 + null;//2
        result = 2 + NaN;//NaN

        result = "123" + "456";
        result = "你好！" +"大帅哥！";

        var c = 456;

        result = 1 + 2 + "3";//33

        result = "1" + 2 + 3;//123
        console.log(result);


    </script>
</head>
<body>
    
</body>
</html>

15.一元运算符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript">


        /*
        一元运算符，只需要一个操作数

        + 正号
        -正号不会对数字产生任何影响
        - 负号
        -负号可以对数字取反
        */

        var a = 123;
        a = -a;
        console.log("a = "+a);
        
    </script>
</head>
<body>
    
</body>
</html>

16.自增和自减

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript">

        /*
        自增++

        通过自增可以使变量在自身的基础上增加1
        对于一个变量自增以后，原变量的值会立即自增1

        自增分两种 ++a a++；
        无论是a++还是++a都会使原变量的值自增1
        不同的是a++和++a的值不同

        a++的值等于原变量的值（自增前的值）
        ++a的值等于原变量后的值（自增后的值）




        自减--
        通过自减可以使变量在自身的基础上减少1
        对于一个变量自减以后，原变量的值会立即自减1
        a--是自减前的值
        --a是自减后的值
前减减是新值
后减减是原值


        */

        var a = 1;

        //使a自增1
        a++;//2
        a++;//3

        // console.log("++a = "+ ++a);//增加后的值4
        // console.log("a++ = "+ a++);//原值


        var b = 10;

        // console.log(b--);//10
        console.log(--b);//9




    </script>
</head>
<body>
    
</body>
</html>

17.自增练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript">


        var n1 = 10;
        var n2 = 20;

        var n = n1++;
        // console.log('n='+n);//10
        // console.log('n1='+n1);//11

        n = ++ n1;
        console.log('n='+n);//12
        console.log('n1='+n1);//12

        


    </script>
</head>
<body>
    

</body>
</html>

18.逻辑运算符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript">



        /*
        js中为我们提供了三种逻辑运算符
        
        ！非
        -！可以对一个值进行非运算
        所谓非运算就是对布尔值进行取反操作

        如果对一个非布尔值进行取反运算，先将这个值转换为布尔值，然后再取反
        利用这一特点可以将任意的非布尔值取两次反，即可将其转换为布尔类型
        例如：

        var a = “hello”;
        a = !!a;



        &&与
        -可以对符号两侧的值进行与运算，并返回结果
        -运算规则：


        ||或
        */


        //如果两个值都是true则返回true
        var result = true&&true;//true


        //&&运算只要有一个false就返回false
        result = true&&false;
        

        // console.log(result);//false


        // //||运算只要有一个true就返回true
        // result = true||true;//true
        // result = true || false;//true
        // result = false || true //true
        // result = false || fasle //false



        //字符
        console.log("\u2620");

        


    </script>
</head>
<body>
    
    <!--在网页中使用unicode编码
    &# 这里是十进制-->
    <h1 style="font-size: 200px;">&#9760</h1>
    <h1 style="font-size: 200px;">&#9856</h1>
   
</body>
</html>

19.相等运算符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script type="text/javascript">



        /*
        相等运算符比较两个值是否相等
        如果相等会返回true否则返回false


        使用==来处理相等运算

		！=不等
        =一个等号表示赋值
        ==两个等号表示值相等(类型不相等会自动转换类型相等)
        ===全等（类型和值都要相等）（类型不相等，不会自动转换）
        
        */


        var a = 10;

        console.log(a == 4 );//false
    </script>
</head>
<body>
    
</body>
</html>

20.条件运算符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript">




/*
条件语句也叫三元运算符

语法：

        条件表达式？语句1:语句2

        执行的流程：
        条件运算符在执行时，首先对条件表达式进行求值
        如果该值为true，则执行语句1，并返回执行结果
        如果该值为false，则执行语句2，并返回执行结果


*/
    </script>
</head>
<body>
    
</body>
</html>