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.前端性能優化

yahoo前端性能團隊總結的35條黃金定律

http://www.cnblogs.com/lei2007/archive/2013/08/16/3262897.html

 網頁內容

服務器

cookie

css

js

圖片

移動端

8.前后端分離的利弊

http://itindex.net/detail/55771

9.BFC觸發條件:

1.float的值不為none。
2. overflow的值不為visible。
3.display的值為table-cell, table-caption, inline-block中的任何一個。
4.position的值不為relative和static。

10.Js代碼用<script>調用時,放在<head>與<body>的區別

http://blog.csdn.net/yy921117/article/details/51982159

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM