摘要：面試題目匯總前言近期在找工作，也在讀前端面試江湖這本書，書中整理了很多基礎(chǔ)的面試題目，在書中也發(fā)現(xiàn)了一些錯(cuò)誤。好記性不如爛筆頭，于是整理下對(duì)自己有益的題目，都是一些較為基礎(chǔ)的題目后期還會(huì)更新。，返回一個(gè)數(shù)組，成員為匹配的字符串。

近期在找工作，也在讀 前端面試江湖 這本書，書中整理了很多基礎(chǔ)的面試題目，在書中也發(fā)現(xiàn)了一些錯(cuò)誤。
好記性不如爛筆頭，于是整理下對(duì)自己有益的題目，都是一些較為基礎(chǔ)的題目,后期還會(huì)更新。時(shí)時(shí)刻刻勉勵(lì)自己，注重基礎(chǔ)。
現(xiàn)在在找工作，初中級(jí)前端，如有哪位熱心的仁兄公司在招前端，希望@我一下，目標(biāo)廣州，前端路很長(zhǎng)，希望一起努力向前。

截取字符串 var a = "www.qdjhu.com中的qdjhu"。

考察知識(shí)點(diǎn)，substr()第一個(gè)參數(shù)為起始位置，第二個(gè)參數(shù)為截取的長(zhǎng)度，注意第一個(gè)參數(shù)為負(fù)數(shù)則從末尾往前找，第二個(gè)參數(shù)為負(fù)數(shù)則返回空字符串，此方法不會(huì)修改原字符串，只是查找并返回查找的結(jié)果，與slice()方法不同的是，slice()方法第二個(gè)參數(shù)為結(jié)束位置，slice()的第一個(gè)參數(shù)如果大于第二個(gè)參數(shù)則返回空字符串。
a.substr(4,5)或者a.slice(4,9)

判斷字符串是否是這樣組成的，第一個(gè)必須是字母，后面的可以使字母，數(shù)字，下劃線，總長(zhǎng)度為5-20。

考察知識(shí)點(diǎn)，正則。[a-zA-Z]是匹配所有字母，w表示匹配任意字母，數(shù)字，下劃線。{n}代表重復(fù)幾次，{n,m}代表重復(fù)至少n次，至多m次。
var a = /^[a-zA-Z]{1}w{4，19}/

給定一個(gè)字符串 "IamWangZhiJun",要求查找里面的字符串Wang。

考查知識(shí)點(diǎn)，對(duì)String對(duì)象的操作，indexOf()方法表示查找一個(gè)字符串在另一個(gè)字符串中的位置，返回一個(gè)整數(shù)，字符串匹配開始的位置。

          var a ="IamWangZhiJun"
          var b ="Wang"
          var c =a.indexOf(b) //3
          var d = a.substr(c,b.length) 

如何實(shí)現(xiàn)一個(gè)刪除字符串左邊為空白字符的方法。

知識(shí)點(diǎn)1，replace(),第一個(gè)參數(shù)為匹配模式（正則），第二個(gè)參數(shù)為替換的內(nèi)容。

知識(shí)點(diǎn)2，量詞符和貪婪模式，？表示0次或者1次{0，1}，*表示0次或者多次{0，}，+表示1次或者多次{1,}。默認(rèn)情況下匹配貪婪模式。

        function leftTrim(str){
        return str.replace(/^s*/,"")
        };
        var a = leftTrim("   abc")//abc

JavaScript 的typeof 都返回那些數(shù)據(jù)類型。

知識(shí)點(diǎn)，js的6種數(shù)據(jù)基本類型。underfined,String,Number,Object,function,boolean 。

請(qǐng)定義一個(gè)函數(shù)，實(shí)現(xiàn)字符串的反轉(zhuǎn)。

知識(shí)點(diǎn)，主要是把字符串從末尾開始的每一個(gè)元素截取后，在重新組成一個(gè)新字符串，用到的方法charAt(), 返回指定位置的字符，注意是從0開始。

      function reverStr(str){
      var temStr = "";
      for(var i = str.length-1:i>=0:i—-){
      temStr+=str.charAt(i)}
        }
         returun temStr;
      }  

