学习运用JavaScript的数据类型

作者 魏楷聪 发布于 2015年01月20日

一个完整的JavaScript实现是由以下3个不同部分组成的：

a. 核心（ECMAScript）   b. 文档对象模型（DOM）   c. 浏览器对象模型（BOM）

> JavaScript的核心ECMAScript描述了该语言的语法和基本对象

ECMAScript是一个重要的标准，但它并不是JavaScript唯一的部分，当然，也不是唯一被标准化的部分。

ECMAScript描述了以下内容：a. 语法； b. 类型； c. 语句； d. 关键字； e. 保留字； f. 运算符； g. 对象。

ECMAScript仅仅是一个描述，定义了脚本语言的所有属性、方法和对象。其它的语言可以实现ECMAScript来作为功能的基准，JavaScript就是这样。

ECMAScript并不与任何具体浏览器相绑定，实际上，它也没有提到任何用户输入输出的方法。每个浏览器都有它自己的ECMAScript接口的实现，然后这个实现又被扩展，包含了DOM和BOM。

> DOM描述了处理网页内容的方法和接口

DOM（文档对象模型）是HTML和XML的应用程序接口（API）。DOM将把整个页面规划成由节点层级构成的文档。HTML或XML页面的每个部分都是一个节点的衍生物。

DOM通过创建树来表示文档，从而使开发者对文档的内容和结构具有空前的控制力。用DOM API可以轻松地删除、添加和替换节点。

> BOM描述了与浏览器进行交互的方法和接口

BOM（浏览器对象模型），可以对浏览器窗口进行访问和操作。使用BOM，开发者可以移动窗口、改变状态栏中的文本以及执行其它与页面内容不直接相关的动作。BOM只是JavaScript实现的一部分，没有任何相关的标准。由于没有相关的BOM标准，每种浏览器都有自己的BOM实现。


1. 原始值和引用值

在ECMAScript中，变量可以存放两种类型的值，即原始值和引用值。

a. 原始值（primitive value）是存储在栈（stack）中的简单数据段，也就是说，它们的值直接存储在变量访问的位置。

b. 引用值（reference value）是存储放在堆（heap）中的对象，也就是说，存储在变量处的值是一个指针（point），指向存储对象的内存处。

原始类型占据的空间是固定的，将它们存储在较小的内存区域中——栈中，便于迅速查询变量的值。

引用类型的存储空间将从堆中分配。由于引用值的大小会改变，所以不能把它放在栈中，否则会降低变量查寻的速度。相反，放在变量的栈空间中的值是该对象存储在堆中的地址。地址的大小是固定的，所以把它存储在栈中对变量性能无任何负面影响。

> （重点）五大原始类型（primitive type）：

Undefined、Null、Boolean、Number、String

1. 可以用 typeof  运算符来判断一个变量是属于哪种类型：

"undefined"，变量是Undefined型

"boolean"，变量是Boolean型

"number"，变量是Number型

"string"，变量是String型

"object"，变量是一种引用类型或 Null 类型

2. Undefined 类型

只有一个值，即undefined（字面量）。当声明的变量未初始化时，该变量的默认值是undefined。但是，值undefined并不同于未定义的值，而typeof运算符并不真正区分这两种值。

var oTemp;

// make sure this variable isn't defind

// var oTemp2;

alert(typeof oTemp); // outputs "undefined"

alert(typeof oTemp2); // outputs "undefined"

alert(oTemp2 == undefined); // cause error

对未定义的oTemp2使用除了typeof之外其它运算符，将引起错误，因为那些运算符只能用于已定义的变量。

当函数无明确返回值时，返回的值也是值undefined。

3. Null 类型

只有一个值，即null（字面量）。用于表示尚未存在的对象。

值undefined实际上是从值null派生来的。

alert(null == undefined);  // outputs "true"

4. Boolean 类型

有两个值true和false（即两个Boolean字面量）。

5. Number 类型

既可以表示32位的整数，还可以表示64位的浮点数。直接输入的（而不是从另一个变量访问的）任何数字都被看作Number型的字面量。

整数可以被表示为八进制或十六进制的字面量，但所有数学运算返回的都是十进制结果。

浮点数字面量必须包括小数点和小数点后的一位数字，用它进行计算前，真正存储的是字符串。

一个特殊值：NaN，表示非数（Not a Number）。

alert(isNaN("blue")); // outputs "true"

alert(isNaN("123")); // outputs "false"

6. String 类型

String类型的独特之处在于，它是唯一没有固定大小的原始类型。字符串字面量是由双引号（"）或单引号（'）声明的。

> 四大引用类型：Object类、Boolean类、Number类、String类

引用来型通常叫作类（class），也就是说，遇到引用值时，所处理的就是对象。ECMAScript定义了“对象定义”，逻辑上等价于其它程序设计语言中的类。

具有等价的原始类型的引用类型：

1. Object 类

Object类自身用处不大，但ECMAScript中的所有类都由这个类继承而来，Object类中的所有属性和方法都会出现在其它类中。

属性 prototype：对该对象的对象原型的引用（指针）。对于Object类，该指针指向原始的object()函数。

方法 prototypeIsEnumerable(property)：判断给定的属性是否可以用for...in语句进行枚举。

2. Boolean 类

Boolean类是Boolean原始类型的引用类型。

Boolean对象将覆盖object类的valueOf()方法，返回原始值，即true或false。toString()方法也会被覆盖，返回字符串“true”或"false"。

建议少用Boolean对象，最好还是使用Boolean原始值。

// 在Boolean表达式中，所有对象都会被自动转换为true

var oFlaseObject = new Boolean(false);

var bResult = oFlaseObject && true;  // outputs true

3. Number 类

创建Number对象并得到数字对象的Number原始值（valueOf()方法）：

var oNumberObject = new Number(55);

var iNumber = oNumberObject.valueOf();

toFixed()方法返回的是具有指定位数小数的数字的字符串表示：

var oNumberObject = new Number(99);

alert(oNumberObject.toFixed(2));  // outputs "99.00"

这里，toFixed()方法的参数是2，说明了应该显示几位小数，空的小数位由0补充。toFixed()方法能表示具有0到20位小数的数字，超出这个范围的值会引起错误。

只要可能，都使用数字的原始表示法。

4. String 类

String类是String原始类型的对象表示法。

String对象的valueOf()方法和toString()方法都会返回String类型的原始值：

var oStringObject = new String("hello world");

alert(oStringObject.valueOf() == oStringObject.toString());  // outputs "true"

String类具有属性length，它是字符串中的字符个数：

var oStringObject = new String("hello world");

alert(oStringObject.length);  // outputs "11"

String类还有大量的方法，可以查看API。

5. instanceof 运算符

instanceof运算符与typeof运算符相似，用于识别正在处理的对象的类型。与typeof方法不同的是，instanceof方法要求开发者明确地确认对象为某特定类型。

var oStringObject = new String("hello world");

alert(oStringObject instanceof String);  // outputs "true"


2. 转换

> 简单的转换方法

1. 转换成字符串

3种主要的原始值Boolean值、数字和字符串都是伪对象，都有toString()方法，可以把它们的值转换成字符串。

Boolean型的toString()方法只是输出“true”或“false”，结果由变量的值决定。

Number类型的toString()方法有两种模式，即默认模式和基模式。

在默认模式中，返回的都是数字的十进制表示。

在基模式中，可以用不同的基输出数字。

var iNum1 = 10;

alert(iNum1.toString(2));  // outputs "1010"

alert(iNum1.toString(8));  // outputs "12"

alert(iNum1.toString(16));  // outputs "A"

HTML采用十六进制数表示每种颜色，在HTML中处理数字时这种功能非常有用。

2. 转换成数字，只转换第一个无效字符之前的字符串

parseInt()：

var iNum1 = parseInt("1234blue");  // return 1234

var iNum2 = parseInt("0xA");  // return 10

var iNum3 = parseInt("22.5");  // return 22

var iNum4 = parseInt("blue");  // return NaN

parseInt()方法的基模式：

var iNum1 = parseInt("AF", 16);  // return 175

var iNum2 = parseInt("10", 2);  // return 2

var iNum3 = parseInt("10", 8);  // return 8

var iNum4 = parseInt("10", 10);  // return 10

如果十进制数包含前导0，那么最好采用基数10，这样才不会意外地得到八进制的值。

parseFloat()：

var iNum1 = parseFloat("1234blue");  // return 1234

var iNum2 = parseFloat("0xA");  // return 0

var iNum3 = parseFloat("22.5");  // return 22.5

