【前端学习-初阶-JS】数据类型_typeof flag

数据类型

1.数据类型简介

1.1为什么需要数据类型？

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

数据类型--->类别型号

1.2变量的数据类型

变量是用来存储值的所在处，他们有名字和数据类型，变量的数据类型决定了如何将代表这些值的位存储到计算机的内存中，JavaScript是一种弱类型或者说动态语言。这意味着不用提前声明变量的类型，在程序运行过程中，类型会被自动确定。

• 引擎自动根据等号右边判断

• 数据类型可变化：var a=10;a='pink';

2.简单数据类型

2.1简单说明：

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

var age=21；//整数

var age=21.1212123；//小数

2.2数字型Number

2.2.1八进制

0~7 程序里面数字前加0，表示八进制

var num1=010;

console.log(num1);//输出8，八进制转十进制

2.2.2十六进制

0~9 a~f #fffff 数字前加0x表示十六进制

var num3=0xa;

console.log(num3);//输出10

2.2.3数字范围

最大值和最小值

alert(Number.MAX_VALUE);//输出 1.7976931348623157e+308最大值

alert(Number.MIN_VALUE);//输出5e-324最小值

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

  alert(Number.MAX_VALUE*2);//输出Infinity无穷大∞

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

  alert(-Number.MAX_VALUE*2);//输出-Infinity无穷小

• NaN(Not a number),代表一个非数值

  alert('pink老师'-100);//输出NaN非数值

2.3非数字isNaN()

判断非数字，并且返回一个值，如果是数字返回false，如果不是数字返回true

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

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

2.4字符串型String

字符串型可以是单引号，也可以是双引号，因为HTML标签中的属性使用双引号，所以JS推荐使用单引号

2.4.1字符串的引号嵌套

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

2.4.2字符串转义符

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

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

注：转义字符需写到引号里面

案例：弹出网页警示框

内容：

为了美观，可以使用空格对齐不同行的单元格，并在左右两侧都使用 | 来标记单元格边界，在表头下方的分隔线标记中加入 :

即可标记下方单元格内容的对齐方式。

代码：

alert('\t为了美观，可以使用空格对齐不同行的单元格，并在左右两侧都使用|来标记单元格边界，在表头下方的分隔线标记中加入:\n即可标记下方单元格内容的对齐方式。')

2.4.3字符串长度

length属性：

var str='my name is tom.';//输出字符串长度

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

2.4.4字符串拼接

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

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

console.log('沙漠' + '骆驼');//沙漠骆驼

  `console.log('pink老师' + 18);`//pink老师18

console.log('pink'+ true);//pinktrue

console.log(12 + 18);//30

    `console.log('12' + 18);`//1218

console.log('hello' + ' '+'world');//hello world

注：+号口诀：数值相加，字符相连（只要有一个数值都是相连）

字符串加强

var age=18;//可变年龄

console.log('pink老师' +age+'岁');//pink老师18岁

变量和字符串相连的口诀：引引加加，删掉数字，变量加中间

案例：

内容：

弹出一个输入框，需要用户输入年龄，之后弹出一个警告框显示“您今年xx岁了”

代码：

var age = prompt('请输入您的年龄：')；//注意‘var age=’这个格式

alert('您今年'+age+'岁啦');

2.4.5布尔型

var flag=true;//flag boolean

var flag1=false;//flag1 boolean

console.log(flag+1);//true 参与加法运算当1来看

console.log(flag1+1);//false参与加法运算当0来看

2.4.6 undefined和Null

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

var str;

console.log(str);//输出undefined

var variable=undefined;

console.log(variable+'你好');//输出undefined你好

console.log(variable+1);//NaN undefined和数字相加 最后的结果是NaN

console.log(true+variable);//NaN

//null空值

var space=null;

console.log(space+'你好');//null你好

console.log(space+1);//1

3.获取检测变量的数据类型

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

typeof的使用：

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

案例：

var=prompt('请输入你的年龄')；

console.log(age);

console.log(typeof age);//string

//prompt取过来的值是字符型

3.2字面量

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

• 数字字面量：1、2、3

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

• 布尔字面量：true，false

4.数据类型转换

4.1什么是数据类型转换？

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

4.2转换为字符串

• 第三种更常用，利用+拼接字符串的方法，也称之为隐式转换

• toString()和String()使用方式不同

4.3转换为数字型（重点）

注：parse：对（句子或句子中的词）做语法分析

//1.parseInt整型

var age=prompt('请输入您的年龄')；//promt输出为字符型

console.log(parseInt(age));//转换为数字型，输出整型

console.log(parseInt('3.14'));//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');//3

• 注意Int、Float首字母大写

• parse解释：从语法上描述或分析

• 隐式转换指我们进行运算时，JS自动转换了数据类型

案例1：计算年龄

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

var year=prompt('请输入您的出生年月')；

var age=2022-year;

alert('您的年龄是'+age+'岁')；

案例2：简单加法器

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

var num1=prompt('请输入一个数字')；

var num2=prompt('请再输入一个数字')；

var sum=Number(num1)+Number(num2);//先转型

console.log('您的结果是'+sum);//再输出

4.4转换为布尔型

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

• 其余值都会被转换为true

console.log(Boolean(''));//false

console.log(Boolean(0));//false

console.log(Boolean(NaN));//false

console.log(Boolean(undefined));//false

console.log(Boolean('小白'))；//true

console.log(Boolean(12));//true

课后作业：

1、交换两个变量的顺序

var a=1;

var b=2;

var c=b;

b=a;

a=c;

2、输入姓名、年龄、性别，并打印在一起输出

var name = prompt('请输入您的姓名');

var age = prompt('请输入您的年龄');

var sex = prompt('请输入您的性别');

alert('您的姓名是' + name + '\n' + '您的年龄是' +Number(age) + '岁' + '\n' + '您的性别是' + sex);