面試總結（給本身看的）

20170913記錄

1. 水平垂直居中

<div class="demo" style="width: 100px;height: 100px"></div>
// 方法1: 絕對定位1
// 方法2: 絕對定位2
// 方法3: flex
// 方法4: css3 transform transalte

2. display: none和visibility: hidden的區別

display在文檔流中沒有，visibility在文檔流佔據空間但不顯示（隱形）

1. 是否繼承 display不繼承
2. 是否佔據空間 display不佔據空間
3. 頁面屬性更改是否從新渲染 display從新渲染

3. 忘了

4. 點擊列表li顯示相應內容

<ul id="ul">
    <li>內容1<li>
    <li>內容2<li>
    <li>內容3<li>
    <li>內容4<li>
    ...
    <li>內容1000</li>
</ul>
// 方法1:閉包
var lists = document.querySelectorAll("#ul li");
for (var i = 0; i < lists.length; i++) {
    (function(i) {
        console.log(lists[i]);
        lists[i].onclick = function () {
            alert(this.innerHTML);
        }
    })(i)
}
// 方法2:jquery on事件代理
var lists = document.getElementById("ul").children;
for (var i = 0; i < lists.length; i++) {
    (function(i) {
        console.log(lists[i]);
        lists[i].addEventListener('click', function (e) {
            alert(e.target.innerHTML);
        }, false); // 布爾值是否捕獲
    })(i)
}

事件代理

原理：利用事件冒泡和事件源（target）

事件執行過程：

• 事件捕獲階段（事件不執行）
• 處於目標階段（獲取執行事件的目標源target並執行事件，此階段被看做是冒泡的一部分）
• 事件冒泡階段

jQuery事件代理

delegate() 爲指定元素（被選中元素的子元素）添加一個或多個事件處理程序

on() jquery中的事件綁定都是基於on方法的，因此那些方法均可以使用on方法來代替的

5. 輸出日期格式xxxx-xx-xx，不足兩位數的要補齊

// 1.默認狀況 格式'YYYY-MM-DD HH:MM:SS'
function dateFormat (time, format) {
  // 2.默認格式轉換機制
  var formatValue = format || 'YYYY-MM-DD HH:MM:SS' // 默認值設置
  var dateValue = new Date(time);
  return formatObj[formatValue](dateValue)
}

// 3.將格式統一轉換成00
function fixed2 (str) {
  return str < 10 ? '0' + str : str
}

// 4.考慮全部格式狀況的組合 根據題目要求只有四種組合狀況
var formatObj = {
  'YYYY-MM-DD HH:MM:SS': function (date) {
    var Y, M, D, h, m, s, last;
    Y = date.getFullYear() + '-';
    M = fixed2(date.getMonth() + 1) + '-';
    D = fixed2(date.getDate()) + ' ';
    h = fixed2(date.getHours()) + ':';
    m = fixed2(date.getMinutes()) + ':';
    s = fixed2(date.getSeconds());
    last = Y + M + D + h + m + s;
    return last;
  },
  'YYYY-MM-DD HH:MM': function (date) {
    var Y, M, D, h, m, last;
    Y = date.getFullYear() + '-';
    M = fixed2(date.getMonth() + 1) + '-';
    D = fixed2(date.getDate()) + ' ';
    h = fixed2(date.getHours()) + ':';
    m = fixed2(date.getMinutes());
    last = Y + M + D + h + m;
    return last;
  },
  'YYYY-MM HH:MM:SS': function (date) {
    var Y, M, h, m, s, last;
    Y = date.getFullYear() + '-';
    M = fixed2(date.getMonth() + 1) + ' ';
    h = fixed2(date.getHours()) + ':';
    m = fixed2(date.getMinutes()) + ':';
    s = fixed2(date.getSeconds());
    last = Y + M + h + m + s;
    return last;
  },
  'YYYY-MM HH:MM': function (date) {
    var Y, M, D, h, m, s, last;
    Y = date.getFullYear() + '-';
    M = fixed2(date.getMonth() + 1) + ' ';
    h = fixed2(date.getHours()) + ':';
    m = fixed2(date.getMinutes());
    last = Y + M + h + m;
    return last;
  }
}
dateFormat(1350052653, 'YYYY-MM-DD HH:MM') // 1970-01-16 23:00:52
dateFormat(1350052653, 'YYYY-MM-DD HH:MM') // 1970-01-16 23:00
dateFormat(1350052653, 'YYYY-MM HH:MM:SS') // 1970-01 23:00:52
dateFormat(1350052653, 'YYYY-MM HH:MM') // 1970-01 23:00

