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 相关文章推荐
Javascript中的常见排序算法
Mar 27 Javascript
JavaScript实现模仿桌面窗口的方法
Jul 18 Javascript
jQuery的position()方法详解
Jul 19 Javascript
浅析javascript中的事件代理
Nov 06 Javascript
GitHub上一些实用的JavaScript的文件压缩解压缩库推荐
Mar 13 Javascript
vue上传图片组件编写代码
Jul 26 Javascript
jQuery获取复选框选中的当前行的某个字段的值
Sep 15 jQuery
Javascript刷新页面的实例
Sep 23 Javascript
微信小程序自定义tab实现多层tab嵌套功能
Jun 15 Javascript
Vue项目数据动态过滤实践及实现思路
Sep 11 Javascript
JavaScript实现多张图片放大镜效果示例【不限定图片尺寸,rem单位】
May 14 Javascript
解决vue侦听器watch,调用this时出现undefined的问题
Oct 30 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 常用数组内部函数(Array Functions)介绍
2013/06/05 PHP
javascript some()函数用法详解
2014/11/13 PHP
php socket通信(tcp/udp)实例分析
2016/02/14 PHP
mac系统下为 php 添加 pcntl 扩展
2016/08/28 PHP
PHP实现动态压缩js与css文件的方法
2018/05/02 PHP
php intval函数用法总结
2019/04/14 PHP
PHP切割汉字的常用方法实例总结
2019/04/27 PHP
window.onload 加载完毕的问题及解决方案(下)
2009/07/09 Javascript
js arguments,jcallee caller用法总结
2013/11/30 Javascript
Ajax提交与传统表单提交的区别说明
2014/02/07 Javascript
JavaScript闭包函数访问外部变量的方法
2014/08/27 Javascript
JavaScript中的Web worker多线程API研究
2014/12/06 Javascript
jQuery mobile的header和footer在点击屏幕的时候消失的解决办法
2016/07/01 Javascript
.vue文件 加scoped 样式不起作用的解决方法
2018/05/28 Javascript
JavaScript实现点击出现图片并统计点击次数功能示例
2018/07/23 Javascript
详解JSON Web Token 入门教程
2018/07/30 Javascript
JS+CSS3实现的简易钟表效果示例
2019/04/13 Javascript
详解Vue 全局变量,局部变量
2019/04/17 Javascript
微信小程序之 catalog 切换实现解析
2019/09/12 Javascript
Python实现的破解字符串找茬游戏算法示例
2017/09/25 Python
python实现读取大文件并逐行写入另外一个文件
2018/04/19 Python
树莓派安装OpenCV3完整过程的实现
2019/10/10 Python
python列表推导式入门学习解析
2019/12/02 Python
VSCode配合pipenv搞定虚拟环境的实现方法
2020/05/17 Python
python 爬虫请求模块requests详解
2020/12/04 Python
Python 将代码转换为可执行文件脱离python环境运行(步骤详解)
2021/01/25 Python
CSS3教程(3):border-color网页边框色彩
2009/04/02 HTML / CSS
HTML5的革新 结构之美
2011/06/20 HTML / CSS
巴西最大的在线约会网站:ParPerfeito
2018/07/11 全球购物
计算机网络专业推荐信
2013/11/24 职场文书
精彩自我鉴定
2014/01/16 职场文书
煤矿安全承诺书
2014/05/22 职场文书
教师四风问题对照检查材料
2014/09/26 职场文书
岗位聘任报告
2015/03/02 职场文书
我的兄弟姐妹观后感
2015/06/15 职场文书
七年级作文之英语老师
2019/10/28 职场文书