Javascript（九）：数据类型详解

在Javascript（一）：使用方法及数据类型中我就介绍了五种数据类型。本节我会详细介绍一下Number、String、Object、Array、null、undefined.

一、Number 

常见的Number类型包含整型、浮点型、NaN。

①整型。与c语言一样，所有的整数都是整型。

1)判断一个数是否为整型：Number.isInteger(数字)，如：

isInteger(1)  //true
isInteger(1.2)  //false

2)其他类型数据转为整型：parseInt('数据')，如：

parseInt('1')//1
parseInt('1.2')//1
parseInt('1.8')//1，一个浮点数转换为整型，直接去小数
parseInt('1adf7aef')//1，一个数字后无论跟了多少字符，转换为整型后值就是前面的数字
parseInt('a1')//NaN
parseInt('.9')//NaN，字符和点号开头的数据转换为整型都为NaN

3)只有数字0表示false，其他的数都为true，如：

!!0//false
!!1.2//true

②浮点型。所有的小数都是浮点型数据。

其他类型数据转换为浮点型：parseFloat('数据')，如：

parseFloat('1')//1
parseFloat('1.0')//1
parseFloat('1.12')//1.12
parseFloat('.1')//0.1
parseFloat('1.asd')//1
parseFloat('as1')//NaN

③NaN。NaN表示它不是一个数，但它属于Number类型，一般不会单独去定义一个变量的类型为NaN，它一般出现在出错和不可预料的结果中。

1)NaN和NaN永远不相等

NaN == NaN //false

2)判断数据是否为NaN类型：isNaN('数据')，如：

isNaN('123')//false
isNaN('asf')//true
isNaN('0/0')//true

Tip：将其他类型的数据快速转为Number型：在前面加“+”即可，如：

+1//1
+'1.2'//1.2
+false//0
+true//1
+'true'//NaN
+'1asd'//NaN

二、String

string代表字符串类型，当我们把字符或者数据含在一对括号中时，无论是单引号还是双引号，这是就表示它是一个字符串。

常见方法：

①获取字符串中的某个字符

1)'字符串'.charAt( )方法，如：

console.log('asdfsg'.charAt(0));

字符串的下标从0开始，所以上面代码执行后会返回a。

2)'字符串'[ ]方法，如：

console.log('asdfsg'[0]);//a

②判断一段字符是否包含另一段字符：'字符串'.includes('字符串')方法，如：

console.log("王花花".includes("王花"));//true
console.log("王花花".includes("花王"));//false

③用字符串将字符串分割为一个一个的子字符串，并存入一个数组中：.split('字符')方法，如：

console.log("王 花 花".split(" "));

执行结果：

该方法就是根据split后括号中的内容来切分原始字符串，将原始字符串切分成一个一个的子字符串。如上面代码中的例子，就是要按空格来切分原始字符串，在原始字符串中只要遇到空格就切分字符串。

④连接字符串：'字符串0'.concat('字符串1','字符串2','字符串3')方法，如：

console.log('y'.concat("as",'ghj','srfsf'));

执行结果：

该方法的目的是将原始字符串0和concat方法后的字符串1、字符串2、字符串3连接起来，形成一个新的字符串。

⑤截取字符串：'字符串'.slice(start,end)方法，如：

var str='asdfghjkl'
str.slice(1,4);//sdf，从第2个字符截取到第4个字符
str.slice(1,40);//sdfghjkl
str.slice(1);//sdfghjkl
str.slice(9,4)//null

该方法是要按要求获取原始子字符串中的某一段，slice方法后面传入两个参数，第一个参数表示你要截取的子字符串在原始字符串中的起始位置，第二个参数表示终止位置。它会从strat+1个元素开始截取到第end个元素。1)若省略第二个字符，会截取至最后一个字符；2)若截取长度超过原始字符串长度，也会截取至最后一个字符；3)若第一个参数大于第二个参数，则返回空。

⑥移除两头空格：'字符串'.trim( )方法，如：

console.log('  sdfa   gsh  '.trim());

执行结果：

该方法会将原始字符串两头的空格给去掉，但不会去除原始字符串中间所包含的空格。

三、Object

Object是一个对象类，目的就是使一个包含很多属性的对象结构能更加清晰明了。

①定义一个对象：

var  对象名={

      键1: '值1'，

      键2: '值2'

}

一个对象中的所有成员被包含在一对花括号中，每一个成员用一对键值对表示（key: value），它们之间使用逗号隔开，注意，当key名中包含空格或者特殊字符时，需要在key名外面加引号，如：'邮箱@': '11235@qq.com'。

另外，在一个对象中，我们还可以嵌套定义另一个对象，如：

var 王花花 = {
    姓名: '王花花',
    年龄: 18,
    生日: {
        年: 1995,
        月: '2月'
    },
    '邮箱@': '11235@qq.com'
}

②获取对象中的属性值：对象名.属性名，如获取上述代码中王花花的年龄和生日中的年：

console.log(王花花.年龄);

//返回18

console.log(王花花.生日.年);

//返回1995

另外注意一点，我们前面提到，当一个键名包含空格或者特殊字符时无法直接定义，同样也不能直接通过.键名的方式来取它的值，要通过特殊的方式['键名']的方式来取，如获取上述代码中'邮箱@'的值：

console.log(王花花['邮箱@']);

//返回11235@qq.com

这种特殊的方式还适用于取动态键名中的值，如：

var key ={
    key1: 123,
    key2: 234,
    key3: 345
}
function get_key(i) {
    var get = 'key'+i;
    return key[get];//获取动态键名的值时，使用[]
}
console.log(get_key(1);//返回123

③补充注意：

1)对象中键的键值可以是任意类型的数据；

2)一个已经声明过的对象，还是可以向这个对象中插入新的值，插入方法：对象名.键名 = 键值。如向上述代码中的key对象再插入一个key4：

key.key4 = 456;

3)定义的对象不可以重名，重名的话后面一个会覆盖前面一个。

四、Array

数组的使用便于我们对同一个属性中的值进行管理。

在该模块中，使用的a数组统一定义为：a = ['as',[123,{sdf: 'ff'},function( ){ },234],true]

①定义数组：数组名=[元素1,元素2,元素3]，使用中括号[ ]来进行定义一个数组，其中元素的类型可以是任意类型，一个数组中还可以嵌套定义一个数组，如：a = ['as',[123,{sdf: 'ff'},function( ){ },234],true]

②获取数组中的元素值：数组名[元素索引位置]

数组中的每一个元素都有用于自己定位的索引，我们通过索引就可以找的这个元素的值，索引的位置从0开始。如：

console.log(a[0]);//as
console.log(a[1][1]);//{sdf: 'ff'}

第二行代码是一种获取多维数组值的方法，它获取的就是a数组中第二个元素（其中这个元素又是一个数组）的第二个子元素的值。

③获取数组长度：数组名.length，如：

console.log(a);//3
console.log(a[1].length);//4

该方法计算的是当前数组下的一级元素，不包括它的子数组下的元素。

④添加元素：

1)从数组末尾添加：.push(新元素)

向数组a的末尾添加元素（5,6,7）:

a.push(5,6,7);
console.log(a);//['as',[123,{sdf: 'ff'},function( ){ },234],true,5.6.7]

2)从数组头部添加：.unshift(新元素)

向数组a的头部添加元素（1,2,3）:

a.unshift(1,2,3);
console.log(a);//[1,2,3,'as',[123,{sdf: 'ff'},function( ){ },234],true]

⑤删除元素：

1)从数组末尾删除：.pop( )

删除数组a末尾的元素：

a.pop();
console.log(a);//['as',[123,{sdf: 'ff'},function( ){ },234]]

2)从数组头部删除：.shift( )

删除数组a头部的元素：

a.shift();
console.log(a);//[[123,{sdf: 'ff'},function( ){ },234],true]

注：无论使用哪种删除方式，无论你在该方法体的括号中写入何种数据，每一次删除的元素个数都只有一个

⑥颠倒数组顺序：.reverse( )

逆置数组a：

a.reverse();
console.log(a);//[true,[123,{sdf: 'ff'},function( ){ },234],'as']

⑦裁剪、拼接数组

1)提取数组的某个部分：.slice(start,end)

slice方法的作用是提取原始字符串中的某部分，并以新的字符串返回这个被截取的字符串，这个字符串从strat+1的位置开始截取，截取到第end个元素。start规定从哪个位置开始截取，如果是负数，则从尾部开始算起，-1表示倒数第一个元素，但是注意下面例子中的第四行代码。end表示何时结束，如果为空，则截取到最后一个元素。对数组a做如下操作：

