乐趣区

JS系列js数据类型

jiezi

ctrl+ B 加粗

数据类型：

  • 1.number 数字类型

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

  //=> 语法: isNaN([value])
  var num =12 ;
  isNaN(num); //=> 检测 num 变量存储的值是否为非有效数字 返回 12 false 是有效数字
  isNaN('前端') =>true;
  isNaN(true)=>false;
  isNaN(false)=>false;
  isNaN(null)=>false;
  isNaN(undefined)=>true;
  isNaN({age:9})=>true;
  isNaN([12,23])=>true;
  isNaN([12])=>false;
  isNaN(/^$/)=>true;
  isNaN(function(){}) =>true;
 
  重要知识点：isNaN 检测的机制：1. 首先验证当前的检测的值是否为数字类型，如果不是浏览器会默认转化为数字类型
     把非数字类型的值转化为数字
     - 把其他基本类型转为数字：直接用 number 方法
       [字符串转数字]
           Number('13') -> 13  13.5
           Number('13px') ->NaN 如果当前字符串中出现任意一个非有效数字字符，结果为 NaN
           Number('13.5') - >13.5 可以识别小数点
       [布尔转数字]
           Number('13.5.0') ->NaN
           Number(true) -> 1
           Number(false) ->0
       [其他]
           Number(null) ->0
           Number(undefined) ->NaN
       - 把引用类型转化为数字：先调取 toString 转化为字符串，然后调取 Number 转化为数字
       [对象]
               [{}].toString() - > '[obiect Object]' ->NaN
       [数组]
               [12,23].toString() -> '12,23' ->NaN
               [12].toString() - > '12' ->12
       [正则]
               /^$/.toString() ->'/^$/' ->NaN
               Number('')->0
               [].toString() ->'' =>isNaN([]):false

2. 当前检测的值已经是数字类型，是有效数字返回 false, 不是返回 true（数字类型中只有 NaN 不是有效数字，其余都是有效数字）
3.parseInt(解析)/parseFloat

    >  等同于 Number, 将其他类型转化为数字类型
    >  Number: 出现任意非有效数字字符，结果就是 NaN
    >  parseInt: 把一个字符的整数解析出来，parseFloat: 把一个字符的小数部分都解析出来
    parseInt('13.5px') =>13
    parseFloat('13.5px') =>13.5
    parseInt('width:13.5px')=>NaN 从字符串最左边字符开始查找有效数字字符，并且转化为数字，一旦遇到分有效数字字符，查找结束

4.NaN 的比较

    NaN==NaN:false  NaN 和谁都不相等，包括自己
    思考：有一个变量 num，存储的值不知道，想想检测它是否为一个有效数字，下面的方案是否可以？```javascript
       if(Number(num)==NaN){alert('num 不是有效数字')
       }
       NaN 和谁都不相等，条件永远不成立（number 不是有效数字，转化结果却是是 NaN, 但是 NaN!=NaN 成立）if (isNaN(num)){
           //=> 检测是否有效数字，只有这种方案
           alert('num 不是有效数字！')
       }
    ```
### 布尔类型 true,false
如何把其他数据类型转化布尔类型
- Boolean
- ! 取反(等于取反就是不等于)
- !! 取反再取反
   Boolean(1) =>true
   Boolean(0)=>false
   Boolean(-1)=>true
   Boolean(NaN)=>false
   !'前端学习' => 先把其他类型转化布尔，然后取反 
  !!null =>false 去两次反，等价于每个取反，也就剩下转换为布尔

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

     !!null !!undefined !!'' !!NaN  !!0 =>false
     !![]  !!{} =>true‘*

null &undefined

都代表着空或者没有

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

null 一般都是意料之中的没有，人为指定为空
var num = null ;//=>null 手动复制，意味着后面会把 num 变量的值进行修改
…

num = 12;

…

undefined 代表没有一般不是人为控制，大部分是浏览器自主为空。
    var num; //=> 此时变量的值浏览器给分配的就是 undefined

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

object 对象数据类型

普通对象

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

描述它的特征或者特点的叫做属性
**` 属性是用来描述当前对象的特征，
属性名是当前具备这个特征 [key]，
属性值是对这个特征的描述[value]`**

   var obj = {
   name:'张三',
   age:9
   }

//=> 对象的操作，对键值对的增删改查

[获取]：对象. 属性 / 对象['属性']
obj.name
obj['name'] 一般来说，对象的属性名都是字符串格式的，属性值不固定，任何格式都可以