7. 字符串的操作主要有那些。
 * 查找類型
      *   indexOf()，返回匹配開始的位置。
      *   search(),返回匹配的第一個(gè)位置。
      *   match()，返回一個(gè)數(shù)組，成員為匹配的字符串。
      *   length(),返回字符串的長(zhǎng)度
    
 * 截取，拼接,替換類
      *    slice(),從原字符串中取回字符串并返回,第一個(gè)參數(shù)為起始位置，第二個(gè)參數(shù)為結(jié)束位置。
      *    substr(),從原字符串中取回字符串并返回，第一個(gè)參數(shù)是子字符串的開始位置，第二個(gè)參數(shù)是子字符串的長(zhǎng)度。
      *    concat(),方法用于連接兩個(gè)字符串，返回一個(gè)新字符串，不改變?cè)址?      *    replace(),第一個(gè)參數(shù)為被替換的內(nèi)容，第二個(gè)參數(shù)為要替換的內(nèi)容，一般只匹配一個(gè)。
      *    charAt()方法返回指定位置的字符，參數(shù)是從0開始編號(hào)的位置。
      *    trim()
 *    轉(zhuǎn)換類
      * split(),第一個(gè)參數(shù)為起始位置 第二個(gè)參數(shù)為限定放回?cái)?shù)組的成員數(shù)，注意，第一個(gè)參數(shù)如果為空，則返回?cái)?shù)組的成員是原字符串的每一個(gè)字符。此方法會(huì)將字符串裝換為數(shù)組。