var iNum4 = parseFloat("22.34.5");  // return 22.34

var iNum5 = parseFloat("0908");  // return 908

var iNum6 = parseFloat("blue");  // return NaN

> 强制类型转换（type casting）

1. Boolean(value)：把给定的值转换成Boolean型

当要转换的值是至少有一个字符的字符串、非0数字或对象时，Boolean()函数将返回true。如果该值是空字符串、数字0、undefined或null，它将返回false。

var b1 = Boolean("");  // false - empty string

var b2 = Boolean("hi");  // true - non-empty string

var b3 = Boolean(100);  // true - non-zero string

var b4 = Boolean(null);  // false - null

var b5 = Boolean(0);  // false - zero

var b6 = Boolean(new Object());  // true - object

Number(value)：把给定的值转换成数字（可以是整数或浮点数），转换的是整个值

var n1 = Number(false);  // 0

var n2 = Number(true);  // 1

var n3 = Number(undefined);  // NaN

var n4 = Number(null);  // 0

var n5 = Number("5.5");  // 5.5

var n6 = Number("56");  // 56

var n7 = Number("5.6.7");  // NaN

var n8 = Number(new Object());  // NaN

var n9 = Number(100);  // 100

String(value)：把给定的值（任何值）转换成字符串

强制转换成字符串和调用toString()方法的唯一不同之处在于，对null或undefined值强制类型转换可以生成字符串而不引发错误：

var s1 = String(null);  // "null"

var oNull = null;

var s2 = oNull.toString();  // won't work, causes an error


3. 函数

函数是ECMAScript的核心。函数（function）就是对象。

如果函数无明确的返回值，或调用了没有参数的return语句，那么它真正返回的值是undefined。

1. 无重载：ECMAScript中的函数不能重载，没有方法（函数）重载的概念。

2. arguments对象：每个函数都有一个隐含的对象 arguments，表示给函数实际传递的参数

3. Function类：所有自定义的函数都是Function 对象类型的。Function 对象接收的所有参数都是字符串类型的，其中最后一个参数就是要执行的函数体，而前面的参数则是函数真正需要接收的参数。

每一个函数对象都有一个 length 属性，表示该函数期望接收的参数格式。它与函数的 arguments 不同，arguments.length 表示函数实际接收的参数格式。

Function对象也有与所有对象共享的标准valueOf()方法和toString()方法。这两个方法返回的都是函数的源代码，在调试时尤其有用。

4. 闭包

所谓闭包，是指词法表示包括不必计算的变量的函数，也就是说，该函数能使用函数外定义的变量。


（完）

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 194,088评论 5赞 459
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 81,715评论 2赞 371
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 141,361评论 0赞 319
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 52,099评论 1赞 263
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 60,987评论 4赞 355
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 46,063评论 1赞 272
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 36,486评论 3赞 381
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 35,175评论 0赞 253
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 39,440评论 1赞 290
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,518评论 2赞 309
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,305评论 1赞 326
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 32,190评论 3赞 312
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 37,550评论 3赞 298
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,880评论 0赞 17
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,152评论 1赞 250
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 41,451评论 2赞 341
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 40,637评论 2赞 335

推荐阅读更多精彩内容

  • 第5章 引用类型
    第5章 引用类型(返回首页) 本章内容 使用对象 创建并操作数组 理解基本的JavaScript类型 使用基本类型...
    大学一百阅读 3,191评论 0赞 4
  • js高级
    第一章： JS简介 从当初简单的语言，变成了现在能够处理复杂计算和交互，拥有闭包、匿名函数， 甚至元编程等...
    LaBaby_阅读 1,613评论 0赞 6
  • JavaScript 高级程序设计 笔记一
    第1章 JavaScript 简介 JavaScript 具备与浏览器窗口及其内容等几乎所有方面交互的能力。 欧洲...
    力气强阅读 1,101评论 0赞 0
  • 几款基金产品对比
    本文写于2016.07.14。 今日总结：今天虽然在别人看来没做什么事，对我来说，却好像耗尽了内力，都是这个长城汽...
    芊芊lucky阅读 1,265评论 3赞 11
  • 带刺野花
    深浅有别一起野， 蛇苺不艳玫瑰借。 粗细无论满身刺， 扎人技巧互搓切。
    珠江潮平阅读 488评论 17赞 21