[增 / 改]
js 中的属性名唯一，不允许重复

var obj1 = {name : 'xxx'}
var obj2 = {name : 'qqq'}
obj.name ='前端'; //=> 原有对象中存在 NAME 属性，此处修改属性值
obj.sex = '男'; //=> 原有对象中不存在 SEX，此处增加了一个属性 sex
obj['age']=28;

[删除]
彻底删除: 对象总不存在这个属性了 
delete obj['age'];
假删除：并没有移除这个属性，只是属性值为空，** 例子：**

obj.sex=null;
   var obj = {
    name:'张三',
    age:9
   };
undefined
obj.age
9
obj['age']
9
obj.age=10
10
obj['age']
10
obj
Object {name: "张三", age: 10}

增加 obj['sex']='man'
"man"
obj
Object {name: "张三", age: 10, sex: "man"}

假删除 obj.age=null
null
obj
Object {name: "张三", age: null, sex: "man"}

真删除 delete obj.sex
true
获取整个数组 obj
Object {name: "张三", age: null}
---
在获取属性值的时候，如果当前对象有这个属性名，则可以正常获取到值，那怕是 null，但是如果没有这个属性名，则获取的结果是 undefined
 
 obj['friends'] => undefined

思考题：
var obj = {
  name: '张三',
  age:9
}
var name='李四';
obj.name -> '张三'  获取的 name 值
obj['name'] -> '张三' 获取的 name 值
obj[name] -> undefined 此处的 name 是一个变量，我们获取的属性名不叫 name，是 name 存储的值 '珠峰' => obj['zhangsan'] => 没有这个属性，属性值是 undefined
---
'name' 与 name 的区别？=> 'name' 是一个字符串
  =>  name 是一个变量不是值，它代表的是本身存储的这个值

* 一个对象中的属性名不仅是字符串格式的，还有可能是数字格式的
var obj = {
    name: 'zhangsan',
    0:12
}
  obj[0] / obj['0'] => 12
  obj.0 =>syntaxError :unexport number 指的是语法错误，检查自己的代码语法
  {} = [onject Object]
  如果当我们存储的属性名不是字符串也不是数字的时候，浏览器会把这个值转化为字符串在存储 toString

  obj[{}]=300 ; => 先把{}.toString 后的结果作为对象的属性名存储起来，obj['object Object']=300

  obj[{}] = > 获取的时候，先把对象转化为字符串 '[object Object]', 然后获取之前存储的 300

  var obj = {
        name: 'zhangsan',
        0:12
    }
    undefined
    obj[{}]=300;
    300
    obj
    {0: 12, name: "zhangsan", [object Object]: 300}
    obj['[object Object]']
    300
---
数组对象（对象由键值对组成）数组是特殊的对象，对象有键值对组成，数组由键值对组成, 对象包含数组，对象没有的属性数组有，对象有的数组也有，正则也是对象，索引就是既可以作为属性名也可以递增，这就是数组本质。var oo = {a : 12};
    var ary =[12,23]
    undefined
    ary
    (2) [12, 23] 0: 12   1: 23  length: 2  __proto__: Array(0)
    ary[0]
    12
    ary['0']
    12
    ary.length
    2
    ary['length']
    2

  var ary = [12 ,23];   这组 12 和 23 都是属性值，属性名为数字
  =>
  0 :12  1:13  属性名为数字 或者字符串，加单引号为字符串，不加为变量，把数字属性名成为当前索引
 获取方式：单个属性  ary['0'] / ary[0]
 获取长度：ary[length]/ ary['length']
 增加属性：ary[2]=340;  =>(3) 0: 12
                             1: 23
                             2: 340
                             length: 3

obj
(3) [12, 230, 340]
0: 12
1: 230
2: 340
length: 3
__proto__: Array(0)
obj[‘age’]=10;
10
ary
(3) [12, 230, 340, age: 10]
0: 12
1: 230
2: 340
age: 10
length: 3
__proto__: Array(0)

正则琥珀：

/\{(\d+)\}/g.exec('{0}年 {1} 月')
(2) ["{0}", "0", index: 0, input: "{0}年 {1} 月", groups: undefined]
0: "{0}"
1: "0"
groups: undefined
index: 0
input: "{0}年 {1} 月"
length: 2
__proto__: Array(0)     **` 指向原型就是数组，特殊数组 `**
退出移动版