JavaScript类型系统之基本数据类型与包装类型


Posted in Javascript onJanuary 06, 2016

写在前面的话

javascript的数据类型可以分为两种:原始类型和引用类型

原始类型也称为基本类型或简单类型,因为其占据空间固定,是简单的数据段,为了便于提升变量查询速度,将其存储在栈(stack)中(按值访问)。其中,javascript基本数据类型包括Undefined、Null、Boolean、Number和String五种

引用类型由于其值的大小会改变,所以不能将其存放在栈中,否则会降低变量查询速度,因此其存储在堆(heap)中,存储在变量处的值是一个指针,指向存储对象的内存处(按址访问)

[注意]对于引用类型的值,可以为其添加属性和方法,也可以改变和删除其属性和方法;但基本类型不可以添加属性和方法

JavaScript类型系统之基本数据类型与包装类型

Undefined

Undefined类型只有一个值,就是undefined。当声明的变量未初始化时,该变量的默认值是undefined

var test;//undefined
console.log(test == undefined);//true
var test = undefined;//undefined

对于尚未声明过的变量只能执行一项操作,使用typeof操作符检测其数据类型,但严格模式下会导致错误

typeof(test);//undefined

出现场景

[1]已声明未赋值的变量

[2]获取对象不存在的属性

[3]无返回值的函数的执行结果

[4]函数的参数没有传入

[5]void(expression)

类型转换

Boolean(undefined):  false

Number(undefined):  NaN

String(undefined):
'undefined'

Null

Null类型只有一个值,就是null。逻辑角度看,null值表示一个空对象指针,如果定义的变量将用于保存对象,最好将该变量初始化为null。实际上undefined值是派生自null值的,所以undefined == null

  [注意]null是空对象指针,而[]是空数组,{}是空对象,三者不相同

console.log(null == undefined);//true

出现场景

对象不存在时

类型转换

Boolean(null):

false

Number(null):

0

String(null):

'null'

[注意]因为undefined和null不是构造器类型,所以不能添加自定义属性

包装类型

包装类型是特殊的引用类型。每当读取一个基本类型值的时候,后台就会创建一个对应的基本包装类型的对象,从而可能调用一些方法来操作这些数据。包装类型共包括Boolean、Number和String三种

var s1 = 'some text';
var s2 = s1.substring(2);
//在上述过程中,实际上发生了三个步骤
var s1 = new String('some text'); //(1)创建String类型的一个实例 
var s2 = s1.substring(2); //(2)在实例上调用指定的方法
s1 = null; //(3)销毁这个实例

[注意]引用类型和基本包装类型的主要区别是对象的生存期。使用new操作符创建的引用类型的实例,在执行流离开当前作用域之前都一直保存在内存中。而自动创建的基本包装类型的对象,则只存在于一行代码的执行瞬间,然后立即被销毁。这意味着不能在运行时为基本类型值添加属性和方法

var s1 = 'some text';
s1.color = 'red';
alert(s1.color);//undefined

创建方式

显式创建包装类型共两种方式:

[1]Object方式[不建议使用]

var s = new Object('abc');
var b = new Object(true);
var n = new Object(123);

[2]构造函数方式[不建议使用]

var s = new String('abc');
var b = new Boolean(true);
var n = new Number(123);

[注意]使用new调用基本包装类型的构造函数与直接调用同名的转型函数是不一样的

var value = '25';
var number = Number(value);
console.log(typeof number);//number
var obj = new Number(value);
console.log(typeof obj);//object

Boolean

Boolean类型只有两个值:true 和 false。Boolean包装类型是与布尔值对应的引用类型,在布尔表达式中使用Boolean对象容易造成误解

出现场景

[1]条件语句导致系统执行的隐士类型转换

[2]字面量或变量定义

类型转换

Number(true): 1

||

Number(false) : 0

String(true):'true'

  ||

String(false):'false'

Boolean()

Boolean(undefined):false
    Boolean(null):false

Boolean(非空对象包括空数组[]和空对象{}):true

Boolean(非0): true || Boolean(0和NaN):false

Boolean(非空包括空格字符串):true || Boolean(''):false

[注意]true不一定等于1,false也不一定等于0

包装类型继承的方法

valueOf():返回基本类型值true 或 false

toString()和toLocaleString():返回字符串'true' 或'false'

console.log(typeof true.valueOf(),true.valueOf());//boolean true
console.log(typeof false.valueOf(),false.valueOf());//boolean false
console.log(typeof true.toString(),true.toString());//String 'true'
console.log(typeof false.toString(),false.toString());//String 'false'
console.log(typeof true.toLocaleString(),true.toLocaleString());//String 'true'
console.log(typeof false.toLocaleString(),false.toLocaleString());//String 'false'

Number

javascript只有一种数字类型,既可以表示32位的整数,还可以表示64位的浮点数

关于Number类型的详细信息移步到此

String

String类型是javascript中唯一没有固定大小的原始类型

下面接着来理解下JavaScript基本数据类型的包装对象

现象:为什么可以对字符串的操作采用对象的表示法?

例如:          

