JS的数据类型及运算

一、数据类型

输出数字不需要加引号，但是输出一段话就需要加引号，也就是说，数据有时候不需要加引号，但有时候就需要加引号，这是因为数据的类型不一致造成的。

js中可以输出数字，输出一段带引号的话，还可以输出哪些数据？

数字、带引号的数据、没有赋值的变量、true、false、[]数据、{}数据、null

根据他们的用途和特性，可以将数据分为以下几类：

类型	示例	备注
数字型（number）	1 -2 3.14 300	包括整数、小数、负数
字符串型（string）	"你好吗？" '今天嫁给我'	用引号引起来的任意多任意字符，单引号和双引号都行
布尔型（boolean）	true false	代表事物的两面性，真和假
未定义型（undefined）	var a	代表定义过未赋值的变量
对象（object）	null [1,2,3] {name:张三}	代表一个集合

使用typeof(被检测的内容)可以得出一个内容的类型。

console.log(typeof(-123456)); // 数字型
console.log(typeof("明天会更好")); // 字符串型
console.log(typeof(true)); // 布尔型
console.log(typeof(x)); // 布尔型
console.log(typeof([1,2,3])); // 对象
console.log(typeof({name:"张三",age:12})); // 对象
console.log(typeof(null)); // 对象

结果如下图：

类型检测示意图

 多学一招：typeof(x) 可以写成 typeof x 。使用小括号和空格都可以。

二、数字类型

在结果中可以看到使用number来代表数字类型

1.不同进制的数字

我们一般使用使用的数字是十进制的，但是在js中我们还可以使用八进制和十六进制。

var a = 010; // 8进制
var b = 0xA; // 16进制
var c = 0xb; // 小写字母和大写字母都可以
console.log(a); // 8
console.log(b); // 10
console.log(c); // 11

结果：

示意图

 2.科学计数法

数字的表达当中，有一种叫科学记数法，js中的数字也可以使用科学记数法来表示

//当一次数字很大的时候，可以用科学计数法来表示
var num = 3e+5;  //3乘以10的5次方
var num = 5e-3;//5乘以10的-3次方

3.数值范围

内存大和小有什么区别呢？存储的数据多和少的区别。那计算机存储数据是没有限制的吗？不是，计算机能表达的数字也有极限值：

最小值：Number.MIN_VALUE，这个值为： 5e-324
最大值：Number.MAX_VALUE，这个值为： 1.7976931348623157e+308
无穷大：Infinity    1/0
无穷小：-Infinity

4.NAN

NaN

var a = "abc";
var b = 2;
var c = a - b;
console.log(c); // NaN

结果：

示意图

 NaN: not a number, 表示一个非数字

在js中，NaN用来表示一个非数字的特殊值，当发现无法进行运算时，js不会报错，而是会返回一个NaN

NaN的注意事项：

• NaN的类型是number类型的，表示一个非数字

• NaN不等于任何值，包括NaN本身

• 通过isNaN()可以判断是否是一个数字，返回false的时候，表示是一个数字。

var a = 123;
var b = "abc";
console.log(isNaN(a)); // false
console.log(isNaN(b)); // true

结果：

示意图

5.小数

计算机中的小数在进行运算的时候，有时会碰到小数点精度不准确的现象

//在进行浮点数运算的时候，可能会出现精度丢失的问题
0.1 + 0.2 = 0.30000000000000004;
0.2 + 0.2 = 0.4;

原因：

计算机内部所能识别的数据只有二进制，当我们进行10进制数字运算的时候，在计算机内部需要先将数据转为2进制，然后运算，再将结果转为10进制给出来。10进制的小数进行2进制转换的时候，根据转换规则，有些小数会进行无限死循环，最终在后面数字太多的时候只能四舍五入，所以其实最终并没有很精确的转为2进制，所以只能给出一个大概的值。有时候会有两个大概的值相加，在转换10进制的时候正好能转换了，也会计算的比较精准。

consoloe.log(0.2 + 0.2) // 0.4

也不绝对，如果小数是2的n次方分支m的话，计算机内部存储的就比较准确。

console.log(0.125 + 0.5) // 0.625

解决办法：

