整理下《前端江湖面試》對本身有益的題目。

時間  2019-11-10
標籤 整理 前端江湖面試 本身 有益 題目 欄目 快樂工作 简体版
原文   原文鏈接

面試題目彙總

前言

近期在找工做，也在讀 前端面試江湖 這本書，書中整理了不少基礎的面試題目，在書中也發現了一些錯誤。
好記性不如爛筆頭，因而整理下對本身有益的題目，都是一些較爲基礎的題目,後期還會更新。時時刻刻勉勵本身，注重基礎。
如今在找工做，初中級前端，若有哪位熱心的仁兄公司在招前端，但願@我一下，目標廣州，前端路很長，但願一塊兒努力向前。css

js初級之操做字符串

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

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

  2. 判斷字符串是不是這樣組成的，第一個必須是字母，後面的可使字母，數字，下劃線，總長度爲5-20。前端

    • 考察知識點，正則。[a-zA-Z]是匹配全部字母，w表示匹配任意字母，數字，下劃線。{n}表明重複幾回，{n,m}表明重複至少n次，至多m次。
      var a = /^[a-zA-Z]{1}\w{4，19}/

  3. 給定一個字符串 "IamWangZhiJun",要求查找裏面的字符串Wang。vue

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

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

  4. 如何實現一個刪除字符串左邊爲空白字符的方法。node

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

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

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

  5. JavaScript 的typeof 都返回那些數據類型。css3

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

  6. 請定義一個函數，實現字符串的反轉。web

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

8. 有一個字符串 abcd-ef-ghi,請用js把它處理成ghi&ed&abcd。
  * 知識點，字符串和數組之間的裝換。
