摘要：大家好，我來(lái)自駕考寶典。同時(shí)，我在駕考寶典也工作一年多了。駕考寶典算不上一線(xiàn)大公司，但我個(gè)人不管是通過(guò)工作，平常的積累，還是自主學(xué)習(xí)，我覺(jué)得還是能和大家分享一些更加實(shí)戰(zhàn)化的面試題。并處理好廣大安卓機(jī)的兼容性。

大家好，我來(lái)自駕考寶典。時(shí)間不知不覺(jué)進(jìn)入2018金九銀十，下半年的尾聲了，想必很多朋友已經(jīng)看過(guò)網(wǎng)上新出的各大廠(chǎng)面試題。同時(shí)，我在駕考寶典也工作一年多了。駕考寶典算不上一線(xiàn)大公司，但我個(gè)人不管是通過(guò)工作，平常的積累，還是自主學(xué)習(xí)，我覺(jué)得還是能和大家分享一些更加實(shí)戰(zhàn)化的面試題。主要是工作當(dāng)中運(yùn)用的相關(guān)技術(shù)和遇到的坑，希望以此共勉。

Q: JS 部分

1、什么是自執(zhí)行函數(shù)，它的優(yōu)點(diǎn)是什么？
!function(){}()被稱(chēng)為"自執(zhí)行函數(shù)"，好處是把所有變量都運(yùn)行在函數(shù)內(nèi)部，可以避免產(chǎn)生全局變量，而"!"的作用是使它和上面的代碼隔絕，不會(huì)受到其影響。

2、求1-100里7的倍數(shù)及包含7的所有數(shù)字，最后放置數(shù)組中

function calculate() {
        var arr = [];
        var reg = /7/;
        for (var i = 1; i <= 100; i++) {
            reg.test(i) || (i % 7 == 0) ? arr.push(i) : arr;
        }
        return arr;
}
console.log(calculate());

更精簡(jiǎn)版是?

3、為什么0.1 + 0.2 != 0.3
js沒(méi)有float型沒(méi)有int型 瀏覽器解析小數(shù)時(shí) 會(huì)轉(zhuǎn)換成二進(jìn)制 而小數(shù)轉(zhuǎn)換成二進(jìn)制時(shí) js就會(huì)失精度 0.1+0.2會(huì)得0.30000004后面無(wú)窮個(gè)小數(shù) 所以正確的做法是 parseFloat((0.1 + 0.2).toFixed(10))

4、將數(shù)組進(jìn)行排序，比如

var arr = [ { name : "a", value: 21}, { name : "b", value: 10}, { name : "c", value: -1}, { name : "d", value: 1}];

該怎么寫(xiě)；若用箭頭函數(shù)輸出，() => {} 和() => ()區(qū)別是什么，各將輸出什么。
如果數(shù)組是這樣

var arr = [5,20,40,15];

用箭頭函數(shù)輸出，() => {} 和() => ()，又各將輸出什么。為什么沒(méi)有實(shí)現(xiàn)我們想要的排序，該如何做。

var demo = arr.sort((a,b) => (
    a - b
    )
);
console.log(demo);

如果是二維數(shù)組

var arr = [ [30, -5, 0, 5], [100, 50, 20], [1, 15, 10] ];

又該如何做。

for(var i = 0; i < arr.length; i++){
    arr[i].sort(function(a,b){
        return a - b;
    });
}
console.log(arr);

5、如何將這么一組數(shù)據(jù)

var arr = ["[email protected]","[email protected]"];轉(zhuǎn)化為<[email protected]>;

var str = "";
for (var j = 0; j < arr.length -1; j++) {
    str += "<" + arr[j] + ">" + ";"
}
str += "<" + arr[arr.length -1] + ">"
console.log(str);

6、使用js匹配相同的questionId，三個(gè)相同的變綠色，四個(gè)紅色，并重新渲染至頁(yè)面中。

var data = [{
            projectId: 3,
            questionId: 1124900
        },
        {
            projectId: 2,
            questionId: 1124900
        },
        {
            projectId: 1,
            questionId: 1124900
        },
        {
            projectId: 1,
            questionId: 1120900
        },
        {
            projectId: 3,
            questionId: 1119600
        },
        {
            projectId: 2,
            questionId: 1119600
        },
        {
            projectId: 3,
            questionId: 1119500
        },
        {
            projectId: 2,
            questionId: 1119500
        },
        {
            projectId: 1,
            questionId: 1119500
        },
        {
            projectId: 3,
            questionId: 836200
        },
        {
            projectId: 2,
            questionId: 836200
        },
        {
            projectId: 3,
            questionId: 836100
        },
        {
            projectId: 2,
            questionId: 836100
        }
    ]

var obj = {};
var newData = data.length;
for (var i = 0; i < newData; i++) {
    if (obj[data[i].questionId]) {
        obj[data[i].questionId] += 1;
    } else {
        obj[data[i].questionId] = 1;
    }
}

