每日挑战，从Javascript面试题目了解一些你可能忽略的概念 - Day8

tags: ItIron2021 Javascript

前言

昨天我们探讨了undefined、null & not defined的基本差异，今天我们继续透过其他的题目进一步了解变数型别相关的问题吧!

本日题目与解释

请问下方程序码输出结果为何

let bar = true;

console.log(bar + 0);
console.log(bar + 'xyz');
console.log(bar + true);
console.log(bar + false);

老样子来张全新的防雷图~思考完再往下卷动吧!

最终的输出结果为

1
truexyz
2
1

这就是javascript中让人又爱又恨的其中一个地方，强制转型(coercion)，简单说就是在某些情况下(变数间的比较、运算子或是条件式等使用等)，javascript会透过自己的一套方法将变数转为它想要的型态再做处理，举个常见的例子，你在实务中可能看过类似以下的程序码

if (list.length) {
  console.log('你的名单不是空的，真是太好了，你不是边缘人呢!')
} else {
  console.log('可怜的家伙，连朋友都没有，这个口香糖拿去吃吧!')
}

上述的程序码就是一个善用强制转型的典型例子，条件式内的expression会被强制转为boolean值，藉由这样可以少些一些程序码! 不过当你不了解这类的转型规则时，你很容易像今天的题目一样慌了手脚。强制转型是绝对有完整的规则的，有兴趣的可以去探究一下背後的原理，MDN也有提供一张表格让你知道在比较时是怎麽做转型再比较的。

现在你知道规则是有的，我们再回头看一下题目吧! 当变数间用+运算子处理时，便会触发强制转型，毕竟它必须先知道是要连接还是加总嘛!你当然可以深究其原理再处理这道题目，不过实际上我个人的经验是这样的

1. 一旦有字串，就都转成字串处理
2. 若只有布林值或数字，就都转数字处理
3. 不知道该怎麽办时，猜字串就对了

再次强调，背後是真的有一套规则在的，有兴趣的自行探究，会关系到底层如何用valueOf去一个一个处理转型，但有了以上的基本原则就足够你应付多数的面试题目了，照以上的原则分析这次的问题吧!

console.log(true + 0); // 只有布林&数字，转数字处理，1 + 0 = 1
console.log(true + 'xyz'); // 有字串，用字串连接处理，'true' + 'xyz' = 'truexyz'
console.log(true + true); // 只有布林，转数字处理，1 + 1 = 1
console.log(true + false); // 只有布林，转数字处理，1 + 0 = 1

当然，最好的办法还是去好好了解底层是怎麽运作的，但以上原则面对jr的面试与实务已经完全足够了，真的慌了手脚的话就猜都转字串吧? 不过这边要特别注意不同的资料型别转字串的方法稍微有点不一样，举个例子来说

[] + {}

遇到这种让你手足无措的，你知道要猜转字串再连接，问题是....这两玩意转字串是什麽鬼阿!

转字串会透过toString方法去做转型，但挂在Array & Object下的toString却不完全一样，有兴趣的朋友可以自行研究一下，总之Object的toString方法会给比较多资讯，以上方的例子来说，空阵列呼叫本身的toString方法会回传空字串，而空物件呼叫本身的toString方法则会回传[object Object]，最终输出结果为以下

[] + {} => '' + '[object Object]' => '[object Object]'

本日核心观念与总结

核心观念

强制转型(coercion)

总结

1. 遇到变数间用+运算子处理时，要有强制转型的观念在
2. 记好基本原则，若真的不知所措都转为字串连接就对了，只是要注意不同资料型别间，toString方法不同

本文章同步发布於个人部落格，有兴趣的朋友也可以来逛逛~!