2019独角兽企业重金招聘Python工程师标准>>>

JavaScript中的原始类型(primitive type)包括Undefined、Null、Number、Boolean和String,其他变量均为引用类型,也就是Object Type。原始类型保存位置是“栈内存”,而引用类型保存在“堆内存”中,但通常JavaScript中对变量的使用,并不十分关心变量在内存中的位置。

“typeof”操作符用以获取变量的值的数据类型。typeof可以接受变量名或字面量值作为操作数,返回一个描述变量类型信息的字符串。需要注意的是,typeof的返回值与JavaScript中的类型并不是一一对应的:

  • “undefined” ——变量值未定义

  • “number” ——变量值是数值

  • “boolean” ——变量值是布尔值

  • “string” ——变量值是字符串

  • “object” ——变量值是对象或者null

  • “function” ——变量值是函数

另外,typeof是一个像(+,-)一样的操作符,而不是函数,虽然形如“typeof(12)”的用法不会产生错误,但对于操作符来说“typeof 12”才是合适的使用方法。

1、undefined和null

Undefined Type在ECMA-262文档中的定义是:

The Undefined type has exactly one value, called undefined. Any variable that has not been assigned a value has the value undefined.

Undefined Type 类型只有一个唯一的值“undefined”,变量的值为undefined意味着变量没有被初始化。对于尚未使用var声明的变量,使用它会产生错误,但使用typeof操作符会返回“undefined”:

1 var foo;
2 alert(foo);        // undefined
3 alert(bar);        // 错误
4 alert(typeof foo); // undefined
5 alert(typeof bar); // undefined

undefined被实现为一个全局变量(而不是像null一样的字面值),它的值是“未定义”。在ECMAScript 3中,undefined可以被赋予其它值,在ECMAScript 5中已被修正为只读的。

Null Type 类型也只有一个值null,用来表示“空值”。多数编程语言中的都有类似null、nil等用来表示空值的字面量。但与其他编程语言不同的是,JavaScript并不使用null表示未初始化的变量的值(由undefined表示)。null的逻辑意义是表示一个空对象指针。JavaScript中通常意义的对象并不包括简单数据类型,所以逻辑上null表示变量指向了一个空值的Object类型(不是字面量“{}”)。出于这个原因,便可理解为什么使用typeof操作符获取null值的类型会得到“object”了。JavaScript里null值对Object类型的意义,类似于0对Number类型,“”对于String类型。

undefined和null都用来描述“空值”,但在逻辑意义上,undefined比null要更为“底层”一些。一般情况下,不需要显示的把变量值指定为undefined。而对于一个意在保存Object但还没有真正指向一个对象的变量,则应该把变量值设置为null,体现null作为空对象指针的作用并且与undefined区分开来。

2、数值

ECMAScript使用了简化的数字模型。它只有一个数字类型Number,而没有分离出单独的整数类型。在实现上,Number类型采用了IEEE 754标准定义的64位双精度浮点数格式。64位的浮点数格式中,52位用来表示尾数,11位表示指数,1位符号。因此在表示整数时,JavaScript能够表示的整数范围在-Math.pow(2,53)和Math.pow(2,53)之间,超过这个范围,低位数字的精度便无法保证了。

1 var n = Math.pow(2,53); // 9007199254740992
2 alert(n === n + 1);     // true, 9007199254740992 + 1得到的值还是9007199254740992

在实际的Web开发中,若需要在后台(如Java)传递一个Long Int类型给Javascript处理,很可能JavaScript把JSON数据解析为Number类型后,得到的结果并不是你想要的:它的后面几位数字发生了变化。

在JavaScript中使用浮点数值进行运算,因此小数部分会出现精度问题,这跟所有其他采用IEEE 754标准格式表示浮点数的编程语言一样。避免在代码中出现对小数部分的相等判断。(整数部分是精确的)

1 var a = 0.1;
2 var b = 0.2;
3 alert(a + b === 0.3); // false

如果数值超过了JavaScript所能表示数字上限(overflow),将被自动转换为一个代表无穷大的Infinity(或-Infinity,负无穷)值;如果数值无限接近0并且超过JavaScript表示范围(underflow),将被设置为0(或-0,同0)。JavaScript不会出现溢出错误(包括被零整除的时候)。

1 var a = Number.MAX_VALUE * 2;          //Infinity
2 var b = Number.MIN_VALUE / 2;          //0
3 var c = 1 / 0;                         //Infinity or NaN, 依JS执行环境不同
4 var d = 0 / 0;                         // NaN

