JavaScript 数据类型

最新推荐文章于 2022-01-29 16:22:37 发布

huaying.chen

最新推荐文章于 2022-01-29 16:22:37 发布

阅读量1.2k

点赞数 2

分类专栏： Oscar_web 文章标签： javascript prototype typeof instanceof JavaScript判断数据类型

本文链接：https://blog.csdn.net/crave_shy/article/details/42643753

版权

Oscar_web 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

JavaScript 数据类型

一：简介

再提数据类型是因为其与操作符结合、以及如何判断一个变量是哪种类型时会有一些容易让人疑惑的地方、比如数据类型与操作符组合之后的结果有时候并不是我们想象的那样。再比如=、== 与===有什么区别。

二：隐式转换

下面的测试可以通过chrome浏览器的开发者模式（按F12调出）的console中直接输入、回车后再输入相应的变量名就可以很直观的看到结果。

JavaScript中比较两个数据是否相同可以使用“==”或者“===”。前者在比较时如果两个数据类型不同、则会做一定转换再比较。后则为绝对相等、如果相比较的两个对象类型不同则直接返回false。

隐式转换见于两个相比较对象对比时。

a===b:

类型不同直接返回false、
类型相同再进一步比较值是否相同、需要注意的是：如果是对象比较、JavaScript比较的是两个对象的引用是否为同一引用、是则为true、否则为false。
null === null、undefined === undefined、NaN != NaN、new Object != new Object.

a==b :

类型相同、与a===b等价。
类型不同
1. null与undefined相等
2. number与String相比时String转换成number
3. Boolean与其他相比时、true转换成1 false转换成0.但是如果是先定义一个变量值为 1 再与true做对比则结果为false。
4. object与其他相比时、object转为基本类型、其他false。

example：

var str1 = '12.5';
var num1 = 12.5;
console.info("str1 + num1 : " + (str1 + num1));
console.info("str1 - num1 : " + (str1 - num1));
console.info("str1 * num1 : " + (str1 * num1));
console.info("str1 / num1 : " + (str1 / num1));
console.info("=========================================\r\n");

// string number interconversion
var strFromNum = 12.5 + "";
console.info("strFromNum type : " + typeof strFromNum);
var numFromStr = '12.5' - 0;
console.info(("numFromStr type : " + typeof numFromStr));
console.info("=========================================\r\n");

// == example
var str2 = '25.0';
var str3 = new String('25.0');
var num2 = 25.0;
var num3 = 0;
var num4 = 1;
var booTrue = true;
var booFalse = false;
var arr1 = [1, 2];
var arr2 = [1, 2];
console.info("str2 == str3 : " + (str2 == str3));
console.info("str2 == num2 : " + (str2 == num2));
console.info("str3 == num2 : " + (str3 == num2));
console.info("booTrue == num3 : " + (booTrue == num3));
console.info("booFalse == num4 : " + (booFalse == num4));
console.info("booTrue == 1 : " + (booTrue == 1));
console.info("booFalse == 0 : " + (booFalse == 0));
console.info("arr1 == arr2 : " + (arr1 == arr2));
console.info("null == undefined : " + (null == undefined));
console.info("NaN == NaN : " + (NaN == NaN));
console.info("=========================================\r\n");

// === example
console.info("str2 === str3 : " + (str2 === str3));
console.info("str2 === num2 : " + (str2 === num2));
console.info("str3 === num2 : " + (str3 === num2));
console.info("booTrue === num3 : " + (booTrue === num3));
console.info("booFalse === num4 : " + (booFalse === num4));
console.info("booTrue === 1 : " + (booTrue === 1));
console.info("booFalse === 0 : " + (booFalse === 0));
console.info("arr1 === arr2 : " + (arr1 === arr2));
console.info("null === undefined : " + (null === undefined));
console.info("NaN === NaN : " + (NaN === NaN));
console.info("=========================================\r\n");

三：类型检测

JavaScript中可以通过一下几种方式来判断一个数据的类型：typeof、instanceof、Object.prototype.toString、constructor、duck type.

1.typeof:

a)适用于判断基本类型和函数类型。

b)typeof null结果为“Object”。