console.log(a.slice(-1));//true
console.log(a.slice(2));//true
console.log(a.slice(1,2));//[123,{sdf: 'ff'},function( ){ },234]
console.log(a.slice(-1,2));//[ ]，在这里如果其实位置是负值，无论end值是多少，始终返回一个空的数组。

2)裁剪数组的某个部分并拼接上替换元素：.splice(起始位置，裁剪个数，替换元素1，替换元素2...)

splice方法与slice方法有一个最本质的区别就是，splice方法会直接对原数组进行修改，而slice方法后的原数组不会有所改变。

还有一点要注意，slice方法和splice方法的第一个参数都表示要截取子数组的起始位置，而slice方法的第二个参数表示截取子数组的终止位置，splice方法的第二个参数表示要截取子数组的个数。

console.log(a.splice(-1,2));//true
console.log(a);//['as',[123,{sdf: 'ff'},function( ){ },234],true]

console.log(a.splice(2));//true
console.log(a);//["as", Array[4]]

console.log(a.splice(1,2,'123','56'));//[[123,{sdf: 'ff'},function( ){ },234],true]
console.log(a);//["as", "123", "56"]

注意看上面的例子：.splice( )方法的返回值只是你所截取的子数组，如果这个函数后面只有一个参数，默认的截取长度为1；如果裁剪位置超过数组长度，则从起始位置截取到数组最后。

⑧.foreach( )回调函数

这个方法会调用数组中的每一个元素，并把这个元素回调给函数。它无法使用break等语句跳出遍历，直到所有的元素都传递给调用函数，但可以使用抛出异来提前终止循环。

基础语法：

array.forEach(function(currentValue,index,arr){ },thisValue)

forEach方法后面的参数为一个function函数，这个函数可以直接写在forEach后的括号里也可以在方法体外部定义，函数中的第一个参数currentValue，表示当前元素，通俗来说，我自己的理解就是在遍历过程中，统一给数组的每个元素定义了一个变量名，方便我们对数组元素的使用；函数的第二个参数index，表示索引，索引会从0开始，数组的第一个元素对应索引值为0，第二个元素对应索引值为1...以此类推；函数的第三个参数arr，表示当前元素所属的数组对象。如对数组a调用foreach方法：

a.forEach(function(value,i){
    console.log('第'+i+'个元素，值为'+value);
})

执行结果：

⑨filter( )回调函数

这个方法的作用是返回满足条件的所有元素，以一个数组的形式返回。

基础语法：

array.filter(function(currentValue,index,arr){ },thisValue)

这个方法体中各个参数的含义和上面的forEach方法体中参数的含义一样，这里就不载过多赘述了，只是在function函数中，函数体写的是一个过滤条件。如对数组a调用filter方法：

var a = [1,2,3,4,5,6,7];
var value1 = a.filter(function(value){
    var v=value > 3;
    return v;
})
console.log(value1);

执行结果：

注意，1.我们要将满足条件的值放在一个新定义的变量中，不然无法达到过滤效果：

var a = [1,2,3,4,5,6,7];
var value1 = a.filter(function(value){
    value > 3;
    return value;
})
console.log(value1);

执行结果：

注意，2.在这个function函数里要有一个return，不然也无法达到过滤效果：

var a = [1,2,3,4];
var value1 = a.filter(function(value){
    var v=value > 3;
    console.log(v);
})

执行结果：

⑩.every( )回调函数

基础语法：

array.every(function(currentValue,index,arr){ },thisValue)

这个方法的作用是判断数组中的每一个值是否满足条件，当数组中的所有元素都满足function中的条件时，会返回true。该方法的参数和使用方法和filter方法完全一样。如对数组a做如下操作：

var a = [1,2,3,4,5,6,7];
var value1 = a.every(function(value){
    var v=value > 3;
    return v;
})
console.log(value1);

执行结果：

五、null

null表示空，是一个假值，如果把它放在if语句的条件中，那么if语句永远不会执行。而在js中，它不会将任何一个量的默认值为null，要设定一个变量的值为null，必须自己手动设置。另外，在介绍JavaScript（二）的时候介绍过，一个数组，它的typeof会返回为Object类。在这里typeof array也会返回为object类。

六、undefined

undefined和null一样，也是一个假值。在这里 undefined==null会 返回true。一个变量未定义有三种情况：

①未申明一个变量，却直接调用了这个变量；

②申明了一个变量，但没有给它赋值；

③定义一个变量，将它赋值为undefined。