8. 有一個(gè)字符串 abcd-ef-ghi,請(qǐng)用js把它處理成ghi&ed&abcd。
  * 知識(shí)點(diǎn)，字符串和數(shù)組之間的裝換。

        var a ="abcd-ef-ghi";
        var b = a.split("-");
        var result = b.reverse().join("&")
        ```

請(qǐng)編寫代碼拓展JavaScript中string對(duì)象，讓其有一個(gè)方法刪除字符串中所有英文句號(hào)"."。

 
String.prototype.killPoint = function(){
return this.replace(/^./g,"");
 }

將字符串"wang zhi j un"中由空格分割的每個(gè)單詞首字母大小寫。

  function str(words) {
     words = words.split(" ");
     for(var i = 0;i


JS初級(jí)之變量,DOM，循環(huán)語(yǔ)句


JS如何檢測(cè)變量是一個(gè)string類型？請(qǐng)寫出函數(shù)實(shí)現(xiàn)。
      function isString(str){
      if(typeof(str) === "string" || str.constructor === String){
         return true;
         }else{
          return false;
          }
      }
      var str = "hello world"
這里需要注意的是也要判斷這個(gè)值的數(shù)據(jù)類型。


請(qǐng)說明javaScript中的nodeName,nodeVaule,nodeType的區(qū)別
*   nodeName 表示節(jié)點(diǎn)的名稱
    *   元素節(jié)點(diǎn)的nodeName是標(biāo)簽名稱
    *   屬性節(jié)點(diǎn)的nodeName是屬性名稱
    *   文本節(jié)點(diǎn)的nodeName是#text
    *   文檔節(jié)點(diǎn)的nodeName是#document
*   nodeVaule 表示文本內(nèi)容
    *   對(duì)于文本節(jié)點(diǎn)，nodeVaule屬性包含文本
    *   對(duì)于屬性節(jié)點(diǎn)，nodeValue屬性包含屬性值
*   nodeType 屬性返回節(jié)點(diǎn)的類型,常用的如下
    *   元素類型對(duì)應(yīng)的節(jié)點(diǎn)類型為1
    *   屬性類型對(duì)應(yīng)的節(jié)點(diǎn)類型為2
    *   文本屬性對(duì)應(yīng)的節(jié)點(diǎn)類型為3
    


下列代碼執(zhí)行后，結(jié)果是什么
        
        for(i=0,j=0;i<6,j<10;i++,j++){
        var k =i+j
        }
        alert(k) //18
        for(i=0,j=0;i<10,j<6;i++,j++){
        var k =i+j
        }
        alert(k) //10

知識(shí)點(diǎn)，在for語(yǔ)句中條件用逗號(hào)隔開，就相當(dāng)于“并且”。
var t =(4,5,6),console.log(t) //6,這里也說明逗號(hào)表達(dá)式返回的結(jié)果是由最后一個(gè)表達(dá)式?jīng)Q定的。



統(tǒng)計(jì)從1-400之間的自然對(duì)數(shù)中含有多少個(gè)1？
 
      var count = 0;
      for(var i=0;i<=400;i++){
       for(var j=0;j<=i.toString().length;j++){
         if(i.toString()[j]=="1"){
          count++}
        }
      }
      alert(count)



js中基本數(shù)據(jù)類型有哪些？本地對(duì)象，內(nèi)置對(duì)象，宿主對(duì)象有那些？


基本數(shù)據(jù)類型
string,boolean,number,null,undefined,object。


本地對(duì)象(常用)



Object,Function,String,Number,Boolean,Data,Array,RegExp。


內(nèi)置對(duì)象
簡(jiǎn)單的說，內(nèi)置對(duì)象是本地對(duì)象的一種，其中包含2種對(duì)象，Math,Global(isNaN,parseInt,parseFloat)


宿主對(duì)象
   所有BOM,DOM都是宿主對(duì)象
   其中BOM常用對(duì)象有

localtion
navigation
screen
history



JS中級(jí)之函數(shù)


編寫一個(gè)函數(shù)，參數(shù)為一個(gè)元素，返回指定元素的第一個(gè)元素，函數(shù)越簡(jiǎn)單越好
   
    function getFirst(el){
    var nodes = el.children;
    return nodes.length!=0?nodes[0]:null;
    }


簡(jiǎn)述JavaScript中this的理解。

this代表函數(shù)執(zhí)行的時(shí)候，自動(dòng)生成一個(gè)內(nèi)部對(duì)象，在函數(shù)內(nèi)使用
this指的是調(diào)用函數(shù)的那個(gè)對(duì)象

一下討論this的四種用法


純粹的函數(shù)調(diào)用，說明此時(shí)this代表全局對(duì)象。
var x = 1;
     function test(){
     this.x = 0;//這里等同于x = 0;已改寫
     }
     test();//window.test()
     alert(x);//0


作為對(duì)象方法的調(diào)用，說明此時(shí)this指向這個(gè)的上級(jí)對(duì)象。
       function test(){
       alert(this.x);
       }
       var o = {};
       o.x=1;
       o.m = test;
       o.m()//1

 


作為構(gòu)造函數(shù)的調(diào)用，說明此時(shí)this是指向新對(duì)象，不是全局對(duì)象！！！
      var x = 2;
      function test(){
      this.x = 1;
       }
      var o = new test();
      alert(o.x)//1
      alert(x)//2
    


apply調(diào)用
 
      var x = 0;
      function test(){
      alert(this.x)}
      var o = {};
      o.x = 1;
      o.m = test;
      o.m.apply()//0,當(dāng)參數(shù)為空的時(shí)候，默認(rèn)調(diào)用全局
      o.m.apply(o)//1








什么是閉包？閉包的特性？對(duì)頁(yè)面有什么影響？好處和壞處？請(qǐng)寫出一個(gè)閉包的簡(jiǎn)單實(shí)例？

閉包就是能夠讀取其他函數(shù)內(nèi)部變量的函數(shù)。

閉包特性

閉包外層是一個(gè)函數(shù)
閉包內(nèi)層也是一個(gè)函數(shù)
閉包會(huì)return內(nèi)部函數(shù)
閉包返回的函數(shù)內(nèi)部不能有return
執(zhí)行閉包后，閉包內(nèi)部的變量會(huì)緩存
閉包只有被執(zhí)行的時(shí)候才會(huì)調(diào)用



好處和壞處

方便上下文調(diào)用
加強(qiáng)封裝性
壞處 浪費(fèi)內(nèi)存



實(shí)例
       function a(){
         var i = 0;
         function b(){
           console.log(++i)
           // i=null 解決內(nèi)存泄漏 
         }
         return b;
       } 
       var c = a();//執(zhí)行a函數(shù)
       c()//執(zhí)行b函數(shù)，也就是執(zhí)行閉包，結(jié)果為1
       c()//2
       …
       




IE和Firefox處理兼容。


綁定事件監(jiān)聽
 function addEvent(elem,eventName,handler){
 if(elem.attachEvent){
    elem.attachEvent("on"+eventName,handler)
    }else if{
    elem.addEventListener(eventName,handler,false)}
    }else{
    elem["on"+eventName]
    }
            
     function removeEvent(elem,eventName,handler){
     if(elem.detachEvent){
     elem.detachEvent("on"+eventName,handler)
     }else if{
     elem.removeEventListener(eventName,handler,false)
     }else{
      elem["on"+eventName]
        }      
    }


獲取到event對(duì)象
function getEvent(e){
return e ? e : windowm.event;
}
function getTarget(e){
return e.target||e.srcElement
}
//阻止默認(rèn)和冒泡
function prevent(e){
if(e.prevent){
e.preventDefault();
}else{
e.returnValue = false
}
                }
                function stop(e){
                if(e.stopPropagation){
                e.stopPropagation();
                }else{
e.cancelBubble()}
               }




將$(".red").attr("sth",4)裝換成Js實(shí)現(xiàn)

知識(shí)點(diǎn)，得到的是數(shù)組，要遍歷。
var a = document.getElementsByClassName("red"); 
for(var i =0;i



}
6. 作用域問題

var a = {n:1};
   var b =a;
   a.x=a={n:2};//a.x={n:2};a={n:2}
   console.log(a.x);//undefined
   console.log(b.x);//{n:2}
 理解，首先 `var a = {n:1}` a這里指向一個(gè)對(duì)象，`var b =a ` 則是將b也指
 向這個(gè)對(duì)象，第三行代碼，實(shí)際是已經(jīng)不共享對(duì)象了，a已經(jīng)改寫了，而b.x里面則添
 加了x = {n:2}，故有上結(jié)果。
7. Boolean對(duì)象和Boolean值
 
var x = new Boolean(false);
   if (x) {
   alert("hi");
   } 
   var y = Boolean(0);
   if (y) {
   alert("hello"); 
   }
   //alert("hi"),undefined
8.什么是跨域？跨域的幾種實(shí)現(xiàn)方法？
 * 跨域是通過js在不同域進(jìn)行數(shù)據(jù)傳輸或者通信，當(dāng)端口號(hào)，協(xié)議，域名 不同的情況下，使用ajax是拿不到數(shù)據(jù)的。
 * 解決方法
 * 使用window.name進(jìn)行跨域,
    a.html頁(yè)面,比如說域名是www.abc.com/a.html;這里需要注意的是 數(shù)據(jù)只能是字符串形式。
  
 
  ```
   b.html頁(yè)面，比如說www.baidu.com/b.html
 
  ```
  
  
  
  
  ```
