数据类型转换

下面我们一起来做一个加法计算器，让用户输入两个数，然后计算这两个数的和。代码如下：

let num1 = prompt("请输入第一个数：");
let num2 = prompt("请输入第二个数：");

let sum = num1 + num2;

console.log(num1, num2, sum);

程序运行起来后，分别输入1和2，打印的结果为：1 2 12。

我们期望的值是3，但是当前计算的结果是12。如果你仔细观察的话会发现，打印的数据类型是字符串。

也就是我们通过 prompt 获取用户输入的内容始终是字符串类型，而我们期望的是数值类型。所以此时我们需要把用户输入的字符串类型的数值，转换成数值类型，再进行数学运算。这就是我们为什么要进行数据类型转换的原因。

转换成数值类型

• Number()

• Number() 可以把任意值转换成数值类型，如果要转换的字符串中有一个不是数值的字符，返回 NaN

let res0 = Number('1a3');
console.log(res0); // 输出 NaN,NaN 就是 not a  number 的缩写，表示某个结果不是一个数字
console.log(typeof res0); // 输出 number

let res1 = Number('123');
console.log(res1); // 输出数字123
console.log(typeof res1); // 输出 number

let res2 = Number(true);
console.log(res2);// 输出 1
console.log(typeof res2); // 输出number

let res3 = Number(null);
console.log(res3); // 输出0
console.log(typeof res3); // 输出number

let res4 = Number(undefined);
console.log(res4); // 输出 NaN, NaN 就是 not a  number 的缩写，表示某个结果不是一个数字
console.log(typeof res4); // 输出 number

• parseInt()

• parseInt这个方法用于将字符串转换成整数
• 它内部会从前往后解析数据，如果开头是数字一直往后找直到遇到非数字部分为止，返回前面的数字部分

• 如果首字符不为数字直接返回 NaN

let res1 = parseInt('123');
console.log(res1); // 输出 123 
console.log(typeof res1); // 输出number

let res2 = parseInt('12a');
console.log(res2);// 输出 12
console.log(typeof res2);// 输出number

let res3 =parseInt('a123');
console.log(res3); // 输出 NaN
console.log(typeof res3); // 输出number

• parseFloat()

• parseFloat()把字符串转换成浮点数
• parseFloat()和parseInt非常相似，不同之处在与 parseFloat 会解析第一个. 遇到第二个.或者非数字结束

• 如果解析的内容里只有整数，解析成整数

let res1 = parseInt('123.123');
console.log(res1); // 输出 123.123
console.log(typeof res1); // 输出number

let res2 = parseInt('12.12a');
console.log(res2);// 输出 12.12
console.log(typeof res2);// 输出number

let res3 =parseInt('a12.3');
console.log(res3); // 输出 NaN
console.log(typeof res3); // 输出number

• +，-0 等运算(隐式类型转换)

let str = '500';
console.log(+str);		// 取正
console.log(-str);		// 取负
console.log(str - 0);

转换成字符串类型

• toString()

let res1 = (123).toString();
console.log(res1); // 输出字符串123
console.log(typeof res1); // 输出string

let res2 = true.toString();
console.log(res2); // 输出字符串true
console.log(typeof res2); // 输出string

let res3 = undefined.toString();
console.log(res3); // 报错：Cannot read property 'toString' of undefined

let res4 = null.toString();
console.log(res4); //报错： Cannot read property 'toString' of null

注意： undefined和null不能使用这个方式变成字符串

• String()

• String()函数存在的意义：有些值没有 toString()，这个时候可以使用 String()。比如：undefined 和 null

var res1 = String(123);
console.log(res1);  // 输出字符串的 123
console.log(typeof res1); // 输出 string

var res2 = String(true);
console.log(res2); // 输出字符串的 true
console.log(typeof res2); // 输出 string

var res3 = String(undefined);
console.log(res3); // 输出 字符串 undefined
console.log(typeof res3);// 输出 string

var res4 = String(null);
console.log(res4); // 输出 字符串null
console.log(typeof res4); // 输出 string

• 拼接字符串方式()

• num + ""，当 + 两边一个操作符是字符串类型，一个操作符是其它类型的时候，会先把其它类型转换成字符串(隐式类型转换)再进行字符串拼接，返回字符串

转换成布尔类型

• Boolean() 这个方法用于将其它类型转换成布尔类型

var res1 = Boolean(123);
console.log(res1);// 输出true
console.log(typeof res1); // 输出 boolean

var res2 = Boolean('abc');
console.log(res2);// 输出true
console.log(typeof res2); // 输出 boolean

var res3 = Boolean(undefined);
console.log(res3);// 输出false
console.log(typeof res3); // 输出 boolean

var res4 = Boolean(null);
console.log(res4);// 输出true
console.log(typeof res4); // 输出 boolean

• 重点：

• 0、''(空字符串)、null、undefined、NaN、false 会转换成 false，其它值都会转换成 true。

运算符

JavaScript 中提供了很多运算符，方便我们进行各种运算，例如：

• 算数运算符
• 比较运算符

• 逻辑运算符
• 赋值运算符

运算符又称为操作符 (operator)，例如我们在数学中写的算式：5 + 6，在我们的程序中可以直接运行。

