js数据类型

---

一、数据类型简介

1.为什么需要数据类型

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

简单来说，数据类型就是数据的类别型号。比如姓名“张三”，年龄18，这些数据的类型是不一样的。

2.变量的数据类型

变量值是用来存储值的所在处，它们有名字和数据类型。变量的数据类型决定了如何将代表这些值的位存储到计算机的内存中。

JavaScript是一种弱类型或者说动态语言。这意味中不用提前声明变量的类型，在程序运行过程中，类型会被自动确定。

var age = 10;//这是一个数字型
var areYouOk = '是的';//这是一个字符串

在代码运行时，变量的数据类型是由JS引擎根据 = 右边变量值的数据类型来判断的，运行完毕后，变量就确定了数据类型。

JavaScript拥有动态类型，同时也意味着相同的变量可用作不同的类型：

var x = 6;//x为数字
var x = 'wy';//x为字符串

3.数据类型的分类

JS把数据类型分为两类：

• 简单数据类型（number，string，Boolean，undefined，null）
• 复杂数据类型（object）

二、简单数据类型

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

JavaScript中的简单数据类型及其说明如下：

简单数据类型	说明	默认值
Number	数字型，包括整型值和浮点型值，如10、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 = 23;//整数
var Age = 23.4567;//小数

(1)数字型进制

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

// 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 #ffffff 数字的前面加 0x 表示十六进制
var num3 = 0x9;
console.log(num3);//9
var num4 = 0xa;
console.log(num4);//10

在js八进制前面加0，十六进制前面加0x。

(2)数字型范围

JavaScript中数值的最大和最小值

// 3.数字型的最大值
console.log(Number.MAX_VALUE);//1.7976931348623157e+308
// 4.数字型的最小值
console.log(Number.MIN_VALUE);//5e-324

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

(3)数字型三个特殊值

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

• infinity，代表无穷大，大于任何数值；
• -infinity，代表无穷小，小于任何数值；
• NaN，not a number,代表一个非数值。

// 5.无穷大
console.log(Number.MAX_VALUE * 2); //infinity 无穷大
// 6.无穷小
console.log(-Number.MAX_VALUE * 2); //-infinity 无穷小
// 7.非数字
console.log('wangyi' - 23); // NaN

