JavaScript的数据类型问题总结
一 JS中有哪些数据类型？
-- 共 6 种数据类型，其中 5 种基本数据类型Undefined，Null，Boolean，Number和 String，1 种复杂数据类型Object。因为ECMAScript不支持创建任何自定义的类型，所以最终所有的类型都是其中 6 种数据类型之一。（ES6中新增了第七种数据类型Symbol）
1-1 原始类型/值类型（传递值）：Number，String，Boolean + 合成类型/引用类型（传递指针）：Object + 特殊类型：Undefined，Null
1-2 object：狭义对象-object + 数组-array + 函数-function
二 JS如何识别值的类型？
-- 3种方法：typeof，instanceof，Object.prototype.toString
2-1 typeof（检测基本数据类型）返回number，string，boolean，function，undefined + 其余的都是object（array，null，object，window，等等）
2-1eg：
<body>
<p id = "demo"></p>
<script>
document.getElementById("demo").innerHTML =
typeof 1 + "<br>" + //number
typeof NaN + "<br>" + //number
typeof "hello" + "<br>" + //string
typeof false + "<br>" + //boolean
typeof function () {} + "<br>" + //function
typeof myCar + "<br>" + //undefined
typeof [1,2,3] + "<br>" + //object
typeof {name:'fermin', age:22} + "<br>" + //object
typeof new Date() + "<br>" + //object
typeof null; //object
</script>
</body>
2-1-1 用typeof获取变量是否存在， if(typeof a!="undefined"){}
2-2 incetanceof（检测引用数据类型，非引用数据返回false）对应的引用类型数据返回true
2-2eg：
<body>
<p id = "demo"></p>
<script>
var reg = new RegExp;
document.getElementById("demo").innerHTML =
({} instanceof Array) + "<br>" + //false
([] instanceof Array) + "<br>" + //true
(reg instanceof RegExp) + "<br>" + //true
("hello" instanceof String); //false 非引用数据都返回false
</script>
</body>
2-3 Object.prototype.toString精确判断对象的类型
2-3eg：
<body>
<p id = "demo"></p>
<script>
document.getElementById("demo").innerHTML =
Object.prototype.toString.call(123) + "<br>" + //[object Number]
Object.prototype.toString.call('123') + "<br>" + //[object String]
Object.prototype.toString.call(true) + "<br>" + //[object Boolean]
Object.prototype.toString.call(undefined) + "<br>" + //[object Undefined]
Object.prototype.toString.call({}) + "<br>" + //[object Object]
Object.prototype.toString.call([]) + "<br>" + //[object Array]
Object.prototype.toString.call(function () {}); //[object Function]
</script>
</body>
三 JS的类型转换
-- JavaScript 变量可以转换为新变量或其他数据类型，有两种类型转换方式，强制（显示）类型转换（String(), toString(), Number(), parseInt(string,radix), parseFloat(string), Boolean() ）和自动（隐式）类型转换（isNaN()，一元操作符，算术运算符，逻辑运算符，比较运算符，if语句）
3-1 JS的强制类型转换
3-1-1 强制转换为数值类型：Number()，parseInt(string,radix)，parseFloat(string)
转换规则
（1）Number()转换规则，整体转换字符串类型
（a）数值：转换为十进制数
（b）字符串：空字符串 -> 0 只包含数字/有效浮点格式 -> 十进制/浮点格式，忽略前导0，其余转成NaN
（c）布尔值：true-> 1 false-> 0
（d）undefined：转成NaN
（e）对象：会调用自身valueOf()，返回原始类型值后用上述方法，否则再调用toString。若返回了原始类型再用上述转换规则，否则系统报错
（f）null： 转成0
（1）eg
<body>
<p id = "demo"></p>
<script>
document.getElementById("demo").innerHTML =
Number(011) + "<br>" + // 9 识别了前导0转换成八进制
Number('011') + "<br>" + // 11
Number('0') + "<br>" + // 0
Number('1a') + "<br>" + // NaN
Number('') + "<br>" + // 0
Number(true) + "<br>" + // 1
Number(undefined) + "<br>" + // NaN
Number({}) + "<br>" + //NaN
Number(null) + "<br>" + // 0
Number([]) + "<br>" + // 0
Number(function () {}); // NaN
</script>
</body>
（2）Number()与parseInt(string,radix)，parseFloat(string)的转换规则异同
Number整体转换字符串类型，parseInt和parseFloat逐个解析字符，只把数字转换出来，其余都转换为NaN
（2）eg：
<body>
<p id = "demo"></p>
<script>
document.getElementById("demo").innerHTML =
parseInt(011) + "<br>" + // 9
parseInt('01') + "<br>" + // 01
parseInt('1a') + "<br>" + // 1
parseInt('1a2b') + "<br>" + // 1
parseInt('') + "<br>" + // NaN 与Number不同
parseInt(true) + "<br>" + // NaN 与Number不同
parseInt(undefined) + "<br>" + // NaN
parseInt({}) + "<br>" + //NaN
parseInt(null) + "<br>" + // NaN
parseInt([]) + "<br>" + // NaN
parseInt(function () {}); // NaN
</script>
</body>
3-1-2 强制转换为字符串类型：String（）
转换规则
（1）String()转换规则，任意类型转化成字符串
（a）布尔，undefined，null都是两边加""转化为字符串，数值会转换成十进制数再加""转换为字符串，而字符串本身不变
（b）对象调用toString()，若返回原始类型值，再使用String()转换，否则再调用valueOf(),若返回原始类型，再使用String()转换，在否报错
（1）eg：
<body>
<p id = "demo"></p>
<script>
document.getElementById("demo").innerHTML =
String(011) + "<br>" + // "9"
String('011') + "<br>" + // "011"
String(true) + "<br>" + // "true"
String(undefined) + "<br>" + // "undefined"
String({}) + "<br>" + //"[object Object]"
String(null) + "<br>" + // "null"
String([]) + "<br>" + // ""
String(function () {}); // "function () {}"
</script>
</body>
3-1-2 强制转换为字符串类型：Boolean（）
转换规则
（1）Boolean()转换规则，任意类型转化成布尔值
undefined，null，-0，+0，NaN，""(空字符串)这六个值转换为false，其它的都转换为ture，注意对象(new Boolean(false))转换后对应的也是true
（1）eg：
<body>
<p id = "demo"></p>
<script>
document.getElementById("demo").innerHTML =
Boolean(011) + "<br>" + // true
Boolean('011') + "<br>" + // true
Boolean(false) + "<br>" + // false
Boolean(new Boolean(false)) + "<br>" + // true
Boolean(undefined) + "<br>" + // false
Boolean({}) + "<br>" + //true
Boolean(null) + "<br>" + // false
Boolean([]) + "<br>" + // true
Boolean(function () {}); // true
</script>
</body>
3-2 JS的自动类型转换
3-2-1 js何时自动转换
（a）不同类型数据互相运算，多个非数值相加时，将非字符串自动强制转换为字符串，再相加成字符串，其余自动强制转换为十进制数值再运算
（b）非布尔值类型数据求布尔值，如if中的条件，自动强制转换为布尔类型
（c）非数值类型数据用一元运算符（"+"和"-"），自动强制转换为十进制类型
（d）使用相等或不相等操作符时，会自动强制转换操作数，再比较他们的相等性。将非整数类型自动强制转换为整数类型，但是undefined和null不改变，
且undefined==null返回true，NaN==NaN返回false
3-2-2 自动转换为数值Number类型
eg：
<body>
<p id = "demo"></p>
<script>
document.getElementById("demo").innerHTML =
("2" - "1") + "<br>" + // 1
("2" + "1")+ "<br>" + // 21
(true + 1) + "<br>" + // 2
("1" * []) + "<br>" + // 0
("a" - 1 ) + "<br>" + // NaN
(+"a") + "<br>" + // NaN
(+false) + "<br>"; // 0
</script>
</body>
3-2-3 自动转换为字符串String类型
eg：
<body>
<p id = "demo"></p>
<script>
document.getElementById("demo").innerHTML =
("2" + "1")+ "<br>" + // "21"
(true + "1") + "<br>" + // "true1"
("1" + {}) + "<br>" + // "1[object Object]"
("1" + []) + "<br>" + // "1"
("1" + [1.2]) + "<br>" + // "11.2"
("1" + function () {}) + "<br>" + // "1function () {}"
("1"+ undefined) + "<br>" + // "1undefined"
("1"+ null) + "<br>"; // "1null"
</script>
</body>
3-2-3 自动转换为布尔值Boolean类型
eg：
<script>
if (!undefined && !null && !0 && !NaN && !"") {
console.log("true");
} // true
</script>
ps：自动转换类型有很大不确定性，不易去除错误，在预期为原始数据数值，字符串，布尔值时全部使用显示转换方法，Number()，String()，Boolean()比较好。
3-2-4 有相等与不相等操作符的自动转换
eg：
<body>
<p id = "demo"></p>
<script>
document.getElementById("demo").innerHTML =
(null == undefined)+ "<br>" + // true
(null == 0) + "<br>" + // false
(NaN == NaN) + "<br>" + // false
(NaN != NaN) + "<br>" + // true
("3" == 3) // true
</script>
</body>
ps：由于相等和不相等操作符存在类型转换问题，而为了保持代码中数据类型的完整性，除了使用(obj.a === null || obj.a === undefined)简化为(obj.a == null)外，别的都使用全等和不全等操作符
3-3 一些转换的特殊情况
1 + {a: 1} // "1[object Object]"
{a: 1} + 1 // "1" 此种对象在前的情况，JS引擎将其视为代码块，不看作对象，由于无返回值，被忽略掉
({a: 1}) + 1 // "[object Object]1"
[ ] + [ ] // " "
[ ] + { } // "[object Object]"
{ } + [ ] // 0 // +[ ] -> Number([ ]) -> Number([ ].toString()) -> Number(" ") -> 0
({ }) + [ ] // "[object Object]"
{ } + { } // "[object Object]" // +{ }
({ }) + { } / console.log({ } + { }) / var a = { } + { }; a // "[object Object] [object Object]"
小结：+[ ] 会强制转化十进制数值0，多个不是数值数相加，会强制转化为字符串，对象在前没有被括号包起来，会被当作代码块处理，没有返回值就被忽略掉。
JavaScript的数据类型问题总结的更多相关文章
- 再谈JavaScript的数据类型问题
JavaScript的数据类型问题已经讨论过很多次了,但许多人还有许多书仍然沿用着错误的.混乱的一些观点,所以就再细讲一回. 提及这个讨论的原因在于argb同学在我的MSN博客上的一段回复,又更早的起 ...
- JavaScript中数据类型转换总结
JavaScript中数据类型转换总结 在js中,数据类型转换分为显式数据类型转换和隐式数据类型转换. 1, 显式数据类型转换 a:转数字: 1)Number转换: 代码: var a = " ...
- 细读 php json数据和JavaScript json数据
关于JSON的优点: 1.基于纯文本,跨平台传递极其简单: 2.Javascript原生支持,后台语言几乎全部支持: 3.轻量级数据格式,占用字符数量极少,特别适合互联网传递: 4.可读性较强 5.容 ...
- javascript的数据检测总结
目录 javaScript的数据检测 1.typeof 2.instanceof 3.constructor 4.Object.prototype.toString.call()--------- 一 ...
- JavaScript实现数据的双向绑定
接触到Angulr.js和Vue.js后,提到最多的就是双向绑定 下面将用JavaScript实现数据的双向绑定 <!DOCTYPE html> <html> <head ...
- Java抓取网页数据（原网页+Javascript返回数据）
有时候由于种种原因,我们需要采集某个网站的数据,但由于不同网站对数据的显示方式略有不同! 本文就用Java给大家演示如何抓取网站的数据:(1)抓取原网页数据:(2)抓取网页Javascript返回的数 ...
- Javascript之数据执行原理探究
Javascript在Web服务器端执行原理: 1.客户端请求数据,即我们在上网时在地址栏中输入某个网址,浏览器接收到数据之后,向远程web服务器发送请求报文. 2.web服务器响应请求,web服务器 ...
- JavaScript的数据类型转换
首先,由于JavaScript是弱类型语言(弱类型的语言的东西没有明显的类型,他能随着环境的不同,自动变换类型而强类型则没这样的规定,不同类型间的操作有严格定义,只有相同类型的变量才能操作,虽然系统也 ...
- Java抓取网页数据（原来的页面+Javascript返回数据）
转载请注明出处! 原文链接:http://blog.csdn.net/zgyulongfei/article/details/7909006 有时候因为种种原因,我们须要採集某个站点的数据,但因为不同 ...
随机推荐
- 内核调试神器SystemTap — 简介与使用（一）
a linux trace/probe tool. 官网:https://sourceware.org/systemtap/ 简介 SystemTap是我目前所知的最强大的内核调试工具,有些家伙甚至说 ...
- Mybatis源码之CallableStatementHandler
/** * @author Clinton Begin */ public class CallableStatementHandler extends BaseStatementHandler { ...
- 如何在os x或ubuntu下安装最新的ruby
os x下基本上可以安装到比较新的ruby,首先先安装rvm,然后用rvm list known看当前可供安装的ruby的版本,不过这也不是绝对的,比如在我的os x 10.9上,命令返回如下: # ...
- mongodb3.6 副本集（三）mongodb 如何做数据备灾
前言 个人理解,副本集一个主要作用就是当Master库出现故障,其中的一个salve从库会被选举出来成为新的Master.框架图如下: 其中,选举者是不参与数据存储的,它的作用只是为了选举出新的Mas ...
- 我对Spring的理解。
1.Spring实现了工厂模式的工厂类(在这里有必要解释清楚什么是工厂模式),这个类名为BeanFactory(实际上是一个接口),在程序中通常BeanFactory的子类ApplicationCon ...
- Java Web开发中路径问题小结
Java Web开发中,路径问题是个挺麻烦的问题,本文小结了几个常见的路径问题,希望能对各位读者有所帮助. (1) Web开发中路径的几个基本概念 假设在浏览器中访问了如下的页面,如图1所示: 图1 ...
- GitHub上整理的一些资料
技术站点 Hacker News:非常棒的针对编程的链接聚合网站 Programming reddit:同上 MSDN:微软相关的官方技术集中地,主要是文档类 infoq:企业级应用,关注软件开发领域 ...
- 布局 android
1.线性布局 LinearLayout又称作线性布局,是一种非常常用的布局.通过android:orientation属性指定了排列方向是vertical还是horizontal. 如果LinearL ...
- SQL Server 表的管理_关于完整性约束的详解（案例代码）
SQL Server 表的管理之_关于完整性约束的详解 一.概述: ●约束是SQL Server提供的自动保持数据库完整性的一种方法, 它通过限制字段中数据.记录中数据和表之间的数据来保证数据的完整性 ...
- django1.8升级1.9的几个问题
1.URL Pattern警告,旧式的URL定义方法将在1.10版本中被废止,所以这个版本仅仅是警告,不过这个警告让我看到了升级1.9这个非LTS版本的意义. 2.Django自身所带Models变化 ...