时间戳

首页 > 技术文章 > JS数据类型以及运算符

JS数据类型以及运算符

yiqiu2324 2014-01-21 18:03 原文

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>

推荐阅读