JavaScript高级之数据类型及其判断方法

最新推荐文章于 2023-02-18 13:38:56 发布

二木成林

最新推荐文章于 2023-02-18 13:38:56 发布

阅读量1.7k

点赞数

分类专栏： # JavaScript 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/cnds123321/article/details/121962657

版权

JavaScript 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

数据类型分类

在JavaScript中数据类型分为：基本数据类型和引用数据类型。如下：

基本数据类型
- String：任意字符串
- Number：任意数字，包括整数和浮点数
- boolean：布尔值，true或者false
- undefined：undefined
- null：null
引用数据类型
- Object：任意对象
- Function：一种特别的对象，可以执行
- Array：一种特别的对象，有序存放数据

// 基本数据类型
var str = "hello world";// 字符串
var num = 10;// 数字
var bool = true;// 布尔值
var v1 = undefined;// undefined
var v2 = null;// null

// 引用数据类型
var obj = {name: '张三', age: 18};// 对象
var array = [1, 2, 3, 4];// 数组
var fun = function () {// 函数
    return "function";
};

数据类型判断

判断数据的数据类型在JavaScript中有三种方式：

typeof关键字
instanceof关键字
===操作符

`typeof`

注意，typeof 变量返回值是一个字符串，所以要判断数据类型需要判断是否全等于特定字符串。

// 基本数据类型
var str = "hello world";// 字符串
console.log(typeof str === 'string');// true
var num = 10;// 数字
console.log(typeof num === 'number');// true
var bool = true;// 布尔值
console.log(typeof bool === 'boolean');// true
var v1 = undefined;// undefined
console.log(typeof v1 === 'undefined');// true
var v2 = null;// null
console.log(typeof v2);// object
console.log(typeof v2 === 'object');// true

console.log('=============================');

// 引用数据类型
var obj = {name: '张三', age: 18};// 对象
console.log(typeof obj === 'object');// true
var array = [1, 2, 3, 4];// 数组
console.log(typeof array);// object
console.log(typeof array === 'object');// true
var fun = function () {// 函数
    return "function";
};
console.log(typeof fun === 'function');// true

结论：

使用typeof关键字能判断的数据类型包括任意字符串、任意数字、布尔值、undefined、函数。不能判断的数据类型包括null、任意对象、数组。
使用typeof关键字判断null、任意对象和数组返回的结果都是object，因此无法判断。
使用typeof关键字判断数据类型，返回的是一个字符串，如果要判断必须使用全等于符号===判断是否等于指定的数据类型字符串。
各数据类型使用typeof关键字判断的结果如下表：

判断	结果
`typeof 'name'`	`'string'`
`typeof 100`	`'number'`
`typeof true`	`'boolean'`
`typeof undefined`	`'undefine'`
`typeof function () {}`	`'function'`
`typeof null`	`'object'`
`typeof new Object()`	`'object'`
`typeof [1, 2]`	`'object'`

`instanceof`

instanceof也是一个关键字，它只用来判断引用数据类型，而不能判断基本数据类型。

// 引用数据类型
var obj = {name: '张三', age: 18};// 对象
console.log(obj instanceof Object, obj instanceof Array, obj instanceof Function);// true false false
var array = [1, 2, 3, 4];// 数组
console.log(array instanceof Object, array instanceof Array, array instanceof Function);// true true false
var fun = function () {// 函数
    return "function";
};
console.log(fun instanceof Object, fun instanceof Array, fun instanceof Function);// true false true

// 复杂的情况，但只要知道它们的数据类型能很容易在任何情况下使用
var oo = {
    o1: [1, 'abc', true, console.log],
    o2: {
        name: '张三',
        fun: function () {
            return function () {
                return "10086";
            }
        }
    }
};
console.log(oo.o1 instanceof Array);// true
console.log(oo.o1[3] instanceof Function);// true
console.log(oo.o2 instanceof Object);// true
console.log(oo.o2.fun instanceof Function);// true
console.log(oo.o2.fun() instanceof Function);// true
console.log(oo.o2.fun()());// 10086

