JavaScript数据类型学习笔记


Posted in Javascript onJanuary 25, 2016

ECMAscript 中有5种简单的数据类型,也被称为基本数据类型:Undefined、Null、Boolean、Number和String。还有一种复杂的数据类型——Object。

Undefined 类型

在使用var 声明变量但未对其进行初始化时,这个变量的值就是undefined。如:

var number;
document.write(number); //undefined

如果没有声明变量则会出现下面这种错误。如:

document.write(str); //错误

但是用typeof对其进行执行时,不管有没有声明都会返回undefined 值。如:

var num;
document.write(typeof num); //undefined
document.write(typeof str); //undefined

Null 类型

使用typeof检测null 时会返回"object"。如:

var num = null;
document.write(typeof num); //object

实际上undefined 值是派生自null 值的,因此他们相等都会返回true。如:

alert(null == undefined); //true

这里要注意的是,只要意在保存对象的变量还没有真正保存对象,就应该明确地让该变量保存null 值,此举有助于区分null 和 undefined。如:

var num1 = null;
var num2;
document.write(typeof num1 + " " + typeof num2); //object undefined

Boolean 类型

要将一个值转换为其对应的Boolean 值,可以使用转型函数Boolean()。如:

var str = "helloworld";
document.write(Boolean(str)); //true

《JavaScript高级编程设计》一书中的3.4.4中给出了关于各种数据类型及其对应的转换规则表格。大概有以下几种:

  • 数据类型为String 时,任何非空字符串都会转换为true;
  • 数据类型为Number 时,除了0 和NaN 会被转换为false 之外,其他都会转换为true;
  • 数据类型为Object 时,除了null 之外,都会转换为true;
  • 数据类型为Undefined 时,n/a 会被转换为true,undefined 会被转换为false;

这里要注意的是,if 语句经常使用自动执行响应的Boolean 转换作为条件。如:

var str = "helloworld";
if (str){
  document.write("hellothere");
} //hellothere

Number 类型

除了可以以十进制表示之外,整数还可以通过八进制或者十六进制的字面值来表示,其中八进制字面值的第一位必须是0,然后是八进制数字序列(0~7)。如:

var num1 = 070; //八进制的56
var num2 = 032; //八进制的32
var num3 = 079; //错误的八进制(>7)
var num4 = 09; //错误的八进制(>7)

十六进制字面值的前两位必须是0x,后面跟任何十六进制数(0~9 及 A~F)。如:

var num1 = 0xA; //十六进制的10
var num1 = 0xa; //也是十六进制的10(字母不区分大小写)

浮点数值

这里要注意的是,永远不要比较特定的浮点数值。如:

var a = 0.1;
var b = 0.2;
if (a + b == 0.3){
  document.write("you are right")
} //因为0.1 加上0.2 实际上等于0.30000000000000004

数值范围

ECMAScript 能够表示的最大和最小数值保存在Number.MAX_VALUE 和Number.MIN_VALUE 之中。要想确定一个数值是不是有穷的,可以使用isFinite()函数。如:

document.write(isFinite(Number.MAX_VALUE + Number.MAX_VALUE)); //false

NaN

0 除以0 会返回NaN,正数除以0 会返回Infinity,复数则会返回-Infinity。其次,NaN 与任何数值都不相等,包括它本身。另外函数isNaN()可以帮助我们确定这个参数是否“不是数值”。如:

document.write(isNaN("a")); //true;
document.write(isNaN("324")); //false;
document.write(isNaN(true)); //false;
document.write(isNaN(false)); //false;
document.write(isNaN(NaN)); //true;

数值转换

有三个函数可以把非数值转换为数值:Number()、parseInt()、parseFloat()。

Number()的转换规则如下:

如果是Boolean 值,true 和false 会被转换为1 和0。
如果是数字值,则不变。
如果是null 值,则转换为0。
如果是undefined,返回NaN。
如果是字符串则遵循下列规则:

  • 如果只有数字,则转换为十进制数值。
  • 如果是浮点格式,则将其转换成对应的浮点数值。同样也会忽略前导零。
  • 如果是十六进制格式则会转换成十进制数。
  • 如果字符串是空的,则会转换成0。
  • 其他情况则会转换为NaN。

具体看下面的例子:

document.write(Number(true)); //1
document.write(Number(false)); //0
document.write(Number("789")); //789
document.write(Number(null)); //0
document.write(Number(undefined)); //NaN
document.write(Number("02.0942")); //2.0942
document.write(Number(0xa)); //10
document.write(Number("")); //0
document.write(Number("fdsa")); //NaN

parseInt()的转换规则如下:

  • 如果第一个字符不是数字字符或者符号,parseInt()会返回NaN。
  • 用parseInt()转换空字符串会返回NaN。
  • 如果第一个字符是数字字符,它会继续解析第二个字符,直到遇到了一个非数字字符.

下面是具体的例子:

document.write(parseInt("fds")); //NaN
document.write(parseInt("")); //NaN
document.write(parseInt("1111112abc")); //1111112
document.write(parseInt("-1111112abc")); //-1111112
document.write(parseInt("+1111112abc")); //-1111112
document.write(parseInt("0xa")); //10
document.write(parseInt("0022.00009")); //22
document.write(parseInt("070")); //ECMAScript 3认为是56(八进制), ECMAScript 5认为是70(十进制)

另外需要注意的是,ECMAScript 5已经不具备解析八进制值的能力了所以为了消除这个问题,可以为这个函数提供第二个参数:转换时使用的基数(多少进制),具体如下:

document.write(parseInt("070",10)); //70
document.write(parseInt("070",8)); //56
document.write(parseInt("070",16)); //112

多数情况下,最好默认设置成10进制。

parseFloat()的转换规则如下:

  • 与parseInt()类似,不同的是字符串第一个小数点是有效的,而从第二个小数点开始包括第二个小数点是无效的。
  • 他不能解析十六进制数值!!!
  • 他只能解析十进制数值!!!
  • 他没有用第二个基数来指定进制的用法。

下面是具体的例子:

document.write(parseFloat("421")); //421
document.write(parseFloat("0421.32.1")); //421.32
document.write(parseFloat("0xaafd")); //0
document.write(parseFloat("070")); //70
document.write(parseFloat("070abc")); //70
document.write(parseFloat("")); //NaN
document.write(parseFloat("abc")); //NaN

String 类型

要把一个值转换成字符串有两种方式。第一种是使用几乎每个值都有的toString()方法。如下:

document.write((533).toString(10)); //"533"
document.write((0xa).toString(10)); //"10"
document.write((0xa).toString(2)); //"1010"
document.write((true).toString(10)); //"true"
document.write((false).toString(10)); //"false"

另外需要注意的是,null 和 undefined 不能转换。

document.write((null).toString(10)); //
document.write((undefined).toString(10)); //

如果不知道需要转换的数值是否是null 或者undefined 则应该使用转型函数String(),如果是null 会返回"null"如果是undefined 会返回"undefined"。如下:

document.write(String(null)); //"null"
document.write(String(undefined)); //"undefined"

另外在下一篇文章中再详细介绍Object 类型。

以上就是关于JavaScript数据类型的简单介绍,希望对大家学习JavaScript数据类型有所帮助。

