JavaScript数据类型

学习目的:

1.说出五种简单的数据类型

2.typeof获取变量类型

3.说出1-2种转换为数值型的方法

4说出一到两种转换为字符型的方法

5说出什么是隐式转换

 

 

1为什么需要数据类型?

     不同数据占用的存储空间不同,为了便于把数据分成所需内存大小不同的数据,充分利用存储空间,定义了不同的数据类型。

 

2变量的数据类型

   js的数据类型是只有在程序运行过程中,根据等号右边的值来确定的。

   Javascript拥有动态类型,同时意味着相同的变量可用作不同的类型

程序实例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var num = 10;//num属于数字型
        // js的数据类型只是在程序运行过程中,根据等号右边的值来确定的
        var str ='pink';//str 字符串型
        // js是动态语言 变量数据类型可以变化的
        var x = 10;//x是数字型
        x = 'pink';//x是字符型
        
    </script>
</head>
<body>
   
</body>
</html>

 

3数据类型的分类:

    简单数据类型

简单数据类型 说明 默认值
Number 数字型,包含整形值和浮点型值,如21  0.21 0
Boolean 布尔型 如ture,false,等价于0和1 false
String 字符串型,如 张三 咱恶魔你js中,字符串都带引号 ""
Undefined var a;声明了a但是没有赋值,此时a=undefined undefined
Null var a = null;声明了a为空值 null

(1)Number 

        1.   0 开头八进制   0x开头十六进制

        2.   数字范围 :JavaScript中的最大值和最小值

                          alert(Number.Max_VALUE);   //数字中的最大值

                          alert(Number.MIN_VALUE);   //数字中的最小值

        3.   数字的3个特殊值

         alert(Infinity);  //代表无穷大

         alert(-Infinity); //代表无穷小

         alert(NaN);    //NOT A Number  代表一个非数值

        4. is NaN()这个方法用来判断非数字  并且返回一个值 如果是数字返回 false 如果不是数字返回 ture

         console.log(isNaN('pink'));

      代码示例:

    <script>
        var num = 10;//num数字型
        var PI = 3.14; //PI数字型
        //1.八进制 0-7 我们程序里面数字前面加0 表示八进制
        var num1 = 010;
        console.log(num1);//010 八进制 转换为10进制 就是8
        //十六进制 0-9 a-f #ffffff   数字前面加0x表示十六进制
        var num3 = 0x9;
        console.log(num3);
        //3.数字型的最大值
        console.log(Number.MAX_VALUE);
        //4.数字型的最小值
        console.log(Number.MIN_VALUE);
        //5.无穷大
        console.log(Number.MAX_VALUE * 2);//infinity
        // 6.无穷小
        console.log(-Number.MAX_VALUE * 2);//-infinity
        // 7.NAN非数字
        console.log('pink' - 100);//NAN
        //is NaN()这个方法用来判断非数字  并且返回一个值 如果是数字返回 false 如果不是数字返回 ture
        console.log(isNaN('pink'));      
    </script>

 

(2)string字符串型

      1. 加 "" 和 '' 都可以是字符串型     'pink' '2' 'ture'     推荐单引号

      2.字符串转义字符 都是用\开头的但是这些转义字符写到引号里面

转义符 解释说明
\n 换行符,n是newline的意思
\\ 斜杠\
\' ' 单引号
\" " 双引号
\t tab缩进
\b 空格,b是blank的意思

 (3)字符串长度

      字符串是有若干字符构成的,这些字符的数量就是字符串长度。通过字符串length属性可以获取整个字符串的长度。

(4)字符串的拼接

      多个字符串之间可以使用+进行拼接,其拼接方式为   字符串+任何类型=拼接之后的新字符串

      程序实例:

    

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //1.检测获取字符串长度 length
        var str = 'my name is andy';
        console.log(str.length); //15
        //字符串的拼接+ 只要有字符串最终结果为字符串     +号口诀,数值相加,字符相连
        console.log('沙漠'+'骆驼');//字符串的 沙漠骆驼
        console.log('pink老师' + 18);//字符串的  pink老师18
        console.log('pink老师' + true);//字符串
        console.log(12+12);//数字
        console.log('12' + 12);  //1212

        //拼接字符加强
        var age = 18;
        // 变量写到字符串里面,是通过和字符串相连的方式实现的
        console.log('我'+age+'岁');
        //小技巧 变量和字符串的口诀:隐隐加加来实现的

        //程序交互效果
        var age = prompt('请输入年龄');
        alert('您今年已经'+age+'岁了')
        
    </script>
</head>
<body>
    
</body>
</html>

(5)Boolean布尔型

   <script>
        var flag = true;   //flag布尔型1
        var flag1 = false; //flag1布尔型0
        console.log(flag + 1); //true参与加法运算,当1来看
        console.log(flag1 + 1); //true参与加法运算,当0来看
    </script>
