2019 前端面試押題卷（1）【初級】

時間 2019-11-07

標籤前端面試初級欄目快樂工作简体版

原文原文鏈接

CSS樣式

1.請解釋一下CSS3的Flexbox(彈性盒佈局模型)，以及適用場景？

回答要點 Flexbox是什麼javascript

答：Flexbox是一種新的佈局方式，目的是提供一種更加高效的方式對元素進行佈局、對齊、分配空白空間。css

在元素的尺寸未知或動態變化(如%百分比)時也能正常的工做。前端

詳細補充：java

在彈性模型下，會調整元素的尺寸和順序來最好地填充全部可用的空間。當容器的尺寸因爲屏幕大小或窗口尺寸發生變化時，其中包含的元素也會被動態地調整。ajax

舉例：正則表達式

例如，當容器尺寸變大時，其中包含的元素會被拉伸以佔滿多餘的空白空間；當容器尺寸變小時，元素會被縮小以防止超出容器的範圍。json

彈性盒佈局是與方向無關的。數組

對比傳統佈局模型：

傳統的佈局方式中，block 佈局是把塊在垂直方向從上到下依次排列的；瀏覽器

而 inline 佈局則是在水平方向來排列。緩存

彈性盒佈局並無這樣內在的方向限制，能夠由開發人員自由操做。

使用場景：

在不一樣的屏幕下，保證同一行的全部元素可以按照必定的比例填充整行佈局。

舉例：

在進行浮動時，增長了元素的填充和邊框也能動態調整浮動元素在整行的寬度，不至於被擠到下一行顯示。

2.用css建立一個三角形的原理是什麼，並寫出相應的代碼？

回答要點：是什麼

css三角採用的是均分原理，以矩形的對角線分配出上、右、下、左4個三角形(在答題紙上畫出圖形)

3.有哪些CSS定位方式？每一個定位方式介紹一下。

回答要點：定位有哪些，怎麼用

position:static

元素遵循常規流。top 、right、bottom、left等屬性不會被應用

position:relative

對象遵循常規流，而且參照自身在常規流中的位置經過 <' top '>，<'right '>，<' bottom '>，<'left '>屬性進行偏移時不影響常規流中的任何元素。

position:absolute

對象脫離常規流，使用 <' top '>，<' right '>，<' bottom '>，<' left '>等屬性進行絕對定位，盒子的偏移位置不影響常規流中的任何元素，其margin不與其餘任何margin摺疊。

position:fixed：

對象脫離常規流，使用 <' top '>，<'right '>，<' bottom '>，<'left '>等屬性以窗口爲參考點進行定位，當出現滾動條時，對象不會隨着滾動。

CSS樣式3新增的

position:center：

對象脫離常規流，使用 <' top '>，<'right '>，<' bottom '>，<'left '>等屬性指定盒子的位置或尺寸大小。盒子在其包含容器垂直水平居中。盒子的偏移位置不影響常規流中的任何元素，其margin不與其餘任何margin摺疊。

JavaScript

1.判斷字符串是不是這樣組成的，第一個必須是字母，後面能夠是字母、數字、下劃線，總長度爲5~20

使用正則表達式

var reg=/^[a-zA-Z]\w{4,19}$/;
reg.test("要判斷的字符串");複製代碼

2.截取字符串hnfcedu.com中的.com

方法1：

var src ="hnfcedu.com";
var index = src.indexOf(".");
var str = src.substring(index + 1);
console.log(str);複製代碼

方法2：

var reg=/\.com/
var word =reg.exec("hnfcedu.com")[0];
console.log(word)複製代碼

3.判斷一個字符串中出現次數最多的字符，統計這個次數

方法一：

function count(str){
    var words=[str[0]];//初始化數組，爲字符串的第一個字母
    var numbers=[1]; //統計系統字符的數目
    for(var i=1;i<str.length;i++){//循環遍歷全部的字母
        var w=str[i];//獲取字符
        var flag=false; //設置是否出現了相同的標記
        for(varj=0;j<words.length;j++){//匹配查找出來的元素
            var w2=words[j];
            if(w2==w){//有相同的元素
                numbers[j]+=1; //累計數目
                flag=true;
                break;//退出循環
            }
        }
        if(!flag){
            words.push(w);//添加新字符
            numbers.push(1); //添加數目
        }
    }
    //構建數目最多的字母對象信息
    var max={word:words[0],num:numbers[0],index:0};
    for(var i=1;i<numbers.length;i++){
        if(max.num<numbers[i]){
            max.num=numbers[i];
            max.index=i;
        }
    }
    max.word=words[max.index];
    return max;
}複製代碼

方法2：正則表達式

function count(str) {
    str =str.split('').sort().join("");
    var reg = /(.)\1{0,}/igm;
    var words = str.match(reg);
    var maxLen = words[0];
    for (var i = 1; i < words.length;i++) {
        if(maxLen.length<words[i].length){
            maxLen=words[i];
        }
    }
    return maxLen;
}複製代碼

4.如何顯示/隱藏一個DOM元素？

方法一： obj.style.visibility="visible"; obj.style.visibility="hidden";

方法二： obj.style.display="block";obj.style.display="none";

方法三： obj.style.fontSize=0;obj.style.height=0;

5.如何打印日誌？

console.log("Loglevel");//普通日誌

console.debug("Debuglevel");//調試級別

console.info("Infolevel");//普通消息

console.warn("Warnlevel");//警告信息

console.error("Errorlevel");//錯誤日誌

