JavaScript3基礎——運算符和類型轉換

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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章