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,多个不是数值数相加,会强制转化为字符串,对象在前没有被括号包起来,会被当作代码块处理,没有返回值就被忽略掉。