2015.12.02 HTML5真題練習
阿新 • • 發佈：2022-05-03
HTML5學堂：每天一道題，強壯程式設計師！今日主要涉及昨日題目的解答，以及一道涉及二進位制的題目。
HTML5真題【2015.12.01】答案解析
昨日真題題目如下，最終輸出的結果是多少？
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>HTML5學堂 - H5course</title> <link rel="stylesheet" href="reset.css"> </head> <body> <script> console.log([] + [] + "foo".split("")); </script> </body> </html>
本題目的答案是：f,o,o。
答案解析：本題目主要涉及型別轉換、陣列、字串。
先來分析一下[] + []結果為多少？是""。明明是兩個陣列物件相加，為何變成了一個字串？
一起先來看看下面的例子：
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>HTML5學堂 - H5course</title> <link rel="stylesheet" href="reset.css"> </head> <body> <script> // 重寫數組裡面toString方法 Array.prototype.toString = function() { return "你呼叫我了"; } console.log([] + []); </script> </body> </html>
結果：你呼叫我了你呼叫我了。為啥不是""？因為我們重寫了這樣一個方法 —— toString。對於網頁解析來說，當 + 操作符操作的是物件時，物件會自動呼叫自己內部toString方法（toString作為一個物件的自帶原型方法而存在），toString方法用於將一個值轉換為字串型別的值。
在[] + []的運算過程中，由於使用到了+號，兩個陣列物件均呼叫了自己自帶的toString()方法，將[]轉換成了字串，一個空字串加一個空字串，自然還是一個空的字串了。
再來分析一下"foo".split("")，這個的意思是將字串分割成字串陣列，為["f", "o", "o"]。
最後一步來了，[] + [] + "foo".split("")簡化完之後是"" + ["f", "o", "o"]，這時候 + 左側是字串，右側是陣列物件，陣列物件依舊會呼叫自身的原型方法，將陣列轉換為字串。
相關知識的支撐，是我們對一個物件的自帶原型方法的瞭解。這道題如果弄明白了，大概也就能夠明白，為何能夠使用 + '' 或 * 1進行隱式資料型別的轉換了。
HTML5真題【2015.12.02】題目
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5學堂 - H5course</title>
<link rel="stylesheet" href="reset.css">
</head>
<body>
<script>
console.log(5&3);
</script>
</body>
</html>關於每日程式碼練習題的答案和解析，我們會在明日文章當中，釋出相關答案以及基本原理。