JavaScript高级程序设计(第3版)学习笔记3 js简单数据类型


Posted in Javascript onOctober 11, 2012

ECMAScript是一种动态类型的语言,构建于5种简单数据类型(Undefined、Null、Boolean、Number、String)和一种复杂数据类型(Object)的基础之上。这篇文章就来复习一下简单数据类型,我会尽量从编程实践的角度来描述,下面代码运行环境为FireFox 14.0.1。

简单数据类型

简单数据类型 取值
Undefined undefined(只有一个值)
Null null(只有一个值)
Boolean true|false(只有两个值)
Number 数值
String 字符串

首先需要说明的是,在ECMAScript中,上述5种简单数据类型,其中Boolean、Number、String都有同名的内置包装对象,而简单数据类型的字面值(变量)会根据情况自动包箱,从而可以直接调用方法,至于具体可以调用哪些方法,在讨论内置对象时再详细说明:

console.info(true.toString());//true,相当于使用Boolean()包装之后再调用 
console.info(Boolean(false).toString());//false,将false转换为Boolean类型值 
console.info(new Boolean(false).toString());//false,将false使用Boolean()包装 
console.info(false.toString());//false,相当于使用Boolean()包装之后再调用 
console.info('test'.toString());//test,相当于使用String()包装之后再调用 try{ 
console.info(undefined.toString());//没有相应包装类型,抛出异常 
}catch(e){ 
console.info(e);//TypeError 
} 
try{ 
console.info(null.toString());//没有相应包装类型,抛出异常 
}catch(e){ 
console.info(e);//TypeError 
} 
var num = 4; 
console.info(num.toString());//4,可以直接在简单数值变量上调用方法,相当于使用Number()包装之后再调用 
//console.info(3.toString());//SyntaxError,语法错误不能使用try捕获,说明不能直接在数值字面量上调用

其次说一下实际用的最多的数据转换:

(1)转换为Boolean:!!value

(2)转换为Number:+value

(3)转换为String:''+value

下面再具体说明5种简单数据类型:
1、Undefined类型

Undefined数据类型只有一个取值:undefined。
(1)所有未初始化的值都默认为undefined(也就没有必要把一个变量显示初始化为undefined了)。
(2)在函数作用域中,没有传入实际参数的函数形参为undefined。
(3)函数没有明确返回或者return;的时候,返回值为undefined。
(4)在ECMAScript中,规定null==undefined返回true,而null===undefined返回false。
(5)undefined相应的Boolean值为false。
(6)使用typeof作用于undefiend时,返回字符串'undefined',作用于一个从未声明的“变量”时,也会返回'undefined'。
(7)undefined转换数值为NaN,转换字符串为'undefined'。

console.info(undefined===undefined);//true 
console.info(typeof undefined);//undefined 
console.info(typeof noDefined);//undefined,未定义的标识符,使用typeof也返回undefined,这也是未定义的标识符唯一可用的的操作符 
console.info(!undefined);//true,这里返回true,正是很多条件语句中判断变量是否初始化的基础 
console.info(!!undefined);//任何一个值,使用双重否定!!都会将其转换为相应的Boolean值,这里说明undefiend相应的Boolean值为false 
console.info(undefined==null);//ES中规定,null与undefined相等性测试返回true 
console.info(undefined===null);//但undefined与null毕竟是两个数据类型,使用全等比较时,返回false 
console.info(typeof undefined==undefined);//false,typeof undefined返回的是一个字符串'undefined',所以这里输出false 
console.info(+undefined);//NaN,转换数值时为NaN 
console.info(''+undefined);//undefined,转换为字符串'undefined'

2、Null类型

Null类型也只有一个值:null。
(1)对null值使用typeof时,返回字符串'object'。
(2)null相应的Boolean值为false。
(3)如果一个变量用于保存一个对象,建议初始化为null。
(4)null转换数值为0,转换字符串为'null'。

console.info(null===null);//true 
console.info(typeof null);//object 
console.info(!null);//true 
console.info(!!null);//false,说明null相应的Boolean值为false 
console.info(undefined==null);//true 
console.info(undefined===null);//false 
console.info(+null);//0,转换为数值0 
console.info(''+null);//null,转换为字符串'null'

3、Boolean类型

Boolean类型只有两个值:true和false。
(1)虽然只有两个值,但是任何一种数据类型的值都能转换为与其相对应的Boolean值,转换方式主要有三种:

A、通过转型函数Boolean()转换

需要注意的是,当Boolean()作为转换函数时,会转换为一个与其相应的Boolean值,当作为构造函数时,会创建一个对象,而任意非空对象的Boolean值都是true,有时候这会造成误解,建议就是不使用Boolean()。对于String()、Number()也有类似情况。