6.JavaScript有哪幾種數據類型

Number

String

Boolean

Null

Undefined

Object

7.請給出異步加載JS方案，很多於兩種

這個問題我的理解有歧義，是異步加載數據有幾種js方案仍是異步加載js文件有幾種方案？

第一種理解的方案，異步加載數據的js方案

方案一：使用XMLHttpRequest或是 ActiveXObject(IE)

方法二：使用Worker

方法三：使用Jquery $.ajax()

第二種理解：異步加載js，這H5新增的

方法一：async

例如：<script type="text/javascript"src="demo_async.js" async="async"></script>

方法二：defer，只支持IE

例如：<script type="text/javascript"defer="defer"></script>

8.多瀏覽器檢測用過什麼工具？

本人採用的瀏覽器兼容測試工具是 IETester和BrowserShots

9.JavaScript中如何對一個對象進行深度克隆

function deepClone(obj){
    var cloneObject={};//建立空對象
    for(var k in obj){
        cloneObject[k]=obj[k];
    }
    return cloneObject;
}複製代碼

10.前端開發有哪些優化方案

我用到過的優化有：

優化1：合併請求

合併請求的主要目的是減小瀏覽器對服務器發起的請求數，從而減小在發起請求過程當中花費的時間。

優化2：域名拆分

域名拆分主要是爲了增長瀏覽器下載的並行度，讓瀏覽器能同時發起更多的請求，

優化3：異步加載

異步加載圖片、js、數據等，減小IO的阻塞

優化4：使用緩存

將數據緩存在本地，減小數據的請求

優化5：壓縮文件

對js、css文件進行壓縮

11.請編寫一個JavaScript函數parseQueryString,他的用途是把URL參數解析爲一個對象，

如：var url = "http://www.hnfcedu.com/eg?key0=0&key1=1&key2=2";

答：

var url = "http://www.hnfcedu.com/eg?key0=0&key1=1&key2=2";

function parseQueryString(url){
    var index=url.indexOf("?");
    var paraStr=url.substring(index+1);
    var json=eval("({"+paraStr.replace(/=/igm,":\"").replace(/&/igm,"\",")+"\"})");
    console.log(json);
    return json;
}
parseQueryString(url);
// { key0: '0', key1: '1', key2: '2' }複製代碼

12.定義兩個類，B繼承A

function A(){
}
function B(){
}
B.prototype=new A();複製代碼

13.什麼是閉包？下面這個ul，如何點擊每一列的時候alert其index？

<ul id="test">
    <li>這是第一條</li>
    <li>這是第二條</li>
    <li>這是第三條</li>
</ul>複製代碼

閉包：在JavaScript中局部變量被一個函數引用，變量也是函數中的一部分。

代碼實現：

<script>
    var ul = document.getElementById('test');
    var list = ul.children;
    for(var i=0; i< list.length; i++){
        (function (i) {
            list[i].onclick = function () {
                console.log(i);
            }
        })(i);// 閉包的行爲
    }
</script>複製代碼

14.有一個表格，當點擊表頭的屬性區域，使表格的信息進行排序切換功能，第一次點擊爲降序排列，再一次點擊爲升序排列。

<table border="1" align="center" width="400"id="tab">
<thead>
<tr>
    <td id="name">姓名</td>
    <td id="power">力量</td>
    <td id="quick">敏捷</td>
    <td id="smart">智力</td>
</tr>
</thead>
<tbody>
<tr id="div0">
    <td>衆神之王</td>
    <td>19</td>
    <td>15</td>
    <td>20</td>
</tr>
<tr id="div1">
    <td>月之騎士</td>
    <td>15</td>
    <td>22</td>
    <td>15</td>
</tr>
<tr id="div2">
    <td>流浪劍客</td>
    <td>23</td>
    <td>15</td>
    <td>14</td>
</tr>
<tr id="div3">
    <td>德魯伊</td>
    <td>17</td>
    <td>24</td>
    <td>13</td>
</tr>
</tbody>
</table>複製代碼

答：

<script type="text/javascript"> 
   var tab =document.getElementById("tab");
    var tbody = tab.tBodies[0];//獲取tbody對象
    var bodies = tbody.children;//獲取以對象
    var trs = []; 
   for(var i = 0; i < bodies.length; i++) {
        trs.push(bodies[i]);//對象轉數組 
   }
   var cells = tab.tHead.rows[0].cells;//獲取全部的頭部信息
    for (var i = 0; i < cells.length; i++) {
        cells[i].onclick = function () {
            //獲取點擊對象的排序類型 
           var sortType = this.sortType;//獲取點擊單元格的排序類型[自定義屬性 sortType]
            if (sortType) {//自定義屬性存在
                sortType= sortType =="asc" ? "desc" : "asc";//改變排序類型
            } else {
                sortType = "asc";//默認升序
            } 
           this.sortType = sortType;//添加自定義屬性
            //獲取單元格的序號
            var index = this.cellIndex;
            var results = trs.sort(function (a,b) {//自定義排序邏輯
                var aValue =a.cells[index].innerText;//獲取對應單元格的內容
                var bValue =b.cells[index].innerText;//獲取對應單元格的內容
                var cValue=aValue.localeCompare(bValue);//經過比較決定排序規則
                return sortType =="asc"? cValue:-cValue;//作升序或降序排列 正數爲升序，負數爲降序
            });            tbody.innerHTML = "";
            for (var i = 0; i < results.length;i++) {
                tbody.appendChild(results[i]); 
           }
        }
    }
</script>複製代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。