JavaScript3基础——运算符和类型转换
JavaScript运算符
JavaScript运算符也称操作符。其作用是对目标数据进行运算操作。
基本数学运算符
+ - * / % 分别为加,减,乘,除,求模(求余数)
加减乘除不再赘述,此处解释一下求模
eg: var a = 10%20 //10
eg: var a = 15%4 //3
求模运算较为常见的地方在于处理时间.
如下 199秒换算为几分几秒。
199/60 为分钟数 199%60 为秒数
eg: var s = 199;
alert(parseInt(s/60)+‘分‘+parseInt(s%60)+‘秒‘)//3分19秒
如果不加parseInt()结果会存在因为除不尽无限小数的问题。该函数下面介绍。
求模还经常出现在有规律的变化问题上,比如隔行变色。
i%2 判断奇偶数,偶数设置一个背景色,奇数设置一个背景色。
eg:
<!DOCTYPE html>
<!--
作者:offline
时间:2017-05-23
描述:求模示例 隔行变色
-->
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
</style>
<script>
window.onload = function(){
var oLi = document.getElementsByTagName(‘li‘);
for(var i =0;i<oLi.length;i++){
if(i%2==0){//偶数
oLi[i].style.background=‘lightblue‘;
}else{
//
oLi[i].style.background=‘gray‘;
}
}
}
</script>
</head>
<body>
<ul id=‘ul‘>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
赋值运算符
= += -= *= /= %=
对于我们最熟悉的就是=了,
eg :var a = 1;
把数字1赋值给变量a;
而所谓的+=,-=,*=,/=,%= 其实都为两步运算,先运算再赋值。
eg :var num = 5;
num+=3;
alert(num)//8
其等价于
var num = 5;
num = num + 3;
alert(num)//8;
故-=,*=,/=,%=依次类推。
值得一说的是
eg:var a +=5; 该句出现语法错误。
因为 拆分开为 var a = a+5,在运算时a还未定义。
自加和自减
++ -- 表示加1 或减1;
自加和自减本质一样,此处详细介绍自加。
var num = 10;
++num;
alert(num);//11
其等价于
var num =10;
num+=1;
alert(num);//11
等价于
var num =10;
num = num+1;
alert(num);//11
其最终结果都为11;
但是++num和num++是不一样的。也就是++的符号在变量前后意义是不一样的。
++num是先运算再赋值
num++是先赋值再运算。
eg: var num2 = 10;
var num3 = ++num2;
alert(num3); // 11
alert(num2); // 11
var num2 = 10;
var num3 = num2++;
alert(num3); // 10
alert(num2); // 11
比较运算符
== != < <= > >=
eg: var num1 = 5
var num2 = 10;
alert(num1==num2);//false
alert(num1<=num2);//true
………………
较为简单不再举例
逻辑运算符
大多数用在if语句的判断上,if语句只有为真才会执行,if(true){执行内容}
&& || ! 与或非
逻辑与&&表示AND代表并且
逻辑或||表示OR代表或者
逻辑非!代表NOT代表非
eg:
<script>
var a = true;
var b =false;
if(a&&b){
alert(‘&&‘);//a和b都为真才执行
}
if(a||b){
alert(‘||‘);//a和b有一个为真就执行
}
if(!b){
alert(‘!‘);//!b即!false 意思是不是false即true
}
</script>
三目运算符
三目运算符和日后学习的if条件语句较为相似。
表达式?true:false;
表达式为真则执行true部分,表达式为假则执行false部分
eg: var num1 = 1;
var num2 = num1<2 ? num1: 2;
意思是 num1是否小于2,如果小于2则把num1赋值给num2否则把2赋值给num2;
三目运算符还经常运来做兼容性处理。
var e = window.event ? window.event : e;//兼容chrome和IE
位运算符和位移运算符
% ^ | ~ >> << >>> 不常用制作了解即可
运算符优先级
先执行优先级高的运算符再执行低优先级运算符,
优先级相同则按照顺序有左到右执行
JavaScript类型转换
JavaScript类型转换分为三种。显示,隐式,强制。
显示类型转换
转换为字符串
toString()
转换为数字
parseInt()
parseFloat()
隐式类型转换
== ===
字符串加减
强制类型转换
Boolean(value)把给定的值转换为Boolean
Number(value)把给定的值转换为数字
String(value)把给定的值转换为字符串
eg: 转换为数字
var str = ‘123‘;
alert(parseInt(str));//123
parseInt只能转换为能转换的数字。
var str = ‘123qwe‘;
alert(parseInt(str));//123 ,qwe不再转换。
如果全部为不能转换的字符串则数显NAN
var str = ‘qwe‘;
alert(parseInt(str))//NAN,表示非数字
eg: 转换为字符串
var num = 123;
alert(num.toString());//‘10‘
var boo = true;
alert(boo.toString());//‘true‘
eg:隐式类型转换
<script>
var a = 6;
var b = ‘6‘;
alert(a==b);// ==比较会先转换类型,然后比较 ,属于隐式类型转换;true
alert(a===b);//===不转换类型,直接比较,false
var num1 = ‘10‘;
var num2 =‘20‘;
var num3 = 30;
alert(num1+num2);//‘1020‘ +字符串连接
alert(num1+num3);//‘1030‘ 字符串和数字相加
alert(parseInt(num1)+num3);//40
alert(num1 - num2); //-10
</script>
限于文章篇幅原因,这里仅仅介绍冰山一角。由于笔者的水平有限,编写时间也很仓促,
文中难免会出现一些错误或者不准确的地方,不妥之处恳请读者批评指正
说在最后的话:
本博会开一个JS专栏,长期更新,由浅入深带大家系统的学习JavaScript,做出多彩的JS特效。
如果对你有用就关注一下吧。
想观看JS视频的博友可以在51CTO上搜索《多彩JavaScript》。
http://edu.51cto.com/course/10767.html