JavaScript 数据类型详解

一,数据类型

以下内容基于ES5(ES6引入了一种新的原始数据类型Symbol,表示独一无二的值。它是JavaScript语言的第七种数据类型。)

JavaScript是一种弱类型动态语言,定义变量时无需指定类型,看似简单,但背后有繁琐的转换逻辑。让我们一起来看下js常见的数据类型和背后的隐式转换逻辑。

ES5中有5种简单的数据类型(也叫基本数据类型):number,string,boolean,null,undefined(null和undefined是两种特殊的基本数据类型,下面会讲到);还有一种复杂数据类型——Object(函数是一种特殊的对象,后面会讲到)

Undefined类型:

Undefined类型只有一个值,即特殊的undefined。在使用var声明变量但未对其加以初始化时,这个变量的值就是undefined,例如:

var message;
alert(message == undefined);//true

这个例子只声明了变量message,但未对其进行初始化。比较这个变量与undefined字面量,结果表明它们是相等的。这个例子与下面的例子是等价的:

var message = undefined;
alert(message == undefined);//true 

这个例子是用undefined值显示初始化了变量message.但我们没有必要这么做,因为未经初始化的值默认都会取得undefined值。

(一般而言,不存在需要显示地把一个变量设置为undefined值的情况。字面值undefined的主要目的是用于比较,而ECMA-262第3版之前的版本中并没有规定这个值。第3版引入这个值是为了正式区分空对象指针与未经初始化的变量。)

不过,包含undefined值的变量与尚未定义的变量还是不一样的。请看下面的例子:

var message;//这个变量声明之后默认取得了undefined值
//下面这个变量并没有声明
//var age
alert(message);//'undefined'
alert(age);//产生错误 Uncaught ReferenceError: age is not defined(…)

运行以上代码,第一个警告框会显示变量message的值,即'undefined'。而第二个警告框由于传递给alert()函数的是尚未声明的变量age,则会导致一个错误。对于尚未声明过的变量,只能执行一项操作,即使用typeof操作符检测其数据类型。

然而,令人困惑的是:对未初始化的变量执行typeof操作符会返回undefined值,而对未声明的变量执行typeof操作符同样也会返回undefined值。来看下面的例子:

var message;//这个变量声明之后默认取得了undefined值
//下面这个变量并没有声明
//var age
alert(typeof message);//'undefined'
alert(typeof age);//'undefined'

结果表明,对未初始化和未声明的变量执行typeof操作符都返回了undefined值,这个结果有其逻辑上的合理性,因为虽然这两种变量从技术角度看有本质区别,但实际上无论对哪种变量也不可能执行真正的操作。

(即使未初始化的变量会自动被赋予undefined值,但我们仍然建议读者养成显式初始化变量-即在声明变量的同时给变量赋值的习惯。如果能够做到这一点,那么当typeof操作符返回undefined值时,我们就知道被检测的变量是还没有被声明的,而不是尚未初始化的了。)

Null类型

Null类型是第二个只有一个值的数据类型,这个特殊的值就是null。从逻辑角度来看,null值表示一个空对象指针,而这也正是typeof操作符检测null值会返回'Object'的原因,如下面的例子所示:

var car = null;
alert(typeof car);//'object'

如果定义的变量准备在将来用于保存对象,那么最好将该变量初始化为null而不是其他值。这样一来,只要直接检查null值就可以知道相应的变量是否已经保存了一个对象的引用了,如下面的例子所示:

if(car != null){
 //对car执行某些操作
}

实际上,undefined值是派生自null值的,因此ECMA-262规定对它们的相等性测试要返回true;

alert(null == undefined);//'true'

这里,位于null和undefined之间的相等操作符(==)总是返回true,不过要注意的是,这个操作符出于比较的目的会转换其操作数(后面会详细介绍相关内容)。