Number类型定义了一个特殊的值NaN,即not-a-number。NaN的意义代表一个本该得到数值的地方没有得到任何数值。任何使用NaN做操作数的算术运算,都会得到NaN。另外NaN也是唯一一个使用对自身进行相等判断会得到false的数值。NaN的这个怪异之处破坏了JavaScript运算符的对称性。如果在代码中需要通过比较数值大小进行分支判断,就需要注意可能出现NaN的情况,因为使用NaN与其他数值进行大小比较总会得到false,而这可能不是你想要的结果。

1 var a = 10;   
2 a = a - "not number"         // NaN
3 alert(a === a);             // false
4 var b = 12 + a;              // NaN
5 var c = 10;
6 alert(b >= c || b < c);      // false

另一个Number类型中不常引人注目的地方是位运算。JavaScript中提供了按位操作运算符。在很多其他编程语言中,按位操作可以进行硬件级处理,所以非常快。但是JavaScript没有整数类型,它的位操作是先把数值转换为32位整数,然后进行计算,然后再转换回去,JavaScript绝大部分运行环境是在浏览器中,与硬件相隔较远,因此位操作执行很慢。

3、字符串

与很多其他编程语言中一样,JavaScript中的字符串值也是不可变的,改变一个字符串变量的值,相当于重新生成了一个字符串并把它赋值给变量。JavaScript中的简单类型无法进行方法调用(作为this调用函数),但我们还是可以进行诸如

1 "abcdefg".toUpperCase();

这样的操作。这是因为JavaScript为简单数据类型提供了一种方式,把它们包装为对象类型,然后进行方法调用。”"abcdefg"“先被隐式地包装为对象,然后使用包装出的对象调用toUpperCase方法,待方法调用结束后,JavaScript再隐式地把包装对象回收。其它简单数据类型也使用同样的方式。也可以使用JavaScript提供的构造函数显示地创建包装对象,JavaScript提供了String()、Number()和Boolean()三个构造函数,分别用于构建String、Number和Boolean类型的包装对象。

4、类型转换

ECMA-262中对数据类型的转换有详细的定义,很多JavaScript的参考资料也会列出类型转换的详细规则,这里就不再赘述了,下面只讨论一些值得注意的问题。

JavaScript有两组相等比较运算符:”===“和”!==“、”==“和”!==“。Crockford在著作《JavaScript:The Good Parts》里面列举的Bad Parts中的第一个就是”==“运算符。原因在于”==“运算符会执行隐式的类型转换,而JavaScript中类型转换的规则又非常复杂,很容易导致代码中出现不易发现的bug。与”===“和其他编程语言中的”==“不同,JavaScript中的”==“运算符并不具备传递性: ∀x∀y∀z(x == y ∧ y == z → x == z)并不成立:

1 "" == "0";             // false
2 "" == 0;               // true
3 "0" == 0;              // true

Crockford和Zakas都建议不要使用“==”运算符,而使用“===”代替。若不遵循这个建议,使用“==”运算符时,请务必确保你明确知道两个比较变量的类型信息,以免发生预料之外的类型转换。

另外一个经常用到类型转换的地方是分支判断。if(和其它)语句并不要求进行分支判断的表达式结果必须为Boolean类型,而会根据特定的规则把判断表达式的结果转换为true或false后再进行判断。

1 if (obj !== undefined && obj !== null) {
2     // code
3 }
4
5 // 上面的判断条件可以替换为
6
7 if (obj) {
8     // code
9 }

上面代码中的obj代表一个对象变量,若其值为undefined或null,则被转换为false,反之转换为true。这种方式并不完全安全,若使用的变量是简单数据类型,就需要注意一些特殊值的转换规则,否则代码可能不会按照预想的方式执行。

1 if (typeof num === "number" && num) {  // if num is 0, get false
2     //code
3 }

上面代码的本意是获取一个有效的数值类型,屏蔽了其他类型和num的值为NaN的情况(NaN会转换false)。但代码中有一个纰漏,它忽略了num值为0的情况。0值会被转换为false,从而导致下面的代码不会被执行,这可能与编码者的本意相违背。同样使用String类型作为分支条件,也要考虑""会被自动转换为false的情况。

与分支判断中的类型转换相似的情况,是采用短路方式为变量赋值。由于JavaScript中”&&“和”||“操作符的特性,我们经常采用短路方式为变量赋值。”&&“操作符会返回表达式中第一个可以转换为false的操作数或最后一个操作数(全为true时);”||“操作符返回表达式中第一个可以转换为true的操作数或最后一个操作数(全为false时)。

1 var obj = obj1 || obj2 || {}; 
2 var attr = obj && pro && attr;

