JS系列：数据类型详细讲解

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(underfined)=>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(underfined) ->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，存储的值不知道，想想检测它是否为一个有效数字，下面的方案是否可以？

```

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，underfined“这五个值转化为布尔类型为false，其余都为true”

!!null !!underfined !!'' !!NaN !!0 =>false

!![] !!{} =>true‘*

### null &underfined

>都代表着空或者没有

>- null:空对象指针

>- underfined:未定义

null 一般都是意料之中的没有，人为指定为空

var num = null ;//=>null手动复制，意味着后面会把 num变量的值进行修改

...

num = 12;

...

underfined代表没有一般不是人为控制，大部分是浏览器自主为空。

```

var num; //=>此时变量的值浏览器给分配的就是 underfined

```

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

### 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

onj

ReferenceError: onj is not defined

debugger eval code:1:1

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，但是如果没有这个属性名，则获取的结果是underfined

 

obj['friends'] => underfined

```

思考题：

```

var obj = {

name: '张三',

age:9

}

var name='李四';

obj.name -> '张三' 获取的name值

obj['name'] -> '张三'获取的name值

obj[name] -> underfined 此处的name是一个变量，我们获取的属性名不叫name，是name存储的值'珠峰' => obj['zhangsan'] => 没有这个属性，属性值是underfined

```

---

'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: 121: 23length: 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; =>

```

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) **`指向原型就是数组，特殊数组`**

```