c)typeof判断数组、输出结果为Object。

example：

/*
    要点：
        1. 基本类型没有属性、方法
        2. 调用基本类型会产生临时包装对象、调用完成之后包装对象就被消耗、此时再想获取基本类型的伪属性就会返回undefined。
 */
var str4 = 'alien';
console.info("str4.length : " + str4.length);
console.info("str4.p : " + (str4.p = 'star'));
console.info("str4.p : " + str4.p);
console.info("=========================================\r\n");

console.info("typeof 1: " + typeof 1);
console.info("typeof '1': " + typeof '1');
console.info("typeof boolean: " + typeof false);
console.info("typeof null: " + typeof null);
console.info("typeof undefined: " + typeof undefined);
console.info("typeof [1, 2]: " + typeof [1, 2]);
console.info("typeof Math: " + typeof Math);
function fun (){}
console.info("typeof fun: " + typeof fun);
console.info("typeof NaN: " + typeof NaN);
console.info("=========================================\r\n");

2.instanceof

a)适用于判断被检测类型属于哪种对象类型——obj instanceof Object;

b)其左边的运算数是一个对象，右边的运算数是对象类的名字或构造函数。如果 object 是 class 或构造函数的实例，则 instanceof 运算符返回 true。如果 object 不是指定类或函数的实例，或者 object 为 null，则返回false。

c)instanceof 不能跨iframe使用！不同iframe中创建的对象不会共享一个prototype。

example:

console.info("[1, 2] instanceof Array : " + [1, 2] instanceof Array);
function Person(){}
function Student(){}
Student.prototype = new Person();
Student.prototype.constructor = Student;
var alien = new Person();
console.info("alien instanceof Person : " + alien instanceof Person);
var student = new Student();
console.info("student instanceof Person : " + student instanceof Person);
console.info("=========================================\r\n");

3.Object.prototype.toString.apply();

通过对象的prototype判断其具体类型、可用于判断数组类型

example:

Object.prototype.toString.apply([]); //"[object Array]"
Object.prototype.toString.apply(function(){}); //"[object Function]"
Object.prototype.toString.apply(Math); //"[object Math]"
Object.prototype.toString.apply(new Person()); //"[object Object]"
Object.prototype.toString.apply(null); //"[object Null]"
Object.prototype.toString.apply(NaN); //"[object Number]"
Object.prototype.toString.apply('alien'); //"[object String]"
Object.prototype.toString.apply(undefined); //"[object Undefined]"
console.info("=========================================\r\n");

constructor 、通过构造器判断类型、constructor可以被改写、不经常用
duck type 鸭子类型、通过类型特有属性或者方法来判断数据类型、如判断一个数据类型是否是数组可以查看此数据是否有length属性等。

四：总结

typeof：适合基本类型和function检测、遇到null则失效。

Object.prototype.toString.applay()判断。

instancof：适合自定义对象、也可以用来检测原生对象、在不同iframe和window之间失效。

后两种不常用、视情况而定。

五：补充

测试结果：

/*
 * Result :

 str1 + num1 : 12.512.5
 str1 - num1 : 0
 str1 * num1 : 156.25
 str1 / num1 : 1
 =========================================

 strFromNum type : string
 numFromStr type : number
 =========================================

 str2 == str3 : true
 str2 == num2 : true
 str3 == num2 : true
 booTrue == num3 : false
 booFalse == num4 : false
 booTrue == 1 : true
 booFalse == 0 : true
 arr1 == arr2 : false
 null == undefined : true
 NaN == NaN : false
 =========================================

 str2 === str3 : false
 str2 === num2 : false
 str3 === num2 : false
 booTrue === num3 : false
 booFalse === num4 : false
 booTrue === 1 : false
 booFalse === 0 : false
 arr1 === arr2 : false
 null === undefined : false
 NaN === NaN : false
 =========================================

 str4.length : 5
 str4.p : star
 str4.p : undefined


 typeof 1: number
 typeof '1': string
 typeof boolean: boolean
 typeof null: object
 typeof undefined: undefined
 typeof [1, 2]: object
 typeof Math: object
 typeof fun: function
 */