面试很痛苦，备点前端面试题(一)——js数据类型及其转换

 

本文参考文献：

[1] https://www.cnblogs.com/zaizaizai8/p/6516978.html      javascript的typeof返回哪些数据类型

[2] https://www.cnblogs.com/chenmeng0818/p/5954215.html   js的隐式转换

1、javascript的typeof返回哪些数据类型

1.返回数据类型

　　undefined、string、boolean、number、symbol(ES6)、Object、Function

2.强制类型转换

Number(参数)把任何类型转换成数值类型；parseInt（参数1，参数2）将字符串转换成整数；parseFloat()将字符串转换成浮点数字；string(参数)：可以将任何类型转换成字符串

；Boolean()可以将任何类型的值转换成布尔值

3.隐式类型转换

（1）.四则运算

　　　　加法运算符+是双目运算符，只要其中一个是string类型，表达式的值便是一个String。

　　　　对于其他的四则运算，只要其中一个是Number类型，表达式的便是一个Number。

　　　　对于非法字符的情况通常会返回NaN:'1'*'a'    // => NaN,这是因为parseInt(a)值为NaN，1*NaN还是NaN

（2）.判断语句

　　　　判断语句中的判断条件需要是 Boolean类型，所以条件表达式会被隐式转换为Boolean。其转换规则则同Boolean的构造函数。比如:　　　　　　

　　　　　var obj = {};if(obj){while(obj);}

（3）.Native代码调用

　　　　JavaScript宿主环境都会提供大量的对象，它们往往不少通过JavaScript来实现的。JavaScript给这些函数传入的参数也会进行隐式转换。例如BOM提供的alert方法接受String类型的参数：alert({a:1});  //=>[object Object]

//一些比较规则

//1. 对象和布尔值比较

//对象和布尔值进行比较时，对象先转换为字符串，然后再转换为数字，布尔值直接转换为数字

console.log([] == true);  //false  []转换为字符串'',然后转换为数字0,true转换为数字1，所以为false
//2. 对象和字符串比较

//对象和字符串进行比较时，对象转换为字符串，然后两者进行比较。

console.log([1,2,3] == '1,2,3'); // true  [1,2,3]转化为'1,2,3'，然后和'1,2,3'， so结果为true;
//3. 对象和数字比较

//对象和数字进行比较时，对象先转换为字符串，然后转换为数字，再和数字进行比较。

console.log([1] == 1);  // true  `对象先转换为字符串再转换为数字，二者再比较 [1] => '1' => 1 所以结果为true
//4. 字符串和数字比较

//字符串和数字进行比较时，字符串转换成数字，二者再比较。

console.log('1' == 1) // true
//5. 字符串和布尔值比较

//字符串和布尔值进行比较时，二者全部转换成数值再比较。

console.log('1' == true); // true 
//6. 布尔值和数字比较

//布尔值和数字进行比较时，布尔转换为数字，二者比较。

console.log(true == 1); // true
//许多刚接触js的童鞋看到这么多的转换规则就懵圈了，其实规律很简单，大家可以记下边这个图(是时候展现我高超的绘画技巧了)

//数据转换

//如图，任意两种类型比较时，如果不是同一个类型比较的话，则按如图方式进行相应类型转换，如对象和布尔比较的话，对象 => 字符串 => 数值 布尔值 => 数值。
//另外，我们来看下一些需要"特别照顾"的。

//有一个比较坑的地方，之前有跟后台联调时候拿空数组做校验，然后发现流程走的在意料之外的

console.log([] == false);
console.log(![] == false);
/这两个的结果都是true,第一个是，对象 => 字符串 => 数值0 false转换为数字0,这个是true应该没问题，
//第二个前边多了个!，则直接转换为布尔值再取反，转换为布尔值时，空字符串(''),NaN,0，null,undefined这几个外返回的都是true, 所以! []这个[] => true 取反为false,所以[] == false为true。

//还有一些需要记住的，像：

console.log(undefined == null) //true undefined和null 比较返回true，二者和其他值比较返回false
console.log(Number(null)) //0 

 4、小拓展

（1）判断是否为数组(typeOf 肯定不行咯，返回的是object)

instanceof 

var ary = [1,2，3,4];
console.log(ary instanceof Array)//true;

原型链方法

var ary = [1,2,3,4];
console.log(ary.__proto__.constructor==Array);//true
console.log(ary.constructor==Array)//true 这两段代码是一样的

但是，instanceof 和constructor 判断的变量，必须在当前页面声明的，比如，一个页面（父页面）有一个框架，框架中引用了一个页面（子页面），在子页面中声明了一个ary，并将其赋值给父页面的一个变量，这时判断该变量，Array == object.constructor;会返回false；

原因：

1、array属于引用型数据，在传递过程中，仅仅是引用地址的传递。

2、每个页面的Array原生对象所引用的地址是不一样的，在子页面声明的array，所对应的构造函数，是子页面的Array对象；父页面来进行判断，使用的Array并不等于子页面的Array；切记，不然很难跟踪问题！react这种组件化的框架中经常会遇到这种坑。。。

通用的方法:

var ary = [1,2,3,4];
//自己封装一个isArray的方法，还是在原型上找比较靠谱
function isArray(o){
    return Object.prototype.toString.call(o)=='[object Array]';
}
console.log(isArray(ary));

Object.prototype.toString ( )（简单说下大概原理，基于ES5规范，详情自行Google）

在toString方法被调用时,会执行下面的操作步骤:

如果this的值为undefined,则返回"[object Undefined]".

如果this的值为null,则返回"[object Null]".

让O成为调用ToObject(this)的结果.

让class成为O的内部属性[[Class]]的值.

返回三个字符串"[object ", class,  "]"连接后的新字符串.

所有内置对象的[[Class]]属性的值是由ES5规范定义的.所有宿主对象的[[Class]]属性的值可以是除了"Arguments", "Array", "Boolean", "Date", "Error", "Function", "JSON", "Math", "Number", "Object", "RegExp", "String"之外的的任何字符串.[[Class]]内部属性是引擎内部用来判断一个对象属于哪种类型的值的.只能通过Object.prototype.toString方法访问

（2）判断是否是空对象

如果对象不为空，并且知道对象不为空时，某个属性(比如{id:111})一定存在，则可以里这样判断：

var d = {};
var e = {id:111};
if(d.id){ console.log(1);}
if(e.id){ console.log(2);}
//9  这是效率比较高的办法，实际工作中常用

单纯判断空对象

var c = {};
if(JSON.stringify(c) == "{}"){ console.log(3);}//3   原因上面有。。

（3）判断是否是空数组

var  a=[];
if(JSON.stringify(a) === '[]'){
   console.log('a是空数组')  
}

或者已经知道类型一定是数组

var  a=[];
if(a.length===0){
   console.log('a是空数组')  
}