结论：

变量 instanceof Object|Array|Function只能判断对象、数组和函数三种引用数据类型，而不能判断基本数据类型。
数组既是Object类型又是Array类型，所以判断数组使用instanceof Array来判断；函数既是Object类型又是Function类型，所以判断函数使用instanceof Function来判断。

`===`

===是先检查操作符左右两侧的数据类型是否相同，如果相同则比较二者的值是否相等，如果不同则直接返回false。

var v1 = undefined;
console.log(v1 === undefined);// true
var v2 = null;
console.log(v2 === null);// true

结论：

===符号可以判断undefined和null的情况。

区别

`===`与`==`的区别

===比较：先比较等号两侧的数据类型是否相同，如果不同则返回false；如果相同则进一步比较值是否相同，如果值也相同则返回true，否则返回false。

// ===先比较数据类型，再比较值
console.log(1 === 2);// false 数据类型相同而值不同
console.log('1' === 1);// false 数据类型不同
console.log('abc' === 'a');// false 数据类型相同而值不同
console.log('a' === "a");// true 数据类型相同而值相同
console.log(NaN === NaN);// false 比较特殊，NaN和任何值比较都返回false包括它本身
console.log(false === false);// true 数据类型相同而值相同

==比较：先比较等号两侧的数据类型是否相同，如果不同则转换成相同数据类型，再比较值是否相同，如果值相同则返回true，值不同则返回false；如果相同则直接比较值是否相同。

// ==先比较数据类型，可能转换数据类型，再比较值
console.log(1 == 2);// false
console.log('1' == 1);// true
console.log('abc' == 'a');// false
console.log('a' == "a");// true
console.log(NaN == NaN);// false 比较特殊，NaN和任何值比较都返回false包括它本身
console.log(false == false);// true
console.log(1 == [1]);// true
console.log(1 == false);// false
console.log(1 == true);// true
console.log(0 == false);// true
console.log(undefined == null);// true
console.log(null == 0);// false
console.log(undefined == 0);// false

那么在使用==进行比较的时候可能会遇到'1'==1到底是字符串转换成数字类型进行比较呢？还是数字类型转换成字符串类型进行比较呢？这就涉及到JavaScript数据类型的转换。

数据类型的转换

其他类型转换成Number

数据类型	转换规则
String	如果是纯数字字符串则转换成对应的数字；空字符串和空格字符串则转换为0；其他字符串转换成NaN
Boolean	true转换为1；false转换为0
Object	调用valueOf()的返回结果，没有则返回toString()结果，如果对象没有valueOf()和toString()则返回NaN
null	返回0
undefined	返回NaN

如下：

// 其他类型转换成Number
// String -> Number
console.log(Number("abc"));// NaN 非数字字符串转换结果为NaN
console.log(Number("123"));// 123 数字字符串转换成对应的数字
console.log(Number(12.45));// 12.45 数字字符串转换成对应的数字
console.log(Number(''));// 0 空字符串转换成0
console.log(Number('   '));// 0 空格字符串转换成0
// Boolean -> Number
console.log(Number(true));// 1 true转换成1
console.log(Number(false));// 0 false转换成0
// Object -> Number
console.log(Number([]));// 0 空数组转换成0
console.log(Number([1]));// 1 只有一个元素的数组并且那个元素是1则转换成1
console.log(Number([0]));// 0 只有一个元素的数组并且那个元素是0则转换成0
console.log(Number([1, 2]));// NaN 多个元素的数组转换成NaN
console.log(Number({}));// NaN 空对象转换成NaN
console.log(Number({bool: true}));// NaN 存在一个或多个元素的对象转换成NaN
console.log(Number(function () {

}));// NaN 空函数转换成NaN
console.log(Number({
    valueOf: function () {
        return 10;
    }
}));// 10 对象中有valueOf则返回valueOf的结果
console.log(Number({
    toString: function () {
        return 20;
    }
}));// 20 对象中有toString则返回toString的结果
console.log(Number({
    valueOf: function () {
        return '123';
    },
    toString: function () {
        return 321;
    }
}));// 123 对象中既有toString又有valueOf则返回valueOf的结果
console.log(Number({
    name: '张三',
    age: 12,
    gender: function () {
        return '0';
    }
}));// NaN 对象中既没有toString又没有valueOf则返回NaN
// null -> Number
console.log(Number(null));// 0 null被转换成0
// undefined -> Number
console.log(Number(undefined));// NaN undefined被转换成NaN
// 其他
console.log(Number([true]));// NaN
console.log(Number([false]));// NaN
console.log(Number(["1"]));// 1
console.log(Number(["0"]));// 0
console.log(Number(["123"]));// 123
console.log(Number(["a"]));// NaN
console.log(Number([null]));// 0
console.log(Number([null, null]));// NaN

