number数字类型

NaN：not a number 但是它是数字类型的
isNaN：检测当前值是否不是有效数字，返回true代表不是有效数字，返回false是有效数字

  1. //=>语法：isNaN([value])
  2. var num=12;
  3. isNaN(num); //->检测num变量存储的值是否为非有效数字 false
  5. isNaN('13') =>false
  6. isNaN('珠峰') =>true
  7. isNaN(true) =>false
  8. isNaN(false) =>false
  9. isNaN(null) =>false
  10. isNaN(undefined) =>true
  11. isNaN({age:9}) =>true
  12. isNaN([12,23]) =>true
  13. isNaN([12]) =>false
  14. isNaN(/^$/) =>true
  15. isNaN(function(){}) =>true
  17. 重要：isNaN检测的机制
  18. 1、首先验证当前要检测的值是否为数字类型的，如果不是，浏览器会默认的把值转换为数字类型
  20.   把非数字类型的值转换为数字
  21.   - 其它基本类型转换为数字：直接使用Number这个方法转换的
  23.   [字符串转数字]
  24.     Number('13') ->13
  25.     Number('13px') ->NaN 如果当前字符串中出现任意一个非有效数字字符，结果则为NaN
  26.     Number('13.5') ->13.5 可以识别小数
  28.   [布尔转数字]
  29.     Number(true) ->1
  30.     Number(false) ->0
  32.   [其它]
  33.     Number(null) ->0
  34.     Number(undefined) ->NaN
  36.   - 把引用数据类型值转换为数字：先把引用值调取toString转换为字符串，然后再把字符串调取Number转换为数字
  38.    [对象]
  39.      ({}).toString() ->'[object Object]' ->NaN
  41.    [数组]
  42.      [12,23].toString() ->'12,23' ->NaN
  43.      [12].toString() ->'12' ->12
  45.    [正则]
  46.      /^$/.toString() ->'/^$/' ->NaN
  48.   Number('') ->0
  49.   [].toString() ->''
  50.   => isNaN([])：false
  52. 2、当前检测的值已经是数字类型，是有效数字返回false，不是返回true（数字类型中只有NaN不是有效数字，其余都是有效数字）
  1. parseInt / parseFloat

等同于Number，也是为了把其它类型的值转换为数字类型

和Number的区别在于字符串转换分析上 Number：出现任意非有效数字字符，结果就是NaN parseInt：把一个字符串中的整数部分解析出来，parseFloat是把一个字符串中小数(浮点数)部分解析出来

  1. parseInt('13.5px') =>13
  2. parseFloat('13.5px') =>13.5
  4. parseInt('width:13.5px') =>NaN 从字符串最左边字符开始查找有效数字字符，并且转换为数字，但是一但遇到一个非有效数字字符，查找结束
  1. NaN的比较
  1. NaN==NaN：false NaN和谁都不相等，包括自己

思考题：有一个变量num，存储的值不知道，我想检测它是否为一个有效数字，下面方案是否可以

  1. if(Number(num)==NaN){
  2.     alert('num不是有效数字!');
  3. }
  5. NaN和谁都不相等，条件永远不成立（即使num确实不是有效数字，转换的结果确实是NaN，但是NaN!=NaN的）
  7. if(isNaN(num)){
  8.     //=>检测是否为有效数字，只有这一种方案
  9.     alert('num不是有效数字!')
  10. }

布尔类型

只有两个值：true / false

如何把其它数据类型转换为布尔类型?

  • Boolean
  • !
  • !!
  1. Boolean(1) =>true
  3. !'珠峰培训' =>先把其它数据类型转换为布尔类型，然后取反
  5. !!null =>去两次反，等价于没取反，也就剩下转换为布尔类型了

规律：在JS中只有“0/NaN/空字符串/null/undefined”这五个值转换为布尔类型的false，其余都转换为true

null && undefined

都代表空或者没有

  • null：空对象指针
  • undefined：未定义

null一般都是意料之中的没有（通俗理解：一般都是人为手动的先赋值为null，后面的程序中我们会再次给他赋值）

  1. var num = null; //=>null是手动赋值，预示着后面我会把num变量的值进行修改
  2. ...
  3. num = 12;

