js数据类型转换及数据类型判断

作者: komallqh | 来源:发表于2020-07-21 22:58 被阅读0次

数据类型

js的数据类型有七种，其中有六种基本类型：null，undefined，boolean，string，number，symbol；以及一种引用类型：object

数据类型的转换

显式转换

一. 将非数值转换为数值类型的函数：Number(); parseInt(), parseFloat()
Number() 函数转换规则：

boolean：true转换为1，false转换为0
number：原样输出
undefined：输出NaN
null：输出0
字符串：
字符串中只包含数字（可带正负号，可为整数或小数）：转为带正负号的十进的整数或小数，且忽略前导0；
字符串为十六进制，转为十进制；
空字符串：0；
其他：NaN
对象：如果是对象，则调用对象的valueOf()方法，然后依照前面的规则转换返回的值。如果转换的结果是NaN，则调用对象的toString()方法，然后再次按照前面的规则转换返回的字符串值

parseInt(string [,radix])
parseInt不遵循四舍五入，radix的取值可为2-32
对于非字符串类型，先转换为字符串
从左向右遍历字符串，直到碰到非数字字符进行“截断”；如果第一个字符就是非数字字符，转换为NaN

var num = ["123" , "124.4" , "234asd" , "asf456"] ;
  for (i = 0; i < num.length; i++) {
   console.log(parseInt(num[i]));   
  }     //123 ， 124 ， 234 ， NaN 


parseInt('')  //NaN
parseInt(null)  //NaN
parseInt(undefined)  //NaN

二. 将其它类型的数据转换为字符串类型的函数
2.1 String(mix)：将mix转换成字符串类型。该函数可以将任何数据类型的值转换为字符串。
2.2 toString():
num.toString([radix]) ：可以将数值（或其他除null，undefined外的数据类型）转换为字符类型，radix可选；
例：把一个二进制的数10001000转换成十六进制的数。

var num1 = parseInt('10001000',2);　　//136
var num2 = num1.toString(16);　　//'88'

三. 将值转换成布尔值类型：Boolean（）
只有这七个值会返回false：undefined, null, -0, +0, NaN, ''(空字符), false; 其他情况都会返回true

Boolean(1) ;//返回true
Boolean("0");//返回true
Boolean("abc");//返回true
Boolean([]); // true
Boolean({}); // true
Boolean(new Boolean(false))// true
Boolean(false);//返回false
Boolean('');//返回false
Boolean(0);//返回false

隐式转换

这里说的隐性类型转换，是==引起的转换。

如果存在NaN，一律返回false
再看有没有布尔，有布尔就将布尔转换为数字
接着看有没有字符串, 有三种情况，对方是对象，对象使用toString进行转换；对方是数字，字符串转数字；对方是字符串，直接比较；其他返回false
如果是数字，对方是对象，对象取valueOf进行比较, 其他一律返回false
null, undefined不会进行类型转换, 但它们俩相等
这个顺序一定要死记，这是面试时经常问到的。

0 == []; // true, 0 == [].toString(); ---> 0 == 0;
'0' == []; // false, '0' == [].toString(); ---> '0' == '';
2 == ['2']; // true, 2 == ['2'].valueOf(); ---> 2 == '2' ---> 2 == 2;
'2' == [2]; // true, '2' == [2].toString(); ---> '2' =='2';
 
[] == ![]; //true, [] == !Boolean([]), [] == false, [] == 0 ---> 0 == 0;

0 == undefined  //false
1 == true       //true
2 == {valueOf: function(){return 2}}        //true
NaN == NaN  //false
 8 == undefined //false
1 == undefined  //false
 null == {toString: function(){return 2}}       //false
 0 == null      //false
 null == 1      //false
 1 == { toString:function(){ return 1 } , valueOf:function(){ return [] }}      //true

//typeof(null)              "object"
//typeof(undefined)         "undefined"

//undefined和null在进行相等判断时不进行类型转换
//null>0属于关系运算符，不属于相等运算符，null会被当成对象，然后转为0，再进行判断

//undefined相等判断时不发生类型转换，判断大于小于时也不发生类型转换
 console.log(undefined == undefined);　　//true
 console.log(undefined == 0);　　　　　　　//false
 console.log(undefined >= 0);             //false
 console.log(undefined > 0);　　　　　　　　//false
 console.log(undefined < 0);　　　　　　　　//false
 
//null相等判断时不发生类型转换，判断大于小于时会发生类型转换
 console.log(null == null);　　　　　　　　//true
 console.log(null >= 0);　　　　　　　　　　//true
 console.log(null == 0);　　　　　　　　　　//false
 console.log(null > 0);　　　　　　　　　　//false
 console.log(null < 0);　　　　　　　　　　//false
 console.log(undefined == null);　　　　//true 


 //注意：
 console.log(null >= 0);　　　　　　　　　　//true
 console.log(undefined >= 0);             //false

隐式转换为字符

任何数据类型+""(无论是空字符串还是其他字符串，任何数据类型加字符串都变成字符串)

var a;
var b = a + "";
console.log(typeof b + " " + b);

a = null;
b = a + "";
console.log(typeof b + " " + b);

a = 123;
b = a + "";
console.log(typeof b + " " + b);

a = true;
b = a + "";
console.log(typeof b + " " + b);

11+'11'         //'1111'

null+"3"        //"null3"

隐式转换为数值

+‘3’ //     3   注意与null+'3'的区别！
+ture   //1
‘10’-20  // -10
10-‘one’  //   NaN

