js中的数据类型隐式转换大坑以及相关面试题

js中的数据类型隐式转换大坑以及相关面试题

数据类型隐式转换规则以及相关面试题

1.基本数据类型
number，string，boolean bull undefined symbol bigint
2.引用数据类型
object function

1.数据类型的转换规则

/*
 * 把其他数据类型转换为Number类型
 *     1.特定需要转换为Number的
 *       + Number([val])
 *       + parseInt/parseFloat([val])
 *     2.隐式转换（浏览器内部默认要先转换为Number在进行计算的）
 *       + isNaN([val])
 *       + 数学运算（特殊情况：+在出现字符串的情况下不是数学运算，是字符串拼接）
 *       + 在==比较的时候，有些值需要转换为数字再进行比较
 *       + ...
 *     .......
 */

/*
 * 把其它数据类型转换为字符串
 *    1. 能使用的办法
 *      + toString()
 *      + String()
 *    2. 隐式转换（一般都是调用其toString）
 *      + 加号运算的时候，如果某一边出现字符串，则是字符串拼接
 *      + 把对象转换为数字，需要先toString()转换为字符串，再去转换为数字
 *      + 基于alert/confirm/prompt/document.write...这些方式输出内容，都是把内容先转换为字符串，然后再输出的
 *      + ...
 *    ......
 */
/*
 * 把其它数据类型转换为布尔
 *    1. 基于以下方式可以把其它数据类型转换为布尔
 *      + ! 转换为布尔值后取反
 *      + !! 转换为布尔类型
 *      + Boolean([val])
 *    2. 隐式转换
 *      + 在循环或者条件判断中，条件处理的结果就是布尔类型值
 *      + ...
 * 
 * 规则：只有 ‘0、NaN、null、undefined、空字符串’ 五个值会变为布尔的FALSE，其余都是TRUE
 */
/* 
 * 在==比较的过程中，数据转换的规则：
 *  【类型一样的几个特殊点】
 *     {}=={}：false  对象比较的是堆内存的地址
 *     []==[]：false
 *     NaN==NaN：false
 *  【类型不一样的转换规则】
 *     1. null==undefined：true，但是换成===结果是false（因为类型不一致），剩下null/undefined和其它任何数据类型值都不相等
 *     2. 字符串==对象  要把对象转换为字符串
 *     3. 剩下如果==两边数据类型不一致，都是需要转换为数字再进行比较
 */

面试题1

// 面试题1
let result = 100 + true + 21.2 + null + undefined + "Tencent" + [] + null + 9 + false;
console.log(result); // NaNTencentnull9false

console.log([]==false);// true
console.log(![]==false); // true


1.对于result
100 + true + 21.2 => 100 + 1 +21.2= 122.2
122.2+null => 122.2+'null' => 122.2 + NaN =NaN // 对象先转成数组
NaN + undefined  => NaN + 'undefined' => NaN + NaN =NaN // undefined转成数字
NaN + 'Tencent' => "NaN" + "Tencent" = "NaNTencent" // NaN转成字符串
"NaNTencent" + [] =>  "NaNTencent" + "" =  "NaNTencent" // 空数组转成字符串
"NaNTencent" + null =>  "NaNTencent" + "null" =  "NaNTencentnull" // null转成字符串
"NaNTencentnull" + 9 =>  "NaNTencentnull" + "9" =  "NaNTencentnull9" // 9转成字符串
"NaNTencentnull9" + false =>  "NaNTencentnull9" + "false" =  "NaNTencentnull9false" // boolean转成字符串

2.对于[]==false
// 0==0   两边均转化为数字

3.对于 ![] == false
// false == false  两边均转换为boolean再进行比较

面试题2

考察数据类型转换

var a = ?;
if (a == 1 && a == 2 && a == 3) {
    console.log(1);
}

解答
// 对象转换为字符串 valueOf()  toString()
var a = {
	i:0,
	toString(){
		return ++this.i
	}
}

// 利用数据劫持方法
var i = 0
Object.defineProperty(window, 'a', {
	get(){
		return ++i
	}
})

面试题3

考察 map、 parseInt的语法

let arr = [10.18, 0, 10, 25, 23];
arr = arr.map(parseInt);
console.log(arr); // [10, NaN,2,2,11]

// arr.map((item, index) => {})
/*
* parseInt(10.18, 0)  => 10 // 默认是十进制
* parseInt(0, 1) => NaN 没有1进制
* parseInt(10, 2) => 0*2^0+1*2^1=>2  看做二进制‘10’，转换为十进制
* parseInt(25, 3) =>2*3^0 => 2 三进制,5不符合进制要求，略过
* *parseInt(23, 4) =>3*4^0+2*4^1=>11  四进制
*/
parseInt([value]):把value 转换为数字（内核机制：需要把value先变为字符串，然后从字符串左侧第一个字符查找，把找到的有效的数字字符串转换为数字，直到遇到一个非有效数字字符串为止）
parseInt([value], [n]): 把[value]看做[n]进制数据，最后转换为十进制
		[n]:不写，默认是10，特殊情况字符串是以0x开头的，默认16进制
		[n]：范围2~36，不在这个范围之间的，除了0和10一样，剩下的结果都是NaN

面试题4

考察：js机制：成员变量优先访问

let a = {n: 1};  // a指向堆内存AAAFFF000
let b = a;  // b指向堆内存AAAFFF000
a.x = a = {n: 2}; // js机制：成员变量优先访问（重点知识点）
				  // a.x={n:2} 创建堆内存AAAFFF111，堆内存AAAFFF000的x属性指向堆内存AAAFFF111
				  // a={n:2} a指向堆内存AAAFFF111
console.log(a.x); // 堆内存AAAFFF111中没有x属性，所以打印undefined
console.log(b); // {n:1,x:{n:2}} 直接打印出来

面试题5

考察变量提升

var a = 0;
if (true) {
    a = 1;
    function a() {};
    a = 21;
    console.log(a) // 21
}
console.log(a); // 1

变量提升：当前上下文代码执行之前，会把var/functiong 声明或者定义，带var的只声明，带function声明+定义
如果遇到了{} 新老浏览器表现不一致（兼容ES3、 兼容ES6）

【IE浏览器<=IE10】：不管{}，还是一如既往的function声明+定义，而且也不会存在块级作用域
【新版本浏览器】：{}（块级作用域）中的function在全局下只声明不定义，
               {}（块级作用域）中出现function/let/const 会创建一个块级上下文

ps:有配套的视频讲解，联系作者领取 钉钉邮箱 [email protected]