JS數據類型以及運算符



1.JS的六種基本類型與typeof操作符

  1. Undefined類型
  2. Null類型
  3. Boolean類型
  4. Number類型
  5. String類型
  6. Object類型
typeof
   1:  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   2:  <html xmlns="http://www.w3.org/1999/xhtml">
   3:  <head>
   4:  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   5:  <title>typeof 使用</title>
   6:  <script type="text/javascript">
   7:  /*//1.Undefined
   8:  var box;
   9:  alert(box);
  10:  alert(typeof box);//box為Undefined類型,值為undefined,typeof返回值為字符串'undefined'
  11:  
  12:  //2.Boolean
  13:  var boxBoolean=true;
  14:  alert(typeof box);//boxBoolean為Boolean類型,typeof返回值為:'boolean'
  15:  
  16:  //3.String
  17:  var boxString='abc';
  18:  alert(typeof boxString);//boxString為String類型,typeof返回值為:'string'
  19:  
  20:  //4.空的對象:對象已創建,但是里面沒有東西
  21:  var boxObject={};
  22:  alert(boxObject);//[object Object]
  23:  alert(typeof boxObject);//obj是Object類型,值為[object Object],typeof返回值為:'object'
  24:  
  25:  //5.空對象:表示沒有創建,就是一個null
  26:  var boxNull=null;
  27:  alert(boxNull);//null
  28:  alert(typeof boxNull);//'object' //Null類型派生自Object
  29:  
  30:  //6.Number
  31:  var boxNumber=300;
  32:  alert(typeof boxNumber);//boxNumber為Number類型,值為300,typeof返回值為:'number'
  33:  */
  34:   
  35:  //7.function
  36:  function boxFunction(){
  37:   
  38:  }
  39:  alert(boxFunction);//值為:function boxFunction(){}
  40:  alert(typeof boxFunction);//'function'
  41:   
  42:  //直接測試
  43:  alert(typeof 'hehe');//'string'
  44:  </script>
  45:  </head>
  46:   
  47:  <body>
  48:    <ol>
  49:     <li>typeof操作符</li>
  50:     <li>Undefined類型</li>
  51:     <li>Null類型</li>
  52:     <li>Boolean類型</li>
  53:     <li>Number類型</li>
  54:     <li>String類型</li>
  55:     <li>Object類型</li>
  56:    </ol>
  57:  </body>
  58:  </html>

 

   1:  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   2:  <html xmlns="http://www.w3.org/1999/xhtml">
   3:  <head>
   4:  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   5:  <title>六種基本類型</title>
   6:  <script type="text/javascript">
   7:  //Unidefined
   8:   var box;
   9:   alert(box);//值被隱式賦值為undefined 相當於 var box=undefined;
  10:   alert(typeof box);//類型為'undefined'
  11:   //alert(age);//age is not defined
  12:   alert(typeof age);//'undefined' 注意age的類型也為Undefined
  13:   /*聲明一個變量必須初始化,以避免這種問題*/
  14:   
  15:  //Null
  16:  var boxObject=null;//我留着以后創建對象,只聲明了一個對象引用boxObject,初始化為null
  17:  boxObject={};
  18:  alert(boxObject);//[object Object]
  19:   
  20:  //Null與Undefined
  21:  alert(undefined==null);//true
  22:  alert(undefined===null)//false 恆等:數據類型也必須相等 Undefined!=Object
  23:   
  24:  //Boolean
  25:  var boxBoolean=Boolean('嘿嘿');//顯式轉換:String->Boolean
  26:  alert(boxBoolean);//true
  27:  var str='嘿嘿';
  28:  if(str)//隱式轉換:String->Boolean
  29:    alert('真');//真
  30:  else
  31:    alert('假');
  32:  //轉換規則詳見圖
  33:  </script>
  34:  </head>
  35:   
  36:  <body>
  37:  </body>
  38:  </html>
其它類型轉換成Boolean規則
 
 