(4）isNaN()

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

//isNaN() 这个方法用来判断非数字 并且返回一个值 如果是数字返回的是false，如果不是数字返回的是true。
console.log(isNaN(12));//false
console.log(isNaN('wangyi'));//true

3.字符串型string

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

var strMsg = "余华";//使用双引号表示字符串
var strMsg2 = '在细雨中呼喊';//使用单引号表示字符串
//常见错误
var strMsg3 = 许三观卖血记;//报错，没使用引号，会被认为是js代码，但js没有这种语法

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

(1)字符串引号嵌套

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

var strMsg4 = '余华的作品"在细雨中呼喊"';//可以用 ' '包含 ""
var strMsg5 = "余华的作品'许三观卖血记'";//也可以用 ""包含 ''
//常见错误
var strMsg6 = '西游记";//报错，不能使用单双引号搭配

(2)字符串转义符

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

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

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

(3)案例：弹出网页警示框

我一次次和睡眠搏斗,它强有力的手使劲要把我拉进去,我拼命抵抗。我害怕像陌生男人那样,一旦睡着了就永远不再醒来。可是最后我总是疲惫不堪,无可奈何地掉入了睡眠的宁静之中。当我日清晨醒来时,发现自己还活着,看着阳光。

alert('我一次次和睡眠搏斗,它强有力的手使劲要把我拉进去,我拼命抵抗。\n我害怕像陌生男人那样,一旦睡着了就永远不再醒来。\n可是最后我总是疲惫不堪,无可奈何地掉入了睡眠的宁静之中。\n当我日清晨醒来时,发现自己还活着,看着阳光。');

(4)字符串长度

字符串是由若干字符组成的，这些字符的数量就是字符串的长度。通过字符串的length可以获取整个字符串的长度。

// 1.检测获取字符串的长度 length 
var str = 'my name is wangyi';
console.log(str.length);//17

(5)字符串拼接

• 多个字符串之间可以使用+进行拼接，其拼接方式为字符串+任何类型=拼接之后的新字符串
• 拼接前会把与字符串相加的任何类型转成字符串，再拼接成一个新的字符串

// 1.1字符串的拼接 '相加'
console.log('王祎' + '漂亮'); //字符串的 王祎漂亮
console.log('wangyi' + 23); //wangyi23
console.log('wangyi' + true); //wangyitrue
console.log(12 + 12); //24
// 1.2数值字符串相加
console.log('12' + '12'); //1212
// 1.3数字字符串+数字字符串
console.log('12' + 23);//1223

+号总结口诀：数值相加，字符相连

(6)字符串拼接加强

console.log('wangyi永远' + 18); //wangyi永远18，只要有字符就会相连
console.log('王祎永远' + 18 + '岁'); //王祎永远18岁
var age = 18;
// 变量不要写到字符串里面，是通过和字符串相连的方式实现的
console.log('王祎永远age岁');//这样不行
console.log('王祎永远' + age + '岁');//王祎永远18岁
// 变量和字符串相连的口诀：引引加加
console.log('wangyi永远' + 18 + '岁');

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

(7)案例：显示年龄

弹出一个输入框，需要用户输入年龄，之后弹出一个警示框显示“您今年xx岁啦”（xx表示刚才输入的年龄）

①案例分析

利用js编写的一个非常简单是交互效果程序。
交互编程的三个基本要素：

1. 你喜欢我吗？→这是用户输入
2. 女孩想了想→这是程序内部处理
3. 最后给了你一巴掌→这是输出结果

那么再程序中要如何实现呢？

1. 弹出一个输入框（prompt），让用户输入年龄（用户输入）
2. 把用户输入的值用变量保存起来，把刚才输入的年龄与所要输出的字符串拼接（程序内部处理）
3. 使用alert语句弹出警示框（输出结果）

②代码展示

// 1. 弹出一个输入框（prompt），让用户输入年龄（用户输入）
// 2.把用户输入的值用变量保存起来，把刚才输入的年龄与索要输出的字符串进行拼接（程序内部处理）
// 3.使用alert语句弹出警示框（输出结果）
var age = prompt('请输入您的年龄');
var str = '您今年已经' + age + '岁了';
alert(str);

4.布尔型Boolean

布尔类型有两个值：true和false，其中true表示真（对），而false表示假（错）。

布尔型和数字型相加的时候，true的值为1，false的值为0。

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

5.Undefined和Null

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

// 如果一个变量声明未赋值，就是undefined 未定义数据类型
var str;
console.log(str);
var variable = undefined;
console.log(variable + 'wangyi'); //undefinedwangyi
console.log(variable + 1); //NaN undefined 和数字相加 最后的结果是NaN,非数值

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

// null空值
var space = null;
console.log(space + 'wangyi'); //nullwangyi
console.log(space + 1);//1

三、获取数据变量类型

1.获取数据变量类型

typeof

var num = 10;
console.log(typeof num); //number
var str = 'wangyi';
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 age = prompt('请输入您的年龄');
console.log(age);
console.log(typeof age);//string

2.字面量

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

• 数字字面量：8，9，10
• 字符长字面量：‘wangyi’ ，“字面量”
• 布尔字面量：true，false

四、数据类型转换

1.什么是数据类型转换

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

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

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

2.转换为字符串

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

// 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 + '');

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

3.转换为数字型⭐

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

// 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)); //123
console.log(Number('12')); //12
// 4.利用了算数运算- * /隐式转换
console.log('12' - 0); //12
console.log('123' - '120'); //3
console.log('123' * '3'); //369

• 注意parseInt()和parseFloat()单词的大小写，重点
• 隐式转换是我们进行算数运算的时候，js自动转换了数据类型

4.案例1：计算年龄

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

(1) 案例分析

1. 弹出一个输出框（prompt），让用户输入出生年份（用户输入）
2. 把用户输入的值用变量保存起来，然后用今年的年份减去变量值，结果就是现在的年龄（程序内部处理）
3. 弹出警示框（alert），把计算的结果输出（输出结果）

(2)代码展示

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

5.案例2：简单加法器

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

(1)案例分析

1. 先弹出第一个输入框，提示用户输入第一个值，保存起来
2. 再弹出第二个框，提示用户输入第二个值保存起来
3. 把这两个值相加，并将结果赋值给新的变量（注意数据类型转换）
4. 弹出警示框（alert），把计算结果输出（输出结果）

(2)代码展示

// 1. 先弹出第一个输入框，提示用户输入第一个值，保存起来
// 2. 再弹出第二个框，提示用户输入第二个值保存起来
// 3. 把这两个值相加，并将结果赋值给新的变量（注意数据类型转换）
// 4. 弹出警示框（alert），把计算结果输出（输出结果）
var num1 = prompt('请您输入第一个值：');
var num2 = prompt('请您输入第二个值：');
var result = parseFloat(num1) + parseFloat(num2);
alert('您的结果是：' + result);

6.转换为布尔型

方式	说明	案例
Boolean()函数	其他类型转成布尔型	Boolean(‘true’);

• 代表空、否定的值会被转行为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(Boolean('123')); //true
console.log(Boolean(123)); //true
console.log(Boolean('wangyi')); //true

五、解释型语言和编译型语言

1.概述

计算机不能直接理解任何除机器语言以外的语言，所以必须把程序员缩写的程序语言翻译成机器语言才能执行程序。程序语言翻译成机器语言的工具，被称为翻译器。

• 翻译器翻译的方式有两种：一个是编译，一个是解释。两种方式之间的区别在于翻译的时间点不同
• 编译器实在代码执行之前纪念性编译，生成中间代码文件
• 解释器实在运行时进行及时解释，并立即执行（当编译器以解释方式运行的时候，也称之为解释器）

2.执行过程

类似于请客吃饭：

• 编译语言：首先把所有菜做好，才能上桌吃饭
• 解释语言：好比吃火锅 ，边吃边涮，同时进行

六、标识符、关键字、保留字

1.标识符

标识符：就是指开发人员为变量、属性、函数、参数取的名字。
标识符不能时关键字或保留字。

2.关键字

关键字：是指js本身已经使用了的字，不能再把它们充当变量名、方法名

包括：break，case，catch，continue，default，delete，do，else，finally，for，function，if，in，instanceof，new，return，switch，this，throw，try，typeof，var,void,while，with等

3.保留字

保留字：实际上就是预留的"关键字"，意思是现在虽然还不是关键字，但是未来可能会成为关键字，同样不能使它们当变量名或方法名。

包括：Boolean，byte，char，class，const，debugger，double，enum，export，extends，fimal，float，goto，implements，import，int，interface，long，mative，package，private，protected，public，short，static，super，synchronized，throws，transient，volatile等