尽管null和udefined有这样的关系,但它们的用途完全不同。如前所述,无论在什么情况下,都没有必要把一个变量的值显式地设置为undefined,可是同样的规则对null却不适用。换句话说,只要意在保存对象的变量还没有真正保存对象,就应该明确地让该变量保存null值。这样做不仅可以体现null作为空对象指针的惯例,而且也有助于进一步区分null和undefined。

二,隐式转换

+和-

在js中,虽然我们不需要显式地定义变量的类型,但在实际的处理中,会根据不同的类型,会有不同的处理。先看几个例子:

var x = 'The answer is ' + 42;//"The answer is 42" 这里的'+'会理解为字符串拼接
var y = 42 + ' is the answer';//"42 is the answer" 这里的'+'会理解为字符串拼接
'37' + 7;//"377" 这里的'+'会理解为字符串拼接
'37' - 7;//30 这里的'-'会理解为减法运算

我们也可以巧用类型转换,去做一些事情,比如想把一个变量num转换为数字类型,非常简单的办法就是减去数字‘0',如果想把一个变量num变为字符串类型,那么可以加上一个空字符串''。

var num;
num = num - 0;
alert(typeof num);//"number"
num = num + '';
alert(typeof num);//"string"

===

严格等于a===b,首先会判断等号两边的类型,如果两边的类型不同,直接返回false,不再往下进行,如果类型相同,判断值是否想等。需注意NaN和任何东西比较都不想等,包括和自己比较也不想等。另外,JavaScript中的对象的比较是用引用去比较,而不是用值去比较,所以比较两个对象也不相等,因为不是两个完全相同的对象。可以定义变量x(不区分类型),让x和x比较,返回true。

'1.23' === '1.23';//true
null === null;//true
undefined == undefined;//true
null === undefined;//false
NaN === NaN;//false NaN属于number值,和任何东西比较都不想等,包括和自己比较也不想等
NaN == NaN;//false NaN属于number值,和任何东西比较都不想等,包括和自己比较也不想等
[1,2] == [1,2];//false 由于js中对象的比较是用引用去比较,虽然两边都是数组,而且长度一样、相同的值、相同的顺序,也是不等的,因为不是完全相同的对象。
new Object() == new Object();//false 引用比较,两个空对象是不同的两个对象,不相等。
var x;
x === x;//true 定义变量x,,让x和x比较 返回true

==

如果类型相同,比较方法同'===',如果类型不同,会尝试类型转换和比较:

null == undefined //相等
number == string //尝试把string转换成number再去比较
1.0 == '1.0';//true
boolean == ? //无论右边是什么,会先把boolean先转换成数字,true转换成1,false转换成0,然后再去和右边的比较
true == 1; //true.
object == number | string //会尝试把对象转换为基本类型再去比较 其他的情况是false.
new String('hi') == 'hi';//true
new Boolean(false) == 0;//true

三,包装对象

number,string,boolean这三种基本类型都有对应的包装类型,先看一个例子:

从上面的例子可以看出,js中当把一个基本类型(比如string类型)尝试以对象的方式去使用的时候,比如访问它的length属性,或者增加一些属性的时候,js会很智能地把被操作的基本类型转换成对应的包装类型对象,(相当于new String()),这个临时包装对象的内容和基本类型的值是一样的,当完成访问或者属性设置的时候,这个临时包装对象会被销毁掉,所以再去访问已经设置的属性,是访问不到的。number和boolean基本类型转换成包装类型对象的原理都是一样的。

var a = 'string';//定义变量a,赋值基本类型'string'
alert(a.length);//"6" 创建对应的临时包装对象,访问临时包装对象的length属性,得到结果6
a.t = 3;//3,设置成功后,临时对象被销毁,所以下面alert值是undefined
alert(a.t);//"undefined"
var b = 123;
b.toString();//"123" 调用对应临时包装对象Number()上的toString()方法,转换成字符串 

四,类型检测

1,最常见的是用typeof操作符,会返回一个字符串,适合函数对象和基本类型的判断,遇到null失效,会返回Object。