B、通过双重否定!!操作符转换

C、通过隐式转换,比如一些条件语句中
(2)Boolean类型的true和false,使用typeof时,均返回字符串'boolean'。
(3)在转换为数值时,true和false分别转换为1和0,转换为字符串时,分别为'true'和'false'。

var value = 'test'; 
var empty = ''; 
console.info(!!value);//true 
console.info(!!empty);//false 
console.info(Boolean(value));//true 
console.info(Boolean(empty));//false 
console.info(!!value === Boolean(value));//true,说明两种转换方式等价 
console.info(!!empty === Boolean(empty));//true 
console.info(new Boolean(value));//Boolean对象,注意这里使用了new,会创建一个对象 
console.info(new Boolean(empty));//Boolean对象 
if(value){//隐式转换为true 
console.info(value);//test 
} 
if(empty){//隐式转换为false,不执行括号内部语句 
console.info('empty'); 
} 
if(new Boolean(empty)){//先创建对象,再隐式转换为true,会执行括号内部的语句 
console.info('empty');//empty 
} 
console.info(typeof true == 'boolean');//true 
console.info(+true);//1,一元操作符,转换为数值1 
console.info(+false);//0 
console.info(''+true);//true,重载后的+操作符,转换为字符串'true' 
console.info(''+false);//false

具体的转换规则如下:

数据类型 转换为true的值 转换为false的值
Undefined - undefined
Null - null
Boolean true false
Number 任意非0数值(包括无穷大) 0和NaN
String 任意非空字符串 空字符串
Object 任意对象 -

 4、Number类型

在ECMAScript中,没有单独的整型、浮点型,只有一个Number类型,使用IEEE754格式来表示(这种表示法在计算时会有舍入误差),在这里不去细究底层实现,这些东西在学校学C语言的时候已经很头痛了,不想再头痛一次。下面我把实际编程中用的最多的放到最前面来讲,这一般来说已经足够,对于不想被太边缘的细节所困扰的朋友,随时可以跳过后面关于Number的论述。

(1)数值转换:主要是下面的三个转换函数

  • Number()函数:和Boolean()类似,将数据转换成Number类型,和使用一元加操作符(+)作用相同,建议使用 + 操作符,比较简单。
  • parseInt()函数:解析整数,可以传入数据和进制,如parseInt('070',8)输出10进制的56。
  • parseFloat()函数:解析浮点数,只能接受一个参数,需要注意的是,如果被解析的数据结果是整数,会直接返回整数。

注:使用Number()和+转换时,true—>1,false—>0,undefined—>NaN,null—>0,空字符串—>0,非空字符串—>按数值解析。

var trueVal = true; 
var falseVal = false; 
var undef = undefined; 
var nullVal = null; 
var intVal = '1'; 
var floatVal = '1.0'; 
var strVal = 'test'; 
var empty = ''; 
console.info(Number(trueVal));//1 
console.info(Number(falseVal));//0 
console.info(Number(undef));//NaN 
console.info(Number(nullVal));//0 
console.info(Number(intVal));//1 
console.info(Number(floatVal));//1 
console.info(Number(strVal));//NaN 
console.info(Number(empty));//0 console.info(+trueVal);//1 
console.info(+falseVal);//0 
console.info(+undef);//NaN 
console.info(+nullVal);//0 
console.info(+intVal);//1 
console.info(+floatVal);//1 
console.info(+strVal);//NaN 
console.info(+empty);//0 
console.info(parseInt(trueVal));//NaN 
console.info(parseInt(falseVal));//NaN 
console.info(parseInt(undef));//NaN 
console.info(parseInt(nullVal));//NaN 
console.info(parseInt(intVal));//1 
console.info(parseInt(floatVal));//1 
console.info(parseInt(strVal));//NaN 
console.info(parseInt(empty));//NaN 
console.info(parseFloat(trueVal));//NaN 
console.info(parseFloat(falseVal));//NaN 
console.info(parseFloat(undef));//NaN 
console.info(parseFloat(nullVal));//NaN 
console.info(parseFloat(intVal));//1 
console.info(parseFloat(floatVal));//1 
console.info(parseFloat(strVal));//NaN 
console.info(parseFloat(empty));//NaN

说明:这些转换函数的行为可能会由于浏览器的不同实现而不同,建议在实际编程过程中对存有疑问的先自行编写测试。在《JavaScript高级程序设计(第3版)》中,这一节描述的也有很多地方和我实际运行的结果不同,比如原书说parseInt()只能解析字符串,但是下面的代码也可以运行:
var object = { 
value:1, 
toString:function(){ 
return this.value; 
} 
}; 
console.info(parseInt(object));//1

(2)整数和浮点数:受C语言熏陶的人,肯定要固执的区分一下整数和浮点数吧!在ECMAScript中,他们没有预想的那么有差别,简单点,含有小数点且小数点后至少有一位不是0的数值就是浮点数,否则就是整数,比如1.01是浮点数,1.、1.00因为小数点后没有不是0的数,引擎会解析成整数1。你可能会设想两个整数相除结果也会取整吧,比如3 / 2 = 1,但是在ECMAScript中,不要担心这些,已经还原其数学属性了,你会发现 3 / 2 = 1.5了,这一点,在运算符相关部分还会再提及。

(3)进制:也称进位制,实际上就是进位(低位向高位)的方法,每种进制都有一个基数,当低位数值达到这个基数时,就向高位进1。在日常生活中,用的最多的自然是10进制,比如10角就进位为1元,在时间度量中,还有24进制(24小时为1天)、60进制(60秒为1分),在古代,也有使用16进制的(想一想半斤八两吧)。但是在计算机的处理中,由于电流只有通和不通两种状态,所以只能处理2进制数据,不过这对于自然人来说不好理解,于是又使用8进制、16进制作为10进制和2进制转换的中间状态。

在ES3中,可以使用8进制、10进制、16进制,但是在ES5中,8进制已经被禁用了。

8进制:以1位数字0开始,后面是8进制数字序列(0~7),如果数字超过了7,会忽略前导0而作为10进制处理,比如08会解析为10进制的数字8。

16进制:以1位数字0和1个字母x开始,后面是16进制数字序列(0-9a-fA-F)。

10进制:可以直接将所有数位一一写出来,也可以使用科学计数法(不明白?找一本中学数学教科书来看看吧)来表示。

(3)特殊值:在ECMAScript中,有2个特殊的数值NaN和Infinity需要注意一下,前者表示不是一个数值(Not a Number),后者表示不在表示范围内的数值,还可以使用正负号表示方向。对于这两个特殊值,这里不去考察具体的运算规则(你若感兴趣,可以自行测试,我在下面也会举一些例子),只做如下两点说明:

A、不能用val==NaN来判断一个变量是否为NaN,而要使用全局的isNaN()函数,该函数接受一个参数,当参数可以转换为数值时返回true,否则返回false。

B、尽量不要使用val==Infinity判断是否超出范围,而使用全局的isFinite()函数,该函数接受一个参数,当参数数值处于表示范围内时返回true,否则返回false。这里所说的表示范围是指从Number.MIN_VALUE到Number.MAX_VALUE,另外,在Number里面,还有属性Number.NEGATIVE_INFINITY和Number.POSITIVE_INFINITY,其值分别为Infinity和 -Infinity。

console.info(0/0); //NaN 
console.info(NaN==NaN);//false 
console.info(NaN+1);//NaN 
console.info(NaN/NaN);//NaN var notNumber = NaN; 
console.info(notNumber==NaN);//false 
console.info(isNaN(notNumber));//true 
console.info(1/0); //Infinity 
console.info(-1/0); //-Infinity 
console.info(1/Infinity);//0 
console.info(Infinity/Infinity);//NaN 
console.info(Infinity==Infinity); //true 
var inf = Infinity; 
console.info(inf==Infinity);//true 
console.info(!isFinite(inf));//true 
console.info(!isFinite(NaN));//true 
console.info(isNaN(Infinity));//false

注:在《JavaScript高级程序设计(第3版)》中第29页说任何数值除以0都会返回NaN,实际上并非如此。

5、String类型

和一般类C语言不同,在ECMAScript中,没有字符类型,而将字符串类型String作为一种简单类型,其字面量使用引号(单引号'或双引号“)括起来。

(1)对于字符串类型的操作,加号“+”被重载,任意一个数值与字符串相加,都会先将其使用String()转换成字符串,然后将两个字符串合并。

(2)使用String()转换,undefined—>'undefined',null—>'null',true—>'true',false—>'false',数值类型Number—>按数值可见的字符转换,对象Object—>调用toString。

console.info(''+1+1);//11,而不是2 
console.info(''+true);//true 
console.info(''+undefined);//undefined 
console.info(''+null);//null

(3)字符串使用反斜杠“\”来转义,常见的一些转义字符有:

字面量 含义 字面量 含义
\n 换行 \\ 反斜杠
\t 制表 \' 单引号
\b 空格 \" 双引号
\r 回车 \xnn 以十六进制代码nn表示的一个字符
\f 进纸 \unnnn 以十六进制代码nnnn表示的一个Unicode字符

好了,关于简单数据类型,就整理到此。

Javascript 相关文章推荐
Javascript的并行运算实现代码
Nov 19 Javascript
jquery插件jTimer(jquery定时器)使用方法
Dec 23 Javascript
JavaScript中用于生成随机数的Math.random()方法
Jun 15 Javascript
浅析node连接数据库(express+mysql)
Nov 30 Javascript
jQuery fadeOut 异步实例代码详解
Aug 18 Javascript
解析javascript图片懒加载与预加载的分析总结
Oct 27 Javascript
JS三目运算(三元运算)方法详解
Mar 01 Javascript
jQuery在header中设置请求信息的方法
Mar 06 Javascript
jQuery实现的鼠标滚轮控制图片缩放功能实例
Oct 14 jQuery
JS+HTML5实现获取手机验证码倒计时按钮
Aug 08 Javascript
Next.js实现react服务器端渲染的方法示例
Jan 06 Javascript
jQuery插件simplePagination的使用方法示例
Apr 28 jQuery
JavaScript高级程序设计(第3版)学习笔记2 js基础语法
Oct 11 #Javascript
JavaScript高级程序设计(第3版)学习笔记 概述
Oct 11 #Javascript
javascript测试题练习代码
Oct 10 #Javascript
jQuery插件开发全解析
Oct 10 #Javascript
Jquery图形报表插件 jqplot简介及参数详解
Oct 10 #Javascript
关于jQuery UI 使用心得及技巧
Oct 10 #Javascript
jquery创建并行对象或者合并对象的实现代码
Oct 10 #Javascript
You might like
php生成过去100年下拉列表的方法
2015/07/20 PHP
两种php实现图片上传的方法
2016/01/22 PHP
php使用Jpgraph创建3D饼形图效果示例
2017/02/15 PHP
PHP abstract 抽象类定义与用法示例
2018/05/29 PHP
[原创]PHP global全局变量经典应用与注意事项分析【附$GLOBALS用法对比】
2019/07/12 PHP
抽出www.templatemonster.com的鼠标悬停加载大图模板的代码
2007/07/11 Javascript
删除select中所有option选项jquery代码
2013/08/12 Javascript
登陆成功后自动计算秒数执行跳转
2014/01/23 Javascript
js实现点击链接后延迟3秒再跳转的方法
2015/06/05 Javascript
无刷新上传文件并返回自定义值
2015/06/11 Javascript
解决jQuery上传插件Uploadify出现Http Error 302错误的方法
2015/12/18 Javascript
bootstrap基本配置_动力节点Java学院整理
2017/07/14 Javascript
详解使用nvm安装node.js
2017/07/18 Javascript
Bootstrap与Angularjs的模态框实例代码
2017/08/03 Javascript
关于vue编译版本引入的问题的解决
2018/09/17 Javascript
JS实现点击发送验证码 xx秒后重新发送功能
2019/07/30 Javascript
微信小程序select下拉框实现源码
2019/11/08 Javascript
微信小程序监听用户登录事件的实现方法
2019/11/11 Javascript
Vue指令实现OutClick的示例
2020/11/16 Javascript
原生JS实现pc端轮播图效果
2020/12/21 Javascript
[38:21]2014 DOTA2国际邀请赛中国区预选赛5.21 TongFu VS LGD-CDEC
2014/05/22 DOTA
分析python服务器拒绝服务攻击代码
2014/01/16 Python
Python语言描述连续子数组的最大和
2018/01/04 Python
详解Python安装tesserocr遇到的各种问题及解决办法
2019/03/07 Python
Python 3.6 -win64环境安装PIL模块的教程
2019/06/20 Python
Python制作微信好友背景墙教程(附完整代码)
2019/07/17 Python
python正则表达式匹配不包含某几个字符的字符串方法
2019/07/23 Python
使用python接受tgam的脑波数据实例
2020/04/09 Python
解决PyCharm不在run输出运行结果而不是再Console里输出的问题
2020/09/21 Python
英国的一家创新礼品和小工具零售商:Menkind
2019/08/24 全球购物
应届毕业生自荐信
2014/05/28 职场文书
英文商务邀请函范文
2015/01/31 职场文书
大学生学年个人总结
2015/02/15 职场文书
10大幻兽系恶魔果实 蝙蝠果实上榜,第一自愈能力强
2022/03/18 日漫
Netty客户端接入流程NioSocketChannel创建解析
2022/03/25 Java/Android
如何解决flex文本溢出问题小结
2022/07/15 HTML / CSS