1.数据类型简介-今日头条

1.数据类型简介

1.2变量的数据类型

JS的变量数据类型是只有程序在运行过程中，根据等号右边的值来确定的
我们不确定属于哪种数据类型的

代码示例：

<script>
        //int num = 10; Java
        //var num;  这里的num我们不确定属于哪种数据类型的
        var num = 10;   //num属于数字型
        //js   的变量数据类型是只有程序在运行过程中，根据等号右边的值来确定的
        var str = 'pink';   //str字符串型
        //js是动态语言  变量的数据类型是可以变化的
        var x = 10; //x 是数字型
        x = 'pink'; //x字符串型
    </script>>

2.简单数据类型

2.1简单数据类型（基本数据类型）

2.2数字型Number

1.数字型进制

最常见的二进制、八进制、十进制、十六进制。

代码案例：

<script>
        var num = 10;   //num 数字型
        var PI = 3.14;  //PI数字型
            // 八进制 0~7  我们程序里面数字前面加0 表示八进制
        var num1=010;
        console.log(num1);  //010   八进制 转换为10进制  就是   8
        var num2 = 012;
        console.log(num2);
        //2.十六进制 0~9 a~f  #ffffff   数字的前面加0x  表示十六进制
        var num3 = 0x9;
        console.log(num3);
        var num4 = 0xa;
        console.log(num4);
        //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.非数字
         console.log('pink老师' -100); //Nan
    </script>

现阶段我们只需要记住，在JS中八进制前面加0，十六进制前面加0x

4.isNan()

用来判断一个变量是否为非数字的类型，返回true或者false

//isNaN()这个方法用来判断非数字并且返回一个值如果是数字返回的是 false 如果不是数字返回是true

console.log(isNaN(12)); //false

console.log(isNaN('pink老师')); //true

</script>

2.3字符串型String

1.字符串引号嵌套

JS可以用单引号嵌套双引号，或者用双引号嵌套单引号（外双内单，外单内双）

2.字符串转义符

类似HTML里面的特殊字符，字符串中也有特殊字符，我们称之为转义符。

转义符都是\开头的，常用的转义符及其说明如下：

代码案例：

<script>
        //'pink'    'pink老师'
        var str = '我是一个"高富帅"的程序员';
        console.log(str);
        //字符转义字符    都是用  \  开头  但是这些转义字符写道引号里面
        var str1 = "我是一个'高富帅'\n的程序员";
        console.log(str1);
    </script>

3.字符串长度

//1.检测获取字符串的长度 length

var str = 'my name is andy';

console.log(str.length); //15

4.字符串拼接

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

拼接前会把与字符串相加的任何类型转成字符串，再拼接成一个新的字符串

<script>
        //1.检测获取字符串的长度    length
        var str = 'my  name is andy';
        console.log(str.length);  //15
        //2.字符串的拼接 +
        console.log('沙漠'+ '骆驼');    //字符串的 沙漠骆驼
        console.log('pink老师' + 18);   //pink老师18
        console.log('pink' + true);     //pinktrue
        console.log(12 + 12);   //24
        console.log('12' + 12);   //1212
    </script>

总结：数值相加，字符相连

5.字符串拼接加强

我们经常会将字符串和变量来拼接，因为变量可以很方便地修改里面的值
变量是不能添加引号的，因为加引号的变量会变成字符串
如果变量两侧都有字符串拼接，口诀“引引加加”，删掉数字，变量写加中间

<script>
        console.log();  //pink老师18
        console.log('pink老师' + 18 + '岁');
        var age = 19;
       // console.log('pink老师age岁');   //错误
        //我们变量不要写到字符串里面，是通过和字符串相连的方式实现的
        console.log('pink老师' + age + '岁');
        //变量和字符串相连接的口诀：引引加加
        console.log('pink老师'+ age +'岁');
    </script>

案例分析：

<script>
        var age = prompt('请输入您的年龄');
        var str = '您今年已经' + age + '岁';
        alert(str);
    </script>

2.5布尔型Boolen

2.6Undefind和Null

一个声明后没有被赋值的变量会有一个默认值undefined(如果进行相连或者相加时，注意结果)

一个声明变量给null值，里面存的值为空（学习对象时，我们继续研究null）

代码案例：

<script>
        var flag=true;  //flag布尔型
        var flag1 = false;  //true布尔型
        console.log(flag +1);   //true  参与加法运算当1来看
        console.log(flag1 +1);   //false  参与加法运算当0来看
        //如果一个变量声明来赋值    就是undefined 未定义数据类型
        var str;
        console.log(str);
        var variable = undefined;
        console.log(variable + 'pink'); //undefinedpink
        console.log(variable + 1);  //undefined 和数字相加  最后的结果是 Nan
        //null  空值
        var space =null;
        console.log(space + 'pink');  //nullpink
        console.log(space + 1);  //1
    </script>

3.获取变量数据类型

3.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(typeof vari);  //undefined
        var timer = null;
        console.log(typeof timer);  //object
        //prompt 取过来的值是   字符型的
        var age = prompt('请输入您的年龄');
        console.log(age);
        console.log(typeof age);
    </script>

3.2字面量

字面量是在源码中一个固定值的表示方法，通俗来说，就是字面量表示如何表达这个值。

数字字面量：8,9,10
字符串面量：‘黑马程序员’，“大前端”
布尔字面量：true，false

<script>
        console.log(18);
        console.log('18');
        console.log(true);
        console.log(undefined);
        console.log(null);
    </script>

4.数据类型转换

4.1什么是数据类型转换

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

我们通常会实现3中方式的转换：

转换为字符串类型
转换为数字型
转换为布尔型

4.2转换为字符串

tostring()和String使用方式不一样
三种转换方式，我们更喜欢用第三种加号拼接字符串转换方式，这一种方式也称之为隐式转换。

代码案例：

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

4.3转换为数字型（重点）

注意parselnt和parseFloat单词的大小写，这2个是重点
隐式转换是我们在进行算术运算的时候，JS自动转换了数据类型

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

计算年龄案列：

此案例要求在页面弹出一个输入框，我们输入出生年份后，能计算出我们的年龄。

代码案例：

<script>
        var year = prompt('请您输入您的出生年份');
        var age = 2021 - year;  //year取过来的是字符型  但是这里用的减法 有隐式转换
        alert('您今年已经' + age + '岁');
    </script>

简单加法器：

计算两个数的值，用户输入第一个值后，继续弹出第二个输入框并输入第二个值，最后通过弹窗显示出两次输入值相加的结果。

<script>
        var num1 = prompt('请您输入第一个值');
        var num2 = prompt('请您输入第二个值');
        var result = parseFloat(num1) + parseFloat (num2);
        alert('您的结果是:' + result);
    </script>

4.4转换为布尔类型

1.数据类型简介

头条热榜

精彩视频