(6)Undefiend 和 Null
  
    <script>
        //一个变量未赋值 就是undefined 未定义数据类型 
        var str;
        console.log(str);
        var variable = undefined;
        console.log(variable + 'pink'); //undefinedpink,任何东西与字符串相连都连到字符串上
        console.log(variable + 1);  //NaN
        //null 空值
        var space = null;
        console.log(space + 'pink'); //nullpink
        console.log(space + 1);//结果为1

        //一个声明变量给null值,里面存的值为空(学习对象时 我们继续研究null)
    </script>
 

4获取变量的数据类型

(1)typeof 获取变量的数据类型

    <script>
        var num = 10 ;
        console.log(typeof num); //number
        var str = 'pink';
        console.log(typeof str);//string
        var flag = true;
        console.log(typeof flag);//boolean
        var vari = undefined;
        console.log(vari);//undefined
        var timer = null;
        console.log(timer);//object
        //prompt 取过来的值是字符型的
        var age = prompt('请输入您的年龄');
        console.log(age);
        console.log(typeof age);
    </script>

 

5数据类型的转换

  使用表单,prompt获取过来的数据默认是字符串类型的 此时就不能直接简单进行加法运算,而需要转换变量的数据类型。俗话来说,就是把一种数据类型的变量转换为另一种数据类型。

  转换为字符串型

  转换为数字型

  转换为布尔型

(1)转换为字符串

方式 说明 案例
toString() 转成字符串 var num=1;alter(num.toString());
String()强制转换 转成字符串 var num=1;alert(String(num));
加号拼接字符 和字符串拼接的结果都是字符串 var num=1;alert(num+"我是字符串");

代码示例:

       <script>
        // <!-- 1.把数字型转换为字符串型 -->
        var num = 10;
        var str = num.toString();
        console.log(typeof str);
        // 2.我们利用string(变量)
        console.log(typeof String(num));
        // 3.利用+拼接字符串的方法实现转换效果
        console.log(typeof (num + ''));//+的方法也称为隐式转换。
       </script>

(2)转换为数字型(重点)

方式 说明 案例
parseInt(string)函数 将string类型转成整数数值型 parseInt('78')
parseFloat(string)函数 将string类型转成浮点数数值型 parseFloat('78.21')
Number()强制转换函数 将string类型转换为数值型 Number('12')
js隐式转换(- * /) 利用算术运算隐式转换为数值型 '12'-0

代码示例:

    <script>
        // var age = prompt('请输入您的年龄');
        //1.parseInt(age)可以把字符型转换成数值型,但是得到的是整数
        console.log(typeof parseInt(age));//number
        console.log(parseInt('3.14')); //取整3
        console.log(parseInt('3.94')); //取整3
        console.log(parseInt('120px')); //120会去掉px这个单位
        console.log(parseInt('rem120px')); //NaN
        //2.paseFloat(变量)可以把字符型的转换为数字型 得到的是小数 浮点数
        console.log(parseFloat('3.14'));//3.14
        console.log(parseFloat('rem120px')); //NaN
        console.log(parseFloat('120pxhhh')); //120
        //3.利用Number(变量)
        var str = '123';
        console.log(Number(str));
        //4.利用算术运算 - * /隐式转换
        console.log('12' - 0);//12
        console.log('120' - '112');//8
    </script>

数据类型转换小案例:

 1     <script>
 2         //输入出生年份算出年龄
 3         //弹出输入框
 4         //变量保存起来 减去变量值
 5         //弹出警示框
 6         var year = prompt('请输入出生年份');
 7         parseInt(year);
 8         var age = 2020 - parseInt(year);
 9         alert(age);
10         //简单减法器
11         var firstNumber = prompt('请输入第一个数值');
12         var secondNumber = prompt('请输入第二个数值');
13         var result = parseInt(firstNumber) - parseInt(secondNumber);
14         alert(result);
15     </script>

(3)转换Boolean型

方式 说明 案例
Boolean 其他类型转换为布尔型 Boolean(ture);

代表空,否定的之都会被转换成false 如'',0,NaN,null,undefined

其余的值都会被转换为ture.

代码示例:

    <script>
        // 代表空,否定的之都会被转换成false 如'',0,NaN,null,undefined
        // 其余的值都会被转换为ture.
        console.log(Boolean(''));//false
        console.log(Boolean(0));//false
        console.log(Boolean(NaN));//false
        console.log(Boolean(null));//false
        console.log(Boolean(undefined));//false
        console.log(Boolean(123));//ture
    </script>

 

6扩展:

js是解释性语言,运行及时编译,运行一行解释一行 执行一样(吃火锅)

java是编译语言 编译完毕生成执行代码 再执行(做菜一起吃)

 

posted @ 2020-05-27 18:22  qiuqiu95  阅读(259)  评论(0编辑  收藏  举报