分享幾個前端乾貨-每次面試都逃不過的問題

時間 2019-11-20

原文原文鏈接

前言：css

面試中總結的一些比較實用的問題，但願能夠幫到你們。html

1、怎麼讓Chrome支持小於12px 的文字？es6

這個咱們在作移動端的時候，設計師圖片上的文字假如是10px，咱們實如今網頁上以後。每每設計師回來找咱們，這個字體能小一些嗎？我設計的是10px？爲啥是12px?其實咱們都知道，谷歌Chrome最小字體是12px，無論你設置成8px仍是10px，在瀏覽器中只會顯示12px，那麼如何解決這個坑爹的問題呢？

咱們的作法是：

針對谷歌瀏覽器內核，加webkit前綴，用transform:scale()這個屬性進行縮放！web

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            span{
                font-size: 12px;
                display: inline-block;
                -webkit-transform:scale(0.8);
            }
        </style>
    </head>
    <body>
        <span>測試10px</span>
    </body>
</html>

2、如何修改chrome記住密碼後自動填充表單的黃色背景？面試

/*經過input : -webkit-autofill來進行修改！*/
input:-webkit-autofill {
    background-color: #FAFFBD;
    background-image: none;
    color: #000;
}

3、寫出最簡單的去重方式chrome

一、es6的new 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);
})

4、數組對象全等比較測試

// 這些能夠
'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]是兩個不一樣的數組，只是它們的元素碰巧相同。所以，不能簡單的經過===來判斷。字體

5、經典面試題目

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

6、Math.min()比Math.max()大

Math.min() < Math.max() // false
Math.min() > Math.max() // true
//由於Math.min() 返回 Infinity, 而 Math.max()返回 -Infinity。

7、實現點擊文字，文字後面radio選中效果

<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>

8、網站中，圖片文件（jpg，png,gif），如何點擊下載？而非點擊預覽？
咱們點擊下載按鈕，只會預覽「baidu.jpg」這張圖片，並不會出現下載框，另存爲那種？那麼咱們如何作呢？

咱們只須要以下寫：

<a href="https://www.baidu.com/favicon.ico" download >下載</a>  
<!-- 咱們還能夠指定文件名稱，以下寫法： -->
<a href="tupiandizhi.jpg" download="baidu" ></a>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。