浅谈javascript六种数据类型以及特殊注意点


Posted in Javascript onDecember 20, 2013

在js中常见的六种数据类型:String类型、Null类型、Number类型、Boolean类型、Object类型。

1、typeof的注意点

涉及到数据类型,不免会提到,操作符 typeof。要注意:

1、typeof是操作符,不是方法。虽然我们经常使用typeof()的方式获取对象的数据类型。

2、对 null 取typeof  是 object(这是因为null是 空的对象引用),对函数取 typeof 是 function

alert(typeof null);    //返回 object
function demo(){
      alert('demo');
    }
alert(typeof demo);     //返回  function

2、为各种数据类型的对象变量设置初始值

注意,如果Object类型的 对象变量开始不知道赋值什么,不要  var demo={};最好是 设置成null;

var d2=null;
d2={'key':"shit"};
var d3='';//字符串 默认
var d4=0;   //Number 类型 初始值设置为0
var d5=null; //对object 类型设置初始默认值

3、undefined 和null 的区别和注意点

1、如果用 “==” 进行比较,他们是相等的,因为比较的是值

2、区分他们有两种方法(他们的核心都是比较他们的 数据类型)

  1)使用typeof 将他们区分开 

  2)使用全等“===”  :比较的是 值和 数据类型,只有全都相同 才返回 true

alert(undefined == null);             //true
alert(typeof undefined == typeof null); //false
alert(undefined === null);             //true

4、Boolean的注意点

1、true 和 1 比较是相同,false 和 0 比较是相同(是 “==” 比较),因为内部会实现 数据类型的 转化,将true 转换成1,将false 转换成0. js 内部有很多数据类型的自动转换,这是大家一定要注意的。后面还会提到很多。  但是使用“===”  就不相等了,因为 他们的数据类型是不等的。

2、显示转换成Boolean,使用Boolean()方法显示转换,需要注意的是各种数据类型,什么时候转换成true 什么时候转换成 false

  1)String类型,只要不是  空字符串  都会 转换成 true

  2)Number类型,只要不是 0 ,即使是 负数,都会转换成 true

  3)Object类型,只要 不是 null 类型,都会转换成true

  4)Undefined类型,都会转换成 false

我就不做演示,大家可以自己动手试一下。

3、(***)if()  语句的 ()  内部就是调用了 Boolean函数

5、Number类型注意点

 1、float类型 不能做精准运算

alert(0.1+0.2);//返回 0.300000000000000004

2、 支持 科学计数法 运算

3、NaN(Not a Number)

 1)var d=0/0;  注意:在js 里 是不会报错的,而是返回 NaN

 2)可以通过Number.NaN 来获取

 3)NaN和 任何 对象做运算都会返回 NaN

 4)isNaN()判断是不是 NaN

alert(isNaN(NaN));//true
alert(isNaN(12));//false
alert(isNaN('123'));//false:因为 字符串类型 的数字 可以自动转换成  数字
alert(isNaN('lew'));//true
alert(isNaN(false));//(*)false:因为 bool  值 可以转换成数字,true变1,,false 变 0

5)isNaN()内部执行原理:同样适用于对象。实现原理:首相调用对象的valueOf()方法,如果能转换成数字就直接做判断;如果不能就再调用toString()方法,然后测试返回值。

   valueOf()内部调用了toObject()方法,两个方法的 内部执行的原理:如下图:

浅谈javascript六种数据类型以及特殊注意点

var box={
        //重写  box 对象的 toString()  方法
        toString:function(){
              return '123';
            }
    };
alert(isNaN(box));//false
alert(box);//123   alert()内部也是 先调用了 对象的 valueOf()  然后调用 toString()方法

 6)将其他数据类型转换成Number类型

   含有三个函数:Number():可以针对所有的数据类型进行转换;parseInt()和parseFloat() 只 针对 字符串进行转化。

alert(Number('123'));//123
alert(Number('0234'));//234
alert(Number(true));//1
alert(Number(null));//(**)0
//除了 上面的  其他的都是 返回 NaN
alert(Number(undefined))//NaN

Number()内部实现的原理:同isNaN() 也是先调用 valueOf()  然后调用 toString()。。所以可想而知,性能是比较差的。。所以所过只要要被转型的对象是字符串的话,就调用 parseInt()  或者 parseFloat()因为他们内部不需要对类型做判断。

parseInt() 和 parseFloat()  调用注意:从第一个 为数字的 字符开始 一直到 第一个部位数字的字符 的前一个数字  的这部分字符串 转换成数字

alert(parseInt('123leb'));//123
alert(parseInt('123leb345'));//123
alert(parseInt('len234'));//NaN

当parseInt()里面的参数是 float类型的 那么只 取得 数字的  整数部分

alert(parseInt(56.12));//56

 6、String类型

 1)(*重要*)在ECMAScript中 字符串有不变性:字符串创建之后就不会再改变。

 要改变一个已经被赋值的字符串变量,首先要先销毁 变量中 字符串,然后再用一个包含 新值的字符串  填充变量。

