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

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字符

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

(0)

相关推荐

  • JavaScript高级程序设计(第三版)学习笔记6、7章

    第6章,面向对象的程序设计 对象: 1.数据属性 configurable,表示能否通过delete删除属性从而重新定义属性,能否修改属性的特性,或能否把属性修改为访问器属性,默认为true enumerbale,表示能否通过for-in访问属性,默认true ƒwritable,表示能否修改属性值,默认true „value,数据存储位置,默认undefined 修改默认属性特性:Object.defineProperty(),接收三个参数:属性所在对象,属性名,描述符对象,描述符对象属性必

  • JavaScript高级程序设计 事件学习笔记

    第12章 事件 1.事件流 1.1事件冒泡(IE事件流) □事件冒泡(event bubbling),即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接受,然后逐级向上传播到较为不具体的节点(文档). □所有浏览器均支持事件冒泡.Firefox.chrome.safari将事件一直冒泡到window对象. 1.2事件捕获(Netscape事件流) □不太具体的节点更早收到事件,而具体的节点最后收到节点. □Safari.chrome.Opera.firefox支持,但从window对象

  • JavaScript高级程序设计(第3版)学习笔记 概述

    在JavaScript面世之初,没有人会想到它会被应用的如此广泛,也远比一般人想象中的要复杂强大的多,在我自己学习的过程中,曾经有过多次震撼,只是常常没有过多久,很多美轮美奂的用法就又模糊起来,希望通过对JavaScript高级程序设计(第3版)的专题学习笔记,能够较为系统的将基础知识梳理一次,也能够将自己平常学习与工作过程中遇到的一些美妙用法记录下来,便于自己再次学习,当然,也希望可以给有需要的朋友们一些力所能及的帮助. 相关术语 先简要说一下和JavaScript相关的一些背景术语,就不详细

  • JavaScript高级程序设计 DOM学习笔记

    第十章 DOM DOM是针对XML和HTML文档的一个API:即规定了实现文本节点操控的属性.方法,具体实现由各自浏览器实现. 1. 节点层次 1) 文档节点:document,每个文档的根节点. 2) 文档元素:即<html>元素,文档最外层元素,文档节点第一个子节点. 3) Node类型: ①Node是DOM中各种节点类型的基类型,共享相同的基本属性和方法. □ Node.Element_NODE(1); □ Node.ATTRIBUTE_NODE(2); □ Node.TEXT_NODE

  • JavaScript高级程序设计(第3版)学习笔记2 js基础语法

    这一篇复习一下ECMAScript规范中的基础语法,英文好的朋友可以直接阅读官方文档.JavaScript本质上也是一种类C语言,熟悉C语言的朋友,可以非常轻松的阅读这篇文章,甚至都可以跳过,不过建议你最好还是看一看,在介绍的同时,我可能会引用一些自认为不易理解且比较流行的用法. 基础语法 1.标识符:所谓标识符,实际上就是指一个满足一定规范,能够被引擎识别的名字,可以用来表示常量.变量.函数名.函数参数.对象.对象属性等所有可命名对象的名称. (1)区分大小写. (2)以字母.下划线(_)或美

  • JavaScript高级程序设计 XML、Ajax 学习笔记

    第十五章 JavaScript与XML 1.浏览器对XML DOM的支持 1.1 DOM2级核心 ①在DOM2级在document.implementation中引入了createDocument()方法(IE6~8不支持). 可以创建一个空白XML. var xmldom = document.implemention.createDocument(namespaceUri,root,docype); ②要创建一个新的文档元素为<root>的XML文档,可用如下代码: var xmldom

  • javascript高级程序设计(第三版)学习笔记(一) 正则表达式整理

    1.创建正则表达式 第一种方式:注意这里的正则表达式不能使用单引号或者双引号,如下 var pattern1 = /[abc]/i; // 匹配第一个"a"或"b"或"c",不区分大小写 第二种方式:使用RegExp构造函数创建,该构造函数传入两个参数,都是字符串,所以需要特别注意"\"符号的转换,所有元字符(下面有讲元字符)需要双重转义,如下 复制代码 代码如下: var patt1 = new RegExp("[

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

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

  • JavaScript面向对象知识串结(读JavaScript高级程序设计(第三版))

    第一遍囫囵吞枣,不求甚解,感觉恍然大悟,结果晚上睡觉一想发现很多问题,什么都不明白,再看第二遍,发现原来是这样.过了几天一用,发现手写起来原来还是在凭记忆,于是下一遍,下一遍... 单凭记忆去弄清楚东西很不靠谱,时间一长脑袋空白.特别是技术上的很多思想和原理,只看不练,即便当时想得特别清楚,过久了也会忘.再者就是网上一些东西,只能说是提供了一种便捷的查看途径,事后还是自己总结为好,毕竟大多都是个人总结,一些概念很难讲的很清楚,而且两个人谈同一件事情,一般说的步骤和章节都是不同的,这样很容易形成交

  • JavaScript高级程序设计(第3版)学习笔记6 初识js对象

    在房子里面可以放你想放的任意事物--如果你有足够的美学造诣,你甚至可以弄一个房中房试试--当然,为了方便管理,我们会给房子里存放的所有事物都会取上一个不重复的名字,比如医药房间里的各种药品名称.在ECMAScript中,你可以在对象中存放任意你想放的数据,同样,我们需要给存放的数据取一个名字--也就是对象的属性名,再存放各种数据.再看看ECMA-262中对象的定义:无序属性的集合,其属性可以包含简单数据类型值.对象或者函数. 进入对象,我开始有些激动了,说实话,让我想起做这系列学习笔记的最初原因

  • JavaScript高级程序设计(第三版)学习笔记1~5章

    第2章,在html中使用JavaScript Html引入外部js脚本 <script type="text/javascript" src="test.js">两个</script>之间不应放脚本,因为并不会被执行</script> <script>标签有一个defer属性可以延迟脚本执行,但是并不保证会按脚本排列顺序执行 建议:将脚本引入放在<body>标签的所有内容之后,而不放在<head>

  • JavaScript高级程序设计(第3版)学习笔记8 js函数(中)

    6.执行环境和作用域 (1)执行环境(execution context):所有的JavaScript代码都运行在一个执行环境中,当控制权转移至JavaScript的可执行代码时,就进入了一个执行环境.活动的执行环境从逻辑上形成了一个栈,全局执行环境永远是这个栈的栈底元素,栈顶元素就是当前正在运行的执行环境.每一个函数都有自己的执行环境,当执行流进入一个函数时,会将这个函数的执行环境压入栈顶,函数执行完之后再将这个执行环境弹出,控制权返回给之前的执行环境. (2)变量对象(variable ob

  • JavaScript高级程序设计(第3版)学习笔记9 js函数(下)

    再接着看函数--具有魔幻色彩的对象. 9.作为值的函数 在一般的编程语言中,如果要将函数作为值来使用,需要使用类似函数指针或者代理的方式来实现,但是在ECMAScript中,函数是一种对象,拥有一般对象具有的所有特征,除了函数可以有自己的属性和方法外,还可以做为一个引用类型的值去使用,实际上我们前面的例子中已经有过将函数作为一个对象属性的值,又比如函数也可以作为另一个函数的参数或者返回值,异步处理中的回调函数就是一个典型的用法. 复制代码 代码如下: var name = 'linjisong'

随机推荐