基本数据类型
ECMAScript中有5中简单数据类型性(也称为基本数据类型):Undefined、Null、Boolean、Number和String,还有一种复杂数据类型——Object,Object本质上是由一组无序的名值对组成,本文不讨论,相关内容将在本人另一篇随笔中提到。CMAScript不支持任何创建自定义类型的机制,也就是说所有值都将是上述6种数据类型之一。我们可以用typeof操作符来检测数据类型,使用typeof操作符可能返回下列某个字符串:
  • "undefined"——未定义的值
  • "boolean"——布尔值
  • "string"——字符串
  • "number"——数值
  • "object"——对象或null
  • "function"——函数
【注】返回的都是字符串,所以如果是下列语句,会返回什么呢?
console.log(typeof typeof 123) ; //返回string  
 
Undefined:
Undefined类型只有一个值,那就是特殊的undefined。比如在使用var声明变量但从未对其加以初始化时,这个变量的值就是undefined,函数在没有return语句时,值也为undefined,可以简单的理解为存在但没有具体的值,这里需要注意一点:undefined只代表没有赋值定义,而不是没有声明,如果使用了没有声明的变量,那么它的值将不是undefined,而是直接导致程序报错,例如:
var str;
console.log(str); //undefined
console.log(age); //报错
也就是说,只声明不定义的变量,它的值是undefined,连声明都没有的值不存在,用到会报错
var str;
console.log(typeof str); //undefined
console.log(typeof age); //undefined

  但是要命的是,二者的类型居然都是undefined,虽然逻辑上确实合理,但是这有可能导致二者被混淆,所以说,即便未初始化的变量会自动被赋予undefined的值,但显式地初始化变量依然是明智的选择。如果能够做到这一点,那么当typeof操作符返回"undefined”值时,我们就知道被检测的变量还没有被声明,而不是尚未被初始化。

Null:
Null类型只有一个值,那就是特殊的null。从逻辑角度来看,null值表示一个空对象指针,所以用typeof检测null时会返回一个object
var str = null;
console.log(typeof str); //"object"
所以如果定义的变量在将来准备用于保存对象,那么最好将该变量初始化为null而不是其他值。实际上,undefined值派生自null值,因此ECMA-262规定对它们的相等性测试要返回true
console.log(null == undefined); //true
虽然它们存在这样一个相等关系,但是它们的用途完全不同,无论在什么时候,都没有必要讲一个变量的值显式的设置为undefined,可是如果一个变量要保存对象的话,我们就应该让变量保存null这个值,这样做不仅可以体现null作为空对象指针的惯例,而且也有助于进一步区分null和undefined。
 
Boolean:
Boolean类型是ECMAScript中使用的最多的一种类型,该类型只有两个字面值:true和false(注意大小写),如果要把一个值显式的转换为Boolean值,可以调用转型函数Boolean值,以下是转换规则

Number:
值得注意的是NaN这一个特殊的值,NaN是一个不是数值的Number类型,,这个数值用于表示一个本来要返回数值的操作数未返回数值的情况(这样就不会抛出错误了)。也就是在ECMAScript中,任何数值除以非数值都会返回NaN,这样就不会影响其他代码的执行,算是一种容错机制吧。NaN有两个特点:
(1)任何涉及NaN的操作(例如NaN/10)都会返回NaN,这个特点在多步计算中有可能导致问题。
(2)NaN不等于任何值(连自己都不等于),针对NaN这两个特点,ECMAScript定义了isNaN()函数。这个函数可以接收一个任意类型的参数,然后判断这个值是不是“不是数值”。它的判断步骤是:先尝试将这个值转换为数值,某些不是数值的值会直接转换为数值,而任何不能被转换为数值的值都会导致这个函数返回true。
 alert(isNaN(NaN)); //true
alert(isNaN(10)); //false(10是一个数值)
alert(isNaN("10")); //false(可以被转换成数值10)
alert(isNaN("blue")); //true(不能转换成数值)
alert(isNaN(true)); //false(可以被转换成数值1)
String:
用于表示由0个或多个16位Unicode字符组成的字符序列,即字符串,字符串可以有""或''表示,这两种语法形式没有什么区别,用双引号表示的字符串和用单引号表示的字符串完全相同。但是只能用同种类型,混用会出现语法错误。
String数据类型中包含一些特殊的字符字面量,也叫转义序列,用于表示非打印字符,或者具有其他用途的字符。这些字符字面量如下:
 
 
特殊的值
NaN(类型为Number):非法运算的结果,不等于任何值,连自己都不等于
undefined(类型为undefined):变量声明了但没定义,但是存在
null(类型为object):空值
这三者之间null == undefined 但是不存在 null ===undefined的关系,因为进行了某种隐式转换
浮点数(小数):有时存在精度问题,因为计算机计算的时候,存在二进制转化,所以会丢失一些精度
  console.log(0.1+0.7); //返回一个0.79999999999 