2.JS中的進制:

 

   1:  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   2:  <html xmlns="http://www.w3.org/1999/xhtml">
   3:  <head>
   4:  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   5:  <title>JS的進制</title>
   6:  <script type="text/javascript">
   7:  /*//八進制
   8:  var box=070;
   9:  alert(box);//56
  10:  
  11:  //十六進制
  12:  var box2=0xA;
  13:  alert(box2);
  14:  
  15:  //科學計數法
  16:  var box3=0.000000003;
  17:  alert(box3);//3e-9 自動轉成科學計數法
  18:  
  19:  //當超出浮點數的范圍:
  20:  var box4=100e1000;
  21:  alert(box4);//超出Number.MAX_VALUE的范圍 //Infinity 正無窮;
  22:  box4=-100e1000;
  23:  alert(box4);//超出Number.MIN_VALUE的范圍 //-Infinity 負無窮
  24:  alert(isFinite(box4));//判斷一個數值是否超出規定范圍,超出false,沒有true
  25:  */
  26:   
  27:  //NaN
  28:  /*var box5=0/0;
  29:  alert(box5);//NaN,但是不影響下面語句的執行
  30:  box5=1/0;
  31:  alert(box5);//Infinity
  32:  alert(NaN==NaN);//false,造成NaN的原因可能不同*/
  33:   
  34:  //isNaN:將該值能否轉換成數值,能->非NaN->則返回false,否則返回true
  35:  alert(isNaN('12'));//false 轉成 12
  36:  alert(isNaN('abc'));//true 不能轉成數值
  37:  alert(isNaN(true));//false 可以轉成1
  38:   
  39:  //**有3個函數可以把非數值轉換成數值
  40:  //Number(),parseInt(),parseFloat();
  41:  //Number():任何數據類型->數值
  42:  //剩余兩個:String->數值
  43:  alert(Number(true)+","
  44:  +Number(null)+","+Number(undefined));//1,0,NaN
  45:  alert(Number('')+","+Number('0xA')+","+Number('060'));//0,10,60
  46:  alert(Number('abc'));//NaN
  47:   
  48:  alert(parseInt('12abc')+","+parseInt('abc12'));//12,NaN //只獲取第一個數值
  49:  alert(parseInt('AF',16)+","+parseInt('1001',2));//175,9 //十六進制轉十進制,二進制轉十進制
  50:   
  51:  alert(parseFloat('012')+","+parseFloat('1.23')+","+parseFloat('0x13'));//12,1.23,0 //八進制和十六進制不能識別
  52:  </script>
  53:  </head>
  54:   
  55:  <body>
  56:  </body>
  57:  </html>

3.String類型:

   1:  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   2:  <html xmlns="http://www.w3.org/1999/xhtml">
   3:  <head>
   4:  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   5:  <title>String類型</title>
   6:  <script type="text/javascript">
   7:  //1.JS中單引號與雙引號均可表示字符串
   8:  var str='abc';
   9:  var str2="abc";
  10:  alert(str+","+str2);//abc,abc
  11:  alert('\u4f60');//你,UTF-16編碼
  12:   
  13:  //2.ECMAscript中的字符串是不可變的,也就是說,字符串一旦創建它們的值就不能改變
  14:  //要改變某個變量保存的字符串,系統會銷毀原來的字符串,然后再用另一個包含新值得字符串
  15:  //來填充該變量(類似Java的字符串常量)
  16:  var str3='zhang';
  17:  str3 += 'hong';//'zhang'會被銷毀,str3指向新的字符串'zhanghong'
  18:  alert(str3);
  19:   
  20:  //3.toString方法:任意類型數據轉換成字符串
  21:  var box=12;
  22:  var boxBoolean=true;
  23:  alert(box.toString()+","+boxBoolean.toString());//'12','true'
  24:  alert(box.toString(2));//'1100'
  25:  box=0xA;
  26:  alert(box.toString(2));//'1010' //將任意進制轉成指定進制的字符串
  27:   
  28:  //4.對於undefined和null不能使用toString轉換
  29:  //var boxUndefined
  30:  //alert(boxUndefined.toString());//報錯
  31:  //var boxNull=null;
  32:  //alert(boxNull.toString());//報錯:無法獲取未定義或 null 引用的屬性"toString"
  33:   
  34:  alert(String(null)+","+String(undefined));//'null','undefined'
  35:                                            //String()將任意類型轉換成字符串
  36:                                            //如果非null 或 非 undefined則會調用toString()返回字符串
  37:                                            //否則返回'null'和'undefined'
  38:  </script>
  39:  </head>
  40:   
  41:  <body>
  42:  </body>
  43:  </html>