Javascript 相关文章推荐
基于jquery的当鼠标滚轮到最底端继续加载新数据思路分享(多用于微博、空间、论坛 )
Oct 10 Javascript
struts2+jquery+json实现异步加载数据(自写)
Jun 24 Javascript
js判断某个方法是否存在实例代码
Jan 10 Javascript
jQuery插件scroll实现无缝滚动效果
Apr 27 Javascript
JavaScript判断DIV内容是否为空的方法
Jan 29 Javascript
BootStrap智能表单实战系列(六)表单编辑页面的数据绑定
Jun 13 Javascript
JavaScript队列、优先队列与循环队列
Nov 14 Javascript
angular.js 路由及页面传参示例
Feb 24 Javascript
jQuery ajax读取本地json文件的实例
Oct 31 jQuery
JavaScript 中的 this 工作原理
Jun 20 Javascript
浅谈TypeScript 用 Webpack/ts-node 运行的配置记录
Oct 11 Javascript
原生js实现二级联动菜单
Nov 27 Javascript
分步解析JavaScript实现tab选项卡自动切换功能
Jan 25 #Javascript
jQuery form 表单验证插件(fieldValue)校验表单
Jan 24 #Javascript
Jquery实现纵向横向菜单
Jan 24 #Javascript
JavaScript、jQuery与Ajax的关系
Jan 24 #Javascript
JavaScript jquery及AJAX小结
Jan 24 #Javascript
基于JavaScript短信验证码如何实现
Jan 24 #Javascript
详解JS面向对象编程
Jan 24 #Javascript
You might like
Yii 快速,安全,专业的PHP框架
2014/09/03 PHP
php代码架构的八点注意事项
2016/01/25 PHP
PHP中STDCLASS用法实例分析
2016/11/11 PHP
使用SyntaxHighlighter实现HTML高亮显示代码的方法
2010/02/04 Javascript
使用focus方法让光标默认停留在INPUT框
2014/07/29 Javascript
JS动态插入并立即执行回调函数的方法
2016/04/21 Javascript
jquery ajax局部加载方法详解(实现代码)
2016/05/12 Javascript
AngularJS压缩JS技巧分析
2016/11/08 Javascript
input框中自动展示当前日期yyyy/mm/dd的实现方法
2017/07/06 Javascript
Vue.js用法详解
2017/11/13 Javascript
详解Vue 全局引入bass.scss 处理方案
2018/03/26 Javascript
JS简单生成由字母数字组合随机字符串示例
2018/05/25 Javascript
JavaScript创建对象的四种常用模式实例分析
2019/01/11 Javascript
在vue中使用防抖和节流,防止重复点击或重复上拉加载实例
2019/11/13 Javascript
pygame学习笔记(3):运动速率、时间、事件、文字
2015/04/15 Python
python定时器(Timer)用法简单实例
2015/06/04 Python
快速解决pandas.read_csv()乱码的问题
2018/06/15 Python
Python 普通最小二乘法(OLS)进行多项式拟合的方法
2018/12/29 Python
python3 实现函数写文件路径的正确方法
2019/11/27 Python
tensorflow/core/platform/cpu_feature_guard.cc:140] Your CPU supports instructions that this T
2020/06/22 Python
golang/python实现归并排序实例代码
2020/08/30 Python
Jupyter Notebook安装及使用方法解析
2020/11/12 Python
python工具——Mimesis的简单使用教程
2021/01/16 Python
用HTML5实现手机摇一摇的功能的教程
2012/10/30 HTML / CSS
Canvas 文本填充线性渐变的使用详解
2020/06/22 HTML / CSS
巴西最大的运动品牌:Olympikus
2020/07/14 全球购物
好的自荐信的要求
2013/10/30 职场文书
产品售后服务承诺书
2014/05/21 职场文书
学习党的群众路线教育实践活动心得体会范文
2014/11/03 职场文书
论群众路线学习笔记
2014/11/06 职场文书
补充协议书
2015/01/28 职场文书
街道社区活动报告
2015/02/05 职场文书
2015年爱国卫生月活动总结
2015/03/26 职场文书
GoLang中生成UUID唯一标识的实现
2021/05/08 Golang
CSS的class与id常用的命名规则
2021/05/18 HTML / CSS
解决Python字典查找报Keyerror的问题
2021/05/26 Python