操作符与数据类型转换
上一期堡堡给大家讲解了关于JS的基础语法，虽然是一些非常基础的知识，但是它对大家的后期学习奠定了一定的基础。知识像一张网，基础越扎实，网住的鱼就越多，要告诉大家的是平时一定要夯实基础。如果想了解具体的JS的基础语法，可以回复“JS基础”到“HTML5学堂”公众号。而今天我们还是继续来接触JS的基础 - 操作符与数据类型转换。
上一期中我们学习了JavaScript是什么，如何将JavaScript代码书写在HTML当中；讲到了如何进行错误的查找和内容的调试；也提到了变量与常量，关于var的相关知识，并且讲到了JavaScript的基本数据类型。那么在今天这节课当中，我们将继续讲解JavaScript关于计算方面的知识，这些知识也是支撑我们JS实现特效的基本前提~
本文内容概要：
1 操作符
2 操作符的应用
3 数据类型转换方法
4 课程小结
5 课后练习
1 操作符
在编写JavaScript代码时，为了实现相应的页面交互功能（比如：实现两数的求和功能等），我们会声明一定的变量或常量，然后对这些变量/常量进行相应的操作，就需要使用JS的操作符了。
操作符是什么
为了更好的理解操作符，我们先来看一个数学表达式2 + x = 4，其中“ + ”和“ = ”就是传说中的操作符了，它主要用于操作数据。在JS语言里到底有哪些操作符以及如何使用这些操作符？接着往下看吧。
操作符的种类
在JS中有6种基本操作符，包括算术操作符、赋值操作符、关系操作符、条件操作符、逻辑操作符、一元操作符。
算术操作符：+(加) -(减) *(乘) /(除) %(取余)
下面实例讲解了如何使用这些算术操作符
实例：
<script type="text/javascript">
// 声明两个变量并赋值
var a = 1;
var b = -3;
// 加法操作
console.log(a + b);
// 减法操作
console.log(a - b);
// 乘法操作
console.log(a * b);
// 除法操作
console.log(a / b);
// 取余操作
console.log(a % b);
</script>输出结果：-2 4 -3 -0.333333333 1
有时候操作符运算出的结果不一定是你想要的结果，具体来看下面的实例
实例：
<script type="text/javascript">
// 声明两个变量并赋值
var a = 0.2;
var b = 0.4;
// 乘法操作
console.log(a * b);
</script>输出结果：0.08000000000000002
代码分析：正常来说，输出的结果是0.08，为何会出现么多的小数？原因在于JS进行浮点数值（有小数点的数值）计算会产生舍入误差的问题，导致运算的结果的小数部分无法正常精确。当然这个问题是可以解决的，下面的内容会讲解到。
Tips：%(求模/取余)就是计算两数相除最后的余数。两数相除会分为两种情况，一种是被除数能被除数整除的情况下，取余为0；另一种是被除数不能被除数整除，取余的结果为两数相除的余数。
来看一个简单的问题，利用JS实现-9 % 2和 9 % -2，那这两个的计算结果是多少？ 到底是-1还是1。来看实例的分析吧。
实例：
<script type="text/javascript">
// 声明两个变量并赋值
var a = -9;
var b = 2;
// 取余操作
console.log(a % b);
// a、b变量在上面已经声明过了，在这只需要把a和b的数值改成9和-2
a = 9;
b = -2;
console.log(a % b);
</script>输出结果：-1 和 1
代码分析：从输出结果中可以得出结论，余数的符号与被除数的符号是保持一致的。
赋值操作符：=(赋值)
=是简单的赋值操作符并不是数学中的等于，它的意思是把=右边的值赋值给=左边的变量，例如：var a = 'HTML5学堂';是把'HTML5学堂'赋值给变量a。
实例：
<script type="text/javascript">
// 定义三个变量，分别利用赋值操作符 = 给变量赋值
var tit = 'HTML5学堂';
var age = 1;
var describe = 'H5的原创分享平台';
// 输出变量的值
console.log(tit);
console.log(age);
console.log(describe);
</script>输出结果：HTML5学堂 1 H5的原创分享平台
关系操作符：>(大于) >=(大于等于) <(小于) <=(小于等于) ==(等于) ===(全等) !=(不相等)
关系操作符用于对两个值进行比较，比较的规则与我们在数学课上所学的是一样的。
注意：与数学课上不同的是，在JS中“=”代表的是赋值，“==”代表的是相等，“!=”代表不相等“≠”。
实例：
<script type="text/javascript">
// 实例中的命名只是为了大家方便理解，请勿模仿
var a = 1;
var b = 2;
var c = '1000';
var d = 1000;
console.log(a > b);
console.log(a >= b);
console.log(a < b);
console.log(a <= b);
console.log(c == d);
console.log(c === d);
console.log(a != b);
</script>输出结果：false false true true true false true
代码分析：
1 从输出的结果中分析，关系操作符返回的结果是布尔类型的值（true/false）；
2 等于（==）和全等（===），在==的情况下，只要值相同就可以返回true；如果在===的情况下，必须值和类型都完全匹配才返回true；
逻辑操作符：&&(与) ||(或) ！(非)
&&(与)逻辑，前后两个式子均返回真(true)才为真(true)；||(或)逻辑，前后两个式子有一个为真(true)就为真(true)；！(非)逻辑，对当前的布尔值求反。
实例：
<script type="text/javascript">
var num = 20;
// 问题1：判断num的值是否大于10并且小于30；
console.log(10 < num && num < 30);
// 问题2：判断num的值是否大于20或小于40；
console.log(20 < num || num < 40);
// 问题3：逻辑非
console.log(!(num < 5));
</script>输出结果：true true true
代码分析：
1 问题1中出现了“并且”的条件，意思是这两个条件都需要同时成立，所以这边我们采用了与操作符；只有当num符合大于10同时也符合num小于30时，与操作符返回的结果才为真（true）；
2 问题2中出现了“或”的条件，意思是这两个条件只需要成立一个，所以这边我们采用了或操作符；只有num符合大于20或符合小于40，或操作符返回的结果才为真（true）；
3 问题3中num < 5结果是false，逻辑非是对当前的布尔值求反，所以结果为true；
4 关系操作符的返回结果是布尔值类型，所以逻辑操作符的最终结果也是布尔值类型；
逻辑操作符还有一点比较特殊的，也是大家容易忽略的问题，具体看下面的实例。
实例：
<script type="text/javascript">
// 实例中的命名只是为了大家方便理解，请勿模仿
var num1 = 10;
// 表达式1
(num1 < 10) && (num1 = 30);
console.log(num1);
var num2 = 5;
// 表达式2
(num2 < 10) || (num2 = 30);
console.log(num2);
</script>输出结果：10 5
代码分析：
1 逻辑与和逻辑或属于短路操作：如果&&前面的表达式不成立，自动不执行后面的表达式；如果||前面的表达式成立，自动不执行后面的表达式；
2 表达式1中num1 < 10的结果为false（不成立），所以自动不执行num1 = 30，最终输出的结果为10；
3 表达式2中num2 < 10的结果为true（成立），所以自动不执行num2 = 30，最终输出的结果为5；
条件操作符：表达式1 ? 表达式2 : 表达式3
先进行表达式1的判断，如果表达式1成立（返回的值是true）就执行表达式2；如果表达式1不成立（返回的值是false）就执行表达式3；
实例：
<script type="text/javascript">
var num = 2;
var result;
// 问题：判断num是奇数还是偶数？
(num % 2 == 0) ? (result = '偶数') : (result = '奇数');
// 输出结果
console.log(result);
</script>输出结果：偶数
代码分析：num % 2结果为0，0 == 0的结果为true，所以执行result = '偶数'；如果把num的值改成3，结果将会是多少呢？自己动手试试吧~
操作符的优先级（从高到低）
操作符的优先级决定了表达式中运算执行的先后顺序，优先级高的操作符最先被执行；
逻辑非
前置递增和前置递减
算术操作符
关系操作符
逻辑与 逻辑或
条件操作符
赋值操作符
2 操作符练习与应用
1 实现闰年的判断，如果是闰年输出“闰年”，否则输出“平年”
闰年的条件：能被4整除同时不能被100整除，或者能被400整除
想了解参考答案的请发送“闰年”到公众号
2 判断一个数是否小于等于10，并且能被5整除又能被2整除，如果条件成立则输出“HTML5学堂”，否则输出”我还需要努力学习”
想了解参考答案的请发送“整除”到公众号
3 数据类型转换方法
不同数据之间的比较和计算
Undefined 值未定义
实例：
<script type="text/javascript">
// 声明变量但未赋值（undefined）
var a;
console.log(a);
console.log(a + 2);
console.log(a - 2);
console.log(a * 2);
console.log(a / 2);
console.log(a % 2);
console.log(a == undefined);
console.log(a === undefined);
</script>输出结果：undefined NaN NaN NaN NaN NaN true true
结论：
1 undefined进行任何数学运算，得到的均为NaN（Not a Number：不是一个数字）；
2 undefined等于undefined；
Null 空对象
实例：
<script type="text/javascript">
// 声明变量并赋值为null
var a = null;
console.log(a);
console.log(a + 2);
console.log(a - 2);
console.log(a * 2);
console.log(a / 2);
console.log(a % 2);
console.log(a == undefined);
console.log(a === undefined);
console.log(a == null);
</script>输出结果：null 2 -2 0 0 0 true false true
结论：
1 null进行数学运算时，会转换成数字0；
2 undefined等于null，但不全等于；
3 null等于null；
String 字符串
实例：
<script type="text/javascript">
// 实例中的命名只是为了大家方便理解，请勿模仿
// 单引号的字符串
var a = 'H5course';
// 双引号的字符串
var b = "H5course";
var c = '123';
console.log(a == b);
console.log(c == 123);
console.log(c === 123);
</script>输出结果：true true false
结论：
1 字符串可以用单引号与双引号表示，两者无差别；
2 数字与数字字符串相等，但是不全等；
Number 数字
实例：
<script type="text/javascript">
// 实例中的命名只是为了大家方便理解，请勿模仿
var a = NaN;
// typeof用于检测数据类型
console.log(typeof a);
// NaN的计算
console.log(a + 2);
console.log(a - 20);
console.log(a * 22);
console.log(a / 21);
console.log(a % 12);
console.log(a == NaN);
</script>输出结果：number NaN NaN NaN NaN NaN false
结论：
1 NaN（Not a Number）也是属于Number数据类型；
2 任何涉及NaN的操作都会返回NaN，NaN与任何值都不相等；
Boolean 布尔值：
实例：
<script type="text/javascript">
// 实例中的命名只是为了大家方便理解，请勿模仿
var a = true;
var b = false;
console.log(a + 2);
console.log(b + 2);
console.log(a * 2);
console.log(b * 2);
console.log(a / 2);
console.log(b / 2);
</script>输出结果：3 2 2 0 0.5 0
结论：
true进行数学运算时，会转换成数字1；false进行数学运算时，会转换成数字0；
Object 对象：
实例：
<script type="text/javascript">
// 实例中的命名只是为了大家方便理解，请勿模仿
var a = {};
var b = {};
console.log(a == b);
</script>输出结果：false
结论：
Object不等于Object；
检测基本数据类型的方法
实例：
<script type="text/javascript">
// 实例中的命名只是为了大家方便理解，请勿模仿
var a = 'h5course';
var b = 123;
var obj = {};
// 第一种写法（推荐使用这种）
console.log(typeof(a));
// 第二种写法
console.log(typeof a);
console.log(typeof(b));
console.log(typeof(obj));
console.log(typeof(typeof(obj)));
</script>输出结果：string string number object string
结论：
1 利用typeof();进行检测数据类型
2 typeof(typeof(obj)))结果为string中得出typeof()的返回值是字符串类型
数据类型转换
隐式转换：没有使用一些方法，而采用的是操作符以及数字、字符串特点进行转换；
显式转换 ：利用方法强制要求转换；
隐式转换方法：
数字——>字符串
分析：
1 +为加法操作符，符号两侧均为数字
2 +连字符，用于连接字符串与字符串、数字与字符串
<script type="text/javascript">
// 数字——>字符串
console.log(typeof(1 + ''));
console.log(typeof(1 + 1));
console.log(typeof('' + 1 ));
console.log(typeof("2" + "2"));
</script>输出结果：string number string string
字符串——>数字
分析：利用 / - * 操作符和数字的特点实现数据类型转换
<script type="text/javascript">
// 数字字符串——数字
var str = '123';
console.log(typeof str);
console.log(typeof(str / 1));
console.log(typeof(str - 0));
console.log(typeof(str * 1));
</script>输出结果：string number number number
额外知识
0除以0返回NaN，非0的正数除以0返回Infinity（正无穷），非0的负数除以0返回-Infinity（负无穷）
<script type="text/javascript">
var a = 0;
var b = 2;
console.log( 0 / 0);
console.log(20 / 0);
console.log(-30 / 0);
</script>输出结果：NaN Infinity -Infinity
显式转换方法：
数字——>字符串
toString()、toFixed()这2个函数分别可以把数值转换成字符串
toString()
<script type="text/javascript">
// 实例中的命名只是为了大家方便理解，请勿模仿
var num1 = 30;
var str1 = num1.toString();
console.log(typeof(str1));
console.log(str1);
</script>输出结果：string 30
代码分析：在JS中几乎每个值都有toString()方法，通过对象.方法的方式来进行调用；例如：num1.toString()这样就把数值转换成字符串了；
toFixed()——将数字舍入为指定小数位数的数字
因为toFixed()的返回值是字符串类型的数据，利用它的特点实现数据类型转换；
<script type="text/javascript">
// 实例中的命名只是为了大家方便理解，请勿模仿
var num1 = 21;
var str1 = num1.toFixed();
console.log(typeof(str1));
console.log(str1);
var num2 = 21.1;
var str2 = num2.toFixed(1);
console.log(typeof(str2));
console.log(str2);
</script>输出结果：string 21 string 21.1
代码分析：
1 在JS中几乎每个值都有toFixed()方法，通过对象.方法进行调用，利用它的返回值是字符串类型的特点实现数据类型转换；例如：num1.toFixed();
2 toFixed()存在一定的问题，当传入的值为0的时候，例如：var num = 0.6;num.toFixed(0);，在IE8-中0.5~0.94和-0.94~-0.5的范围不能够正确舍入，返回的结果都为0；
字符串——>数字
Number()、parseInt()、parseFloat()；这3个函数分别可以把非数值转换成数值
Number()函数
<script type="text/javascript">
// 实例中的命名只是为了大家方便理解，请勿模仿
var a = '123';
var b = 'h123';
var c = '1h23';
var d = '123h';
// 输出转换后的结果
console.log(Number(a));
console.log(Number(b));
console.log(Number(c));
console.log(Number(d));
// 检测转换后的数据类型
console.log(typeof(Number(a)));
console.log(typeof(Number(b)));
console.log(typeof(Number(c)));
console.log(typeof(Number(d)));
</script>输出结果：123 NaN NaN NaN 检测出来的数据类型都是number
代码分析：
1 Number()函数确实可以把非数值转换成数值，因为实例中检测出来的都是Number数据类型；
2 使用Number()函数转换数据类型时，如果被转换的字符串中包含了无法转换成数值，那么结果会返回NaN，所以“h123”、“1h23”、“123h”转换后的结果都为NaN；NaN也是属于Number数据类型的一种；
parseInt()函数——转换成整数
<script type="text/javascript">
// 实例中的命名只是为了大家方便理解，请勿模仿
var a = '123';
var b = 'h123';
var c = '1h23';
var d = '123h';
var e = '12 3h';
// 输出转换后的结果
console.log(parseInt(a));
console.log(parseInt(b));
console.log(parseInt(c));
console.log(parseInt(d));
console.log(parseInt(e));
// 检测转换后的数据类型
console.log(typeof(parseInt(a)));
console.log(typeof(parseInt(b)));
console.log(typeof(parseInt(c)));
console.log(typeof(parseInt(d)));
console.log(typeof(parseInt(e)));
</script>输出结果：123 NaN 1 123 12 检测出来的数据类型都是number
代码分析：
1 在parseInt()函数中，如果被转换的字符串中第一个字符不能转换为数字，那么会返回NaN，当遇到字符串中的空格/非数字会返回空格/非数字前面的数字；因此，“h123”返回的结果为NaN，“'12 3h”返回的结果为12；
2 parseInt()存在一定的问题，parseInt('070');在IE8-会按照8进制转换，输出56；在Chrome、FF等浏览器会按照10进制转换，输出70；该问题的解决办法，就是指定parseInt();函数的进制转换，修改成parseInt('070', 10);让它按照10进制进行转换，这样就能保证各浏览器都能兼容了；
parseFloat()函数——转换成浮点数值
<script type="text/javascript">
// 实例中的命名只是为了大家方便理解，请勿模仿
var a = '92.01.02';
var b = '92.01';
var c = '070';
var d = '0xA';
// 输出转换后的结果
console.log(parseFloat(a));
console.log(parseFloat(b));
console.log(parseFloat(c));
console.log(parseFloat(d));
</script>输出结果：92.01 92.01 70 0
代码分析：
1 parseFloat()函数中只识别被转换的字符串中的第一个小数点，不识别第二个小数点；因此，'92.01.02'转换后的结果为92.01；
2 parseFloat()和parseInt()函数的作用是相同的，都能把非数值转换成数值，不同的是parseFloat();只能解析10进制，没有第二个参数可以指定转换的进制；因此，这个0xA十六进制转换后结果为0；
选用原则
在项目开发中，HTML5学堂小编-堡堡极力推荐大家使用显式转换
4 课程小结
掌握JS操作符的目的是为了能够灵活的操作变量，以便完成JS的各种逻辑处理；掌握数据类型转换可以让我们避免一些不该发生的问题，能够让我们更好的完成JS的各种功能。总之，操作符和数据类型转换不要去死记硬背，而是掌握原理，灵活应用才是硬道理。
5 课后练习
1 给下面的操作符根据优先级排序（从高到低）
逻辑非 逻辑与 算数操作符 关系操作符 逻辑或 赋值操作符 条件操作符
2 操作符
console.log(0.2 * 0.1)
console.log( -5 % 2);
console.log((1 >= 0) && (2 != 1));
console.log((1 == 1) && (2 != 1));3 奇怪的逻辑或，逻辑与
var a = 2; var b = 3;
(a < b) && (a = 5) a=？
var a = 4; var b = 3;
(a < b) && (a = 5) a=？4 写出下面的运行结果
console.log(1 + "2");
console.log(1 / 0);
console.log(!true);
console.log(!!true);5 数据类型转换
console.log(Number('520meng'));
console.log(Number(true));
console.log(parseFloat('123 456'));
console.log(parseInt('11', 2));
console.log(parseInt(true));
var a = 0.854; console.log(a.toFixed(2));
console.log(typeof('5128' - 0));
console.log(typeof('5128' % 1));Tips
下周开始，我们就要涉及逻辑和DOM的结合了，请大家做好JS的基础复习哦。
由于本文的篇幅过长，微信的文章有字数要求，所以小编把部分的内容放到了下一期进行讲解，请大家谅解。
HTML5学堂 小编 - 堡堡 耗时12h
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Laravel框架Request、Response及Session操作示例
- 利用scikitlearn画ROC曲线实例
- 小程序微信退款功能实现方法详解【基于thinkPHP】
- PHP回调函数简单用法示例
- PHP explode()函数用法讲解
- 详解提高使用Java反射的效率方法
- PHP fopen函数用法实例讲解
- python正则表达式的懒惰匹配和贪婪匹配说明
- PyQt5-QDateEdit的简单使用操作
- thinkphp5实现无限级分类
- Python numpy矩阵处理运算工具用法汇总
- Django后端分离 使用element-ui文件上传方式
- PHP fprintf()函数用法讲解
- django template实现定义临时变量,自定义赋值、自增实例
- PHP创建文件及写入数据(覆盖写入,追加写入)的方法详解