2018駕考寶典面試總結

你們好，我來自駕考寶典。時間不知不覺進入2018金九銀十，下半年的尾聲了，想必不少朋友已經看過網上新出的各大廠面試題。同時，我在駕考寶典也工做一年多了。駕考寶典算不上一線大公司，但我我的不論是經過工做，日常的積累，仍是自主學習，我以爲仍是能和你們分享一些更加實戰化的面試題。主要是工做當中運用的相關技術和遇到的坑，但願以此共勉。

Q: JS 部分

一、什麼是自執行函數，它的優勢是什麼？
!function(){}()被稱爲"自執行函數"，好處是把全部變量都運行在函數內部，能夠避免產生全局變量，而"!"的做用是使它和上面的代碼隔絕，不會受到其影響。

二、求1-100裏7的倍數及包含7的全部數字，最後放置數組中

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());

更精簡版是?

三、爲何0.1 + 0.2 != 0.3
js沒有float型沒有int型 瀏覽器解析小數時 會轉換成二進制 而小數轉換成二進制時 js就會失精度 0.1+0.2會得0.30000004後面無窮個小數 因此正確的作法是 parseFloat((0.1 + 0.2).toFixed(10))

四、將數組進行排序，好比

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

該怎麼寫；若用箭頭函數輸出，() => {} 和() => ()區別是什麼，各將輸出什麼。
若是數組是這樣

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

用箭頭函數輸出，() => {} 和() => ()，又各將輸出什麼。爲何沒有實現咱們想要的排序，該如何作。

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

若是是二維數組

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

五、如何將這麼一組數據

var arr = ["123@qq.cn","zhangsan@163.cn"];轉化爲<123@qq.cn>;<zhangsan@163.cn>

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

六、使用js匹配相同的questionId，三個相同的變綠色，四個紅色，並從新渲染至頁面中。

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("<ul>")
for (var i = 0, len = data.length; i < len; i++) {
    html.push("<li id=" + data[i].projectId + " style='color: " + data[i].color + "'>" + data[i].questionId + "</li>");
}
html.push("</ul>")
var conDom = document.getElementById("xxx");
conDom.innerHTML = html.join("");

七、用最少的原生JS實現文字超出...顯示。

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

八、如何將獲取的數據，裏面分別是1 2 3 … 十、102等，轉化爲對應的1、2、三…10、一百零二。

九、移動端常見的字數統計，不論是遞增或遞減，同時兼容pc端的複製、粘貼、撤銷等操做，實時統計，以及支持移動端的emoji表情的統計，該如何實現。
用 input propertychange 事件

十、define和require有什麼區別。
簡言之，define定義模塊，require加載模塊，模塊依賴聲明是很重要的一步。

十一、dom咱們都知道，bom是什麼。
BOM是瀏覽器對象模型，DOM是文檔對象模型，前者是對瀏覽器自己進行操做，然後者是對瀏覽器（可當作容器）內的內容進行操做。好比window.open()。

十二、如何優雅地用原生JS實現textarea隨着內容增多，高度自動增長。

1三、如何監聽app自帶的返回鍵，以及安卓機裏物理返回鍵。產品須要前端編寫一個h5，裏面有若干audio或video，不與客戶端交互。當用戶點擊app自帶返回鍵，如何暫停正在播放的文件。並處理好廣大安卓機的兼容性。

1四、將全部的html內容一鍵轉化爲圖片，有實現的大概思路嗎。html2canvas.js插件bug太多，是否有替代方案。

1五、支付寶裏的芝麻信用，目前是靜態的，如何實現讓小白點隨着對應的分數、文案從零跳轉到對應的位置。

1六、移動端輪播圖，好比swiper3.js（目前是4），實現的原理是什麼。當swiper.js有兼容性問題時，是否有輕量級替代方案。

1七、iscroll.js的替代方案有哪些，優缺點是什麼。

1八、中英文一鍵切換，前端該怎麼實現。

1九、模板渲染引擎用過嗎。和傳統的拼接字符串相比，優缺點是什麼。

20、判斷JS數據類型有哪些方式，它們的區別是什麼。

2一、什麼是防抖和節流。

2二、延遲加載有哪些方式，什麼是阻塞模式。

2三、JSON全稱是什麼，JSON.parse()和JSON.stringify()區別是什麼。

2四、移動端點擊穿透、滾動穿透是否瞭解，是否解決過。

2五、移動端點擊延遲300ms，怎麼處理。

2六、click和input的區別。實際應用場景，當用戶點擊input要改變type的類型，你會如何處理。

2七、$(document).on(「click」,function(){})和$(document).on(「click」,」.xxx」,function(){})區別。

2八、jQ的on、bind、live、delegate各有什麼異同。

2九、移動端和PC端jQ版本的選擇，是否有差別，若是有，對應的規範、緣由是什麼。

30、雅虎軍規35條（前端性能優化）。

3一、什麼是迴流和重繪。

3二、let和var的區別。

3三、原生js實現圖片上傳，有哪些注意事項。

佈局和css、框架暫時就不問了，此次先和各位分享到這，都是本人日常工做當中的部分積累，和各位高大上的面試題比起來，不值一提，喜歡的朋友能夠收藏下。歡迎在評論區補充更多實用的坑。我會持續更新，各位下次見～