前言
我前面的文章，也有幾篇講過面試的，不過都沒有很細緻的講，例如：總結前端面試過程當中最容易出現的問題，等等。還有一些文章，也是面試中可能提問的。今天，分享幾個小知識，算是乾貨吧！前端面試中也常常會問及，不過問及的概率相對較少。我我的認爲，面試中你把基礎的知識打好，就能夠無敵！哪些基礎知識呢？例如：js的繼承、js函數等等，萬變不離其宗，都是這些的擴展及應用。這些知識理解透徹了，再加一些面試技巧就能夠了！
1、怎麼讓Chrome支持小於12px 的文字？
這個咱們在作移動端的時候，設計師圖片上的文字假如是10px，咱們實如今網頁上以後。每每設計師回來找咱們，這個字體能小一些嗎？我設計的是10px？爲啥是12px?其實咱們都知道，谷歌Chrome最小字體是12px，無論你設置成8px仍是10px，在瀏覽器中只會顯示12px，那麼如何解決這個坑爹的問題呢？
咱們的作法是：
針對谷歌瀏覽器內核，加webkit前綴，用transform:scale()這個屬性進行縮放！
<style> p span{font-size:10px;-webkit-transform:scale(0.8);display:block;} </style> <p><span>haorooms博客測試10px</span></p>
2、IOS手機瀏覽器字體齒輪
修改-webkit-font-smoothing屬性，結果是： -webkit-font-smoothing: none: 無抗鋸齒 -webkit-font-smoothing: antialiased | subpixel-antialiased | default: 灰度平滑
3、如何修改chrome記住密碼後自動填充表單的黃色背景？
大致能夠經過input : -webkit-autofill來進行修改！
input:-webkit-autofill { background-color: #FAFFBD; background-image: none; color: #000; }
4、谷歌瀏覽器運行下面代碼，並解釋！
[].forEach.call($$("*"),function(a){ a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16) })
運行上面代碼以後，會發現HTML層都被使用不一樣的顏色添加了一個高亮的邊框。爲何會這樣呢？
首先咱們來看
[].forEach.call()，關於call()和apply()，我前面有文章也寫過，具體能夠看http://www.haorooms.com/post/js_constructor_pro
[].forEach.call()等價於Array.prototype.forEach.call()
其次咱們來看$$("*")
你能夠在你的Chrome瀏覽器控制檯中輸入$$('a')，而後你就能獲得一個當前頁面中全部錨元素的列表。
$$函數是許多現代瀏覽器命令行API中的一個部分，它等價於document.querySelectorAll,你能夠將一個CSS選擇器做爲這個函數的參數，而後你就可以得到當前頁面中全部匹配這個CSS選擇器的元素列表。若是你在瀏覽器控制檯之外的地方，你可使用document.querySelectorAll('')來代替$$('')
爲元素添加顏色
爲了讓元素都有一個漂亮的邊框，咱們在上面的代碼中使用了CSS屬性outline。outline屬性位於CSS盒模型以外，所以它並不影響元素的屬性或者元素在佈局中的位置，這對於咱們來講很是有用。這個屬性和修改border屬性很是相似，所以下面的代碼應該不會很難理解：
a.style.outline="1px solid #" + color
真正有趣的地方在於定義顏色部分：
（~~(Math.random()*(1<<24))).toString(16)
~~的做用至關於parseInt，和我前面講解的「|」功能相似，關於運算符「I」 ，能夠去看看！
經過上面代碼能夠獲取到一個隨機的顏色值！
5、input [type=search] 搜索框右側小圖標如何美化？
美化效果以下圖：
右側默認的比較難看的按鈕，美化成右側效果。
input[type="search"]::-webkit-search-cancel-button{ -webkit-appearance: none;height: 15px; width: 15px;border-radius: 8px;background:url("images/searchicon.png") no-repeat 0 0;background-size: 15px 15px;}
用到的是僞元素::-webkit-search-cancel-button，關於什麼是僞類和爲元素，請看：http://www.haorooms.com/post/css_wl_wys
6、iOS safari 如何阻止「橡皮筋效果」？
能夠參考一下知乎上的回答 https://www.zhihu.com/question/22256539 。
可是，咱們遇到的問題不是這樣，我是要解決彈跳致使彈出層（position:absolute）的覆蓋層高度小於100%;
針對這個問題，我想到的解決方案以下：
方法一： 把position:absolute改爲position:fixed，並在彈出層以後，設置body的高度是100%；overflow是hidden。
方法二：
思路是獲取蘋果瀏覽器導航欄的高度。而後滾動的時候，從新獲取其高度。在導航欄高度變小的時候，給彈出層增長高度的百分比！
代碼以下：
//ios safari 伸縮判斷 var topbarHeight=window.outerHeight-window.innerHeight,agent=navigator.userAgent,globleflag=true; $(window).scroll(function () { if(agent.indexOf("iPhone")!=-1 || agent.indexOf("iPad")!=-1){ var topbarHeightNow=window.outerHeight-window.innerHeight; if(topbarHeightNow<topbarHeight){ globleflag=false //此處寫處理邏輯 }else{ globleflag=true //此處寫處理邏輯 } } });
7、實現點擊文字，文字後面radio選中效果
這個效果是前端很常常用到和遇到的效果了，實現這個效果的方式也不少，不少朋友用js和jquery來實現，可是最簡單的，咱們能夠直接用lable標籤的 for 屬性來實現。
看下下面例子：
<form> <label for="male">Male</label> <input type="radio" name="sex" id="male" /> <br /> <label for="female">Female</label> <input type="radio" name="sex" id="female" /> </form>
label 的for屬性後面跟着input的id,就能夠點擊label，來觸發input效果了，你們能夠試一試！
8、網站中，圖片文件（jpg，png,gif），如何點擊下載？而非點擊預覽？
咱們平時在網站中的圖片，假如咱們要下載，以下寫：
<a href="haorooms博客.jpg">下載</a>
咱們點擊下載按鈕，只會預覽「haorooms博客.jpg」這張圖片，並不會出現下載框，另存爲那種？那麼咱們如何作呢？
咱們只須要以下寫
<a href="haorooms博客.jpg" download >下載</a>
就能夠下載了。點擊以下進行嘗試吧！下載
不但如次，咱們還能夠指定文件名稱，以下寫法：
<a href="haorooms博客.jpg" download="haoroom前端博客圖片下載" >下載</a>
測試以下：下載
上面就是指定下載的寫法！
9、Math.min()比Math.max()大
Math.min() < Math.max() // false Math.min() > Math.max() // true
由於Math.min() 返回 Infinity, 而 Math.max()返回 -Infinity。
10、經典面試題目
const Greeters = [] for (var i = 0 ; i < 10 ; i++) { Greeters.push(function () { return console.log(i) }) } Greeters[0]() // 10 Greeters[1]() // 10 Greeters[2]() // 10
把 var 改爲 let試試！
const Greeters = [] for (let i = 0 ; i < 10 ; i++) { Greeters.push(function () { return console.log(i) }) } Greeters[0]() // 0 Greeters[1]() // 1 Greeters[2]() // 2
11、數組對象全等比較
// 這些能夠 'abc' === 'abc' // true 1 === 1 // true // 然而這些不行 [1,2,3] === [1,2,3] // false {a: 1} === {a: 1} // false {} === {} // false
由於[1,2,3]和[1,2,3]是兩個不一樣的數組，只是它們的元素碰巧相同。所以，不能簡單的經過===來判斷。
12、關於數字和點號
3.toString() 3..toString() 3...toString()
這個題也挺逗, 答案是
error, '3', error
你若是換一個寫法就更費解了
var a = 3; a.toString()
這個答案就是 '3';
爲啥呢?
由於在 js 中 1.1, 1., .1 都是合法的數字. 那麼在解析 3.toString 的時候這個 . 究竟是屬於這個數字仍是函數調用呢? 只能是數字, 由於3.合法啊!
十3、變量提高
以下題目
var name = 'World!'; (function () { if (typeof name === 'undefined') { var name = 'Jack'; console.log('Goodbye ' + name); } else { console.log('Hello ' + name); } })();
理解這個，咱們能夠先看下面的題目：
var x = 1; // Initialize x console.log(x + " " + y); // '1 undefined' var y = 2;
至關於：
var x = 1; // Initialize x var y; // Declare y console.log(x + " " + y); // '1 undefined' y = 2; // Initialize y
變量提高了！
因此上面的自調用函數能夠以下理解：
var name = 'World!'; (function () { var name; if (typeof name === 'undefined') { name = 'Jack'; console.log('Goodbye ' + name); } else { console.log('Hello ' + name); } })();
name在scope裏面，所以，先找裏面，裏面找到了name,所以執行的結果是
'Goodbye Jack'
十4、局部變量和全局變量
(function(){ var x = y = 1; })(); console.log(y); console.log(x);
輸出：
1, error
y 被賦值到全局。x 是局部變量，全局中獲取不到。因此打印 x 的時候會報 ReferenceError
十5、正則表達式字面一致也不相等
var a = /123/, b = /123/; a == b a === b
即便正則的字面量一致, 他們也不相等.
答案 false, false
十6、函數名稱不可改變
function foo() { } var oldName = foo.name; foo.name = "bar"; [oldName, foo.name]
答案
['foo', 'foo']
例如：
function doSomething() {} doSomething.name; // "doSomething" var f = function() {}; var object = { someMethod: function() {} }; console.log(f.name); // "f" console.log(object.someMethod.name); // "someMethod"
函數的名字是不能夠改變的。
十7、寫出最簡單的去重方式
一、es6的new Set()方式，具體請看：http://www.haorooms.com/post/js_map_set
例如：
let array=[0,3,4,5,3,4,7,8,2,2,5,4,6,7,8,0,2,0,90]; [...new Set(array)]
或者直接
[...new Set([1,3,4,5,1,2,3,3,4,8,90,3,0,5,4,0])]
二、es5的Array filter()
[1,3,4,5,1,2,3,3,4,8,90,3,0,5,4,0].filter(function(elem,index,Array){ return index === Array.indexOf(elem); })