JavaScript学习第五天——数据类型转换、布尔型、Undefined和Null

数据类型之布尔型（boolean）

布尔型（boolean）有两个值：true和false;

true：真（对）；false：表示假（错）

布尔型和数字型相加时，true的值为1；false的值为2

Undefined和Null

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

获取变量数据类型

格式：typeof 变量名；就可获得对应变量的数据类型

prompt():获取的值是字符型的（string）

颜色区分：数字型显示的是蓝色的；字符型显示的是黑色的；布尔型显示的是深蓝色的；undefined和null显示的是灰色的

字面量

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

数字字面量：8,9,10

字符串字面量：‘黑马程序员’，‘大前端’

布尔型字面量：true,false

数据类型转换

简介：使用表单、prompt获取得的数据默认是字符串类型的，此时就不能直接简单的进行加法运算，而需要转换变量的数据类型。

数据类型转换：把一种数据类型的变量转换成另外一种数据类型

3种实现方式：

1.转换成字符串类型

2.转换成数字型

3.转换成布尔型

1.转换成字符串

变量.toString()

var num = 10;
var ty = num.toString();
console.log(typeof ty);     //string说明num转换成了字符型

String(变量)强制转换

var ber = 20;
var pe = String(ber);
console.log(typeof pe);     //string说明ber转换成了字符型

加号拼接字符串（隐式转换，是使用最多的）

var bun = 25;
var my = '我今年' + bun + '岁了';
console.log(typeof my);         //string说明bun也转换成了字符型

2.转换为数字型（重点）

1.parseInt(string型的变量名)函数：将string类型转成整数数值型

<script>
        var age = prompt('请输入你的年龄');
        var fage = parseInt(age);
        console.log(fage);          //获取的都是整数
        console.log(typeof fage);       //number
        console.log(parseInt('23.564'));      //23，取整数
        console.log(parseInt('156厘米'));     //156会自动把单位去掉，只留下整数部分的数字
         console.log(parseInt('rem123px'));      //NaN,因为第一个字符是非数字字符，所以就解析成了NaN非数值，
</script>

2.parseFloat(string型的变量名)函数：将string类型转成浮点数数值型

<script>
        var age = prompt('请输入你的年龄');
        var fage = parseFloat(age);
        console.log(fage);      //输入多少就是多少，可以是小数也可以是整数
        console.log(parseFloat('120px'));       //120,自动去掉单位，只保留数字
        console.log(parseFloat('px120'));       //NaN，是一个是非数值字符
        console.log(parseFloat('3.14'));      //3.14
</script>

3.Number(变量名)强制转换函数：将string类型转成数值型

<script>
        var age = prompt('请输入你的年龄');
        var fage = Number(age);
        console.log(fage);
        var str = '123456';
        console.log(Number(str));
        console.log(Number('158cm'));     //NaN,这个似乎不能自动去掉单位
</script>

4.js隐式转换（- * /）：利用算术运算隐式转换为数值型

<script>
        var str = '20';
        console.log(str + 2);           //202,使用加号就是将str与2相连形成拼接的效果
        console.log(str / 2);       //10
        console.log(str * 2);       //40
        console.log(str - 2);           //18
</script>

注意：parseInt和parseFloat单词的大小写，I和F一定是大写的

​ 隐式转换就是我们在进行算数运算的时候，JS自动转换了数据类型，将字符型转换成数字型

案例：计算年龄

<script>
        // 弹出一个输入框（prompt）,让用户输入出生年份（用户输入）
        var year = prompt('请输入你的出生年份');
        // 把用户输入的值用变量保存起来，然后用今年的年份减去变量值，结果就是现在的年龄（程序内部处理）
        var age = 2021 - year;
        // var age = 2021 - parseInt(year);            
        //year获取的是字符串型的数据，但是这里使用的是减法，JS有隐式转换，所以不用使用parseInt进行类型转换
        // 弹出警示框（alert）,把计算的结果输出（输出结果）
        alert('你今年' + age + '岁了');
        // if (age > 18) {
        //     alert('你今年' + age + '岁,\n已经成年了');
        // } else {
        //     alert('你今年' + age + '岁,\n还是个未成年');
        // }
</script>

案例：简单加法器

<script>
        // 先弹出一个输入框，提示用户输入第一个值，保存起来
        var num1 = prompt('请输入第一个值：');
        // 再弹出第二个框，提示用户输入第二个值，保存起来
        var num2 = prompt('请输入第二个值：');
        // 把这两个值相加，并将结果赋给新的变量（注意数据的类型转换）
        // var result = num2 + num1;       //没有进行数据类型转换，结果则是两个数的拼接效果
        var sumnum = parseFloat(num1) + parseFloat(num2);
        // 弹出警示框（alert），把计算的结果输出（输出结果）
        alert('两个数相加的结果为：\n' + sumnum);
</script>

总结：先用中文把解决思路给写下来，然后再用代码解析