文章目录

1、显式类型转换(1) Number():(2) String():(3) Bollean():(4) 转换原理：valueOf()、toString() 2、隐式类型转换(1) 转数字：(2) 转字符串：(3) 转布尔值： 3、大小比较4、相等比较5、逻辑运算符6、逗号运算符

1、显式类型转换

JS中有三种数据类型转换，转换为数字、字符串、boolean值。

(1) Number():

1. undefined : NaN 2. null : 0 3. 布尔值 : true为1，false为0 4. 字符串 : <1>. 空字符串，空格字符串转为0 <2>. 非空字符串，并且内容为纯数字（包含进制与科学表示法）转成对应的数字 <3>. 其余都式NaN 5. 数字 ： 原来的数字 6. 对象 ： <1>.对象、函数转为NaN <2>.空数组转为0，数组里只有一个数据并且这个数据能转成数字，则转成对应的数字，其它都转成NaN

例：

console.log( Number(undefined), //NaN Number(null), //0 Number(true), //1 Number(false), //0 Number(''), //0 Number(' '), //0 Number('12'), //12 Number('012'), //12 Number('0xff90'), //65424 Number('5e5'), //500000 Number('k'), //NaN Number({}), //NaN Number([]), //0 Number(function () { }), //NaN Number(['']), //0 Number([2]), //2 Number(['2']), //2 Number([2,3]), //NaN )

(2) String():

1. 基本数据类型、null、undefined的结果就是给数据加上引号变成字符串 2. 对象 ： <1>. 数组的结果为把所有中括号去掉，外面加个引号 <2>. 对象的结果为'[object Object]' <3>. 函数的结果为在函数整体外面加个引号

例

console.log( String(null), //'null' String([1,[2]]), //'1,2' String(function() {}), //'function(){}' String({}), //'[object Object]' )

(3) Bollean():

1. undefined ： false 2. null : false 3. 数字 : +0、-0、NaN转布尔值的结果为false，其它的转布尔值的结果为true 4. 布尔值 : 转为对应的值 5. 字符串 : 空字符串转布尔值的结果为false，其它（包括空格字符串）的都转成true 6. 对象 ：转布尔值都是true

例

console.log( Boolean(undefined), //false Boolean(null), //false Boolean(+0), //false Boolean(-0), //false Boolean(NaN), //false Boolean(''), //false Boolean(' '), //true Boolean('0'), //true Boolean({}), //true Boolean([]), //true Boolean(function(){}), //true )

(4) 转换原理：valueOf()、toString()

主要靠两个方法： valueOf：返回对象对应的原始值 toString：返回对象的字符串的表现形式

1. 数字、字符串、布尔值 ： valueOf 数据本身（原始值形式） toString 数据转成字符串的形式 2. 数组： valueOf 数据本身（对象形式） toString 去掉中括号，外面加个引号（本质为调用数组join(',')后的结果） 3. 函数： valueOf 数据本身（对象形式） toString 在数据外面加了个引号 4. 对象： valueOf 数据本身（对象形式） toString "[object Object]" Number方法 1、调用对象的valueOf方法。如果返回原始类型的值，再使用Number函数，不再进行后续步骤 2、如果valueOf方法返回的还是对象，则调用toString方法 3、如果toString方法返回原始类型的值，则对该值使用Number方法，不再进行后续步骤 4、如果toString方法后返回的是还是对象，就报错（一般不会出现） String参数为对象的转换原理 1、调用对象的toString方法。如果返回原始类型的值，再使用String函数，不再进行后续步骤 2、如果toString方法返回的还是对象，再调用对象的valueOf方法 3、如果valueOf方法返回原始类型的值，则对该值使用String函数，不再进行以下步骤 4、如果valueOf方法返回的是还是对象，就报错（一般不会出现）

2、隐式类型转换

隐式类型转换出现场景：

不同类型的数据间运算、比较对非布尔值类型的数据求布尔值条件语句的括号里

(1) 转数字：

隐式转数字出现的场景：

数学运算符（+ - * / %），都会转成数字类型 注意（+特殊）：一般加号运算符两侧数据会转换成数字类型进行加法运算， 但是，若出现字符串或对象类型数据，则会把两侧数据转换成字符串进行拼接一元±（正负操作符）后的数据某些比较运算符 例： console.log( // 转Number 1 + undefined, //1+NaN=NaN 1 + null, //1+0=1 null + undefined, //0+NaN=NaN true + false, //1+0=1 3 + '6', //'36' // 转String 2 + [], //String(2)+String([])='2'+''='2' 2 + { a: 12 }, //String(2)+String({a:12})='2[object object]' [] + {}, //String([])+String({})=''+'[object,Object]'='[object object]' {} + [], //'[object object]' 3 + {}, //'3[object object]' {} + 3, //'[object object]3' )

(2) 转字符串：

隐式转字符串出现场景：

有字符串的加法运算有对象的加法运算某些比较运算符调用alert、document.write方法 console.log( '1'+2, //'12' '1'+'c', //'1c' '1'+undefined , //'1undefined' '1'+[], //'1' ) console.log( 2+[2,3], //'2'+'2,3'='22,3' 2+function(){}, //'2'+'function(){}'='2function(){}' 1+[], //'1'+''='1' 1+{}, //'1'+'[object Object]'='1[object Object]' ) console.log( []+{}, //''+'[object Object]'='[object Object]' {}+null, //'[object Object]'+'null'=[object Object]null []+undefined, //''+'undefined'='undefined' ) alert({a:12}); //String({a:12})='[object Object]' alert(function(){}); //String(function (){})='function(){}' document.write({b:1}); //String({b:1}) = '[object Object]' console.log(++[[]][+[]]+[+[]]); //'10' /* ++[[]][+[]]+[+[]] ++[[]][+[]] + [+[]] ++[[]][+[]] + [+[]] ++[[]][0] + [+[]] ++[[]][0] + [+[]] ++[] + [+[]] ++0 + [+[]] 1 + [+[]] 1 + [0] '1' '0' */

(3) 转布尔值：

隐式转布尔值出现场景:

取反运算三目运算符条件语句的小括号里逻辑运算符 var data=[10,'kaivon',true,null,undefined,function(){},{a:12},[0,1]]; for(var i=0;i<data.length;i++){ console.log(!data[i]); console.log(!!data[i]); console.log(data[i]?20:30); if(data[i]){ console.log(1); } } var a = [0]; //Boolean([0])=true if([0]){ console.log(a==true); // 执行 true == true //false }else{ console.log('cc') }

3、大小比较

如果比较两边有字符串，那会对比它们各自对应的Unicode码值如果比较两边都为原始类型数据，那把所有数据转成数字进行对比；NaN与任何数据对比都是false有对象数据的比较，先调用valueOf再调用toString方法，然后看另一数据的类型，如果另一个数据为字符串，则转为字符串对比，如果另一个数据为数字则转为数字对比

总结 ：

字符串与字符串、字符串与对象、对象与对象比较时，都会转成字符串，然后对比Unicode码值其它类型数据，转成数字对比

例：

console.log( 'A' > 'a', //false 65 > 97 '大' > '小' //false 22823 > 23567 ) console.log( true > false, //true 1>0 'k' > 5, //false NaN>5 NaN undefined > false, //false NaN>0 NaN null >= '', //true 0>=0 null >= ' ' //true 0>=0 ); console.log( [] > 0, //false 0>0 转数字比较 {} > 1, //false NaN>1 NaN 转数字比较 {} > true, //false NaN>1 NaN 转数字比较 {} > '/', //true [object Object] '['>'/' = 91>47 转字符串比较 {} > '[', //true [object Object] '['>'[' = 91=91 'o'>''=111> 转字符串比较 ); console.log( { a: 12 } < function () { }, // true 转成字符串比 // '[object Object]'<'function(){}' // '['<'f' = 91<102 ); console.log( []>=0, //0>=0 true null==false, //false [1]==true, // '1'==true 1==1 true [1,'a',3]=='1,a,3', //'1,a,3' == '1,a,3' true undefined>false, // NaN>0 false []==null, //false [2]>[11], //'2'>'11' = 50>49 true 2==true, // 2==1 false [undefined] == undefined, //'undefined'==undefined NaN==NaN false 'true'==true, // NaN == 1 false )

4、相等比较

不同类型的原始类型数据，把所有的数据转成数字后进行对比null与undefined除了它们自己与自己、自己与对方相等，与其它的任何数据都不相等对象与原始类型数据比较时，把对象转成原始值，再进行比较对象与对象类型比较时，比较的是他们的引用地址，除非引用地址相同，否则都不相等

总结 ：

原始类型对比，转成数字对比对象类型对比，把对象转成字符串，然后看对方的类型，如果不一样，都转成数字对比。对象与对象比较，比较引用地址null与undefined，自己与自己、自己与对方相等。与其它任何数据都不相等

例

//原始值比较 转数字 console.log( 12 == '12', //true 12==12 0 == '', //true 0==0 1 == true, //true 1==1 2 == false, //false 2==0 'true' == true, //false NaN==1 ' ' == false, //true //0==0 ); //只有 undefined == null console.log( undefined == 0, //false undefined == '', //false undefined == false, //false undefined == undefined, //true null == 0, //false null == '', //false null == false, //false null == undefined, //true null == null //true ); //先转成字符串 若对方不是字符串则都转成数字比较 console.log( [1] == 1, //true '1'==1 1==1 [] == 0, //true ''==0 0==0 [1] == true, //true '1'==true 1==1 [1, 'a', 3] == '1,a,3', //true '1,a,3'=='1,a,3' [] == undefined, //false { a: 1 } == 1, //false '[object Object]'==1 NaN==1 [null] == null, //false ); //对象与对象比较引用地址 console.log( [] == [], //false {} == {}, //false ); var fn1 = function () { return 1; } var fn2 = function () { return 1; } var fn3 = fn1; console.log(fn1 == fn2); //false console.log(fn1 == fn3); //true console.log( 'true' == true, //false NaN == 1 undefined == false, //false null == 0, //false [] == 0, //true ''==0 0==0 { a: 1 } == { a: 1 }, //false )

5、逻辑运算符

&&:全真则为真 返回第一个为false的表达式 ||:一真则为真 返回第一个为true 的表达式

//&&的返回值：左面为真返回右面的值，左面为假返回左面的值 console.log('cc' && 1 + 2) //3 console.log(0 && 2 + 2) //0 console.log(![] && '你好！') //!Boolan([]) => !true => false //false var n1 = 1; n1 - 1 && (n1 += 5); console.log(n1); //返回 n1-1为 false //n1=1 function fn1() { console.log('车光青'); } n1 == 1 && fn1(); //fn1会执行 // if(n1=1){ // fn1(); // } console.log(true && 'cc' && (2 - 2) && 'abc' && true) //0 console.log(true && 'cc' && (3 - 2) && 'abc' && true && (2 + 2)) //4 // ||的返回值：一碰到真的就返回 console.log('cc' || 2 + 1) //'cc' var n2 = 1; n2 - 1 || (n2 += 5); console.log(n2); //6 function fn3(text){ text=text || 'cc'; console.log(text) } fn3(); //'cc' fn3('车车') //'车车'

6、逗号运算符

逗号运算符（从左往右执行表达式，返回最后表达式的结果）

console.log(1, 2, 3); //1,2,3 ,作用是参数分隔 console.log((1, 2, 3)); //3 ,运算符（从左往右执行表达式，返回最后表达式的结果） alert(1,2,3); //1 alert函数只能接收一个参数 alert((1,2,3)); //3 (1,2,3)表达式 返回最后一个 var a = 10; var b = (a++ , 20, 30); console.log(a, b); //11 30 //var a=10,b=20; a += 3, b += 4; console.log(a, b); //14 34 for (var i = 0, j = 0, k; i < 6, j < 10; i++ , j++) { //i<6,j < 10; 这个条件会返回j<10 所以i、j都循环10次 k = j + i; //9+9 console.log( j, i); // 9 9 } console.log(k); //18 var a = 10, b = 20; function fn() { return a++ , b++ , 10; // return 10 } console.log(a, b, fn()); // 10 20 10 let c = fn(); console.log(a, b, c) //12 22 10 //执行了两次fn函数 { let a = 10; let b = 20; //交换a b 的值 // 1>. // let c; // c = a; // a = b; // b = c; // console.log(a,b); //20 10 */ // 2>. // a = a+b; //30 // b = a - b; //10 = 30-b // a = a - b; //20 = 30 -10 // console.log(a,b); //20 10 // 3>. a = [b][b = a, 0]; //a=[20][b=10,0]; //a=[20][0]; //数组取值 //a=20; // 逗号运算符 从左往右执行 返回最后一个值 console.log(a,b); //20 10 // 3>. [b,a] = [a,b] // [b,a] = [10,20] }