6. 變量執行順序和函數參數

function result (a, b, c) {
    arguments[1] = c;
    return b;
}
alert(result(1, 2, 3)); // 3
alert(result(daydao)); // undefined
var daydao = "理才網";

agrguments是一個相似數組的對象，對應於傳遞給函數的參數

參數也能夠被設置：arguments[1] = 'new value'

7. js實現找出字符串中出現次數最多的字符，並輸出這個字符出現的次數

https://segmentfault.com/q/10... 參考

解題思路：
- 切割字符串爲數組
- 遍歷產生字典
- 根據出現次數排序
- 輸出出現次數最多的字符數組

function analysisString (str) {
    var str = str || '',
        arr = str.split(''),// 1.分割字符串爲數組
        numMap = {}, // 記錄全部字符的出現頻次
        mostArray = []; // 記錄全部出現次數最多的字符，保存在數組中
    // 2.遍歷全部字符字典
    arr.forEach(function (item) {
        // 記錄全部字符的出現頻次，保存在對象中
        // 記錄全部出現次數最多的字符， 保存在數組中
        numMap.increase(item);
        mostArray.add(item);
    });
    // 3.根據出現次數進行數組排序
    mostArray = mostArray.sort(function (a, b) {
        return numMap[b] - numMap[a]; // 從大到小排序
    }).filter(function (item, i) { // 過濾，噹噹前次數等於最大次數時添加在mostArray數組裏
        if (numMap[item] === numMap[mostArray[0]]) {
            return item;
        }
    });
    // 4.返回出現字符次數最多的數組和最屢次數
    return {
        mostArray: mostArray,
        freqNum: numMap[mostArray[0]]
    };

}
Object.prototype.increase = function (key) {
    var self = this,
        val = self[key]*1 || 0;
    self[key] = val + 1;
    return self;
};
Array.prototype.add = function (item) {
    var self = this;
    if (self.indexOf(item) < 0) { // 數組中沒有這個字符
        self.push(item);
    }
    return self;
};
console.log(analysisString('hayleyliuhui'));

8. 正則實現將「<div>理才網<sapn>上線成功</span>!</div>」替換成「理才網上線成功！」

如下分別表明什麼意思
+
*
?
*?
{}
[]
()
var str = '<div>理才網<sapn>上線成功</span>!</div>';
var reg = /<[/a-z]+>/;
<!--reg.exec(str);-->
<!--reg.test(str);-->
<!--str.match(reg);-->
<!--str.search(reg);-->
<!--str.replace(reg);-->
str.split(reg).join(''); // ["", "理才網", "上線成功", "!", ""]
str.join(''); // 理才網上線成功！

面試過程記錄：

基本上問的問題都回答出來了，考察知識點主要是css佈局、js事件代理、js函數、jquery、多個事件同步處理、css動畫、vue

感覺：

• 主要考察css佈局和js事件代理和數組操做
• 職位是一我的負責某個項目的管理後臺，項目組有20多個前端，平時有技術分享會
• 技術棧jquery40%、vue60%

作的好：

• 遇到問題會努力思考
• 不懂的詢問面試官、與面試官多討論和交流
• 沒有冷場

不足：

• 沒有準備好自我介紹
• 沒有對面試公司提清楚本身的問題
• 沒有掌控面試的流程和主動權

繼續準備：

• 總結面試題
• 再多看看jquery和css動畫
• 準備2面和3面（技術負責人、hr、技術總監分別準備）