浅谈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 全面解析各种浏览器网页中的JS 执行顺序
Feb 17 Javascript
Javascript实现DIV滚动自动滚动到底部的代码
Mar 01 Javascript
js实现点击后将文字或图片复制到剪贴板的方法
Aug 04 Javascript
JavaScript中String.prototype用法实例
May 20 Javascript
Atitit.js的键盘按键事件捆绑and事件调度
Apr 01 Javascript
浅析jquery数组删除指定元素的方法:grep()
May 19 Javascript
jQuery处理XML文件的几种方法
Jun 14 Javascript
一个简单的JavaScript Map实例(分享)
Aug 03 Javascript
在Vue中使用echarts的实例代码(3种图)
Jul 10 Javascript
解决jquery appaend元素中id绑定事件失效的问题
Sep 12 jQuery
基于angular-utils-ui-breadcrumbs使用心得(分享)
Nov 03 Javascript
在 Vue.js中优雅地使用全局事件的方法
Feb 01 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
用PHP实现的生成静态HTML速度快类库
2007/03/31 PHP
php数组函数序列之in_array() 查找数组值是否存在
2011/10/29 PHP
php中数字0和空值的区别分析
2014/06/05 PHP
在 Laravel 中 “规范” 的开发短信验证码发送功能
2017/10/26 PHP
PHP curl批处理及多请求并发实现方法分析
2018/08/15 PHP
jquery ajax提交表单数据的两种实现方法
2010/04/29 Javascript
JavaScript 操作键盘的Enter事件(键盘任何事件),兼容多浏览器
2010/10/11 Javascript
js实现单行文本向上滚动效果实例代码
2013/11/28 Javascript
前端必备神器 Snap.svg 弹动效果
2014/11/10 Javascript
使用cluster 将自己的Node服务器扩展为多线程服务器
2014/11/10 Javascript
jQuery中width()方法用法实例
2014/12/24 Javascript
jquery UI Datepicker时间控件的使用及问题解决
2016/04/28 Javascript
JS前向后瞻正则表达式定义与用法示例
2016/12/27 Javascript
jQuery实现给input绑定回车事件的方法
2017/02/09 Javascript
javascript基础练习之翻转字符串与回文
2017/02/20 Javascript
NodeJS处理Express中异步错误
2017/03/26 NodeJs
基于jQuery实现文字打印动态效果
2017/04/21 jQuery
vue中路由验证和相应拦截的使用详解
2017/12/13 Javascript
webpack本地开发环境无法用IP访问的解决方法
2018/03/20 Javascript
对vue中methods互相调用的方法详解
2018/08/30 Javascript
详解在网页上通过JS实现文本的语音朗读
2019/03/28 Javascript
uniapp与webview之间的相互传值的实现
2020/06/29 Javascript
react中hook介绍以及使用教程
2020/12/11 Javascript
element el-table表格的二次封装实现(附表格高度自适应)
2021/01/19 Javascript
python 正则表达式 概述及常用字符
2009/05/04 Python
Python数据结构之哈夫曼树定义与使用方法示例
2018/04/22 Python
解决python xx.py文件点击完之后一闪而过的问题
2019/06/24 Python
python读写csv文件并增加行列的实例代码
2019/08/01 Python
django model object序列化实例
2020/03/13 Python
python定时截屏实现
2020/11/02 Python
BAILEY 44官网:美国制造的女性服装
2019/07/01 全球购物
德国最大的婴儿用品网上商店:Kidsroom.de(支持中文)
2020/09/02 全球购物
工商管理本科毕业生求职信范文
2013/10/05 职场文书
个人简历中的自我评价范例
2013/10/29 职场文书
图书馆义工感想
2015/08/07 职场文书
苹果macOS 13开发者预览版Beta 8发布 正式版10月发布
2022/09/23 数码科技