20170926映客面试总结

1.正则表达式实现字符串去重、正则表达式匹配html标签

http://www.jb51.net/article/102442.htm

对于去除简单的相邻重复的情况，我们可以用正则实现如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
<title>Insert title here</title>  
</head>  
<body>  
<script>  
    var str = '我...我是是..一个个...帅帅帅帅...哥!';  
    var reg = /\./gi;  
    str = str.replace(reg,''); //我我是是一个个帅帅帅帅哥！  
    reg = /(.)\1+/gi;  
    str = str.replace(reg,'$1');  
    alert(str);//我是一个帅哥！  
</script>  
</body>  
</html>

但是，如果现在需求变了，要求只保留重复字符串的第一次出现的串，如对于字符串"adaaasfjjjbkk"去重后需为："adsfjbk"

我们该如何实现呢？

注意到\1是匹配第一个子表达式（正则中第一个括号内的值），replace()方法中的回调函数的参数第一个为匹配的整个子串，而从第二个开始一次为匹配的第一个、第二个......子表达式匹配的值。只要稍微变更一下，就能得出结果。

代码实现如下：

var str = "adaaasfjjjbkk";  
// 只保留第一次出现的重复串  
console.error(str.replace(/(.).*(\1)/g,function($1,$2,$3){  
    // 第一个参数匹配整个匹配值，从第二个开始是匹配的子串  
    $1 = $2+$1.substring(1).replace(new RegExp($2,'g'),'');  
    return $1;  
}));

要理解匹配出来是个数组，要对数组里的每个匹配值都调用回调函数进行处理，这里依次处理的就是a、d、s、f...

2.常考数据库写法

SELECT SUM(score) FROM course GROUP BY student_id;求学生每门课程总成绩

SELECT score FROM course GROUP BY course_id;按照课程把学生成绩列出来

SELECT AVG(score) FROM course GROUP BY course_id;按照不同课程（from）求该课程的平均（AVG）成绩（score）

SELECT AVG(score) FROM course ;求所有课程的综合平均成绩

select count(*)number from table where salary>=3500;统计薪水(salary)大于等于3500的数目
数据库中使用order by语句进行排序，其中升序用asc，降序用desc。
select * from t order by 列a asc;   -- 这是升序 asc可以省略不写
select * from t order by 列a desc; --这是降序

3.闭包易错

function fun(n,o) {
  console.log(o)
  return {
    fun:function(m){
      return fun(m,n);
    }
  };
}
var a = fun(0);  a.fun(1);  a.fun(2);  a.fun(3);//undefined,?,?,?
var b = fun(0).fun(1).fun(2).fun(3);//undefined,?,?,?
var c = fun(0).fun(1);  c.fun(2);  c.fun(3);//undefined,?,?,?

http://developer.51cto.com/art/201511/498268.htm

注意：所有声明的匿名函数都是一个新函数。

在函数表达式内部能不能访问存放当前函数的变量。

测试1，对象内部的函数表达式：

var o={
  fn:function (){
    console.log(fn);
  }
};
o.fn();//ERROR报错

测试2，非对象内部的函数表达式：
var fn=function (){
  console.log(fn);
};
fn();//function (){console.log(fn);};正确

使用var或是非对象内部的函数表达式内，可以访问到存放当前函数的变量；在对象内部的不能访问到。

4.CSS自适应布局、筛子图案

https://codepen.io/LandonSchropp/pen/KpzzGo

Flex布局默认就是首行左对齐

flex-direction: column;

justify-content: space-between;

圣杯布局

<body class="HolyGrail">
  <header>...</header>
  <div class="HolyGrail-body">
    <main class="HolyGrail-content">...</main>
    <nav class="HolyGrail-nav">...</nav>
    <aside class="HolyGrail-ads">...</aside>
  </div>
  <footer>...</footer>
</body>

CSS代码如下。

.HolyGrail {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

header,
footer {
  flex: 1;
}

.HolyGrail-body {
  display: flex;
  flex: 1;
}

.HolyGrail-content {
  flex: 1;
}

.HolyGrail-nav, .HolyGrail-ads {
  /* 两个边栏的宽度设为12em */
  flex: 0 0 12em;
}

.HolyGrail-nav {
  /* 导航放到最左边 */
  order: -1;
}

5.事件捕捉、冒泡、事件代理

其他（父）元素捕获阶段事件-->本元素代码顺序执行事件-->其他元素冒泡阶段

当我们需要对很多元素添加事件的时候，可以通过将事件添加到它们的父节点而将事件委托给父节点来触发处理函数。为父节点添加一个click事件，当子节点被点击的时候，click事件会从子节点开始向上冒泡。父节点捕获到事件之后，通过判断e.target.nodeName来判断是否为我们需要处理的节点。并且通过e.target拿到了被点击的Li节点。从而可以获取到相应的信息，并作处理。

事件捕获：当某个元素触发某个事件（如onclick），顶层对象document就会发出一个事件流，随着DOM树的节点向目标元素节点流去，直到到达事件真正发生的目标元素。在这个过程中，事件相应的监听函数是不会被触发的。

事件目标：当到达目标元素之后，执行目标元素该事件相应的处理函数。如果没有绑定监听函数，那就不执行。

事件起泡：从目标元素开始，往顶层元素传播。途中如果有节点绑定了相应的事件处理函数，这些函数都会被一次触发。如果想阻止事件起泡，可以使用e.stopPropagation()（Firefox）或者e.cancelBubble=true（IE）来组织事件的冒泡传播。

jQuery的delegate的方法需要三个参数，一个选择器，一个事件名称，和事件处理函数。

6.currenttarget和target

target在事件流的目标阶段；currentTarget在事件流的捕获，目标及冒泡阶段。只有当事件流处在目标阶段的时候，两个的指向才是一样的，而当处于捕获和冒泡阶段的时候，target指向被单击的对象而currentTarget指向当前事件活动的对象（一般为父级）。

http://www.cnblogs.com/wkylin/archive/2011/08/25/2153538.html

7.前端性能优化