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 相关文章推荐
离开当前页面前使用js判断条件提示是否要离开页面
May 02 Javascript
javascript实现dom动态创建省市纵向列表菜单的方法
May 14 Javascript
JS+DIV+CSS实现仿表单下拉列表效果
Aug 18 Javascript
Bootstrap基本组件学习笔记之下拉菜单(7)
Dec 07 Javascript
防止页面url缓存中ajax中post请求的处理方法
Oct 10 Javascript
Vim快速合并行及vim 将文件所有行合并到一行
Nov 27 Javascript
利用Console来Debug的10个高级技巧汇总
Mar 26 Javascript
AngularJs用户输入动态模板XSS攻击示例详解
Apr 21 Javascript
Vue slot用法(小结)
Oct 22 Javascript
vue axios重复点击取消上一次请求封装的方法
Jun 19 Javascript
微信小程序new Date()方法失效问题解决方法
Jul 29 Javascript
JS代码简洁方式之函数方法详解
Jul 28 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
php&java(二)
2006/10/09 PHP
php XPath对XML文件查找及修改实现代码
2011/07/27 PHP
iis下php mail函数的sendmail配置方法(官方推荐)
2012/04/25 PHP
destoon利用Rewrite规则设置网站安全
2014/06/21 PHP
基于php的CMS中展示文章类实例分析
2015/06/18 PHP
基于PHP技术开发客服工单系统
2016/01/06 PHP
php 数组字符串搜索array_search技巧
2016/07/05 PHP
thinkphp3.2中实现phpexcel导出带生成图片示例
2017/02/14 PHP
PHP性能分析工具xhprof的安装使用与注意事项
2017/12/19 PHP
JavaScript关于select的相关操作说明
2010/01/13 Javascript
jquery中dom操作和事件的实例学习 下拉框应用
2011/12/01 Javascript
JS实现的省份级联实例代码
2013/06/24 Javascript
浅谈jQuery框架Ajax常用选项
2017/07/08 jQuery
Vue组件模板形式实现对象数组数据循环为树形结构(实例代码)
2017/07/31 Javascript
Angular2监听页面大小变化的解决方法
2017/10/09 Javascript
利用node.js如何创建子进程详解
2017/12/09 Javascript
小程序图片剪裁加旋转的示例代码
2018/07/10 Javascript
详解原生JS回到顶部
2019/03/25 Javascript
vant 中van-list的用法说明
2020/11/11 Javascript
Vue中避免滥用this去读取data中数据
2021/03/02 Vue.js
[02:23]DOTA2英雄基础教程 幻影长矛手
2013/12/09 DOTA
python使用正则表达式检测密码强度源码分享
2014/06/11 Python
python在指定目录下查找gif文件的方法
2015/05/04 Python
python字符串str和字节数组相互转化方法
2017/03/18 Python
python中datetime模块中strftime/strptime函数的使用
2018/07/03 Python
使用pytorch进行图像的顺序读取方法
2018/07/27 Python
用python生成1000个txt文件的方法
2018/10/25 Python
对python多线程中Lock()与RLock()锁详解
2019/01/11 Python
python实现移位加密和解密
2019/03/22 Python
Python自动巡检H3C交换机实现过程解析
2020/08/14 Python
Python通过类的组合模拟街道红绿灯
2020/09/16 Python
利用Python发送邮件或发带附件的邮件
2020/11/12 Python
学习心得体会
2014/01/01 职场文书
校长就职演讲稿
2014/01/06 职场文书
公民代理授权委托书
2014/09/24 职场文书
25张裸眼3D图片,带你重温童年的记忆,感受3D的魅力
2022/02/06 杂记