操作符与数据类型转换

上一期堡堡给大家讲解了关于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

原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2016-05-05

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏函数式编程语言及工具

Scalaz(12)- Monad:再述述flatMap,顺便了解MonadPlus

  在前面的几篇讨论里我们初步对FP有了些少了解:FP嘛,不就是F[A]吗?也是,FP就是在F[]壳子(context)内对程序的状态进行更改,也就是在F壳子(...

1777
来自专栏逸鹏说道

Python3 与 C# 基础语法对比(String专栏)

Python3 与 C# 基础语法对比:https://www.cnblogs.com/dotnetcrazy/p/9102030.html

672
来自专栏SimpleAI

Python高级特性——为什么都说Python高效

本微教程根据廖雪峰python教程中的部分内容,配合我个人的学习经历进行总结整理。

854
来自专栏Python数据科学

妈妈再也不用担心我忘记pandas操作了

pandas的操作上千种,但对于数据分析的使用掌握常用的操作就可以应付了,更多的操作可以参考pandas官网。

631
来自专栏简书专栏

Pandas入门2

对于DataFrame,对齐会同时发生在行和列上,两个DataFrame对象相加后,其索引和列会取并集,缺省值用NaN。

1092
来自专栏自然语言处理

Python读书笔记:需要注意的70个小问题

4 单双引号括起来的,字符串可以包含引号和撇号。用法:"this's a cup"

1022
来自专栏韦弦的微信小程序

Swift 字符串转整数 (atoi) - LeetCode

1、在找到第一个非空字符之前,需要移除掉字符串中的空格字符。如果第一个非空字符是正号或负号,选取该符号,并将其与后面尽可能多的连续的数字组合起来,这部分字符即为...

803
来自专栏Android开发指南

2 :基本语法

33711
来自专栏cmazxiaoma的架构师之路

Java小白必须会的一道面试算法题

1823
来自专栏BestSDK

“Excel格式”最风骚玩法,炫技加薪就靠它了

话不多说直接上干货! 001 自定义格式概述 01 调出单元格格式对话框 选中需要设置格式的单元格,按「CTRL+1」快捷键打开「设置单元格格式」对话框。 在对...

3073

扫码关注云+社区