一文彻底弄懂js类型转换
今天突然看到一道面试题，本以为可以轻松的拿下，然而看了一会，就有点傻眼，做完之后，在浏览器上执行了之后，错了一大堆，让我怀疑自己是否真的“学过”JavaScript。
然后我认真看了JavaScript类型转换的相关内容，在此记录并分享给大家，彻底搞懂JavaScript的类型转换。
1 + '1' //'11'
true + 0 // 1
{}+[] // 0
3 + {} // '3[object Object]'
6 + [6] // '66'
6 + [] // '6'
'a' + + 'b' // 'aNaN'
[] == 0 // true
[] == ![] // true
![] == 0 //true
[] == [] // false
{} == !{}
{} == {}
1、JS == 比较特殊
-
类型相同
- {} == {} => false 对象比较的是堆内存地址
- [] == [] => false
- NaN == NaN => false
-
类型不相同
- null == undefined => true
- null === undefined => false
- String == Object => 将对象转化为字符串在进行比较
- 对于其他两边类型不相同，先转换为Number，在进行比较
2、将其他类型转换为Number类型
- 特定需要转换为 Number 的
- Number([])
- parseInt/parseFloat([val])从字符串左侧第一个字符开始查找有效字符，遇到非有效数字字符停止，把找到的有效数字转为数字；parseFloat 多识别一个小数点
- 隐式转换（Number()）
- isNaN([val])
- 数学运算（特殊情况：+在出现字符串的情况下不是数学运算，是字符串拼接）
- 在 == 比较的时候，有些值需要转换为数字再进行比较
parseInt(''); // => NaN
Number(''); // => 0
isNaN(''); // => false Number('') => 0 0不是 NaN
parseInt(null); // => NaN 没有有效数字
isNaN(null); // => false Number(null) => 0
parseInt('16px'); // => 16
Number('16px'); //=> NaN
isNaN('16px'); // => true
parseFloat('1.6px') + parseInt('1.9px') + typeof(parseInt(null));
// => 1.6 + 1 + 'number' => '2.6number'
isNaN(Number(!!Number(parseInt(0.9))));
// parseInt(0.9) => 0
// !!0 => false
// Number(false) => 0
// isNaN(0) => false
typeof(!parseInt(null)) + !isNaN(null);
// !NaN => true
// typeof(true) => 'boolean'
// !isNaN(null) => true
// => 'boolentrue'
3、将其他类型转换为String类型
- 方法
- toString()
- String()
- 隐式转换(一般都是调用其 toString)
- 加号运算，某一边为字符串，则是字符串拼接
- 把对象转为数字，先转为字符串，再去转为数字
- alert/confirm/prompt… 都是先把内容转为字符串，再输出
let obj = {
name:'派大星'
}
obj.toString() //'[object Object]'
//对象调取的是 Object.prototype.toString => 用于数据监测
//这里要注意 数组 有自己的 toString 方法，所以 String([]) = ''
alert(obj); // => "[object Object]"
let string = 10 + false + undefined + [] + 'CSDN' + null + true + {};
console.log(string);
// 特别长的拼接问题 => 从左到右依次分析
//1. 10 + false => 把 false 转为 number，Number(false)=0 => 10 + 0 = 10
//2. 10 + undefined => Number(undefined) =NaN => 10 + NaN = NaN
//3. NaN + [] => 两边都转为 string => 'NaN'
//4. 字符串拼接都要把其它数据类型转为字符串再拼接
// => 'NaN' + 'CSDN' + null + true = 'NaNCSDNnulltrue'
// 5. 上个例子说过，任何对象转为对象的隐式转换都为 '[object Object]'
// 最终结果 => 'NaNCSDNnulltrue[object Object]'
console.log({} + 0); // => 0
console.log(0 + {}); // => "0[object Object]"
//{} 在左边时被看作代码块，不参加运算
4、将其他类型转换为Boolean类型
- 以下方式可以把其它数据类型转换为布尔
- ! 转换为布尔值后取反
- !! 转换为布尔值
- Boolean()
- 隐式转换
- 在循环或者条件判断中，条件处理的结果就是布尔类型值
- 只有 "0 NaN null undefined 空字符串"转为布尔值是 false，其它都是 true
console.log([] == false); // => true
// Object == Boolean 两边类型不一样，要转换为数字比较
// Object -> Number: 先转换为 String,再转换为 Number
// String([]) => ''; Number('') => 0
// false -> 0; true -> 1
// 所以0 == 0 => true
console.log(![] == true); // => false
// ![] 为 Boolean 类型 => false
// false == true => false