与分支判断一样,需要警惕表达式中可能出现的特殊值:0,"",null等。

JavaScript的类型模型,提供了极大的灵活性的同时也带来了很多陷阱,编码过程中需要小心地规避这些陷阱,因为代码审查很容易忽略它们,出现问题时,它们也往往很难被发现。

转载于:https://my.oschina.net/u/154866/blog/201514

理解JavaScript的原始类型相关推荐

  1. javascript的原始类型(primitive type)之间的关系。

    1:有5种primitive type,分别是Undefined.Null.Boolean.Number 和 String. 2: 3:alert(null == undefined);结果为true ...

  2. 五分钟学Java:为什么不应该使用Java的原始类型?

    在逛 Stack Overflow 的时候,发现了一些访问量像熊耳山一样高的问题,比如说这个:为什么不应该使用Java的原始类型?访问量足足有 205K+,这不得了啊!说明有很多很多的程序员被这个问题 ...

  3. 《JavaScript面向对象精要》——第1章 原始类型和引用类型1.1 什么是类型

    本节书摘来自异步社区<JavaScript面向对象精要>一书中的第1章,第1.1节,作者:[美]Nicholas C. Zakas 译者: 胡世杰 更多章节内容可以访问云栖社区" ...

  4. 《JavaScript面向对象精要》——第1章 原始类型和引用类型 1.1 什么是类型

    本节书摘来自异步社区<JavaScript面向对象精要>一书中的第1章,第1.1节,作者:[美]Nicholas C. Zakas著,更多章节内容可以访问云栖社区"异步社区&qu ...

  5. 《JavaScript面向对象精要》——1.2 原始类型

    本节书摘来自异步社区<JavaScript面向对象精要>一书中的第1章,第1.2节,作者:[美]Nicholas C. Zakas 译者: 胡世杰 更多章节内容可以访问云栖社区" ...

  6. 《JavaScript高级程序设计》阅读笔记(二):ECMAScript中的原始类型

    2.6 原始类型 ECMAScript有5种原始类型(primitive type),即Undefined.Null.Boolean.Number和String.ECMAScript提供了typeof ...

  7. js 对象深拷贝_这一次,彻底理解JavaScript深拷贝

    导语 这一次,通过本文彻底理解JavaScript深拷贝! 阅读本文前可以先思考三个问题: JS世界里,数据是如何存储的? 深拷贝和浅拷贝的区别是什么? 如何写出一个真正合格的深拷贝? 本文会一步步解 ...

  8. 深入理解JavaScript类数组

    起因 写这篇博客的起因,是我在知乎上回答一个问题时,说自己在学前端时把<JavaScript高级程序设计>看了好几遍. 于是在评论区中,出现了如下的对话: 天啦噜,这话说的,宝宝感觉到的, ...

  9. 【译】理解 JavaScript 中函数调用和 this

    原文 Understanding JavaScript Function Invocation and "this" github 的地址 欢迎 star! 前言 过去几年,我经常 ...

最新文章

  1. vue eventBus 跳坑的办法
  2. haproxy访问控制与动静分离
  3. 面向B端市场,Mana VR团队将推出VR交互产品
  4. struts2学习笔记--拦截器(Interceptor)和登录权限验证Demo
  5. GDB调试汇编堆栈过程分析
  6. Nginx的功能特性及常用功能
  7. 《视频直播技术详解》系列之六:延迟优化
  8. springMVC 与mybatis 整合 demo(maven 工程)
  9. java字符串的哈希码_获取Java中字符串的哈希码
  10. 重新学习java第一天
  11. wxpython 表格粘贴,wxpython在整个应用程序中剪切复制和粘贴
  12. 2016 中国大数据技术大会 相关资料
  13. 学生签到系统c代码_C++实现简单的学生管理系统
  14. FIR 带通滤波器参数设计流程
  15. 风入松——北大校园的风入松书店不知何处去
  16. 重新理解函数空间(上)
  17. [转]Windows Shell 编程 第十章
  18. PhotoShop安装问题160
  19. app小程序手机端Python爬虫开发00-课程介绍
  20. license程序设计 系统划分 及加密设计 加密算法调用openssl库

热门文章

  1. STM32 资料整理贴(更新到10年1月)[转]
  2. 网络拓扑系列 - 网络拓扑的“管理”元素
  3. kaptcha验证码实现,配合spring boot使用
  4. 不同Logger的使用
  5. iOS - MySQL 的安装配置
  6. 下载和安装Nginx之配置选项
  7. pdf文档出现乱码如何修改
  8. Spring 事务之@Transactional
  9. 本地复制不能粘贴到服务上
  10. linux内存之buff/cache