// 解决办法 : 
// 1.根据小数点后面的位数量 乘以对应的整数;
0.1 + 0.2  ==> (0.1*10+0.2*10) / 10 = 0.3
// 2.使用toFixed工具强制保留小数点后位数
var a = 0.1 + 0.2
console.log(a.toFixed(3)) // 0.300

三、字符串类型

字符串所使用的引号，在js中，单引号和双引号是没有区别的，使用哪个都一样。

字符串中的字符是任意字符，即只要在键盘上能输入的字符都是可以的。

单引号和双引号也是字符串的字符：

var str = '"' // 一个双引号字符的字符串
var str1 = "'" // 一个单引号字符的字符串

但是双引号中不能包含双引号，单引号中不能包含双引号，因为引号对于字符串来讲是有特殊含义的，就是给字符串做边界，双引号定义的字符串，在字符串中碰到第一个双引号，就认为将前面的双引号结束了，单引号同理。

但在某些特殊情况下，双引号就需要嵌套双引号，单引号就需要嵌套单引号：

var str = '爷爷正在的给孙子讲<<西游记>>的故事，爷爷说:"唐僧害怕被孙悟空打死，所以对孙悟空说:'你回花果山吧'"';
console.log(str)

这个字符串在输出的时候是会报错的，因为，浏览器是这样解析这个字符串：

'爷爷正在的给孙子讲<<西游记>>的故事，爷爷说:"唐僧害怕被孙悟空打死，所以对孙悟空说:'    你回花果山吧   '"';

中间的汉字和两边的字符串之间并没有拼接，不符合js的语法，所以报错。

此时，关键的原因就是单引号字符串中碰到了第一个单引号，就将前面的单引号结束了，因为引号对于字符串是有特殊含义的。

解决方案：

给字符串中的引号转义，也就是将引号对于字符串的特殊含义去掉，就剩下普通字符的含义即可。转义是给引号前加反引号\。

var str = '爷爷正在的给孙子讲<<西游记>>的故事，爷爷说:"唐僧害怕被孙悟空打死，所以对孙悟空说:\'你回花果山吧\'"';
console.log(str)

字符串的拼接

用变量代替每一次的输出：

var a = '<i>';
var b = '文字倾斜';
var c = '</i>';
document.write(a)
document.write(b)
document.write(c)

如果我们在此时希望能一次输出的话，就需要将多个变量连接在一起，组成一个更大的字符串才行，字符串之间的连接使用拼接符：+

var a = '<i>';
var b = '文字倾斜';
var c = '</i>';
document.write(a + b + c)

也就是说，字符串和字符串之间的 + 是可以将两个字符串连接在一起组成大字符串的。

四、对象类型

object类型，在js中有3种表现形式，分别是：

• null

• 用[]定义的数据

• 用{}定义的数据

五、undefined类型

当一个变量定义好了，但是没有给这个变量赋值，也就是没有给这个容器中放入数据，这个变量的默认值就是undefined，类型也是undefined。

六、运算符

1.算术运算

运算符	示例	备注
+（求和）	var a = 1; var b = 2; var c = a + b;	数学中的加法
-（求差）	var a = 2; var b = 1; var c = a - b;	数学中的减法
*（求积）	var a = 1; var b = 2; var c = a * b;	数学中的乘法
/（求商）	var a = 1; var b = 2; var c = a / b;	数学中的除法
%（求余）	var a = 5; var b = 2; var c = a % b;	数学中的求余数

求余运算，通常用于判断一个数字是奇数或偶数。因为所有奇数对2求余的结果都是1，所有偶数对2求余的结果都是0。

2.关系运算（比较运算）

运算符	描述
>	大于
>=	大于等于
<	小于
<=	小于等于
==	等于（主要用于判断两边的值是否相等）
===	全等于（先判断两边的类型是否相等，类型相等再判断值是否相等）
!=	不等于，等于的反义词，等于为false的时候，不等于就为true
!==	不全等，全等的反义词，全等为false的时候，不全等就为true

关系运算最后的结果只有两种，一种是真，一种是假，也就是布尔型的true和false

console.log(2>3); // false

var a = 2>1;

console.log(a); // true

结果

运行结果

 等于和全等于

var a = 123;
var b = "123";
console.log(a==b); // true
console.log(a===b); // false

结果

