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 相关文章推荐
网站上面有这种切换效果
Jun 26 Javascript
IE6/7/8中Option元素未设value时Select将获取空字符串
Apr 07 Javascript
AngularJS入门教程之Select(选择框)详解
Jul 27 Javascript
Angular.js中$apply()和$digest()的深入理解
Oct 13 Javascript
详解Angular2 关于*ngFor 嵌套循环
May 22 Javascript
详解利用 Express 托管静态文件的方法
Sep 18 Javascript
利用JavaScript缓存远程窃取Wi-Fi密码的思路详解
Nov 05 Javascript
原生JS实现的跳一跳小游戏完整实例
Jan 27 Javascript
jQuery操作元素追加内容示例
Jan 10 jQuery
vue 检测用户上传图片宽高的方法
Feb 06 Javascript
javascript实现支付宝滑块验证码效果
Jul 24 Javascript
JavaScript实现网页tab栏效果制作
Nov 20 Javascript
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超大文件下载,断点续传下载的方法详解
2013/06/06 PHP
PHP中file_exists()判断中文文件名无效的解决方法
2014/11/12 PHP
laravel 解决Validator使用中出现的问题
2019/10/25 PHP
jquery ajax 登录验证实现代码
2009/09/23 Javascript
JavaScript面向对象之静态与非静态类
2010/02/03 Javascript
jquery判断checkbox(复选框)是否被选中的代码
2010/10/20 Javascript
js转化毫秒为时间格式代码
2014/04/10 Javascript
基于NodeJS的前后端分离的思考与实践(一)全栈式开发
2014/09/26 NodeJs
JavaScript中的toLocaleDateString()方法使用简介
2015/06/12 Javascript
BootStrap实现邮件列表的分页和模态框添加邮件的功能
2016/10/13 Javascript
微信小程序 首页制作简单实例
2017/04/07 Javascript
Vue中建立全局引用或者全局命令的方法
2017/08/21 Javascript
Bootstrap3.3.7导航栏下拉菜单鼠标滑过展开效果
2017/10/31 Javascript
vue中使用heatmapjs的示例代码(结合百度地图)
2018/09/05 Javascript
Node+OCR实现图像文字识别功能
2018/11/26 Javascript
JS数组Object.keys()方法的使用示例
2019/06/05 Javascript
vuex vue简单使用知识点总结
2019/08/29 Javascript
python读取word文档的方法
2015/05/09 Python
Python 删除连续出现的指定字符的实例
2018/06/29 Python
python中的不可变数据类型与可变数据类型详解
2018/09/16 Python
利用Python实现kNN算法的代码
2019/08/16 Python
python统计指定目录内文件的代码行数
2019/09/19 Python
Python 动态变量名定义与调用方法
2020/02/09 Python
将自己的数据集制作成TFRecord格式教程
2020/02/17 Python
详解webapp页面滚动卡顿的解决办法
2018/12/26 HTML / CSS
Kangol帽子官网:坎戈尔袋鼠
2018/09/26 全球购物
网站域名和主机:Domain.com
2019/04/01 全球购物
美国厨房和园艺工具网上商店:Nestneed
2019/08/24 全球购物
提高EJB性能都有哪些技巧
2012/03/25 面试题
动员大会主持词
2014/03/20 职场文书
《蝙蝠和雷达》教学反思
2014/04/23 职场文书
读书小明星事迹材料
2014/05/03 职场文书
党的群众路线对照检查材料思想汇报(学校)
2014/10/04 职场文书
经销商会议开幕词
2016/03/04 职场文书
小学生必读成语故事大全:送给暑假的你们
2019/07/09 职场文书
详细聊聊关于Mysql联合查询的那些事儿
2021/10/24 MySQL