javascript
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
轉載于:https://blog.51cto.com/zhangdongxu/1956107
總結
以上是生活随笔為你收集整理的JavaScript3基础——运算符和类型转换的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Mac 下搭建环境 homebrew/g
- 下一篇： python 将ipv4的格式转换