运行结果

 引号只能代表数据的类型不同，字符串在内存中存储的时候不会将引号存进去的，所以字符串在内存中的真是存储其实是不带引号的，所以a变量和b变量在内存中存的内容也一样，所以是相等的

但类型不一样，所以不全等。

3.赋值运算

符号	描述	示例
+=	自己先加后，再赋值给自己	var a = 1; a += 2; 相当于a先加2，结果赋值给a
-=	自己先减后，再赋值自己	var a = 1; a -= 1; 相当于a先减1，结果赋值给a
*=	自己先乘后，再赋值自己	var a = 1; a *= 3; 相当于a先乘3，结果赋值给a
/=	自己先除后，再赋值自己	var a = 4; a /= 2; 相当于a先除2，结果赋值给a
%=	自己先余后，再赋值自己	var a = 5; a %= 2; 相当于a先余2，结果赋值给a

代码：

var a = 1;
a += 2; // 将a先加2，得到结果3，再将3赋值给a
console.log(a); // 3

要理解上面的代码，首先理解给变量重新赋值。

var a = 1; // 先声明，给a赋值为1
a = 3; // 给变量a重新赋值为3
console.log(a); // 3

然后理解自己运算后再赋值给自己（回想一下：赋值符左边是变量，右边是值）

var a = 1;
a = a + 2; // 自己加2后再赋值给自己
console.log(a); // 3

练习：最后的a变量是多少？

var a = 5;
a %= 3;
console.log(a); // 2

4.逻辑运算

逻辑运算一般用于判断多个关系运算，得出最后结果。

运算符	描述
&&（与，并且）	左右两边都为true，最后结果才为true，否则就是false
||（或者）	左右两边只要有一个true，最后结果就为true，否则就是false
！（非，取反）	将true处理为false，将false处理为true

逻辑运算最后得出的结果也是布尔型。

例题：

模特的要求：年龄在18岁以上，30岁以下。小红今年20岁，看看小红是否满足条件。

var age = 20; // 小红的年龄
var result = age > 18 && age < 30;
console.log(result); // true    说明小红满足条件了

如果小红今年31岁呢？

var age = 20; // 小红的年龄
var result = age > 18 && age < 30;
console.log(result); // false    说明小红不满足条件

小红嫁人：小红想嫁给小明。小明说：除非你身高160cm以上，或者你有50000元的嫁妆。小红身高155cm，做模特攒了100000元。看看小红是否满足小明的条件。

var height = 155; // 小红的身高
var money = 100000; // 小红的钱
var result = height > 160 || money > 50000;
console.log(result); // true 说明小红满足了小明的条件

如果小红只攒了30000元呢？

var height = 155; // 小红的身高
var money = 30000; // 小红的钱
var result = height > 160 || money > 50000;
console.log(result); // false 说明小红不满足小明的条件

双重否定等于肯定。

年龄小于18或年龄大于30都不满足小红嫁人的条件。

var age = 20; // 小红的年龄
var result = !(age < 18 || age > 30); // 不满足条件，再取反就满足了
console.log(result); // true   说明这种表达方式也是可以的

小红身高小于160cm，并且钱财小于50000元，就不满足小明的条件。

var height = 155; // 小红的身高
var money = 100000; // 小红的钱财
var result = !(height < 160 && money < 50000); // 不满足条件再取反表达满足
console.log(result); // true 说明小红还是满足条件的

5.自增自减运算

符号：++ 表示让一个数字递增1

var a = 1;
a++
console.log(a); // 2

++可以放在后面，也可以放到前面，表示的意思是一样的

var a = 1;
++a;
console.log(a); // 2

当递增运算碰到赋值或者输出的时候，++放在前面和后就有了区别：

放在后面

var a = 1;
console.log(a++); // 1
console.log(a); // 2
var b = 1;
var c = b++;
console.log(c); // 1
console.log(b); // 2

当++放在后面的时候，就最后进行递增运算，先进行输出或者赋值。

放在前面

var a = 1;
console.log(++a); // 2
console.log(a); // 2
var b = 1;
var c = ++b;
console.log(c); // 2
console.log(b); // 2

当++放在前面的时候，就先进行递增运算， 后进行输出或赋值。

符号：-- 表示让一个数字递减1

使用方法和注意事项与递增一样。

递增递减运算需要使用变量，不能使用具体数字