undefined代表的没有一般都不是人为手动控制的，大部分都是浏览器自主为空（后面可以赋值也可以不赋值）

  1. var num; //=>此时变量的值浏览器给分配的就是undefined
  2. ...
  3. 后面可以赋值也可以不赋值

刘天瑞（BOY）的女朋友是null，他的男朋友是undefined

object对象数据类型

普通对象

  • 由大括号包裹起来的
  • 由零到多组属性名和属性值（键值对）组成

属性是用来描述当前对象特征的，属性名是当前具备这个特征，属性值是对这个特征的描述（专业语法，属性名称为键[key]，属性值称为值[value]，一组属性名和属性值称为一组键值对）

  1. var obj = {
  2.     name:'珠峰培训',
  3.     age:9
  4. };
  5. //=>对象的操作：对键值对的增删改查
  6. 语法：对象.属性 / 对象[属性]
  8. [获取]
  9. obj.name 
  10. obj['name']  一般来说，对象的属性名都是字符串格式的（属性值不固定，任何格式都可以）
  12. [增/改]
  13. JS对象中属性名是不允许重复的，是唯一的
  14. obj.name='周啸天'; //=>原有对象中存在NAME属性，此处属于修改属性值
  15. obj.sex='男'; //=>原有对象中不存在SEX，此处相当于给当前对象新增加一个属性SEX
  16. obj['age']=28;
  18. [删]
  19. 彻底删除：对象中不存在这个属性了
  20. delete obj['age'];
  22. 假删除：并没有移除这个属性，只是让当前属性的值为空
  23. obj.sex=null;
  25. ----
  26. 在获取属性值的时候，如果当前对象有这个属性名，则可以正常获取到值（哪怕是null），但是如果没有这个属性名，则获取的结果是undefined
  27. obj['friends'] =>undefined

思考题：

  1. var obj = {
  2.     name:'珠峰培训',
  3.     age:9
  4. };
  5. var name = 'zhufeng';
  7. obj.name  =>'珠峰培训'  获取的是NAME属性的值
  8. obj['name'] =>'珠峰培训' 获取的是NAME属性的值
  9. obj[name] =>此处的NAME是一个变量,我们要获取的属性名不叫做NAME，是NAME存储的值'zhufeng' =>obj['zhufeng'] =>没有这个属性,属性值是undefined
  11. ----
  12. 'name' 和 name 的区别?
  13.   => 'name'是一个字符串值，它代表的是本身
  14.   => name是一个变量，它代表的是本身存储的这个值

一个对象中的属性名不仅仅是字符串格式的，还有可能是数字格式的

  1. var obj = {
  2.     name:'珠峰培训',
  3.     0:100
  4. };
  5. obj[0] =>100
  6. obj['0'] =>100
  7. obj.0 =>Uncaught SyntaxError: Unexpected number
  9. ----
  10. 当我们存储的属性名不是字符串也不是数字的时候，浏览器会把这个值转换为字符串（toString），然后再进行存储
  12. obj[{}]=300;  =>先把({}).toString()后的结果作为对象的属性名存储进来 obj['[object Object]']=300
  14. obj[{}] =>获取的时候也是先把对象转换为字符串'[object Object]',然后获取之前存储的300
  16. ----
  17. 数组对象（对象由键值对组成的）
  18. var oo = {
  19.     a:12
  20. };
  21. var ary = [12,23]; //=>12和23都是属性值，属性名呢？
  23. 通过观察结果，我们发现数组对象的属性名是数字（我们把数字属性名称为当前对象的索引）
  24. ary[0]
  25. ary['0']
  26. ary.0  =>报错

JS中的判断操作语句

1、if / else if / else

  1. var num = -6;
  2. if(num>10){
  3.     num++; //=>num=num+1 num+=1 在自身的基础上累加1
  4. }else if(num>=0 && num<=10){
  5.     num--;
  6. }else{
  7.     num+=2;
  8. }
  9. console.log(num);

只要有一个条件成立，后面不管是否还有成立的条件，都不在判断执行了

  1. var num = 10;
  2. if(num>5){
  3.     num+=2;
  4. }else if(num>8){
  5.     num+=3;
  6. }else{
  7.     num+=4;
  8. }
  9. console.log(num); //=>12