4.Object類型:

   1:  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   2:  <html xmlns="http://www.w3.org/1999/xhtml">
   3:  <head>
   4:  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   5:  <title>Object類型</title>
   6:  <script type="text/javascript">
   7:  var obj1={},obj2=new Object();
   8:  alert(obj1+","+obj2);//[object Object],[object Object]
   9:                       //第一個object表示它是一個對象(而不是值),后面表示它的類(構造函數名)。
  10:   
  11:  //當向Object()傳值
  12:  var obj3=new Object(3);
  13:  alert(obj3);//3 但是類型為Object
  14:  alert(12+obj3);//15 底層經過一系列轉換
  15:   
  16:  //new也可以創建其它類型對象
  17:  var obj4=new Number(),obj5=new Boolean(),obj6=new String();
  18:  alert(obj4+","+obj5+","+obj6)//0,false,'' 類型依然為Object
  19:   
  20:  </script>
  21:  </head>
  22:   
  23:  <body>
  24:   
  25:  </body>
  26:  </html>

5.JS 中的運算符:

 

運算符優先級:

運算符優先級1

運算符優先級2

 

   1:  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   2:  <html xmlns="http://www.w3.org/1999/xhtml">
   3:  <head>
   4:  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   5:  <title>JS中的比較運算符</title>
   6:  <script type="text/javascript">
   7:   /*
   8:    1.如果其中一個是數值字符串則轉換成數值再比較.
   9:    2.如果兩個都是字符串字符按字典順序比較
  10:    3.兩個操作其中一個是對象,則調用對象的valueOf()或toString()方法,再用結果比較
  11:   */
  12:   /*alert((3>'22')+","+(3>true)+","+('67'>'ab'));//false,true,false //3>22 3>1 6與a的ASCII比較
  13:   var obj={
  14:    toString:function(){
  15:       return '4';      
  16:     }     
  17:   }
  18:   alert('3'>obj);//false //'3'>'4'
  19:   
  20:   alert(2=='2');//true //2==2
  21:   alert(null==undefined)//true;
  22:   alert({}=={});//false //比較的是兩個對象的地址,兩個對象地址不同
  23:   alert((null==0)+","+(undefined==0))//false,false //雖然Number(null)為0,但是null在比較時不會自動轉換
  24:   */
  25:   
  26:  //邏輯運算符(&&(短路與),||)
  27:  //注意在前面說過的的Boolean(任意類型)中:
  28:  //非null對象:true ,null:false ,undefined:false
  29:   alert(true&&5);//5
  30:   alert(({}&&1)+","+(0&&{})+","+(1&&{})+","+({}&&{}));//1,0,[object,Object],[object,Object]
  31:                                           //第一個操作數是對象,則返回第二個操作數
  32:                                           //第二個操作數是對象,第一個操作數為false,則返回第一個操作數,否則返回對象.
  33:   alert((undefined&&1)+","+(0&&undefined)+","+(1&&undefined));//undefined,0,undefined
  34:   alert((null&&1)+","+(0&&null)+","+(1&&null));//null,0,null
  35:   
  36:   alert(true&&5);//true
  37:   alert(({}||1)+","+(0||{})+","+(1||{})+","+({}||{}));     
  38:                                               //[object,Object],[object,Object],1,[object,Object]  
  39:   alert((undefined||1)+","+(0||undefined)+","+(1||undefined));//1,undefined,1
  40:   alert((null||1)+","+(0||null)+","+(1||null));//1,null,1     
  41:   //邏輯!(表達式),先求出表達式的boolean值(會Boolean()強轉),再取反                                   
  42:  </script>
  43:  </head>
  44:   
  45:  <body>
  46:      
  47:  </body>
  48:  </html>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM