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 相关文章推荐
贴一个在Mozilla中常用的Javascript代码
Jan 09 Javascript
动态添加js事件实现代码
Mar 12 Javascript
javascript实现可改变滚动方向的无缝滚动实例
Jun 17 Javascript
javascript几个易错点记录
Nov 26 Javascript
JavaScript将字符串转换成字符编码列表的方法
Mar 19 Javascript
jQuery结合AJAX之在页面滚动时从服务器加载数据
Jun 30 Javascript
innerHTML中标签可以换行的方法汇总
Aug 14 Javascript
利用jQuery中的ajax分页实现代码
Feb 25 Javascript
javascript入门之数组[新手必看]
Nov 21 Javascript
Javascript 闭包详解及实例代码
Nov 30 Javascript
JavaScript中运算符规则和隐式类型转换示例详解
Sep 06 Javascript
微信小程序使用progress组件实现显示进度功能【附源码下载】
Dec 12 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中处理模拟rewrite 效果
2006/12/09 PHP
php生成SessionID和图片校验码的思路和实现代码
2009/03/10 PHP
Yii1.1中通过Sql查询进行的分页操作方法
2017/03/16 PHP
PHP递归实现文件夹的复制、删除、查看大小操作示例
2017/08/11 PHP
Apache+PHP+MySQL搭建PHP开发环境图文教程
2020/08/06 PHP
jQuery的强大选择器小结
2009/12/27 Javascript
javascript 中String.match()与RegExp.exec()的区别说明
2013/01/10 Javascript
基于jquery实现一张图片点击鼠标放大再点缩小
2013/09/29 Javascript
nodejs通过phantomjs实现下载网页
2015/05/04 NodeJs
Javascript使用post方法提交数据实例
2015/08/03 Javascript
js实现表单Radio切换效果的方法
2015/08/17 Javascript
AngularJs实现ng1.3+表单验证
2015/12/10 Javascript
Bootstrap table使用方法详细介绍
2016/12/09 Javascript
Bootstrap学习笔记之进度条、媒体对象实例详解
2017/03/09 Javascript
vue小图标favicon不显示的解决方案
2017/09/19 Javascript
d3.js实现自定义多y轴折线图的示例代码
2018/05/30 Javascript
vue.js项目 el-input 组件 监听回车键实现搜索功能示例
2018/08/25 Javascript
vue 指令之气泡提示效果的实现代码
2018/10/18 Javascript
微信小程序tabBar 返回tabBar不刷新页面
2019/07/25 Javascript
JavaScript原型继承和原型链原理详解
2020/02/04 Javascript
Bootstrap简单实用的表单验证插件BootstrapValidator用法实例详解
2020/03/29 Javascript
Python中类的定义、继承及使用对象实例详解
2015/04/30 Python
Python解析树及树的遍历
2016/02/03 Python
Python实现病毒仿真器的方法示例(附demo)
2020/02/19 Python
pyspark对Mysql数据库进行读写的实现
2020/12/30 Python
详解HTML5中的拖放事件(Drag 和 drop)
2016/11/14 HTML / CSS
Claire’s法国:时尚配饰、美容、珠宝、头发
2021/01/16 全球购物
学校后勤岗位职责
2014/02/19 职场文书
自荐信的基本格式
2014/02/22 职场文书
8和9的加减法教学反思
2014/05/01 职场文书
市场营销策划方案
2014/06/11 职场文书
2014大学校园光棍节活动策划书
2014/09/29 职场文书
关于群众路线的心得体会
2014/11/05 职场文书
安全保证书
2015/01/16 职场文书
Redis高可用集群redis-cluster详解
2022/03/20 Redis
码云(gitee)通过git自动同步到阿里云服务器
2022/12/24 Servers