关于条件可以怎么写？

  1. // >= / <= / == 常规比较
  2. if(0){
  3.     //=>不管你在条件判断中写什么，最后总要把其计算出TRUE/FALSE来判断条件是否成立（把其它类型的值转换为布尔类型，只有 0/NaN/''/null/undefined 是false，其余都是true）
  4. }
  6. if('3px'+3){
  7.     //=>在JS中，+ - * / % 都是数学运算，除 + 以外，其余运算符在运算的时候，如果遇到了非数字类型的值，首先会转换为数字类型（Number），然后再进行运算
  9.     //=>+ 在JS中除了数学相加，还有字符串拼接的作用（如果运算中遇到了字符串，则为字符串拼接，而不是数学相加）
  11.     '3px'+3 =>'3px3'
  12. }
  13. if('3px'-3){
  14.     '3px'-3 =>NaN
  15. }

BAT面试题：

  1. var num = parseInt('width:35.5px');
  2. if(num==35.5){
  3.     alert(0);
  4. }else if(num==35){
  5.     alert(1);
  6. }else if(num==NaN){
  7.     alert(2);
  8. }else if(typeof num=='number'){
  9.     //=>先算typeof num
  10.     //=>在做比较
  11.     alert(3);//=>alert输出的都是字符串格式的 '3'
  12. }else{
  13.     alert(4);
  14. }

typeof

在JS中用来检测数据类型的方式之一，除了它以外，还有：

  • instanceof
  • constructor
  • Object.prototype.toString.call()
  1. 语法：typeof [value] =>检测value的数据类型
  3. 返回值：使用typeof检测出来的结果是一个字符串，字符串中包含着对应的数据类型，例如："number"/"string"/"boolen"/"undefined"/"object"/"function"
  5. typeof null =>"object" 因为null代表空对象指针（没有指向任何的内存空间）
  7. typeof检测数组/正则/对象，最后返回的都是"object"，也就是基于这种方式无法细分对象
  9. 面试题：
  10. console.log(typeof []); 
  11. //=>"object"
  13. console.log(typeof typeof []); 
  14. //=>typeof "object"
  15. //=>"string"

2、三元运算符

语法：条件?成立做的事情:不成立做的事情; <=>相当于简单的if/else判断

  1. var num=12;
  2. if(num>10){
  3.     num++;
  4. }else{
  5.     num--;
  6. }
  7. //=>改写成三元运算符
  8. num>10?num++:num--;

特殊情况

  1. //=>如果三元运算符中的某一部分不需要做任何的处理，我们用 null/undeifned/void 0... 占位即可
  2. var num = 12;
  3. num>10?num++:null;
  5. //=>如果需要执行多项操作，我们把其用小括号包裹起来，每条操作语句用逗号分隔
  6. num=10;
  7. num>=10?(num++,num*=10):null;

思考题

  1. var num = 12;
  2. if(num>0){
  3.     if(num<10){
  4.         num++;
  5.     }else{
  6.         num--;
  7.     }
  8. }else{
  9.     if(num==0){
  10.         num++;
  11.         num=num/10;
  12.     }
  13. }
  14. 改写成三元运算符！

3、switch case

JS中的一种判断方式

  1. var num = 12;
  2. if(num==10){
  3.     num++;
  4. }else if(num==5){
  5.     num--;
  6. }else{
  7.     num=0;
  8. }
  10. //=>改成switch case
  11. switch(num){
  12.     case 10:
  13.         num++;
  14.         break;
  15.     case 5:
  16.         num--;
  17.         break;
  18.     default:
  19.         num=0;    
  20. }
  22. //=>switch case 应用于变量（或者表达式等）在不同值情况下的不同操作，每一种case结束后都要加break（结束整个判断）

switch case中每一种case情况的比较都是基于”===”绝对相等来完成的

  1. '10'==10 
  2. =>true 相等比较,如果等号左右两边的类型不一样，首先会转换为一样的数据类型，然后再进行比较
  3. =>当前案例中，就是把字符串'10'转换为数字了，然后再比较的
  5. '10'===10 绝对比较，如果两边的数据类型不一样，则直接不相等，它要求类型和值都完全一样才会相等（真实项目中为了保证代码的严谨性，我们应该更多使用绝对比较）