JavaScript数据类型转换相关面试题

数据类型转换习题

1

let result = 100 + true + 21.2 + null + undefined + 'Tencent' + [] + null + 9 + false;

console.log(result); // 'NaNTencentnull9false'

解析：

// 100 + true => 100 + Number(true) => 101
// 101 + 21.2 => 122.2
// 122.2 + null => 122.2 + Number(null) => 122.2
// 122.2 + undefined => 122.2 + Number(undefined) => 122.2 + NaN => NaN
// NaN + 'Tencnet' => 'NaNTencent'
// 'NaNTencent' + [] => 'NaNTencent' + [].toString() => 'NaNTencent'
// 'NaNTencent' + null + 9 + false => 字符串拼接 => 'NaNTencentnull9false'

A+B 两边中的任何一边遇到字符串或者对象（对象转换为数字要先转换为字符串[排除有原始值得]），都是按照字符串拼接处理的

这里有个特殊情况 {} + 10 => 10，大括号在左边，当做代码块处理，不参与运算，但是({}+10)=>'[object Object]10'

+A/++A/A++

let n = '10'

// 当后端传给我们一个字符串的时候，我们要做数字运算，有时候我们会这么写
console.log(parseInt(n)+ 20) // 30

// 其实我们也可以做一个隐式类型转换
console.log(+n + 20) // 30

2

{} + 0 ? alert('ok') : alert('no'); // {} + 0 => 0
0 + {} ? alert('ok') : alert('no'); // 0 + {} => '0[object Object]'

解析：

// {}+"10" 大括号出现在前面，大括号是一个代码块，不参与到计算中（特殊情况 {}+{} 这个两个都当做值计算）

// 0+{} 大括号出现在右侧，要把大括号当做值进行运算

3

let res = Number('12px'); // NaN, typeof NaN === 'number'

if (res === 12) {
    alert(200);
} else if (res === null) {
    alert(NaN);
} else if (typeof res === 'number') {
    alert('number');
} else {
  alert('Invalid Number');
}

4

const arr = [27.2, 0, '0013', '14px', 123];
const mArr = arr.map(parseInt);
console.log(mArr); // [27, NaN, 1, 1, 27]

parseInt([val]):把一个字符串转化为数字（[val]不是字符串，也要先转换为字符串），处理机制：从字符串左侧第一个字符开始查找，把找到的有效数字字符转换为数字，知道遇到一个非有效数字字符，则停止查找（不论后面是否还有有效数字，都不再查找了）

parseInt([value], [radix])，parseInt可以接收两个参数，第二个参数代表进制，

1. [radix]不写(或者写0)，默认是10进制，如果[value]是以0x开头的字符串，则radix不写的话，默认是16进制；
2. [radix]有取值范围2~36之间，不在这个之间的，返回结果都是NaN
3. [value]字符串中，从左到右找到所有符合[radix]进制的值（遇到一个非[radix]进制的值则停止查找），把找到的结果最后转换为10进制的值
4. parseFloat是没有类似机制的

把一个n进制的值，转换为10进制

// 把一个8进制的值转换为10进制
let n = '1042'; // 8进制
// 转换规则，进制的位权值的指数幂
// 2 * 8^0 + 4 * 8^1 + 0 * 8^2 + 1 * 8^3
// 2 * 1 + 4 * 8 + 0 + 1 * 512 = 546

parseInt(n, 8) // 按照8进制的转换规则，将n转换为10进制 => 546

map的执行机制

const arr = array.map(function(item, index){
  // 每迭代数组中的一项，都会把这个回调函数触发执行，并且把当前迭代这一项和这一项的索引传递给这个函数
  // 回调函数的返回值会把这一项替换掉，原始数组不变，返回一个新数组
})

解析：

const arr = [27.2, 0, '0013', '14px', 123];
const mArr = arr.map(parseInt);
// parseInt不管里面是什么值，都先转换为字符串
// parseInt('27.2', 0) // radix = 0，当做10进制 => 27
// parseInt('0', 1) // radix = 1, 不在2~36之间 => NaN
// parseInt('0013', 2) // radix = 2，从左往右找，找到3发现不满足2进制，停止查找，所以返回 => 001 => 1
// parseInt('14px', 3) // radix = 3, 从左往右找，找到4发展不满足3进制，停止查找，所以返回 => 1
// parseInt('123', 4) // radix = 4, 从左往右找，返回123，转换为10进制 1*4^2 + 2*4^1 + 3*4^0 = 16 + 8 + 3 = 27

// 所以最终结果为[27, NaN, 1, 1, 27]