其他类型转换成String

数据类型	转换规则
Number	数字转换成对应的数字字符串形式；NaN转换成"NaN"
Boolean	true转换成"true"；false转换成"false"
Object	返回toString()的返回值，默认是"[object Object]"
null	返回"null"\
undefined	返回"undefined"

如下：

// 其他类型转换成String
// Number -> String
console.log(String(123));// '123'
console.log(String(12.34));// '12.34'
console.log(String(NaN));// 'NaN'
// Boolean -> String
console.log(String(true));// 'true'
console.log(String(false));// 'false'
// Object -> String
console.log(String({}));// [object Object]
console.log(String({name: '张三', age: 12}));// [object Object]
console.log(String([]));
console.log(String([1, 2]));// 1,2
console.log(String({
    toString: function () {
        return "hello javascript";
    }
}));// 'hello javascript'
// null -> String
console.log(String(null));// 'null'
// undefined -> String
console.log(String(undefined));// 'undefined'

其他类型转换成Boolean

数据类型	转为true的值	转为false的值
Number	任何非零数字，包括无穷大	`0`、`-0`、`0.0`、`NaN`
String	任何非空字符串，包括空格字符串	空字符串`''`
Object	任何对象	无
null	无	`null`
undefined	无	`undefined`

如下：

// 其他类型转Boolean
// Number -> Boolean
console.log(Boolean(123));// true
console.log(Boolean(12.34));// true
console.log(Boolean(-12));// true
console.log(Boolean(0));// false
console.log(Boolean(0.0));// false
console.log(Boolean(-0));// false
console.log(Boolean(NaN));// false
// String -> Boolean
console.log(Boolean('123'));// true
console.log(Boolean('abc'));// true
console.log(Boolean(''));// false
console.log(Boolean('   '));// true
// Object -> Boolean
console.log(Boolean({}));// true
console.log(Boolean([]));// true
console.log(Boolean(function () {

}));// true
console.log(Boolean({a: 'a', b: 1}));// true
// null -> Boolean
console.log(Boolean(null));// false
// undefined -> Boolean
console.log(Boolean(undefined));// false

Number、String与Boolean的比较

它们的比较是针对==的，而非===，因为===比较如果数据类型不同直接返回false而不会进行数据类型转换。

Number、String、Boolean三者之间的相互比较都是先转换成数字再进行比较的。
Object和其他类型比较，都是调用toPrimitive的返回值进行比较（先调用valueOf()方法获取返回结果，如果没有valueOf则调用toString()方法获取返回结果）。
null和undefined的比较不用做转换。null==undefined返回true；null===undefined返回false。
NaN不与任何值相等，包括NaN==NaN也是返回false。

