Javascript类型篇--读后感

Javascript的数据类型

• 基本类型：
  Undefined、Null、Number、String、Boolean

• 引用类型：
  Object（Function、Object、Array、Date等）

• 本质区别：（存储TODO）

  基本数据类型把数据名和值直接存储在栈当中，复杂数据类型在栈中存储数据名和一个堆的地址，在堆中存储属性及值。

---

数据类型判断

typeof判断数据类型

• 用法：typeof a
• 返回：字符串 undefined number string boolean object function symbol(ES6)

• 例子：

  typeof 1;     //'number'
  typeof 'a';   //'string'
  typeof true;  //'boolean'
  typeof null;  //'boject'
  typeof NaN;   //'number'
  typeof undefined;  //'undefined'
  typeof function a(){};  //'function'
  typeof /d/i;  //'object' 正则是一个object  **（注意）** 
  typeof Symbol();  //‘symbol’

  typeof正则表达式，小于或等于Safari5、Chrome7返回undefined；其他浏览器返回object —-《javascript高级程序设计》

• 总结：

  typeof可以识别简单数据类型，复合数据类型（Array Function）只能识别Function

  使用typeof判断变量类型并不准确，Null、数组、正则、Date()、对象等都为object；在开发中写一些公用性组件的话，需要严格判断传参类型，进行相应的提示，typeof有点尴尬。

instanceof判断数据类型

• 用法：object instanceof constructor构造函数
• 返回：true / false

• 例子：

  num instanceof Number  //false
  str instanceof String   //false
  bool instanceof Boolean   //false
     /***/
  nul instanceof   Object  //false
  arr instanceof Array  //true
  obj instaneof Object  //true
  func instanceof Function  //true
  date instanceof Date //true
  reg instanceof RegExp //true
  error instanceof Error //true
  

• 总结

  instanceof是无法判断num、string、boolean变量，因为instanceof本质是根据原形链来进行判断的，等效于a.__proto__ === B.prototype；null是一个空对象指针，并没有原型；

对象中constructor属性判断数据类型

• 用法：object.constructor == constructor构造函数
• 返回：对创建此对象的数组函数的引用
• 例子：
1.constructor //error ？
'1'.constructor //Array ？
var a = 1; a.constructor; //Number ？
null.constructor; //error
false.constructor; //Boolean ？
obj.constructor; //Object
AA.constructor; //AA


• 总结：

  获取的是对象的构造属性，无法准确判断数据类型

  Objcet.prototype.toString()判断数据类型

  jquery中的$.type()方法：

  function type( obj ){
      var _type = Object.prototype.toString.call( obj ); //[Object Object]
      return _type.slice( _type.indexOf('')+1, _type.length-1) .toLowerCase();
  }
  

---

js的类型转换

强制转换：

转数值：Number() parseInt(string, radix) parseFloat(string)
转字符串：toString() String()
转布尔： Boolean()

大家都会用，但我们真得了解他们吗？

• Number()

  Number(boolean)  // true 1；false 0
  
  Number(null) // 0
  Number(undefined) //NaN
  
  Number(' ') // 0 空字符串
  Number('string') // NaN 纯字符串
  Number('-001.1') // -1.1 纯数值
  Number('11string') // NaN 数值+字符串混合
  
  Number([[2]]) //2 对象
  Number([1,2]) // NaN
  

  总结： Number对boolean处理是true=1，false=2；对null处理返回0；对string处理，空字符串返回0、纯数值返回转换后的十进制数值、非纯数值返回NaN；对object处理，先调用对象的valueOf()依照前面规则返回值，如果是NaN，再调用对象的toString()方法，依照前面规则返回值，否则NaN。

  ---

  这里补充一下toString() valueOf()知识：
  除了null、undefined外的所有数据类型都继承这2个方法

  • valueOf()：返回最适合该对象类型的原始值
  • toString()：返回最适合该对象类型的原始值的字符串

对比	valueOf	toString
Array([2,1])	Array[2]	‘2,1’
Function A	A	A的字符串形式
Date	1970.1.1-今 毫秒数	日期字符串
Object	Object	[object Object]
String	string	string
Number	Number	数值字符串