typeof 100 //"number" 数值
typeof NaN; //"number" 数值
typeof Infinity;//"number" 数值
typeof true //"Boolean" 布尔值
typeof(undefined); //"undefined" 表示这个值未定义
typeof new Object(); //"object" 对象
typeof [1, 2]; //"object" 数组是对象,没有特殊处理
typeof null; //"object" null值表示一个空对象指针,所以返回Object
typeof function //"function" 从技术角度讲,函数在ECMAScript中是对象,不是一种数据类型,然而,函数也确实有一些特殊的属性,因此通过typeof操作符来区分函数和其他对象是有必要的

2,如果要判断对象类型,常用的是instanceof,适合自定义对象,也可以用来检测原生对象,在不同iframe和window间检测时失效,是基于原型链去判断,instanceof原理: 判断obj对象的原型链上是否有右边的构造函数的prototype属性,关于原型链,详见后面篇章。

obj instanceof Object(obj:必须是对象,如果是基本类型,直接会返回false;  Object:必须是函数对象,或者函数构造器,如果不是,就会抛出TypeError异常。)

看下简单的例子

new Object() instanceof Array === false //true
[1, 2] instanceof Array === true //true
[] instanceof Array===true//true

我们知道,任何一个构造函数,都有一个prototype对象属性,这个对象属性将用作使用new构造函数这种方式构造出的对象的原型。比如Person这个函数,函数有prototype属性. 我们用new Person()去创建Person实例的时候,这个对象实例就会有一个原型指向Person.prototype这个对象。我们用var bosn=new Student(),创建一个Student实例bosn,bosn的原型会指向它的构造器Student的prototype对象属性。检测bosn instanceof Person时,bosn.__proto__=Student.prototype,然后原型链会继续往上查找,bosn.__proto__.__proto__=person.prototype.就会返回true。注意,不同window或iframe间的对象类型检测不能使用instanceof!

3,Object.prototype.toString()判断类型,适合内置对象和基本类型,遇到null和undefined失效,IE6/IE7/IE8返回'[object Object]'

Object.prototype.toString.apply([]);==='[object Array]';
Object.prototype.toString.apply(function(){});==='[object Function]';
Object.prototype.toString.apply(null);==='[object Null]';//IE6/IE7/IE8返回'[object Object]'
Object.prototype.toString.apply(undefined);==='[object Undefined]';//IE6/IE7/IE8返回'[object Object]'
Object.prototype.toString.apply('123');==="[object String]";
Object.prototype.toString.apply(123);==="[object Number]";
Object.prototype.toString.apply(true);==="[object Boolean]";
Object.prototype.toString.apply(String);==="[object Function]";
Object.prototype.toString.apply(Boolean);==="[object Function]"

4,constructor检测类型

任何一个对象都有一个constructor属性,继承自原型,会执向构造这个对象的构造函数, constructor可以被改写,使用时要小心。

5,duck type检测类型

比如我们不知道一个对象是否是数组,我们可以判断这个对象的length是否是数字,是否有join,push等数组的函数方法,通过特征判断对象是否属于某些类型,有时也会用到。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持我们!

(0)