var s    = "this is a String";
      var len   = s.length;

解析:

JavaScript三个基本数据类型都有相应的对象类;分别为Sring,Number,Boolean类;
JavaScript可以灵活的将一种类型的值转换为另一种类型;
当我们在对象环境中使用字符串时,即当我们试图访问这个字符串的属性或方法时;
JavaScript会为这个字符串值内部地创建一个String包装对象;
String对象会暂时代替原始的字符串值,完成我们的访问;
这个被内部创建的String对象是瞬间存在的,它的作用是使我们可以正常访问属性和方法;
String对象在使用过后会被系统丢弃掉;
而原始值并不会被改变;

    以上同样适用于数字和布尔值类型;

    使用Object()函数,任何数字、字符串、布尔值都可以转换为它对应的包装对象;

    例如:

var number_wrapper  = Object (3);
Javascript 相关文章推荐
js 绑定带参数的事件以及手动触发事件
Apr 27 Javascript
基于jQuery的前端数据通用验证库
Aug 08 Javascript
js控制CSS样式属性语法对照表
Dec 11 Javascript
jQuery的选择器中的通配符使用介绍
Mar 20 Javascript
jquery插件NProgress.js制作网页加载进度条
Jun 05 Javascript
跟我学习javascript的异步脚本加载
Nov 20 Javascript
如何清除IE10+ input X 文本框的叉叉和密码输入框的眼睛图标
Dec 21 Javascript
Node.js发送HTTP客户端请求并显示响应结果的方法示例
Apr 12 Javascript
浅谈Angular4中常用管道
Sep 27 Javascript
vue2.0 自定义组件的方法(vue组件的封装)
Jun 05 Javascript
vue中使用mxgraph的方法实例代码详解
May 17 Javascript
Node使用Selenium进行前端自动化操作的代码实现
Oct 10 Javascript
4种JavaScript实现简单tab选项卡切换的方法
Jan 06 #Javascript
js针对ip地址、子网掩码、网关的逻辑性判断
Jan 06 #Javascript
js判断当前页面在移动设备还是在PC端中打开
Jan 06 #Javascript
js判断当前页面用什么浏览器打开的方法
Jan 06 #Javascript
javascript中闭包(Closure)详解
Jan 06 #Javascript
果断收藏9个Javascript代码高亮脚本
Jan 06 #Javascript
基于HTML+CSS,jQuery编写的简易计算器后续(添加了键盘监听)
Jan 05 #Javascript
You might like
php+js实现图片的上传、裁剪、预览、提交示例
2013/08/27 PHP
JavaScript 入门基础知识 想学习js的朋友可以参考下
2009/12/26 Javascript
JavaScript CSS修改学习第一章 查找位置
2010/02/19 Javascript
JavaScript中函数声明优先于变量声明的实例分析
2012/03/01 Javascript
jQuery的each终止或跳过示例代码
2013/12/12 Javascript
JQuery Tips相关(1)----关于$.Ready()
2014/08/14 Javascript
js+css实现tab菜单切换效果的方法
2015/01/20 Javascript
JS实现动态移动层及拖动浮层关闭的方法
2015/04/30 Javascript
JS+jQuery实现注册信息的验证功能
2017/09/26 jQuery
seaJs使用心得之exports与module.exports的区别实例分析
2017/10/13 Javascript
vue.js添加一些触摸事件以及安装fastclick的实例
2018/08/28 Javascript
Vue动态组件与异步组件实例详解
2019/02/23 Javascript
vscode配置vue下的es6规范自动格式化详解
2019/03/20 Javascript
Vue页面切换和a链接的本质区别详解
2019/11/12 Javascript
微信小程序封装多张图片上传api代码实例
2019/12/30 Javascript
Python使用设计模式中的责任链模式与迭代器模式的示例
2016/03/02 Python
python实现TF-IDF算法解析
2018/01/02 Python
python 不以科学计数法输出的方法
2018/07/16 Python
浅谈python下tiff图像的读取和保存方法
2018/12/04 Python
python flask框架实现重定向功能示例
2019/07/02 Python
django 解决自定义序列化返回处理数据为null的问题
2020/05/20 Python
CSS3实现头像旋转效果
2017/03/13 HTML / CSS
详解px单位html5响应式方案
2018/03/08 HTML / CSS
大专毕业生简历的自我评价
2013/10/20 职场文书
外贸业务员的岗位职责
2013/11/23 职场文书
爱国口号
2014/06/19 职场文书
珠宝的促销活动方案
2014/08/31 职场文书
乡镇党员干部群众路线对照检查材料思想汇报
2014/09/28 职场文书
西安大雁塔导游词
2015/02/10 职场文书
教师求职简历自我评价
2015/03/10 职场文书
接待员岗位职责范本
2015/04/15 职场文书
学校德育工作总结2015
2015/05/11 职场文书
给朋友的道歉短信
2015/05/12 职场文书
2015年中职班主任工作总结
2015/05/25 职场文书
钓鱼岛事件感想
2015/08/11 职场文书
Python matplotlib安装以及实现简单曲线的绘制
2022/04/26 Python