详解js的六大数据类型


Posted in Javascript onDecember 27, 2016

js中有六种数据类型,包括五种基本数据类型(Number,String,Boolean,Null,Undefined),和一种混合数据类型(Object)。

前面说到js中变量是松散类型的,因此有时候我们需要检测变量的数据类型。

typeof操作符可以检测变量的数据类型(输出的是一个关于数据类型的字符串)。

返回如下6种字符串:number,string,boolean,object,undefined,function.且看如下例子:

var x = 1;
console.log(typeof x);//number

var a = undefined;
console.log(typeof a);//undefined

var b = null;
console.log(typeof b);//object,(null是空对象引用/或者说指针)。

var c = new Object();
console.log(typeof c);//object

var e = [1,2,3];
console.log(typeof e);//object 

var d = function(){
 // ... 语句块
}
console.log(typeof d);//function

上面代码中,null类型进行typeof操作符后,结果是object,原因在于,null类型被当做一个空对象引用。

下面开始针对每一种数据类型单个讲解:

1.Number类型

Number类型包含整数和浮点数(浮点数数值必须包含一个小数点,且小数点后面至少有一位数字)两种值。

浮点数将会自动转换为整数。

var num = 1.00;
console.log(num);//1,自动转换为整数

浮点数的最高精度是17位,看下面的例子,结果竟然不是0.3,至于其他编程语言,也会遇到这种情况(关于浮点数计算会产生舍入误差问题,其他有些编程语言也会出现类似情况。)

var num1 = 0.1;
var num2 = 0.2;
console.log(num1 + num2);//0.30000000000000004

NaN:非数字类型。特点:① 涉及到的 任何关于NaN的操作,都会返回NaN   ② NaN不等于自身。

var ab = "a1";
console.log(ab/10);// NaN
console.log(NaN == NaN);// false;

isNaN()函数,用于判断是否是一个非数字类型。如果传入的参数是一个非数字类型,那么返回true;否则返回false;

isNaN()函数,传入一个参数,函数会先将参数转换为数值。

如果参数类型为对象类型,会先调用对象的valueOf()方法, 再确定该方法返回的值是否可以转换为数值类型。如果不能,再调用对象的toString()方法,再确定返回值。

数值转换:

Number()转型函数,可以用于任何数据类型;

parseInt(),将值转换为整型,用的比较多;

parseFloat();将值转换为浮点型。

2.String类型

字符串类型中的单引号与双引号的作用效果完全一样。

字符串有length属性。可以取得字符串的长度。var str = “hello”;console.log(str.length);//5

字符串的值是不可变的。要改变一个字符串的值,首先要销毁原来的字符串,再用另一个包含新值的字符串去填充该字符串。

var lang = “java”;
lang += “script”;

上面这段代码,先创建一个能容纳10个字符的字符串,然后在这个字符串中填充java和script字符串,最后销毁原来的字符串java和scrip字符串,因为这两个字符串此时已经没用了。这个个过程是在后台发生的。

字符串转换:转型函数String(),适用于任何数据类型(null,undefined 转换后为null和undefined);toString()方法(null,defined没有toString()方法)。

var bc = "lijinwen";
var bd = null;
var be = undefined;
console.log(bc.toString());
//console.log(bd.toString());//error 报错
//console.log(be.toString());//error 报错
console.log("------");
console.log(String(bc));
console.log(String(bd));
console.log(String(be));

3.Boolean类型

该类型只有两个值,true和false

转换为boolean值: 转型函数Boolean(),将某个值转换为Boolean类型。详细内容,后面会慢慢的补充。

4.Null类型

null类型被看做空对象指针,前文说到null类型也是空的对象引用。只有一个值,即null值,所以,在你 用typeof 操作符去检测null类型的值时,结果是object类型。

如果你定义了一个变量,但是想在以后把这个变量当做一个对象来用,那么最好将该对象初始化为null值。

5.Undefined类型

只有一个值,即undefined值。使用var声明了变量,但未给变量初始化值,那么这个变量的值就是undefined。

var name = "lijinwen";
var age;
console.log(name);//lijinwen
console.log(age);//undefined
//console.log(height);//error,变量height没有声明
console.log(typeof name);//string
console.log(typeof age);//undefined
console.log(typeof height);//undefined,变量height没有声明

上面这段代码中,age虽然声明了,但是没有初始化值,所以,打印出来的是undefined.而变量height没有声明,故报错。

但是用typeof操作符去检测数据类型的时候,变量age没有初始化,结果是undefined,没有声明变量的height检测的类型也是undefined.

6.Object类型

js中对象是一组属性与方法的集合。具体的关于对象的创建方式以及对象的各种特性,会在后面的引用类型的章节中  做详细介绍。这里就简单介绍一下六大数据类型中的Object.

①constructor属性:构造函数属性,可确定当前对象的构造函数。

