面试总结（给自己看的）

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、技术总监分别准备）