相关推荐

  • 详解Javascript数据类型的转换规则

    一.数据类型 5种基本数据类型:Null/Undefined/String/Boolean/Number 1种复杂数据类型:Object 二.数据类型检测 传送门<JS中检测数据类型的几种方式及优缺点小结> 1.typeof 2.instanceof/constructor 3.Object.prototype.toString.call(value) 4.Object.prototype.toString 三.数据类型转换 JS内部提供不同数据类型的自动转换机制,在某处预期为某种类型而不是某

  • JS中检测数据类型的几种方式及优缺点小结

    1.typeof 用来检测数据类型的运算符 typeof value 返回值首先是一个字符串,其次里面包含了对应的数据类型,例如:"number"."string"."boolean"."undefined"."object"."function" 局限性: 1)typeof null ->"object" 2)检测的不管是数组还是正则都返回的是"ob

  • 简单谈谈js的数据类型

    近期做一些项目的时候发现,自己的js基础还是不够扎实,再看一遍犀牛书,加深自己的理解和印象.所以从这篇文章开始,后面都是关于原生js的一些内容. 这篇文章,我们具体介绍一下js的数据类型其中一种. 一.javaScript(以下简称js)的数据类型分为两类:原始类型和对象类型.js的原始类型包括数字.字符串和布尔值. 二.js有两个特殊的原始值:null(空)和undefined(未定义),它们不是数字.字符串和布尔值.它们通常分别代表各自特殊类型的唯一成员. 三.js中除了数字.字符串.布尔值

  • 老生常谈js数据类型

    js数据类型主要分为基本数据类型和引用数据类型 基本数据类型和引用数据类型的区别: 基本数据类型是对值得引用,引用数据类型是对地址的引用: 基本数据类型存放在栈内存,栈内存提供了供JS代码执行的环境,引用数据类型存放在对内存 基本数据类型包括: Array 数组 string 字符串 number 数字 beloon 布尔值 null undefined 引用数据类型包括: 对象数据类型 函数数据类型 对象数据类型又分为:数组[], 对象{}, 正则RegExp, 日期对象 对象数据类型存放在对

  • 详解js的六大数据类型

    js中有六种数据类型,包括五种基本数据类型(Number,String,Boolean,Null,Undefined),和一种混合数据类型(Object). 前面说到js中变量是松散类型的,因此有时候我们需要检测变量的数据类型. typeof操作符可以检测变量的数据类型(输出的是一个关于数据类型的字符串). 返回如下6种字符串:number,string,boolean,object,undefined,function.且看如下例子: var x = 1; console.log(typeof

  • 浅谈javascript中的数据类型转换

    1.把其他的数据类型转换为number类型 Number()->严格 parseFloat/parseInt ->非严格 isNaN(value) 如果value值不是数字类型的,它是首先调用Number转换为数字类型然后在判断是否为有效的数字 例如: Number("12px"); ->NaN parseInt("12px"); ->12 isNaN("12"); ->false 规律: 1)把布尔类型转换为数字的

  • javascript基本数据类型和转换

    ECMAScript中有5种基本数据类型:Undefined.Null.Boolean.Number.String.还有1种复杂数据类型-Object,Object实质上是由一组无序的名值对(键值对)组成的.ECMAScript不支持任何创建自定义类型的机制. 由于ECMAScript是松散型的,所以需要一种手段来检测变量的数据类型,typeof就是具有这种功能的操作符.用typeof检测变量可能返回以下某个字符串: "undefined" 变量未定义 "boolean&qu

  • JavaScript数据类型详解

    数据类型 JavaScript中有5种简单数据类型(也称为基本数据类型):Undefined.Null.Boolean.Number和String.还有1种复杂数据类型--Object,Object本质上是由一组无序的名值对组成的. typeof操作符 介于JavaScript是松散类型的,因此需要有一种手段来检测给定变量的数据类型--typeof就是负责提供者方面信息的操作符.对一个值使用typeof操作符可能返回下列某个字符串: ● "undefined"--如果这个值未定义: ●

  • JavaScript 数据类型详解

    一,数据类型 以下内容基于ES5(ES6引入了一种新的原始数据类型Symbol,表示独一无二的值.它是JavaScript语言的第七种数据类型.) JavaScript是一种弱类型动态语言,定义变量时无需指定类型,看似简单,但背后有繁琐的转换逻辑.让我们一起来看下js常见的数据类型和背后的隐式转换逻辑. ES5中有5种简单的数据类型(也叫基本数据类型):number,string,boolean,null,undefined(null和undefined是两种特殊的基本数据类型,下面会讲到):还

  • JavaScript中 ES6 generator数据类型详解

    1. generator简介 generator 是ES6引入的新的数据类型, 看上去像一个函数,除了使用return返回, yield可以返回多次. generator 由function* 定义, (注意*号), 2. 示例 函数无法保存状态, 有时需要全局变量来保存数字: 2.1 'use strict'; function next_id(){ var id = 1; while(id<100){ yield id; id++; } return id; } // 测试: var x,

  • TypeScript中定义变量方式以及数据类型详解

    目录 TypeScript定义变量 变量声明格式 变量类型推导 JS和TS的数据类型 TS中使用JS的数据类型 number类型 boolean类型 string类型 Array类型 Object类型 Symbol类型 null和undefined类型 TS自身特有的数据类型 any类型 unknown类型 void类型 never类型 tuple类型 总结 TypeScript定义变量 变量声明格式 我在前面强调过,在TypeScript中定义变量需要指定 标识符 的类型. 所以完整的声明格式

  • COM组件中调用JavaScript函数详解及实例

    COM组件中调用JavaScript函数详解及实例 要求是很简单的,即有COM组件A在IE中运行,使用JavaScript(JS)调用A的方法longCalc(),该方法是一个耗时的操作,要求通知IE当前的进度.这就要求使用回调函数,设其名称为scriptCallbackFunc.实现这个技术很简单: 1 .组件方(C++) 组件A 的方法在IDL中定义: [id(2)] HRESULT longCalc([in] DOUBLE v1, [in] DOUBLE v2, [in, optional

  • SQL SERVER 数据类型详解补充2

    数据类型 类型 描 述 bit 整型 bit 数据类型是整型,其值只能是0.1或空值.这种数据类型用于存储只有两种可能值的数据,如Yes 或No.True 或Fa lse .On 或Off int 整型 int 数据类型可以存储从- 231(-2147483648)到231 (2147483 647)之间的整数.存储到数据库的几乎所有数值型的数据都可以用这种数据类型.这种数据类型在数据库里占用4个字节 smallint 整型 smallint 数据类型可以存储从- 215(-32768)到215

  • 在Node.js中使用Javascript Generators详解

    Generators是Javascript的一种协同程序( coroutine 简称:协程)风格,是指那些可以在执行时暂停然后又恢复的函数,该函数是在functi配以星号符号形式如function* ,函数内有些特征关键词如yield 和yield*. function* generatorFn () { console.log('look ma I was suspended') } var generator = generatorFn() // [1] setTimeout(functio

  • JavaScript cookie详解及简单实例应用

    JavaScript cookie详解 一.cookie基本介绍 cookie是document的对象.cookie可以使得JavaScript代码能够在用户的硬盘上持久地存储数据,并且能够获得以这种方式存储的数据.cookie还可以用于客户端脚本化. cookie数据可以自动地在Web浏览器好Web服务器之间传递. 在浏览器中可以通过navigator.cookieEnabled属性检查浏览器的cookie功能是否被激活.     二.cookie的基本属性     每个cookie都有四个可

  • pandas中的series数据类型详解

    本文介绍了pandas中的series数据类型详解,分享给大家,具体如下: import pandas as pd import numpy as np import names ''' 写在前面的话: 1.series与array类型的不同之处为series有索引,而另一个没有;series中的数据必须是一维的,而array类型不一定 2.可以把series看成一个定长的有序字典,可以通过shape,index,values等得到series的属性 ''' # 1.series的创建 '''

  • python基础知识(一)变量与简单数据类型详解

    1.1变量 变量的命名规则: 1.只能包含字母.数字.下划线,且不能用数字开头 2.不能使用python关键字 3.简短且具有描述性 1.2字符串 python中用引号引起来的都是字符串,单引号双引号都可以 a.字符串的索引 s = 'ABCDEF' #索引 s1 = s[0] s2 = s[-1] s3 = s[0:4] print(s1) #A print(s2) #F print(s3) #ABC,左闭右开 #打印全部 s4 = s[:] #s[0:] print(s4) s5 = s[0

随机推荐