var o = new Object();
console.log(o.constructor == Object);//true
var arr = new Array();
console.log(arr.constructor == Array);//true

②hasOwnProperty(propertyName):判断属性是否存在于当前对象实例中(而不是原型对象中)。这个在后面的面向对象的章节中  有详细的讲解。

③…更多关于Object请查看后面的章节面向对象。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
测试你的JS的掌握程度的代码
Dec 09 Javascript
点击按钮自动加关注的代码(sina微博/QQ空间/人人网/腾讯微博)
Jan 02 Javascript
倒记时60刷新网页的js代码
Feb 18 Javascript
使用javascript实现监控视频播放并打印日志
Jan 05 Javascript
jQuery使用$.ajax进行即时验证实例详解
Dec 11 Javascript
DWR中各种java方法的调用
May 04 Javascript
vue2.0实现移动端的输入框实时检索更新列表功能
May 08 Javascript
layui框架table 数据表格的方法级渲染详解
Aug 19 Javascript
jQuery实现王者荣耀手风琴效果
Jan 17 jQuery
JavaScript实现移动端弹窗后禁止滚动
May 25 Javascript
使用Vue Composition API写出清晰、可扩展的表单实现
Jun 10 Javascript
vuex的数据渲染与修改浅析
Nov 26 Vue.js
javascript ASCII和Hex互转的实现方法
Dec 27 #Javascript
谈谈第三方App接入微信登录 解读
Dec 27 #Javascript
JavaScript trim 实现去除字符串首尾指定字符的简单方法
Dec 27 #Javascript
修改ligerui 默认确认按钮的方法
Dec 27 #Javascript
js判断一个字符串是以某个字符串开头的简单实例
Dec 27 #Javascript
浅谈Vue的基本应用
Dec 27 #Javascript
利用Angularjs中模块ui-route管理状态的方法
Dec 27 #Javascript
You might like
php 获取完整url地址
2008/12/20 PHP
php中计算程序运行时间的类代码
2012/11/03 PHP
php 字符串压缩方法比较示例
2014/01/23 PHP
PHP取余函数介绍MOD(x,y)与x%y
2014/05/15 PHP
php支持中文字符串分割的函数
2015/05/28 PHP
PHP + plupload.js实现多图上传并显示进度条加删除实例代码
2017/03/06 PHP
如何在Laravel之外使用illuminate组件详解
2020/09/20 PHP
实例:用 JavaScript 来操作字符串(一些字符串函数)
2007/02/15 Javascript
javascript 日历提醒系统( 兼容所有浏览器 )
2009/04/07 Javascript
下载文件个别浏览器文件名乱码解决办法
2013/03/19 Javascript
jQuery把表单元素变为json对象
2013/11/06 Javascript
JS验证邮箱格式是否正确的代码
2013/12/05 Javascript
JavaScript中window.showModalDialog()用法详解
2014/12/18 Javascript
jQuery实现按钮点击遮罩加载及处理完后恢复的效果
2016/06/07 Javascript
在JSP中如何实现MD5加密的方法
2016/11/02 Javascript
详解Jquery EasyUI tree 的异步加载(遍历指定文件夹,根据文件夹内的文件生成tree)
2017/02/11 Javascript
jQuery插件DataTables分页开发心得体会
2017/08/22 jQuery
js实现前面自动补全位数的方法
2018/10/10 Javascript
Node.js 的 GC 机制详解
2019/06/03 Javascript
Jquery cookie插件实现原理代码解析
2020/08/04 jQuery
[49:40]2018DOTA2亚洲邀请赛小组赛 A组加赛 TNC vs Newbee
2018/04/03 DOTA
[44:41]Fnatic vs Liquid 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
用Python操作字符串之rindex()方法的使用
2015/05/19 Python
Python的Django框架中从url中捕捉文本的方法
2015/07/20 Python
Pycharm学习教程(4) Python解释器的相关配置
2017/05/03 Python
读取json格式为DataFrame(可转为.csv)的实例讲解
2018/06/05 Python
python 遍历目录(包括子目录)下所有文件的实例
2018/07/11 Python
pytorch GAN生成对抗网络实例
2020/01/10 Python
Python暴力破解Mysql数据的示例
2020/11/09 Python
伊利莎白雅顿官网:Elizabeth Arden
2016/10/10 全球购物
FORZIERI福喜利中国官网:奢侈品购物梦工厂
2019/05/03 全球购物
计生办班子群众路线教育实践活动个人对照检查材料思想汇报
2014/10/04 职场文书
大连星海广场导游词
2015/02/10 职场文书
导游词之广州陈家祠
2019/10/21 职场文书
详解Java ES多节点任务的高效分发与收集实现
2021/06/30 Java/Android
Golang流模式之grpc的四种数据流
2022/04/13 Golang