var a ="abcd-ef-ghi";
        var b = a.split("-");
        var result = b.reverse().join("&")
        ```

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

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

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

    function str(words) {
     words = words.split(" ");
     for(var i = 0;i<words.length;i++){
       words[i] = words[i].charAt(0).toUpperCase + words[i].slice(1);
     }
     return words;
  }
  var words = "wang zhi j un";
  str(words);

JS初級之變量,DOM，循環語句

  1. JS如何檢測變量是一個string類型？請寫出函數實現。

    function isString(str){
      if(typeof(str) === "string" || str.constructor === String){
         return true;
         }else{
          return false;
          }
      }
      var str = "hello world"
    • 這裏須要注意的是也要判斷這個值的數據類型。

  2. 請說明javaScript中的nodeName,nodeVaule,nodeType的區別

    *   nodeName 表示節點的名稱
    *   元素節點的nodeName是標籤名稱
    *   屬性節點的nodeName是屬性名稱
    *   文本節點的nodeName是#text
    *   文檔節點的nodeName是#document
*   nodeVaule 表示文本內容
    *   對於文本節點，nodeVaule屬性包含文本
    *   對於屬性節點，nodeValue屬性包含屬性值
*   nodeType 屬性返回節點的類型,經常使用的以下
    *   元素類型對應的節點類型爲1
    *   屬性類型對應的節點類型爲2
    *   文本屬性對應的節點類型爲3

  3. 下列代碼執行後，結果是什麼

    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,這裏也說明逗號表達式返回的結果是由最後一個表達式決定的。

  4. 統計從1-400之間的天然對數中含有多少個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)

  5. js中基本數據類型有哪些？本地對象，內置對象，宿主對象有那些？

    • 基本數據類型

      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中級之函數

  1. 編寫一個函數，參數爲一個元素，返回指定元素的第一個元素，函數越簡單越好

    function getFirst(el){
    var nodes = el.children;
    return nodes.length!=0?nodes[0]:null;
    }

  2. 簡述JavaScript中this的理解。

    • this表明函數執行的時候，自動生成一個內部對象，在函數內使用
    • this指的是調用函數的那個對象

    • 一下討論this的四種用法

      • 純粹的函數調用，說明此時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

      • 做爲構造函數的調用，說明此時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,當參數爲空的時候，默認調用全局
      o.m.apply(o)//1

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

    • 閉包就是可以讀取其餘函數內部變量的函數。

    • 閉包特性

      • 閉包外層是一個函數
      • 閉包內層也是一個函數
      • 閉包會return內部函數
      • 閉包返回的函數內部不能有return
      • 執行閉包後，閉包內部的變量會緩存
      • 閉包只有被執行的時候纔會調用

    • 好處和壞處

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

    • 實例

      function a(){
         var i = 0;
         function b(){
           console.log(++i)
           // i=null 解決內存泄漏 
         }
         return b;
       } 
       var c = a();//執行a函數
       c()//執行b函數，也就是執行閉包，結果爲1
       c()//2
       …

  4. IE和Firefox處理兼容。

    • 綁定事件監聽

      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()}
               }

  5. 將$(".red").attr("sth",4)裝換成Js實現

    • 知識點，獲得的是數組，要遍歷。

      var a = document.getElementsByClassName("red"); 
for(var i =0;i<a.length;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.什麼是跨域？跨域的幾種實現方法？
 * 跨域是經過js在不一樣域進行數據傳輸或者通訊，當端口號，協議，域名 不一樣的狀況下，使用ajax是拿不到數據的。
 * 解決方法
 * 使用window.name進行跨域,
    a.html頁面,好比說域名是www.abc.com/a.html;這裏須要注意的是 數據只能是字符串形式。
<script>window.name = "我是a.html頁面的數據，我是跨域請求的數據"</script>
  ```
   b.html頁面，好比說www.baidu.com/b.html
 
  ```
  <iframe id="proxy" src="www.abc.com/a.html" style="display:none" onload="getdata()"></iframe>
  
  <script>
  var iframe = document.getElementById("proxy");
  function getdata(){
  iframe.onload = function (){
   var data = iframe.contentWindow.name;
   alert(data);
   }
   iframe.src = "about:blank";
  }
  </script>
  
  ```
  • 用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初級，中級面試題

  1. 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,四個參數 從上左到下右 4個方位

      • 漸變，

        • 線性漸變.

          • linear-gradient(left,#333,#999)(默認是從上到下)

          • 第一個參數爲方位，能夠是對角,如left to。也能夠是角度，注意這裏是順時鐘，如180deg就是從下到上

        • 徑向漸變.

          • radial-gradient(center,circle,yellow 10%,bule 30%)
        • 陰影，box-shadow.反射,box-reflect
        • 背景，background-clip

        • 佈局

          • flex佈局
          • 多列布局column,參數column-count,column-gap,column-rule

      • 動畫,過渡

        * transition
  * transform
  * animation

  1. HTML有哪些新特性？

    • 新增標籤

      • <header>
      • <footer>
      • <nav>
      • <section>
      • <artical>
      • <aside>
      • <figure> <figcaption>
      • <details>
    • 用於繪畫的 canvas 元素
    • 用於媒介回放的 video 和 audio 元素
    • 對本地離線存儲的更好的支持 Local storge，sessionStorage
    • 新的表單控件，好比 calendar、date、time、email、url、search，移動端體驗更好
    • 新增獲取地理位置，上傳文件等API
    • 新的跨域通訊機制 window.postMessage

3.localStorage,sessionStorage,cookie 的區別

  • localStorage 用於持久化的本地存儲，關閉頁面還有，除非主動刪除，不然一直存在，存儲量大
  • sessionStorage 不是持久化的本地存儲，關閉頁面就不會有
  • cookie 是與服務器交互的，做爲http規範的一部分而存在，在瀏覽器和服務器之間來回，存儲量小

4.如何觸發頁面的迴流reflow,重繪repaint,解釋下它們的基本原理

  • DOM元素的修改，添加，刪除。
  • 僅改變DOM元素的字體顏色，只有repaint
  • 應用新的樣式或者修改任何元素外觀的屬性
  • resilze瀏覽器窗口，滾動
  • 讀取元素 如(offsetTop,offsetLeft等等)

  • 原理解析

    • repaint 重繪 是當一個元素的外觀被改變的時候產生重繪。
    • reflow 重排（迴流），是當DOM發生改變，如寬高等。若是reflow 的頻繁，會致使GPU使用率上升

    • 減小性能影響的方法

      1. 減小對DOM的操做，如 查詢時候將值賦值給局部變量，減小循環對DOM的操做。
  2. 使用JSON格式來進行數據交換

5.transition的侷限性

  • transition 須要事件觸發
  • transition 是一次性的，不能重複，除非一在觸發
  • transition 只有開始和結束2種狀態，不能定義中間狀態
  • transition 只能定義一個屬性的變化，不能涉及多個屬性。
  • transition 不能識別display的變化。

6.如何優化頁面速度，提升頁面響應。

  • 取消重定向，緣由是網站都會首先加載一個空白的頁面，而後在定向到另外的頁面。
  • 合併javaScript
  • 合併css
  • 使用css sprite
  • 啓用GZIP
  • css,js引入文件位置，css放在<head>裏面，js放在尾部
  • img標籤要添加alt屬性
  • 清除無效的a標籤，並給a標籤加上title屬性
  • 緩存靜態資源
  • 不用iframe/frame
  • 減小DNS域名查找時間，將DNS的時間設置爲較低的水平，好比60-100ms進行一次DNS查詢

7.如何提升前端性能

  • 用webStorage代替cookie,能夠減小HTTP請求的數據量
  • 使用css3動畫，開啓GPU加速。translate3d()
  • 緩存HTML標記

8.如何對網站的文件和資源進行優化

  • 文件合併
  • 文件最小化
  • 使用cdn託管
  • 緩存的使用

9.請簡單說明浮動和絕對定位的區別和應用。

  • 兩者都會脫離文檔流，並自動轉換爲塊級元素。不一樣的是絕對定位的元素是按照瀏覽器的左上角計算的或者對設置相對定位的父元素開始的，它的脫離文檔流不佔據空間，所以會產生覆蓋頁面上的其餘元素，故有了z-index屬性。
  • 浮動元素仍是基於正常的文檔流，只是在文檔流中抽出，並儘量的移動到最左側或者右側，文字內容會圍繞在浮動元素周圍，仍然在文檔流中的元素會替補原先的空間。

10.說說移動端的兼容和常見問題解決方案(整理了本身用過的)

1. meta 元標籤基礎知識
  * 將窗口調整爲設備窗口，並禁止用戶縮放
      ```
      <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"
      ```
  * 忽略頁面中的數字識別爲電話號碼,Android平臺對郵箱的識別
      ```
      <meta name="format-detection",content="telephone=no">
      ```
       ```
       <meta name="format-detection",content="email=no">
       ```   
  * 當網站添加到主屏幕快速啓動方式,以及頂部導航條樣式
       
       ```
       <meta name="apple-mobile-wep-app-capable",content="yes">
       ```
       ```
       <meta name="apple-mobile-web-app-status-bar-sytle",content="black">
       ```
2. 移動端字體
 * 中文使用默認字體，英文用Helvetica
3. 觸摸事件的響應順序
      ```
      一、ontouchstart 
      二、ontouchmove 
      三、ontouchend 
      四、onclick
      ``` 
      
4. Retina屏幕下問題解決
  * 移動端的視覺稿一般會設計爲傳統PC的2倍，一般把設計稿乘以2/1獲得實際書寫時候打大小
  * 圖片則設置爲 實際寬高的50%,如 background-position:50% 50%;
5. IOS系統下被觸摸的時候有半透明遮罩
      ```
      a,button,input,textarea{-webkit-tap-heightlight-color:rgb(0,0,0,0);}
      ```
6. webkit表單元素的默認外觀怎麼重置
      ```
      .css{-webkit-appearance:none;}
      ```
7. 打電話，發郵件
      ```
      <a href="tel:020-62682400">打電話給020-62682400</a>
      ```
      ```
      <a href="email:13249791010@163.com">13249791010@163.com</a>
      ```
      
8. 移動端模擬hover效果，添加ontouchstart,ontouchend事件

  ```
   var btnBlue = document.querySelector(".btn-blue");
   btnBlue.ontouchstart = function(){
   this.className = "btn-blue btn-blue-on"

}

btnBlue.ontouchend = function(){
   this.className = "btn-blue"

}

9. ios下禁止調整字體大小
body{-webkit-text-size-adjust:100%}
     ```

10. ios下輸入框取消大寫
  ```

<input autocapitalize="off" autocorrect="off">

11. css3動畫儘量地使用合成屬性transform和opacity來設計CSS3動畫，不使用position的left和top來定位,用translate3D開啓加速    
  
 11.說說移動端2欄佈局，左側定寬，右側自適應的幾種方法
   * HTML代碼
<div class="main">    
  <div class="left">左側固定</div>
  <div class="right">右側自適應<div>
  </div>
  ```

  • 第一種方法，浮動+定位(等高佈局)

    .main{
position:relative;
padding-left:100px;
display:inline-block;

}
.left{
position:relative;
float:left;
width:100px;
margin-left:-100px;
  
}
.right{
   float:left;
}
 .right,.left{
 height:200px;
 min-height:200px;
 height:auto !important;
 }
 ```

  • 第二種，浮動(等高佈局)

    .main{
overflow:hidden;
}
.left{
float:left;
width:100px;
padding-bottom:9999px;
margin-bottom:9999px;
}
.right{
margin-left:100px;
padding-bottom:9999px;
margin-bottom:9999px;
}
.right,.left{
  height:200px;
  min-height:200px;
  height:auto !important;
  }

  • 第三種方法，定位+margin

    .left{
position:absolute;
top:0;
left:0;
width:100px;
height:400px;
}
.right{
margin-left:100px;
height:400px;
}

  • 第四種方法，定位

    .left{
position:absolute;
top:0;
left:0;
width:100px;
height:400px;
}
.right{
position:absolute;
top:0;
left:100px;
height:400px;
}

  • 第五種方法，flex

    .main{
display:flex;
}
.left{
width:100px;
height:400px;
}
.right{
flex:1;
height:400px;
}

  • 第六種方法 table

    .main{ 
display:table;
width:100%;
}
.left{
display:table-cell
width:100px;
height:400px;
}
.right{
display:table-cell
}

12.websocket是什麼？和http有什麼關聯(只是基於本身的理解，暫無相關項目經驗)

  • websocket屬於H5新增的，websocket是基於http的,和http沒有基本關係(或者說交集不大)，http只負責websokect的鏈接
  • http不是持久性的協議，websocket是持久性的協議，在http中一個request對應一個response,也就說明了 http的缺點 http是被動的，服務器端不能主動發起請求
  • ajax的輪詢，每隔幾秒發起一個請求給服務端，這樣比較消耗內存,須要更快的響應速度
  • polling 則是採用阻塞模型(打電話，若是沒信息值一直不掛)，則是須要更多的電話，ajax的輪詢和 polling 的做用是實時推送
  • websokect解決的問題是，讓服務端有主動性，只須要消耗一次的HTTP請求

先後端分離的理解

  • 近期先後端分離特別熱門，一直搞不懂先後端分離是個什麼鬼，有個什麼做用。只知道之前前端把寫好的頁面發給後端，後端套用接口，這樣就比較容易出現問題，工做量也比較繁瑣。當我本身用vue作webapp，寫json數據結構的時候，才稍微有點意識，之前直接是把數據寫死或者從後臺調用在html上顯示，可是在用了vue以後，你是否是不多看見在html模板裏面有直接的數據顯示！！！基本都是先後端經過json在交流，前端用vue去實現組件化，工程化，可是有一個缺點是不利於seo優化，你html裏面都沒關鍵字怎麼優化。最後關鍵一點，後端值負責數據，前端值負責顯示。

  • 分離的好處

    • 之前崇尚全棧工程師，一我的不但管前端而且管後端，甚至數據庫。長期以往，代碼的解耦性可能不是很好。
    • 先後端分離之後，先後端值專一於只本身的開發工做，打造一個全棧式的團隊。特色之二是實現先後端的解耦，先後端只須要按照溝通好的參數和接口，只要這個不改變，也只要前端人員修改代碼，減小工做量。

  • 要不要先後端分離，分爲三點。

    • 輕前端頁面

      • 佈局簡單，樣式較少，無css動畫，只有少許的業務邏輯，只須要在不一樣終端兼容

    • 重前端頁面

      • 頁面佈局複雜，樣式多，css動畫多，有複雜的業務代碼，須要在不一樣終端和瀏覽器上作兼容。

    • 先後端均衡

      • 頁面佈局始終，樣式適中，少量動畫，業務邏輯較爲簡單，且只須要在不一樣終端上兼容
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程