这种情况应该这样处理    
  console.log(parseFloat((0.1+0.7).toFixed(1))); //返回0.8 
类型也保持不变

(显式)强制类型转换
字符和数字的转换
  • 字符——>数值:
parseInt()   parseFloat()——不严格
 parseInt("123abc"); //返回123
parseInt("123.14"); //返回123
parseInt("12a3.14"); //返回12
parseInt("123.1a4"); //返回123
parseInt("abc123"); //返回NAN
parseFloat("123abc"); //返回123
parseFloat("abc123"); //返回NaN
parseFloat("123.456"); //返回123.456
parseFloat("123.4a56"); //返回123.4
parseFloat("123.00"); //返回123
parseFloat("123.0a56"); //返回123
parseFloat("12a3.35"); //返回12
parseFloat("a123.056"); //返回NAN

  这两个方式的区别:parseFloat()能转换浮点数(也就是能识别小数点),也就是parseInt中小数点不被接收,parseFloat中接收小数点,它们都专门用于把字符串转换成数值

共同点:都是从左向右检测数字或字符串,遇到第一个部位数字的字符,则返回之前检索到的数字,如果第一个就遇到不为数字的字符,咋返回NaN,表示转换失败。它们都是不严格转换。
Number()  Math.round()——严格
 Number("123.1a4"); //返回NaN
Number("123.14"); //返回123.14
Number("123.00"); //返回123
Number("001023.00"); //返回1023
Number("true"); //返回1
Number(""); //返回0

Number()可以用于任何数据类型,以下是它的转换规则:

1.Boolean:true和false分别被转化为1和0
2.Number(除去NaN):简单的传入和返回
3.null:返回0
4.undefined:返回NaN
5.字符串:
(1)全是数字:全部转换(正负皆可,识别小数点,有效十六进制转换为对应的十进制),去除从左往右第一个非0的数字前面的0
(2)空字符串:转换为0
(3)除去上述格式之外的字符,都转换为NaN
 Math.round("1a23.00"); //返回NaN
Math.round("123.00"); //返回123
Math.round("123.15"); //返回123
Math.round("123.56"); //返回124
Math.round("123.46"); //返回123

Math.round()是四舍五入的取整

共同点:都是严格转换,也就是不允许出现非数字的字符,不然也会返回NaN

  • 数值——>字符:
.toString()  .toFixed(n)——严格
 var num = 123.46; num = num.toString();//将str变为一个字符串(原模原样,结果为"123.46")
var num = 123.46789; str = num.toFixed(1);//将str变为一个字符串(四舍五入保留一位小数,结果为"123.5")
var num = 123; str = num.toFixed(3);//将str变为一个字符串(四舍五入保留三位小数,结果为"123.000")

  几乎每个值又有一个toString()方法(字符串也有,但是null和undefined没有),该方法不用传递参数,默认情况下以十进制格式返回数字的字符串。如果通过传递基数,该方法可以输出二进制、八进制、十六进制、乃至其他任意有效进制格式表示的字符串值,例如:

 var num = 10; alert(num.toString()); //"10"
alert(num.toString(2)); //"1010"
alert(num.toString(8)); //"12"
alert(num.toString(10)); //"10"
alert(num.toString(16)); //"a"

String()

 var value1 = 10;
