码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript3基础——运算符和类型转换

时间:2017-08-14 22:20:22      阅读:181      评论:0      收藏:0      [点我收藏+]

标签:java   script   运算符   

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

本文出自 “心有猛虎,细嗅蔷薇” 博客,请务必保留此出处http://zhangdongxu.blog.51cto.com/12029530/1956107

JavaScript3基础——运算符和类型转换

标签:java   script   运算符   

原文地址:http://zhangdongxu.blog.51cto.com/12029530/1956107

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!