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

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

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

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

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

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

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

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

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

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

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

知識點2，量詞符和貪婪模式，？表示0次或者1次{0，1}，*表示0次或者多次{0，}，+表示1次或者多次{1,}。默認情況下匹配貪婪模式。

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

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

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

請定義一個函數(shù)，實現(xiàn)字符串的反轉。

知識點，主要是把字符串從末尾開始的每一個元素截取后，在重新組成一個新字符串，用到的方法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(),返回匹配的第一個位置。
      *   match()，返回一個數(shù)組，成員為匹配的字符串。
      *   length(),返回字符串的長度
    
 * 截取，拼接,替換類
      *    slice(),從原字符串中取回字符串并返回,第一個參數(shù)為起始位置，第二個參數(shù)為結束位置。
      *    substr(),從原字符串中取回字符串并返回，第一個參數(shù)是子字符串的開始位置，第二個參數(shù)是子字符串的長度。
      *    concat(),方法用于連接兩個字符串，返回一個新字符串，不改變原字符串。
      *    replace(),第一個參數(shù)為被替換的內容，第二個參數(shù)為要替換的內容，一般只匹配一個。
      *    charAt()方法返回指定位置的字符，參數(shù)是從0開始編號的位置。
      *    trim()
 *    轉換類
      * split(),第一個參數(shù)為起始位置 第二個參數(shù)為限定放回數(shù)組的成員數(shù)，注意，第一個參數(shù)如果為空，則返回數(shù)組的成員是原字符串的每一個字符。此方法會將字符串裝換為數(shù)組。

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

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

請編寫代碼拓展JavaScript中string對象，讓其有一個方法刪除字符串中所有英文句號"."。

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

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

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


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


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


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


下列代碼執(zhí)行后，結果是什么
        
        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

知識點，在for語句中條件用逗號隔開，就相當于“并且”。
var t =(4,5,6),console.log(t) //6,這里也說明逗號表達式返回的結果是由最后一個表達式決定的。



統(tǒng)計從1-400之間的自然對數(shù)中含有多少個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ù)據類型有哪些？本地對象，內置對象，宿主對象有那些？


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


本地對象(常用)



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


內置對象
簡單的說，內置對象是本地對象的一種，其中包含2種對象，Math,Global(isNaN,parseInt,parseFloat)


宿主對象
   所有BOM,DOM都是宿主對象
   其中BOM常用對象有

localtion
navigation
screen
history



JS中級之函數(shù)


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


簡述JavaScript中this的理解。

this代表函數(shù)執(zhí)行的時候，自動生成一個內部對象，在函數(shù)內使用
this指的是調用函數(shù)的那個對象

一下討論this的四種用法


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


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

 


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


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








什么是閉包？閉包的特性？對頁面有什么影響？好處和壞處？請寫出一個閉包的簡單實例？

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

閉包特性

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



好處和壞處

方便上下文調用
加強封裝性
壞處 浪費內存



實例
       function a(){
         var i = 0;
         function b(){
           console.log(++i)
           // i=null 解決內存泄漏 
         }
         return b;
       } 
       var c = a();//執(zhí)行a函數(shù)
       c()//執(zhí)行b函數(shù)，也就是執(zhí)行閉包，結果為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對象
function getEvent(e){
return e ? e : windowm.event;
}
function getTarget(e){
return e.target||e.srcElement
}
//阻止默認和冒泡
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實現(xià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這里指向一個對象，`var b =a ` 則是將b也指
 向這個對象，第三行代碼，實際是已經不共享對象了，a已經改寫了，而b.x里面則添
 加了x = {n:2}，故有上結果。
7. Boolean對象和Boolean值
 
var x = new Boolean(false);
   if (x) {
   alert("hi");
   } 
   var y = Boolean(0);
   if (y) {
   alert("hello"); 
   }
   //alert("hi"),undefined
8.什么是跨域？跨域的幾種實現(xiàn)方法？
 * 跨域是通過js在不同域進行數(shù)據傳輸或者通信，當端口號，協(xié)議，域名 不同的情況下，使用ajax是拿不到數(shù)據的。
 * 解決方法
 * 使用window.name進行跨域,
    a.html頁面,比如說域名是www.abc.com/a.html;這里需要注意的是 數(shù)據只能是字符串形式。
  
 
  ```
   b.html頁面，比如說www.baidu.com/b.html
 
  ```
  
  
  
  
  ```
用H5 window.postMessage,可自行百度。
9.判斷當前瀏覽器的類型
var useAgent = window.navigator.useAgent;

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

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

CSS3新特性有哪些？請做說明。不少于5條


選擇器類(稍微特別一點的)
* 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為文本添加下劃線 默認值none
邊框，背景 樣式
圓角 border-radius,四個參數(shù) 從上左到下右 4個方位

漸變，


線性漸變.

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




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

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

布局

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





動畫,過渡
  * transition
  * transform
  * animation







HTML有哪些新特性？


新增標簽