var value2 = true;
var value3 = null;
var value4;
alert(String(value1)); //"10"
alert(String(value2)); //"true"
alert(String(value3)); //"null"
alert(String(value4); //"undefined"

由此可以看出String()的转换规则为:

1.如果值有toString()方法,则调用该方法(没有参数)并返回相应的结果
2.如果值是null,则返回"null"
3.如果值是undefined,则返回"undefined"
 
隐式类型转换
  • 数值——>字符:
 /用加号的隐式类型转换规则来完成,为了保证原来的数字,加一个空字符即可
  var num = 123; str = num + ""; 
  • 字符——>数值:
用减号,除号,取余的隐式类型转换规则来完成,
为了保证原来的数字,操作为减去0或者除以1或者对比它大的数字取余,但是不是个好方法 ,因为谁比它大不好确定,而且代码重用性几乎没有
  var str = "123"; num = str - 0; 
 

该文章部分整理自《JavaScript 高级程序设计》(第3版),如有侵权行为,请告知删帖,谢谢!

剑指前端(前端入门笔记系列)—— JS基本数据类型及其类型转换的更多相关文章

  1. 每天成长一点---WEB前端学习入门笔记

    WEB前端学习入门笔记 从今天开始,本人就要学习WEB前端了. 经过老师的建议,说到他每天都会记录下来新的知识点,每天都是在围绕着这些问题来度过,很有必要每天抽出半个小时来写一个知识总结,及时对一天工 ...

  2. 《剑指offer》解题笔记

    <剑指offer>解题笔记 <剑指offer>共50题,这两周使用C++花时间做了一遍,谨在此把一些非常巧妙的方法.写代码遇到的难点.易犯错的细节等做一个简单的标注,但不会太过 ...

  3. 《剑指offer》读书笔记

    二叉树 重建二叉树 面试题6:(p55) 题目:输入某二叉树的前序遍历和中序遍历的结果,请重建出该二叉树. 假设输入的前序遍历和中序遍历的结果中都不含重复的数字. 例如输入前序遍历序列{1, 2, 4 ...

  4. JavaScript笔记1———js的数据类型

    JS的数据类型有: 1.数值类型(Number):js中所有数字均用浮点数字表示. 可以表示32位(即4字节)的整数,也可以表示64位(即8字节)的浮点数(小数). 也可以用二进制.八进制.十进制.十 ...

  5. 剑指前端(前端入门笔记系列)——BOM

    BOM ECMAScript是JavaScript的核心,但如果要在Web中使用JavaScript,那么BOM(浏览器对象模型)则无疑才是真正的核心,BOM提供了很多对象,用于访问浏览器的功能,这些 ...

  6. 剑指前端(前端入门笔记系列)——DOM(元素大小)

    DOM——元素大小   DOM中没有规定如何确定页面中与元素的大小,IE率先映入了一些属性来确定页面中元素的大小,以便开发人员使用,目前,所有主要的浏览器都已经支持这些属性了.   1.偏移量(单位为 ...

  7. 剑指前端(前端入门笔记系列)——DOM(属性节点)

    DOM(属性节点) 属性节点没有过参加家族关系中,其专用选择器:attributes,返回值为对象的形式,它的键是索引值,也就是用对象模拟了一个伪数组,DOM中选择器返回的都是伪数组(可以使用数组的形 ...

  8. 剑指前端(前端入门笔记系列)——DOM(基本组成与操作)

    DOM——基本组成与操作 DOM是针对HTML和XML文档的一个API(应用程序编程接口).DOM描绘了一个层次化的节点树,允许开发人员添加.移除和修改页面的某一部分.他给文档提供了一种结构化的表达方 ...

  9. 剑指前端(前端入门笔记系列)——DOM(元素节点)

    DOM(元素节点) 本文介绍了元素节点的基本操作:增删改查   增 新增一个元素节点分为两步(二者缺一不可),第一步:创建元素节点,第二步:将创建的元素节点插入到指定元素节点中(也就是插入指定元素节点 ...

随机推荐

  1. CentOS 本地和网络yum源简单说明及配置

    1.简述 Yellow dog Updater, Modified由Duke University团队,修改Yellow Dog Linux的Yellow Dog Updater开发而成,是一个基于R ...

  2. 从壹开始 [ Nuxt.js ] 之一 || 为开源收录Bug之 TiBug项目 开篇讲

    缘起 哈喽大家周二好呀,刚刚经历过了几天火车抢票,整个人都不好了,不知道小伙伴对今年的春节是否还一如既往的期待呢,眼看都要春节了,本来也想写篇2018总结篇,但是怕不免会出现鸡汤文的窠臼嫌疑,想想还是 ...

  3. 使用ConcurrentHashMap一定线程安全?

    前言 老王为何半夜惨叫?几行代码为何导致服务器爆炸?说好的线程安全为何还是出问题?让我们一起收看今天的<走进IT> 正文 CurrentHashMap出现背景 说到ConcurrentHa ...

  4. Element表格嵌入复选框以及单选框

    1,element 表格嵌入CheckBox 效果图如下:  2,element结合checkBox实现单选效果如下: html代码: <template> <div> < ...

  5. 高通QCC3026蓝牙音频芯片处理器介绍

    QCC3026是一款基于超低功耗架构的入门级闪存可编程蓝牙音频SoC,专为紧凑型功能优化的Qualcomm TrueWireless耳塞而设计.QCC3026旨在为我们的客户提供有助于缩短开发时间并具 ...

  6. Git思维导图

    EBay全程问了我关于Git的原理, 各种命令行:平常依赖Idea的图形化太严重了,今天仔细总结一下常用的工具:   Git学习的链接: https://book.git-scm.com/ http: ...

  7. Windows下建立FTP服务器站点

    环境 操作系统版本:Win7旗舰版64位系统 1.安装FTP组件 打开或关闭Windows功能,打开过程可能会比较慢,大概3.4分钟: 安装FTP组件.勾选Internet信息服务下的FTP服务器.F ...

  8. 4.29 初始mysql

  9. Docker & ASP.NET Core (2):定制Docker镜像

    上一篇文章:把代码连接到容器 Dockerfile 在Docker的世界里,我们可以通过一个叫Dockerfile的文件来创建Docker镜像,随后可以运行容器. Dockerfile就是一个文本文件 ...

  10. ToastUtil【简单的Toast封装类】【未自定义Toast的显示风格】

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 一个简单的Toast封装类. 效果图 API = 6.0 API = 4.4.2 代码分析 实现了不管我们触发多少次Toast调用, ...