摘要：最近面試遇到的一些面試題記錄分享下。單個(gè)保存的數(shù)據(jù)不能超過(guò)，很多瀏覽器都限制一個(gè)站點(diǎn)最多保存?zhèn)€。塊級(jí)元素生成一個(gè)矩形框，作為文檔流的一部分，行內(nèi)元素則會(huì)創(chuàng)建一個(gè)或多個(gè)行框，置于其父元素中。元素仍保持其未定位前的形狀，它原本所占的空間仍保留。

最近面試遇到的一些面試題記錄分享下。

公司A：
題目一：
不用jquery等框架/庫(kù)，查找一個(gè)頁(yè)面上有多少種標(biāo)簽，每種標(biāo)簽的個(gè)數(shù)，偽代碼實(shí)現(xiàn)亦可

代碼:

var map = {};
function dfs(node) {
    if(node.nodeType === 1) {
        var tagName = node.tagName;
        map[tagName] = map.hasOwnProperty(tagName) ? map[tagName] + 1 : 1;
        var children = node.childNodes;
        for(var i = 0, len = children.length; i < len; i++) {
            dfs(children[i]);
        }
    }
}
dfs(document.body);
console.log(map);

這里估計(jì)也就是考察遞歸搜索吧，當(dāng)時(shí)寫(xiě)的沒(méi)有這么完整，思路一樣，這里沒(méi)有考慮到有iframe的情況。

公司B：
題目一：
typeof []
答案：object

一開(kāi)始我的回答是object，面試官問(wèn)的時(shí)候特意問(wèn)了下確定嗎，然后就有點(diǎn)猶豫了，然后面試官又問(wèn)了下javascript的數(shù)據(jù)類型有哪些，string，number，null，undefined，object當(dāng)時(shí)忘記了boolean

題目二：
你知道的http的狀態(tài)碼有哪些，代表什么意思
https://segmentfault.com/a/1190000004356...
寫(xiě)出常用的一些狀態(tài)碼就可以了，我也就寫(xiě)了200 304 403 404 500 502 這幾個(gè)
引申：304是什么意思，是根據(jù)什么判斷的？
這個(gè)還真不太清楚，緩存過(guò)期時(shí)間？文件內(nèi)容？待我搞清楚之后再補(bǔ)充...

題目三：
cookie跟session的區(qū)別?
1、cookie數(shù)據(jù)存放在客戶的瀏覽器上，session數(shù)據(jù)放在服務(wù)器上。
2、cookie不是很安全，別人可以分析存放在本地的COOKIE并進(jìn)行COOKIE欺騙

考慮到安全應(yīng)當(dāng)使用session。

3、session會(huì)在一定時(shí)間內(nèi)保存在服務(wù)器上。當(dāng)訪問(wèn)增多，會(huì)比較占用你服務(wù)器的性能

 考慮到減輕服務(wù)器性能方面，應(yīng)當(dāng)使用COOKIE。

4、單個(gè)cookie保存的數(shù)據(jù)不能超過(guò)4K，很多瀏覽器都限制一個(gè)站點(diǎn)最多保存20個(gè)cookie。
5、所以個(gè)人建議：

將登陸信息等重要信息存放為SESSION
其他信息如果需要保留，可以放在COOKIE中

出處：https://segmentfault.com/a/1190000004071...

題目四：
有一個(gè)數(shù)組譬如有十個(gè)數(shù)字，一秒鐘打印一個(gè)怎么實(shí)現(xiàn)？

代碼：

var num = [1, 2, 3, 4, 5, 6],
    len = num.length,
    index = 0;
var timer = setInterval(function () {
    if(index >= len) {
        clearInterval(timer);
    } else {
        console.log(num[index]);
    }
    index++;
}, 1000);