5 + 6 由操作数和操作符组成，在程序中我们称为表达式。

表达式执行完成后一定会有一个返回结果。

算数运算符

+ - * / %  

自增操作符、自减操作符

++自增操作符的作用是让一个数字在原来的基础上自增

var a = 10;
a++;
console.log(a);// 输出11
// a++ 的过程相当于 a = a + 1

但是自增和自减操作符是可以写在数据前面和后面的

var a = 10;
++a;
console.log(a); // 输出11

两者的区别在于运算顺序不同

a++ : 参与运算的时候，会先用原来的值先运算，再自增

++a: 参与运算的时候，会先在原来的基础上自增，再使用新的值参与运算

var a = 10;
var b = a++ + 10; // 运算的时候，使用a的原来值10参与加法运算，10+10赋值给b之后，再实现a的自增
console.log(b); // 输出20
console.log(a); // 输出 11

var c = 10;
var d = ++a + 10; // 运算的时候，先执行a的自增，再使用a自增后的值11和10相加，最终结果是 11 + 10
console.log(d); // 输出21
console.log(c); // 输出11

这个自增操作符会在我们后面学习循环语法的时候使用

--操作符的作用是让一个数据自减

var a = 10;
a--;
console.log(a);// 输出9
// a-- 相当于 a = a - 1

自减操作也可以放在数据的前面和后面，运算规则和++是一样的

比较操作符

比较操作符的就是比较两个数据，操作符号有

>  <  >=  <=

这几个符号的作用和数字中学习的比较是一样的，就是比较两个数字的大小，运算结果是 布尔 类型

console.log( 4 > 5); // 输出false
console.log( 4 < 5); // 输出 true

还有两类的操作符

== 	 !=
===  !==

== 和 === 是用来比较两个数据是否相等的

let res1 = '123' == 123;
let res2 = '123' === 123;
console.log(res1); // true
console.log(res2); // false

两者的区别在于

== 会进行隐式类型转换，先把字符串转换成数值类型，再进行比较。

=== 不会进行隐士类型转换。相当于不仅比较两个数据的值，还比较数据的类型

!= 和!== 类似 != 先进行隐士类型转，!== 不会进行类型转换

var res1 = '4' != 4;
var res2 = '4' !== 4;
console.log(res1); // 输出 false ,比较两个数据的值是否不相等, 此时两个数据的 值 都 4 ，相等，结果是 false
console.log(res2); // 输出 true ，比较两个数据的类型和值是否不相等，此时两个数据的类型不相等，结果是 true

为了程序的严谨，我们建议使用 === 和 !==

逻辑操作符

逻辑运算符的主要作用是连接多个条件，我们要掌握的比较运算符有

&&  ||  ！

&& 用在需要多个条件同时成立的时候

// 用户在登录的时候要用户名和密码同时正确才能登录
var userName = prompt('请输入用户名');
var password = prompt('请输出密码');
console.log(userName === 'admin' && password === '123456');
// 只有 && 两边的 结果都是 true ，最终结果才是 true

|| 用在只需要任意条件成立的时候

// 只要年龄小5岁或者身高小于120cm就可以免费乘坐
var age = parseInt(prompt('请输入你的年龄'));
var height = parseFloat(prompt('请输入你的身高'));
console.log(age < 5 || height < 120);
// 只要 || 两边的结果有一个是true，最终结果就是true

! 用于颠倒是非的时候

var res = true;
console.log(!res);
// 这里暂时用不到，在后面做具体效果的时候都用，那个时候我们再学习具体的使用

• && 与 两个操作数同时为true，结果为true，否则都是false
• || 或 两个操作数有一个为true，结果为true，否则为false

• ! 非 取反

赋值操作符

要掌握的赋值操作符有两个大类

=
+=  -=  *=  /=  %=

= 的作用就是把右边的结果赋值(存储)给左边的变量之类的容器

var a = 10 + 10; //把　１０＋１０的结果存储到　ａ　这个变量里面

+= 的作用是简写加法

var a = 10;
a += 2; // 相当于是 a = a + 2; 就是一个简写的语法
console.log(a); // 输出12

-= *= /= %= 除了运算规则不同，作用是一样的，都是简写

运算符优先级

观察代码

var res = 5 + 2 * 3;
console.log(res); // 11

在上述代码中，执行过程是先计算 2*3 再和 5 相加的。在js中的操作符很多，我们要认识到它们之间是有计算的优先顺序的，这个优先顺序我们称为优先级

记忆一下下面的计算优先级

1. 第一优先级： () [] .
2. 第二优先级： ++ -- !
3. 第三优先级： *  /  %
4. 第四优先级： +  -
5. 第五优先级： >   >=   <   <=
6. 第六优先级： ==   !=    ===    !==  
7. 第七优先级： &&
8. 第八优先级： || 
9. 第九优先级： = += -= *= /= %=

上面是具体的优先级，但是平时我们不会把很多的操作符放在一起运算，所以我们大致记住

1. 括号先算
2. 其次算算术

3. 再次算比较
4. 然后算逻辑

5. 最后算赋值

使用多了，熟练了，规则就记住了