// String、Boolean与Number三者之间的比较
// 先转换成数字，''转换结果为0，0不等于1则返回false
console.log('' == 1); // false
// 先转换成数字，' '转换结果为0，0不等于1则返回false
console.log(' ' == 1); // false
// 先转换成数字，true转换结果为1，1等于1则返回true
console.log(true == 1); // true
// 先转换成数字，true转换结果为1，'1'转换结果为1，1等于1则返回true
console.log(true == '1'); // true
// 先转换成数字，true转换结果为1，'2'转换结果为2，1不等于2则返回false
console.log(true == '2'); // false
// 先转换成数字，' '转换结果为0，true转换结果为1，0不等于1则返回false
console.log(' ' == true); // false
// 先转换成数字，"0"转换结果为0，true转换结果为1，0不等于1则返回false
console.log("0" == true); // false
// 先转换成数字，"0"转换结果为0，false转换结果为0，0等于0则返回true
console.log("0" == false); // true
// 先转换成数字，"00"转换结果为0，false转换结果为0，0等于0则返回true
console.log("00" == false); // true
// 先转换成数字，"0.00"转换结果为0，false转换结果为0，0等于0则返回true
console.log("0.00" == false); // true
// 不会做类型转换，之间返回true
console.log(undefined == null);  // true
// 先转换成数字，null转换结果为0，'null'转换结果为NaN，0不等于NaN则返回false
console.log(null == 'null'); // false
// 先转换成数字，{}转换结果为NaN，true转换结果为1，NaN不等于1则返回false
console.log({} == true);  // false
// 先转换成数字，[]转换结果为0，true转换结果为1，0不等于1则返回false
console.log([] == true);  // false

// 对象与String、Number、Boolean之间的比较
var obj = {
    a: 0,
    valueOf: function () {
        return 1
    }
};
// 先转换成数字，对象obj转换结果为1，'[object Object]'转换结果为NaN，1不等于NaN则返回false
console.log(obj == '[object Object]');  // false
// 先转换成数字，对象obj转换结果为1，1等于1则返回true
console.log(obj == 1);  // true
// 先转换成数字，对象obj转换结果为1，true转换结果为1，1等于1则返回true
console.log(obj == true);  // true

// 在if判断语句中，其他类型与Boolean的转换
// 先转换成布尔值，""转换结果为false，if语句块不执行
if ("") {
    console.log('empty')
} // 无
// 先转换成布尔值，" "转换结果为true，if语句块执行
if (" ") {
    console.log('blank')
} // blank
// 先转换成布尔值，[0]转换结果为true，if语句块执行
if ([0]) {
    console.log('array')
} // array
// 先转换成布尔值，'0.00'转换结果为true，if语句块执行
if ('0.00') {
    console.log('0.00')
} // 0.00

// !与==的优先级：!取反优先级比==高，但建议加小括号取反
// 由于!比==的优先级高，所以先运算!" "结果为false（因为" "转换结果为true），false不等于true则返回false
console.log(!" " == true);// false
// 由于!比==的优先级高，所以先运算!" "结果为false（因为" "转换结果为true），false等于false则返回true
console.log(!" " == false);// true

`undefined`与`null`的区别

注意：undefined==null返回true；undefined===null返回false。

`undefined`

undefined表示已定义但未赋值。常见用法如下：

声明了变量，但没有赋值，如果使用该变量则等于undefined。
调用了函数但没有提供对应的参数，则在函数内部使用该参数等于undefined。
调用了对象中未声明或未赋值的属性，则该属性的值等于undefined。
如果函数没有返回值，则默认返回undefined。

例如：

// 例如，定义一个变量，不赋值，则结果为undefined
var a;
console.log(a);// undefined

// 例如，调用函数时，应该提供的实参但并没有提供，那么该参数等于undefined
function f(num) {
    console.log(num);// undefined
}
f();

// 例如，调用对象未赋值的属性，该属性的值为undefined
var obj = {
    name: '张三',
    age: 14
};
console.log(obj.gender);// undefined

// 例如，函数没有返回值值，默认返回值是undefined
var result = f(12);
console.log(result);// undefined

`null`

null表示已定义并且已赋值，只是值为null。常见用法如下：

在声明一个变量时，初始赋值为null，表明将要赋值为对象。
当要销毁一个对象时，赋值为null，让垃圾回收器回收它。

例如：

var a = null;// 初始赋值为null，表明将要赋值为对象
console.log(a);
a = {
    name: 'zhangsan',
    age: 12
};// 确定对象就进行赋值
console.log(a);
a = null;// 销毁对象，让它成为垃圾对象被垃圾回收器回收
console.log(a);