黑马pink JavaScript笔记（4）-数据类型（自用）

1.数据类型简介

（1）为何需要数据类型

在计算机中，不同的数据所需占用的存储空间是不同的，为了便于把数据分成所需内存大小不同的数据，充分利用存储空间，于是定义了不同的数据类型。

简单来说，数据类型就是数据的类别型号。

比如姓名“张三”，年龄18，这些数据的类型是不一样的。

（2）变量的数据类型

变量是用来存储值的所在处，它们有名字和数据类型。

变量的数据类型决定了如何将代表这些值的位存储到计算机的内存中。

JavaScript 是一种弱类型或者说动态语言。

这意味着不用提前声明变量的类型，在程序运行过程中，类型会被自动确定。

java就需要提前声明变量的类型了

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

（3）数据类型的分类

• 简单数据类型 （Number,String,Boolean,Undefined,Null）
• 复杂数据类型 （object)

2.简单数据类型

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

简单数据类型	说明	默认值
Number	数字型，包含整型值和浮点型值，如21、0.21	0
Boolean	布尔值类型，如true , false，等价于1和0	false
String	字符串类型，如"张三” 注意js里面,字符串都带引号	“”
Undefined	var a;声明了变量a但是没有给值，此时a = undefined	undefined
Null	var a = null;声明了变量a为空值	null

（2）数字型 Number

JavaScript 数字类型既可以用来保存整数值，也可以保存小数(浮点数）。

var age = 21; // 整数
var Age = 21.3747; // 小数

• 数字型进制

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

  		// 1.八进制 0~7 程序里面数字前面加0 表示八进制
          var num1 = 010;//8
          console.log(num1); //010 八进制转十进制 就是8
          var num2 = 012;
          console.log(num2);//10
          // 2.十六进制 0~9 a~f数字前面加上0x表示十六进制
          var num3 = 0x9;
          console.log(num3);//9
          var num4 = 0xa;
          console.log(num4);//10
  

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

• 数字型范围

  JavaScript中数值的最大和最小值

  • **最大值：**Number.MAX_VALUE，这个值为： 1.7976931348623157e+308
  • **最小值：**Number.MIN_VALUE，这个值为：5e-32

  		// 3.数字型的最大值
          console.log(Number.MAX_VALUE);
          // 4.数字型的最小值
          console.log(Number.MIN_VALUE);
  

• 数字型三个特殊值

  • Infinity ，代表无穷大，大于任何数值

  • -Infinity ，代表无穷小，小于任何数值

  • NaN ，Not a number，代表一个非数值

  alert(Infinity); // Infinity
  alert(-Infinity); // -Infinity
  alert(NaN); // NaN
  

• isNaN()

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

  isNaN(x) x是一个非数字类型

  console.log(isNaN(12));//false
  console.log(isNaN('风云溪'));//true
  

（3）字符串型 String

字符串型可以是引号中的任意文本，其语法为 双引号 “” 和 单引号’’

因为 HTML 标签里面的属性使用的是双引号，JS 这里我们更推荐使用单引号。

加了’'的都叫字符串型

字符串引号嵌套关系 外双内单 外单内双

var strMsg = "我爱北京天安门~"; // 使用双引号表示字符串
var strMsg2 = '我爱吃猪蹄~'; // 使用单引号表示字符串
// 常见错误
var strMsg3 = 我爱大肘子; // 报错，没使用引号，会被认为是js代码，但js没有这些语法

• 字符串嵌套关系

JS 可以用单引号嵌套双引号 ，或者用双引号嵌套单引号 (外双内单，外单内双)

		var name1 = "我是'一只'小码农";
        console.log(name1);
        var name2 = '秀儿"童鞋"请坐下';
        console.log(name2);

• 字符串转义符

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

都是以\开头，但是这些转义字符都要写到引号里面

		// \n 换行  \\ 斜杠\  \'单引号 \"双引号 \t tab 缩进 \b空格，blank的意思
        var name3 = '长孙\\一南';
        console.log(name3);

• 检测获取字符串的长度 length

		var str = 'my name is xieer';
        console.log(str.length); //16

• 字符串的拼接 +

只要有字符串和其他类型相拼接，其最终结果是字符串类型

口诀:数值相加，字符相连

		console.log('六洲' + '四海界');//六洲四海界
        console.log('男猪脚' + 17);//男猪脚17
        console.log('牛啊' + true);//牛啊true
        console.log(12 + 12);//24
        console.log('12' + 12); //1212

• 字符串拼接加强

变量是不能添加引号的，因为加引号的变量会变成字符串

		var age = 20;
        console.log('劳资今年' +age + '岁');
        // 变量两侧都有字符串，可以在字符串里删掉20，输入 '+变量+'  口诀：引引加加
        console.log('老子今年20岁了');
        console.log('老子今年'+age+'岁了');

显示年龄案例

<script>
    // 弹出一个输入框，需要用户输入年龄，之后弹出一个警示框显示“您今年xx岁了”
    // xx表示刚刚输入的年龄
    var age = prompt('请输入您的年龄');
    alert('您今年' + age + '岁了');
</script>

（4）布尔型Boolean

真，对true(1) 假，错false(0 )

		var flag = true;//flag 布尔型
        var flag1 = false;//flag1 布尔型
        console.log(flag + 1); //true 参与加法运算当1来看
        console.log(flag1 + 1);//false 参与加法运算当0来看

（5）Undefined 和 Null

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

var variable;
console.log(variable); // undefined
console.log('你好' + variable); // 你好undefined
console.log(11 + variable); // NaN
console.log(true + variable); // NaN

• 一个声明变量给 null 值，里面存的值为空

var vari = null;
console.log('你好' + vari); // 你好null
console.log(11 + vari); // 11
console.log(true + vari); // 1

3.获取变量数据类型

（1）获取检测变量的数据类型

typeof 可用来获取检测变量的数据类型

var num = 20;
console.log(typeof num);//number
var str ='码农';
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);//string