用H5 window.postMessage,可自行百度。
9.判斷當(dāng)前瀏覽器的類型
var useAgent = window.navigator.useAgent;

if(useAgent.indexOf("Chorme")){
  alert("是Chorme瀏覽器")
};
if(useAgent.indexOf("Safari")){
  alert("是Safari瀏覽器")
};
if(useAgent.indexOf("Firefox")){
  alert("是Firefox瀏覽器")
};

 主要涉及的知識(shí)點(diǎn) 是考察window對(duì)象下的navgator對(duì)象的useAgent屬性，得到是字符串，返回最字符串進(jìn)行操作。
HTML5，CSS3初級(jí)，中級(jí)面試題

CSS3新特性有哪些？請(qǐng)做說明。不少于5條


選擇器類(稍微特別一點(diǎn)的)
* first-child
* last-child
* nth-child
* :cheecked



文字樣式


@font-face
 
       @font-face{
       font-family:BorderWeb;
       src:url(BorderWeb.eot)
       }
       .border{
       font-family:"BorderWeb"
       }
    


text-overflow & white-space & word-warp
       
        .ellipsis{text-overflow:ellipsis; 
        overflow:hidden;
        white-space:nowrap; 
        width:200px; background:#ccc;}
 

text-decoration為文本添加下劃線 默認(rèn)值none
邊框，背景 樣式
圓角 border-radius,四個(gè)參數(shù) 從上左到下右 4個(gè)方位

漸變，


線性漸變.

linear-gradient(left,#333,#999)(默認(rèn)是從上到下)
第一個(gè)參數(shù)為方位，可以是對(duì)角,如left to。也可以是角度，注意這里是順時(shí)鐘，如180deg就是從下到上




徑向漸變.
radial-gradient(center,circle,yellow 10%,bule 30%)

陰影，box-shadow.反射,box-reflect
背景，background-clip

布局

flex布局
多列布局column,參數(shù)column-count,column-gap,column-rule





動(dòng)畫,過渡
  * transition
  * transform
  * animation







HTML有哪些新特性？


新增標(biāo)簽