隐式转换为boolean

!!num 相当于调用 Boolean(num)

关于null == 0

要比较相等性之前，不能将null和undefined转换成其他任何值。就是undefined和null与其他数在进行相等判断时不进行类型转换。
null == undefined,这个是true

null>0 //null转化为number，为0，所以0>0结果为false。
null>=0 //null转化为number，为0>=0，所以结果为true。
null==0// null在做相等判断时，不进行转型，所以null和0为不同类型数据，结果为false

关于NaN

NaN属于number类型,NaN与任何值都不相等
方法 parseInt() 和 parseFloat() 在不能解析指定的字符串时就返回这个值。

typeof(NaN)     //number
NaN === NaN   //false

注意Number.isNaN()和isNaN的区别:

console.log(Number.isNaN(NaN)); // true
console.log(Number.isNaN(Math.sqrt(-2))); // true
console.log(Number.isNaN('hello')); // false
console.log(Number.isNaN(['x'])); // false
console.log(Number.isNaN({})); // false


console.log(isNaN('hello')); // true
console.log(isNaN(['x'])); // true
console.log(isNaN({})); // true

数据类型判断的四种方法

typeof

typeof的返回值有6种：“number”、”string”、”boolean”、”object”、”function”、”undefined"
typeof对于基本数据类型判断是没有问题的，但是遇到引用数据类型（如：Array）是不起作用的，返回object

typeof [] ; //object

instanceof
instanceof 是用来判断 A 是否为 B 的实例，表达式为：A instanceof B，如果 A 是 B 的实例，则返回 true,否则返回 false。在这里需要特别注意的是：instanceof 检测的是原型，我们用一段伪代码来模拟其内部执行过程：

instanceof (A,B) = {
    var L = A.__proto__;
    var R = B.prototype;
    if(L === R) {
        // A的内部属性 __proto__ 指向 B 的原型对象
        return true;
    }
    return false;
}

从上述过程可以看出，当 A 的 proto 指向 B 的 prototype 时，就认为 A 就是 B 的实例，我们再来看几个例子

[] instanceof Array; // true
{} instanceof Object;// true
new Date() instanceof Date;// true
 
function Person(){};
new Person() instanceof Person;
 
[] instanceof Object; // true
new Date() instanceof Object;// true
new Person instanceof Object;// true

instanceof 只能用来判断两个对象是否属于实例关系，而不能判断一个对象实例具体属于哪种类型。

instanceof 操作符的问题在于，它假定只有一个全局执行环境。如果网页中包含多个框架，那实际上就存在两个以上不同的全局执行环境，从而存在两个以上不同版本的构造函数。如果你从一个框架向另一个框架传入一个数组，那么传入的数组与在第二个框架中原生创建的数组分别具有各自不同的构造函数。

var iframe = document.createElement('iframe');
document.body.appendChild(iframe);
xArray = window.frames[0].Array;
var arr = new xArray(1,2,3); // [1,2,3]
arr instanceof Array; // false

针对数组的这个问题，ES5 提供了 Array.isArray() 方法。该方法用以确认某个对象本身是否为 Array 类型，而不区分该对象在哪个环境中创建。

注意：

console.log("1" instanceof String);  //false
console.log(1 instanceof Number);  //false
console.log(true instanceof Boolean);  //false

new Number(1) instanceof Number;  //true
new String('1') instanceof Number;  //true
new Boolean(false) instanceof Number;  //true

constructor

函数的 constructor 是不稳定的，这个主要体现在自定义对象上，当开发者重写 prototype 后，原有的 constructor 引用会丢失，constructor 会默认为 Object

function Fn(){};

Fn.prototype=new Array();

var f=new Fn();
console.log(f.constructor===Fn);  //false
console.log(f.constructor===Array);  //true

null 和 undefined 是无效的对象，因此是不会有 constructor 存在的，这两种类型的数据需要通过其他方式来判断。

Object.prototype.toString.call(true)

Object.prototype.toString.call('') ;   // [object String]
Object.prototype.toString.call(1) ;    // [object Number]
Object.prototype.toString.call(true) ; // [object Boolean]
Object.prototype.toString.call(Symbol()); //[object Symbol]
Object.prototype.toString.call(undefined) ; // [object Undefined]
Object.prototype.toString.call(null) ; // [object Null]
Object.prototype.toString.call(new Function()) ; // [object Function]
Object.prototype.toString.call(new Date()) ; // [object Date]
Object.prototype.toString.call([]) ; // [object Array]
Object.prototype.toString.call(new RegExp()) ; // [object RegExp]
Object.prototype.toString.call(new Error()) ; // [object Error]
Object.prototype.toString.call(document) ; // [object HTMLDocument]
Object.prototype.toString.call(window) ; //[object global] window 是全局对象 global 的引用

参考链接
数据类型转换
https://www.jb51.net/article/136520.htm
https://www.jb51.net/article/136521.htm
https://blog.csdn.net/qq2071114140/article/details/92478526
https://blog.csdn.net/luckydie/article/details/77948097
https://blog.csdn.net/Doulvme/article/details/83104683
判断数据类型
https://www.cnblogs.com/onepixel/p/5126046.html
https://www.cnblogs.com/zt123123/p/7623409.html

js数据类型转换及数据类型判断

数据类型

数据类型的转换

显式转换

隐式转换

隐式转换为字符

隐式转换为数值

隐式转换为boolean

关于null == 0

关于NaN

数据类型判断的四种方法

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读