var d='hello';
d=d+' shit';//执行过程:先将 'hello'赋值一份,然后将 d 中的字符串清空,将字符串 'hello' 和 ' shit'进行拼接,然后赋值给 d 变量。(所以 字符串 的值 一旦 被 创建之后 就不会 改变)

 2)toString()方法 将其他数据类型转换成 String类型。但是如果对 null 或undefined  进行操作的话就会报错。

 3)但是String()方法同样能实现 toString()的效果,但是 可以对 null 和undefined进行操作。

 内部原理:先 调用 toString(),如果可以转换成字符串,就将结果直接返回。否,再进行判断是 null 还是 undefined,然后返回‘null' 或 ‘undefined'

总结:如果知道 变量不可能是 null  或 undefined,就使用 toString()性能比 String(),因为 String()内部还要做判断,所以有损性能。

Javascript 相关文章推荐
JavaScript让IE浏览器event对象符合W3C DOM标准
Nov 24 Javascript
js 与或运算符 || && 妙用
Dec 09 Javascript
juqery 学习之六 CSS--css、位置、宽高
Feb 11 Javascript
原生js获取宽高与jquery获取宽高的方法关系对比
Apr 04 Javascript
Javascript中的方法和匿名方法实例详解
Jun 13 Javascript
JavaScript设计模式经典之命令模式
Feb 24 Javascript
js实现密码强度检测【附示例】
Mar 30 Javascript
node.js中 stream使用教程
Aug 28 Javascript
浅谈Vue项目骨架屏注入实践
Aug 05 Javascript
layui清空,重置表单数据的实例
Sep 12 Javascript
微信小程序实现多选框全选与反全选及购物车中删除选中的商品功能
Dec 17 Javascript
JS实现TITLE悬停长久显示效果完整示例
Feb 11 Javascript
js生成随机数之random函数随机示例
Dec 20 #Javascript
jquery实现tr元素的上下移动示例代码
Dec 20 #Javascript
解决JQeury显示内容没有边距内容紧挨着浏览器边线
Dec 20 #Javascript
JS比较两个时间大小的简单示例代码
Dec 20 #Javascript
javascript获取URL参数与参数值的示例代码
Dec 20 #Javascript
javascript获取鼠标点击元素对象(示例代码)
Dec 20 #Javascript
js 操作select与option(示例讲解)
Dec 20 #Javascript
You might like
使用 php4 加速 web 传输
2006/10/09 PHP
php设计模式 Decorator(装饰模式)
2011/06/26 PHP
PHP中array_map与array_column之间的关系分析
2014/08/19 PHP
php array_udiff_assoc 计算两个数组的差集实例
2016/11/12 PHP
PHP使用PDO调用mssql存储过程的方法示例
2017/10/07 PHP
PHP实现微信小程序人脸识别刷脸登录功能
2018/05/24 PHP
PHP htmlspecialchars_decode()函数用法讲解
2019/03/01 PHP
Javascript 生成指定范围数值随机数
2009/01/09 Javascript
25个好玩的JavaScript小游戏分享
2011/04/22 Javascript
读jQuery之二(两种扩展)
2011/06/11 Javascript
Jquery中val()表单取值赋值的实例代码
2013/08/15 Javascript
两种方法实现在HTML页面加载完毕后运行某个js
2014/06/16 Javascript
node.js中使用q.js实现api的promise化
2014/09/17 Javascript
jQuery实现点击按钮弹出可关闭层的浮动层插件
2015/09/19 Javascript
Javascript的无new构建实例详解
2016/05/15 Javascript
微信公众号开发 自定义菜单跳转页面并获取用户信息实例详解
2016/12/08 Javascript
jQuery中on方法使用注意事项详解
2017/02/15 Javascript
Node.js使用NodeMailer发送邮件实例代码
2017/03/06 Javascript
基于VUE选择上传图片并页面显示(图片可删除)
2017/05/25 Javascript
JS实现的随机排序功能算法示例
2017/06/09 Javascript
详解windows下vue-cli及webpack 构建网站(二)导入bootstrap样式
2017/06/17 Javascript
在Node.js下运用MQTT协议实现即时通讯及离线推送的方法
2019/01/24 Javascript
微信小程序云开发实现云数据库读写权限
2019/05/17 Javascript
[43:14]Liquid vs Optic 2018国际邀请赛淘汰赛BO3 第二场 8.21
2018/08/22 DOTA
Python中的十大图像处理工具(小结)
2019/06/10 Python
matplotlib 生成的图像中无法显示中文字符的解决方法
2020/06/10 Python
图解Python中深浅copy(通俗易懂)
2020/09/03 Python
Python fileinput模块如何逐行读取多个文件
2020/10/05 Python
英国羊皮鞋类领先品牌:Just Sheepskin
2019/12/12 全球购物
焊接专业毕业生求职信
2013/10/01 职场文书
考试不及格检讨书
2014/01/09 职场文书
优秀员工推荐信
2014/05/10 职场文书
卖车协议书范本4篇
2014/10/01 职场文书
爱心捐书倡议书
2015/04/27 职场文书
《世界多美呀》教学反思
2016/02/22 职场文书
毕业季聚会祝酒词!
2019/07/04 职场文书