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之原型和继承
Jul 06 Javascript
Jquery常用技巧收集整理篇
Nov 14 Javascript
jQuery EasyUI API 中文文档 - Documentation 文档
Sep 29 Javascript
利用JS实现点击按钮后图片自动切换的简单方法
Oct 24 Javascript
通过网页查看JS源码中汉字显示乱码的解决方法
Oct 26 Javascript
Javascript使用function创建类的两种方法(推荐)
Nov 19 Javascript
jQuery使用unlock.js插件实现滑动解锁
Apr 04 jQuery
JavaScript 程序错误Cannot use 'in' operator to search的解决方法
Jul 10 Javascript
node.js学习之断言assert的使用示例
Sep 28 Javascript
详解Webstorm 新建.vue文件支持高亮vue语法和es6语法
Oct 26 Javascript
编写React组件项目实践分析
Mar 04 Javascript
用vue设计一个日历表
Dec 03 Vue.js
分步解析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求正负数数组中连续元素最大值示例
2014/04/11 PHP
php 5.4 全新的代码复用Trait详解
2017/01/05 PHP
PHP基于迭代实现文件夹复制、删除、查看大小等操作的方法
2017/08/11 PHP
php中加密解密DES类的简单使用方法示例
2020/03/26 PHP
js操纵跨frame的三级联动select下拉选项实例介绍
2013/05/19 Javascript
js浮动图片的动态效果
2013/07/10 Javascript
2种jQuery 实现刮刮卡效果
2015/02/01 Javascript
jQuery源码解读之removeAttr()方法分析
2015/02/20 Javascript
javascript结合Canvas 实现简易的圆形时钟
2015/03/11 Javascript
Javascript中的匿名函数与封装介绍
2015/03/15 Javascript
jQuery插件jcrop+Fileapi完美实现图片上传+裁剪+预览的代码分享
2015/04/22 Javascript
javascript中clipboardData对象用法详解
2015/05/13 Javascript
Angular中的interceptors拦截器
2017/06/25 Javascript
微信小程序拍照和摄像功能实现方法示例
2019/02/01 Javascript
Vue如何实现监听组件原生事件
2020/07/03 Javascript
Node.js 深度调试方法解析
2020/07/28 Javascript
在vue项目中 实现定义全局变量 全局函数操作
2020/10/26 Javascript
[51:34]Ti4主赛事胜者组 DK vs EG 2
2014/07/19 DOTA
python原始套接字编程示例分享
2014/02/21 Python
在Python的Django框架中调用方法和处理无效变量
2015/07/15 Python
详解Django之admin组件的使用和源码剖析
2018/05/04 Python
python删除本地夹里重复文件的方法
2020/11/19 Python
python实现决策树分类(2)
2018/08/30 Python
python并发编程多进程之守护进程原理解析
2019/08/20 Python
Python合并2个字典成1个新字典的方法(9种)
2019/12/19 Python
python实现单张图像拼接与批量图片拼接
2020/03/23 Python
聊聊Python pandas 中loc函数的使用,及跟iloc的区别说明
2021/03/03 Python
社区母亲节活动记录
2014/03/06 职场文书
员工考核评语大全
2014/04/26 职场文书
微笑服务标语
2014/06/24 职场文书
社区党建工作汇报材料
2014/10/27 职场文书
呼兰河传读书笔记
2015/06/30 职场文书
幼儿园六一主持词
2015/06/30 职场文书
2019年自助餐厅创业计划书模板
2019/08/22 职场文书
vue+elementui 实现新增和修改共用一个弹框的完整代码
2021/06/08 Vue.js
python turtle绘图
2022/05/04 Python