（2）字面量

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

	<script>
        // 以下每一类型的颜色都是不一样的
        console.log(10);
        console.log('10');
        console.log("10");
        console.log(true);
        console.log(undefined);
        console.log(null);
    </script>

4.数据类型转换

（1）什么是数据转换类型

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

通俗来讲，就是把一种数据类型的变量转换成另外一种数据类型。

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

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

（2）转换为字符串

		// 1.把数字转换为字符串型  变量.toString()
        var num = 20;
        var str = num.toString();
        console.log(str);
        // 获取检测变量的数据类型
        console.log(typeof str);//此时可知num的值已经转换成功
        // 2.利用String(变量)  强制转换
        console.log(String(num));
        // 3.利用 + 拼接字符串的方法实现转换效果 隐式转换 使用最多的一种方法
        console.log(num + '');

（3）转换为数字型（重点）

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

	<script>
        // 注意：大小写
        // var age =prompt("请输入你的年龄");
        // console.log(age);//此时输出的是一个字符型
        // 1.parseInt(变量)  可以把字符型转换为数字型 得到的是整数
        // console.log(parseInt(age));
        console.log(parseInt('3.14'));//取整 3
        console.log(parseInt('3.99'));//取整 3
        console.log(parseInt('200px'));//120 会舍去px
        console.log(parseInt('em200px'));//NaN
        // 2.parseFloat(变量) 可以把字符型转换为数字型 得到的是小数 浮点型
        console.log(parseInt('3.14'));//3.14
        console.log(parseInt('200px'));//120 会舍去px
        console.log(parseInt('em200px'));//NaN
        // 3.利用Number(变量)
        var str = '123';
        console.log(Number(str));
        console.log(Number('20'));
        // 4.利用了算法运算 - * /   隐式转换
        console.log('12' - 0);
        console.log('120' - '110');
        console.log('120' - 2);
    </script>

案例：

案例一

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

	<script>
        //① 弹出一个输入框（prompt)，让用户输入出生年份 （用户输入） 
        //② 把用户输入的值用变量保存起来，然后用今年的年份减去变量值，结果就是现在的年龄 （程序内部处理） 
        //③ 弹出警示框（alert) ， 把计算的结果输出 （输出结果）
        var year =prompt('请输入您的出生年份');
        age = 2022-year; //year 取过来是字符串 这里用的是减法 有隐式转换
        alert('您的年龄是'+age+'岁');
        // alert('您的年龄是'+parseInt(2022-age)+'岁');//也可
    </script>

案例二

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

	<script>
        // ① 先弹出第一个输入框，提示用户输入第一个值 保存起来
        // ② 再弹出第二个框，提示用户输入第二个值 保存起来
        // ③ 把这两个值相加，并将结果赋给新的变量（注意数据类型转换） 
        // ④ 弹出警示框（alert) ， 把计算的结果输出 （输出结果）
        var one = prompt('请输入第一个数：');
        var two = prompt('请输入第二个数：');
        var result = parseFloat(one) + parseFloat(two);
        alert('结果是：' + result);
    </script>

（4）转换为布尔型

Boolean()

代表空、否定的值会被转换为 false ，如 ‘’、0、NaN、null、undefined

其余值都会被转换为 true

		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('---------------');
        // 其余值都会被转换为 true
        console.log(Boolean('天地飘雪')); // true
        console.log(Boolean(12)); // true