- parseInt parseFloat

工作模式：它会忽略前面的空格，直到找到非空格字符，逐步解析字符，如果第一个是非数值字符，返回NaN，直到遇到非数值字符。parseInt parseFloat前者取整，后者识别浮点数

parseInt([1,2]) // 1
parseInt(true)  //NaN
parseInt('070') //ES3解析为八进制56，Es5解析为十进制70
parseInt('0xf') //十六进制 15
parseInt('11s11') //11
parseInt(null / undefined) //NaN

• String()

规则：如果值有toString方法，则调用并返回；null返回‘null’,undefined返回‘undefined’

-Boolean()

规则：0、null、undefined、''、false、NaN 为 false；其余true

---

有了上面的基础，我们来学习一下在JS中，你可能不知道的隐性类型转换：

自动类型转换

自动类型转换主要发生在2个不同类型的变量上，我们只需要知道它们特殊的处理规则，和过程就可以轻易知道最终结果。

操作的2个变量	*	\	+	-	%
NaN、any	NaN	NaN	NaN	NaN	NaN
undefined、any	NaN	NaN	NaN	NaN	NaN
null、any	Number(null)=>0	Number(null)=>0	优先转字符串	Number(null)=>0	Number(null)=>0
number、string转换谁？	Number(string)	Number(string)	数值.toString()	Number(string)	Number(string)
object、any	valueOf->toString	valueOf->toString	valueOf->toString	valueOf->toString	valueOf->toString

这里可能有些地方总结的并不好，像：
any / 0 => Infinity;
0 / 0 => NaN
any % 0 => NaN

---

练习巩固：

 //乘法
 console.dir("-------以下乘法---------");
 console.dir(5*"5");
 console.dir(5*"a");
 console.dir(5*NaN);
 console.dir(5*null);
 console.dir(5*undefined);
 console.dir(5*5);
 console.dir("-------以上乘法---------");
 //除法
 console.dir("-------以下除法---------");
 console.dir(5/"5");
 console.dir(5/"a");
 console.dir(5/NaN);
 console.dir(5/null);
 console.dir(null/5);
 console.dir(5/undefined);
 console.dir(5/5);
 console.dir(5/0);
 console.dir(0/5);
 console.dir(0/0);
 console.dir("-------以上除法---------"); 
 //取余、求模
 console.dir("-------以下取余、求模--------");
 console.dir(16%"5");
 console.dir(5%"a");
 console.dir(5%NaN);
 console.dir(5%null);
 console.dir(null%5);
 console.dir(5%undefined);
 console.dir(5%5);
 console.dir(5%0);
 console.dir(0%5);
 console.dir(0%0);
 console.dir("-------以上取余、求模---------"); 

 //加法
 console.dir("-------以下加法--------");
 console.dir(16+"5");
 console.dir(5+"a");
 console.dir(5+NaN);
 console.dir(5+null);
 console.dir(5+undefined);
 console.dir(5+5);
 console.dir("两个数的和是"+5+5);
 console.dir("两个数的和是"+(5+5));
 console.dir("-------以上加法--------"); 

 //减法
 console.dir("-------以下减法--------");
 console.dir(16-"5");
 console.dir(5-"a");
 console.dir(5-NaN);
 console.dir(5-null);
 console.dir(5-undefined);
 console.dir(5-5);
 console.dir(5-true);
 console.dir(5-"true");
 console.dir(5-"");
 console.dir("两个数的差是"+5-5);
 console.dir("两个数的差是"+(5-5));
 console.dir("-------以上减法--------"); 

 //关系操作符
 console.dir("-------以下关系操作符--------");
 console.dir(16>"5");
 console.dir("16">"5");
 console.dir(5<"a");
 console.dir(5>=NaN);
 console.dir(5<NaN);
 console.dir(NaN>=NaN);
 console.dir(5>=null);
 console.dir(5>=undefined);
 console.dir(5>=5);
 console.dir(5>=true);
 console.dir(5>="true");
 console.dir(5>="");
 console.dir("Brick">"alphabet");
 console.dir("brick">"alphabet");
 console.dir("-------以上关系操作符--------");