題目五：
position有哪些值？absolute相對(duì)于什么定位？
position 屬性值的含義：
static
元素框正常生成。塊級(jí)元素生成一個(gè)矩形框，作為文檔流的一部分，行內(nèi)元素則會(huì)創(chuàng)建一個(gè)或多個(gè)行框，置于其父元素中。
relative
元素框偏移某個(gè)距離。元素仍保持其未定位前的形狀，它原本所占的空間仍保留。
absolute
元素框從文檔流完全刪除，并相對(duì)于其包含塊定位。包含塊可能是文檔中的另一個(gè)元素或者是初始包含塊。元素原先在正常文檔流中所占的空間會(huì)關(guān)閉，就好像元素原來(lái)不存在一樣。元素定位后生成一個(gè)塊級(jí)框，而不論原來(lái)它在正常流中生成何種類型的框。
fixed
元素框的表現(xiàn)類似于將 position 設(shè)置為 absolute，不過(guò)其包含塊是視窗本身。
資料：http://www.w3school.com.cn/css/css_posit...
絕對(duì)定位的元素的位置相對(duì)于最近的已定位祖先元素，如果元素沒(méi)有已定位的祖先元素，那么它的位置相對(duì)于最初的包含塊。
資料：http://www.w3school.com.cn/css/css_posit...

題目六：
一個(gè)數(shù)組，求出里面連續(xù)和最大的一段的起始下標(biāo)，譬如[1, 3, -4, 4, 2]最大連續(xù)和為6 下表為3, 4

   

     var arr = [1, 3, -5, 4, 2, -9, 3, 6],
        sum = arr[0],
        sumIndex = {l: 0, r: 0};
        max = [],
        retIndex = {l: 0, r: 0};
        max[0] = arr[0];
        for(var i = 1, len = arr.length; i < len; i++) {
            max[i] = Math.max(sum + arr[i], max[i-1], arr[i]);
            if(max[i] === sum + arr[i]) {
                retIndex.l = sumIndex.l;
                retIndex.r = sumIndex.r = i;
            } else if(max[i] === arr[i]) {
                retIndex.l = i;
                retIndex.r = i;
            } else {
                retIndex.l = sumIndex.l;
                retIndex.r = sumIndex.r;
            }
            if(sum + arr[i] >= 0) {
                sum = sum + arr[i];
                sumIndex.r = i;
            } else {
                sum = arr[i];
                sumIndex.l = i;
                sumIndex.r = i;
            }
        }
        console.log(max[len - 1] + " " +  retIndex.l + " " +  retIndex.r);
        

題目七：
實(shí)現(xiàn)一個(gè)once函數(shù) 參數(shù)是一個(gè)函數(shù) 返回值也是個(gè)函數(shù) 只能執(zhí)行一次 下次執(zhí)行就是undefined 例如：

var foo = once(function() { console.log(123); });
foo();//123
foo();//undefined
foo();//undefined

實(shí)現(xiàn)：

function once(cb) {
    var flag = 1;
    return function() {
        if(flag) {
            cb.apply(cb.caller, arguments);
            flag = 0;
        }
    }
}

題目八：
一個(gè)由整數(shù)構(gòu)成的有序數(shù)組（有可能有重復(fù)的），給一個(gè)數(shù)，找出它在數(shù)組里面出現(xiàn)的位置

解析：
這個(gè)就是一個(gè)二分查找，因?yàn)榭赡苡兄貜?fù)的一直要找到它的前一個(gè)元素不等于當(dāng)前找到的元素為止。
代碼就不寫(xiě)了

題目九：
移動(dòng)端的手勢(shì)事件有哪些？
由于移動(dòng)端做的少，當(dāng)時(shí)只記得touchstart touchmove touchend這幾個(gè)，沒(méi)有處理這些事件的經(jīng)驗(yàn)

題目十：
寫(xiě)一個(gè)兼容各瀏覽器的事件監(jiān)聽(tīng)函數(shù)

function addListener(ele, eventName, handler) {
    if(ele.addEventListener) {
        ele.addEventListener(eventName, handler);
    } else if (ele.attachEvent) {
        ele.attachEvent("on" + eventName, handler);
    }
}

主要考慮到兼容IE

引申：
addEventListener 第三個(gè)參數(shù)有啥用
第三個(gè)參數(shù)為true在捕獲階段執(zhí)行處理函數(shù)，為false在冒泡階段執(zhí)行處理函數(shù)默認(rèn)為false

還有事件模型 IE支持哪種事件模型
事件模型: 捕獲->目標(biāo)->冒泡
IE的事件模型： 冒泡