for (var i = 0; i < newData; i++) {
    for (var n in obj) {
        if (data[i].questionId == n && obj[n] == 4) {
           data[i].color = "red";
        } else if (data[i].questionId == n && obj[n] == 3) {
           data[i].color = "green";
        }
    }
}

var html = [];
html.push("
")
for (var i = 0, len = data.length; i < len; i++) {
    html.push("
" + data[i].questionId + "
");
}
html.push("
")
var conDom = document.getElementById("xxx");
conDom.innerHTML = html.join("");

7、用最少的原生JS實(shí)現(xiàn)文字超出...顯示。

var oBox = document.getElementById("box");
var demoHtml = oBox.innerHTML.slice(0, 10) + "...";
oBox.innerHTML = demoHtml;

8、如何將獲取的數(shù)據(jù)，里面分別是1 2 3 … 10、102等，轉(zhuǎn)化為對(duì)應(yīng)的一、二、三…十、一百零二。

9、移動(dòng)端常見(jiàn)的字?jǐn)?shù)統(tǒng)計(jì)，不管是遞增或遞減，同時(shí)兼容pc端的復(fù)制、粘貼、撤銷(xiāo)等操作，實(shí)時(shí)統(tǒng)計(jì)，以及支持移動(dòng)端的emoji表情的統(tǒng)計(jì)，該如何實(shí)現(xiàn)。
用 input propertychange 事件

10、define和require有什么區(qū)別。
簡(jiǎn)言之，define定義模塊，require加載模塊，模塊依賴(lài)聲明是很重要的一步。

11、dom我們都知道，bom是什么。
BOM是瀏覽器對(duì)象模型，DOM是文檔對(duì)象模型，前者是對(duì)瀏覽器本身進(jìn)行操作，而后者是對(duì)瀏覽器（可看成容器）內(nèi)的內(nèi)容進(jìn)行操作。比如window.open()。

12、如何優(yōu)雅地用原生JS實(shí)現(xiàn)textarea隨著內(nèi)容增多，高度自動(dòng)增加。

13、如何監(jiān)聽(tīng)app自帶的返回鍵，以及安卓機(jī)里物理返回鍵。產(chǎn)品需要前端編寫(xiě)一個(gè)h5，里面有若干audio或video，不與客戶(hù)端交互。當(dāng)用戶(hù)點(diǎn)擊app自帶返回鍵，如何暫停正在播放的文件。并處理好廣大安卓機(jī)的兼容性。

14、將所有的html內(nèi)容一鍵轉(zhuǎn)化為圖片，有實(shí)現(xiàn)的大概思路嗎。html2canvas.js插件bug太多，是否有替代方案。

15、支付寶里的芝麻信用，目前是靜態(tài)的，如何實(shí)現(xiàn)讓小白點(diǎn)隨著對(duì)應(yīng)的分?jǐn)?shù)、文案從零跳轉(zhuǎn)到對(duì)應(yīng)的位置。

16、移動(dòng)端輪播圖，比如swiper3.js（目前是4），實(shí)現(xiàn)的原理是什么。當(dāng)swiper.js有兼容性問(wèn)題時(shí)，是否有輕量級(jí)替代方案。

17、iscroll.js的替代方案有哪些，優(yōu)缺點(diǎn)是什么。

18、中英文一鍵切換，前端該怎么實(shí)現(xiàn)。

19、模板渲染引擎用過(guò)嗎。和傳統(tǒng)的拼接字符串相比，優(yōu)缺點(diǎn)是什么。

20、判斷JS數(shù)據(jù)類(lèi)型有哪些方式，它們的區(qū)別是什么。

21、什么是防抖和節(jié)流。

22、延遲加載有哪些方式，什么是阻塞模式。

23、JSON全稱(chēng)是什么，JSON.parse()和JSON.stringify()區(qū)別是什么。

24、移動(dòng)端點(diǎn)擊穿透、滾動(dòng)穿透是否了解，是否解決過(guò)。

25、移動(dòng)端點(diǎn)擊延遲300ms，怎么處理。

26、click和input的區(qū)別。實(shí)際應(yīng)用場(chǎng)景，當(dāng)用戶(hù)點(diǎn)擊input要改變type的類(lèi)型，你會(huì)如何處理。

27、$(document).on(“click”,function(){})和$(document).on(“click”,”.xxx”,function(){})區(qū)別。

28、jQ的on、bind、live、delegate各有什么異同。

29、移動(dòng)端和PC端jQ版本的選擇，是否有差異，如果有，對(duì)應(yīng)的規(guī)范、原因是什么。

30、雅虎軍規(guī)35條（前端性能優(yōu)化）。

31、什么是回流和重繪。

32、let和var的區(qū)別。

33、原生js實(shí)現(xiàn)圖片上傳，有哪些注意事項(xiàng)。

布局和css、框架暫時(shí)就不問(wèn)了，這次先和各位分享到這，都是本人平常工作當(dāng)中的部分積累，和各位高大上的面試題比起來(lái)，不值一提，喜歡的朋友可以收藏下。歡迎在評(píng)論區(qū)補(bǔ)充更多實(shí)用的坑。我會(huì)持續(xù)更新，各位下次見(jiàn)～