2018我的面試記錄

時間 2019-11-11

原文原文鏈接

首先，先點一首涼涼送給本身。(sadjavascript

今天面試的流程是一面（和善的中年大叔）二面（面向福氣的技術總監）三面人事（沒面到人事已經flop html

好，先總結一下一面的前端問題，氣氛很好，都是些基礎的問題，想到什麼就寫什麼吧。前端

一、JS怎麼獲取異常？java

JavaScript 異常的處理

編程語言都會提供處理異常的方法，就是JavaScript就是 try catch 語句，經過try方法捕抓異常，捕抓到異常後會退出try 代碼塊（即{//code}），而後執行catch語句，catch有一個Error對象的實參，在catch代碼塊能引用這個Error對象。angularjs

try{
    //your code 
}catch(e){
    //while raise a error ,will exc this code
}
catch(e){
    //while raise a error,and pre catch has beed run  ,will exc this code
}
catch(e){
    //while raise a error,and pre catch has beed run  ,will exc this code
}final{
    //whether raise a error, this code will be run 
}

try語句容許咱們定義在執行時進行錯誤測試的代碼塊。
catch 語句容許咱們定義當 try 代碼塊發生錯誤時，所執行的代碼塊。
finally 語句在 try 和 catch 以後不管有無異常都會執行。
注意： catch 和 finally 語句都是可選的，但你在使用 try 語句時必須至少使用一個。es6

參考：http://blog.csdn.net/hulk_oh/article/details/52957962web

二、call()和apply()的區別面試

avaScript中的每個Function對象都有一個apply()方法和一個call()方法，它們的語法分別爲：編程

/*apply()方法*/
function.apply(thisObj[, argArray])

/*call()方法*/
function.call(thisObj[, arg1[, arg2[, [,...argN]]]]);

它們各自的定義：canvas

apply：調用一個對象的一個方法，用另外一個對象替換當前對象。例如：B.apply(A, arguments);即A對象應用B對象的方法。

call：調用一個對象的一個方法，用另外一個對象替換當前對象。例如：B.call(A, args1,args2);即A對象調用B對象的方法。

它們的共同之處：

都「能夠用來代替另外一個對象調用一個方法，將一個函數的對象上下文從初始的上下文改變爲由thisObj指定的新對象」。

它們的不一樣之處：

apply：最多隻能有兩個參數——新this對象和一個數組argArray。若是給該方法傳遞多個參數，則把參數都寫進這個數組裏面，固然，即便只有一個參數，也要寫進數組裏。若是argArray不是一個有效的數組或arguments對象，那麼將致使一個TypeError。若是沒有提供argArray和thisObj任何一個參數，那麼Global對象將被用做thisObj，而且沒法被傳遞任何參數。

call：它能夠接受多個參數，第一個參數與apply同樣，後面則是一串參數列表。這個方法主要用在js對象各方法相互調用的時候，使當前this實例指針保持一致，或者在特殊狀況下須要改變this指針。若是沒有提供thisObj參數，那麼 Global 對象被用做thisObj。

實際上，apply和call的功能是同樣的，只是傳入的參數列表形式不一樣。

參考：https://www.cnblogs.com/lengyuehuahun/p/5643625.html

三、H5的新標籤

1. H5新標籤

語義標籤：

<article>定義文章</article>
<aside>定義文章側邊欄</aside>

<figure>定義一組媒體對象以及文字內容</figure>
<figcaption>定義figure的標題</figcaption>

佈局頁面時用的語義標籤：
<nav>定義導航</nav>
<header>頭部</header>
<section>定義文檔中的區段區域</section>
<footer>尾部</footer>

input其餘的類型：
1. text 文本輸入框
2. password 密碼
3. button 按鈕
4. checkbox 複選
5. radio 單選
6. submit 提交
7. reset 重置
8. file 文件
9. email 輸入郵箱地址檢測@
10. url URL地址
11. number 只能輸入數字還有e
12. range 範圍默認0~100
required 必須填寫
placeholder 佔位符

功能標籤：
<video src="" autoplay自動播放 controls控制播放 loop是否重複播放 preload是否自動加載>定義視頻</video>
<audio src="">定義音頻</audio>
<mark>標記</mark>
<iframe src="" frameborder="0">內嵌網頁框架</iframe>
<canvas>定義圖形提供畫布</canvas>

2.流式佈局
即百分比佈局。（寬度，高度，邊距，rem，定位值）
尺寸百分比 = 目標元素的寬度（高度）/ 父級的寬高
定位值百分比 = 目標元素的定位值 / 父級的寬高
margin和padding / 父級的寬度

em rem
em: 針對父級來設置自身
rem: 針對html

3.媒體查詢
能夠根據不一樣屏幕尺寸，動態的修改網頁佈局以及樣式，是響應式網站不可缺乏的一部分
only 能夠省略多個條件用and相連
@media only screen and (min-width:500px) and (max-width:700px){......}
link:
<link rel="stylesheet" href="" media="screen and (min-width:500px) and (max-width:700px)">

響應式網站：由兩種辦法完成響應式網站, 流式佈局和媒體查詢，一般狀況下相輔相成共同完成響應式網站。

4.前綴
騰訊：國內惟一有本身內核的公司，X5。（X5的瀏覽器內核是基於早起的webkit內核開發出來的，然後本身優化。QQ瀏覽器微信）
-webkit-: 谷歌前綴，谷歌內核（獵豹 360 safari）
-o-: 歐朋（已經摒棄本身的內核，轉戰谷歌的陣營）
-ms-: 微軟 ie 斯巴達
-moz-: 火狐 ff

參考：http://blog.csdn.net/catherine_fq/article/details/51884196

四、三種如今流行框架

1、Vue.js：

其實Vue.js不是一個框架，由於它只聚焦視圖層，是一個構建數據驅動的Web界面的庫。

Vue.js經過簡單的API（應用程序編程接口）提供高效的數據綁定和靈活的組件系統。

Vue.js的特性以下：

　　 1.輕量級的框架

　　 2.雙向數據綁定

　　 3.指令

　　 4.插件化

優勢： 1. 簡單：官方文檔很清晰，比 Angular 簡單易學。

　　　　 2. 快速：異步批處理方式更新 DOM。

　　　　 3. 組合：用解耦的、可複用的組件組合你的應用程序。

　　　　 4. 緊湊：~18kb min+gzip，且無依賴。

　　　　 5. 強大：表達式 & 無需聲明依賴的可推導屬性 (computed properties)。

　　　　 6. 對模塊友好：能夠經過 NPM、Bower 或 Duo 安裝，不強迫你全部的代碼都遵循 Angular 的各類規定，使用場景更加靈活。

　缺點： 1. 新生兒：Vue.js是一個新的項目，沒有angular那麼成熟。

　　　　　2. 影響度不是很大：google了一下，有關於Vue.js多樣性或者說豐富性少於其餘一些有名的庫。

　　　　　3. 不支持IE8：

2、angularJS：

　　angularJS是一款優秀的前端JS框架，已經被用於Google的多款產品當中。

　　angularJS的特性以下：

　　　　1.良好的應用程序結構

　　　　2.雙向數據綁定

　　　　3.指令

　　　　4.HTML模板

　　　　5.可嵌入、注入和測試

　　優勢： 1. 模板功能強大豐富，自帶了極其豐富的angular指令。

　　　　　 2. 是一個比較完善的前端框架，包含服務，模板，數據雙向綁定，模塊化，路由，過濾器，依賴注入等全部功能；

　　　　 3. 自定義指令，自定義指令後能夠在項目中屢次使用。

　　　　　 4. ng模塊化比較大膽的引入了Java的一些東西（依賴注入），可以很容易的寫出可複用的代碼，對於敏捷開發的團隊來講很是有幫助。

　　　　　 5. angularjs是互聯網巨人谷歌開發，這也意味着他有一個堅實的基礎和社區支持。

　　缺點： 1. angular 入門很容易但深刻後概念不少, 學習中較難理解.

　　 2. 文檔例子很是少, 官方的文檔基本只寫了api, 一個例子都沒有, 不少時候具體怎麼用都是google來的, 或直接問misko,angular的做者.

　　　　　 3. 對IE6/7 兼容不算特別好, 就是能夠用jQuery本身手寫代碼解決一些.

　　　　 4. 指令的應用的最佳實踐教程少, angular其實很靈活, 若是不看一些做者的使用原則,很容易寫出四不像的代碼, 例如js中仍是像jQuery的思想有不少dom操做.

　　　　 5. DI 依賴注入若是代碼壓縮須要顯示聲明.

3、React：

　 React主要用於構建UI。你能夠在React裏傳遞多種類型的參數，如聲明代碼，幫助你渲染出UI、也能夠是靜態的HTML DOM元素、也能夠傳遞動態變量、甚至是可交互的應用組件。

　 React特性以下：　

　　　　1.聲明式設計：React採用聲明範式，能夠輕鬆描述應用。

　　　　2.高效：React經過對DOM的模擬，最大限度地減小與DOM的交互。

　　　　3.靈活：React能夠與已知的庫或框架很好地配合。

　　優勢： 1. 速度快：在UI渲染過程當中，React經過在虛擬DOM中的微操做來實現對實際DOM的局部更新。

　　　　　 2. 跨瀏覽器兼容：虛擬DOM幫助咱們解決了跨瀏覽器問題，它爲咱們提供了標準化的API，甚至在IE8中都是沒問題的。

　　　　　 3. 模塊化：爲你程序編寫獨立的模塊化UI組件，這樣當某個或某些組件出現問題是，能夠方便地進行隔離。

　　　　　4. 單向數據流：Flux是一個用於在JavaScript應用中建立單向數據層的架構，它隨着React視圖庫的開發而被Facebook概念化。

　　　　　 5. 同構、純粹的javascript：由於搜索引擎的爬蟲程序依賴的是服務端響應而不是JavaScript的執行，預渲染你的應用有助於搜索引擎優化。

　　　　　 6. 兼容性好：好比使用RequireJS來加載和打包，而Browserify和Webpack適用於構建大型應用。它們使得那些艱難的任務再也不讓人望而生畏。

　　缺點： 1. React自己只是一個V而已，並非一個完整的框架，因此若是是大型項目想要一套完整的框架的話，基本都須要加上ReactRouter和Flux才能寫大型應用。

參考：https://www.cnblogs.com/Zcqian/p/6843787.html

http://blog.csdn.net/haoshidai/article/details/52346865

五、ES6相關問題

箭頭操做符

若是你會C#或者Java，你確定知道lambda表達式，ES6中新增的箭頭操做符=>便有殊途同歸之妙。它簡化了函數的書寫。操做符左邊爲輸入的參數，而右邊則是進行的操做以及返回的值Inputs=>outputs。

咱們知道在JS中回調是常常的事，而通常回調又以匿名函數的形式出現，每次都須要寫一個function，甚是繁瑣。當引入箭頭操做符後能夠方便地寫回調了

var array = [1, 2, 3];
//傳統寫法
array.forEach(function(v, i, a) {
    console.log(v);
});
//ES6
array.forEach(v = > console.log(v));

類的支持

ES6中添加了對類的支持，引入了class關鍵字（其實class在JavaScript中一直是保留字，目的就是考慮到可能在之後的新版本中會用到，如今終於派上用場了）。JS自己就是面向對象的，ES6中提供的類實際上只是JS原型模式的包裝。如今提供原生的class支持後，對象的建立，繼承更加直觀了，而且父類方法的調用，實例化，靜態方法和構造函數等概念都更加形象化

//類的定義
class Animal {
    //ES6中新型構造器
    constructor(name) {
        this.name = name;
    }
    //實例方法
    sayName() {
        console.log('My name is '+this.name);
    }
}
//類的繼承
class Programmer extends Animal {
    constructor(name) {
        //直接調用父類構造器進行初始化
        super(name);
    }
    program() {
        console.log("I'm coding...");
    }
}
//測試咱們的類
var animal=new Animal('dummy'),
wayou=new Programmer('wayou');
animal.sayName();//輸出 ‘My name is dummy’
wayou.sayName();//輸出 ‘My name is wayou’
wayou.program();//輸出 ‘I'm coding...’

參考：https://www.cnblogs.com/Wayou/p/es6_new_features.html

六、怎麼用localStorage獲取數據？

localStorage的讀取

if(!window.localStorage){
            alert("瀏覽器支持localstorage");
        }else{
            var storage=window.localStorage;
            //寫入a字段
            storage["a"]=1;
            //寫入b字段
            storage.a=1;
            //寫入c字段
            storage.setItem("c",3);
            console.log(typeof storage["a"]);
            console.log(typeof storage["b"]);
            console.log(typeof storage["c"]);
            //第一種方法讀取
            var a=storage.a;
            console.log(a);
            //第二種方法讀取
            var b=storage["b"];
            console.log(b);
            //第三種方法讀取
            var c=storage.getItem("c");
            console.log(c);
        }

詳細：https://www.cnblogs.com/st-leslie/p/5617130.html

七、border-radius 實現半圓？

CSS

div{
    display: inline-block;
    border:1px solid #6baabb;
    width:40px;
    height:40px;
    float:left;
    margin:0px 10px;
}
a{
    display: inline-block;
    width:40px;
    height:40px;
    background: #6baabb;
}
.Round{/*圓*/
    border-radius:20px;
}
.LeftRound{/*左半圓*/
    width:20px;
    border-radius:20px 0px 0px 20px;
}
.RightRound{/*右半圓*/
    width:20px;
    border-radius:0px 20px 20px 0px;
}
.TopRound{/*上半圓*/
    height:20px;
    border-radius:20px 20px 0px 0px;
}
.BottomRound{/*下半圓*/
    height:20px;
    border-radius:0px 0px 20px 20px;
}

頁面部分

<div><a class="Round"></a></div>
<div><a class="LeftRound"></a></div>
<div><a class="RightRound"></a></div>
<div><a class="TopRound"></a></div>
<div><a class="BottomRound"></a></div>

參考：https://www.cnblogs.com/zml-mary/p/7279807.html

八、position

absolute	生成絕對定位的元素，相對於 static 定位之外的第一個父元素進行定位。元素的位置經過 "left", "top", "right" 以及 "bottom" 屬性進行規定。
fixed	生成絕對定位的元素，相對於瀏覽器窗口進行定位。元素的位置經過 "left", "top", "right" 以及 "bottom" 屬性進行規定。
relative	生成相對定位的元素，相對於其正常位置進行定位。所以，"left:20" 會向元素的 LEFT 位置添加 20 像素。
static	默認值。沒有定位，元素出如今正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。
inherit	規定應該從父元素繼承 position 屬性的值。

九、typeOf的屬性值

alert(typeof 1);                // 返回字符串"number"  
alert(typeof "1");              // 返回字符串"string"  
alert(typeof true);             // 返回字符串"boolean"  
alert(typeof {});               // 返回字符串"object"  
alert(typeof []);               // 返回字符串"object "  
alert(typeof function(){});     // 返回字符串"function"  
alert(typeof null);             // 返回字符串"object"  
alert(typeof undefined);        // 返回字符串"undefined"

十、JS怎麼獲取指定的字符串

function GetStr()
        {
            var str = "...";
            var arrStr = str.split('=');
            var iLen = arrStr.length;
             
            for(var i=0 ; i<iLen ; i++)
            {
                if(arrStr[i].indexOf(" src") != -1)
                {
                    alert(arrStr[i+1]);
                }
            }
        }

十一、block 元素的理解

塊元素(block)的特色：
一、老是在新行上開始；
二、高度，行高以及頂和底邊距均可控制；
三、寬度缺省是它的容器的100%，除非設定一個寬度。

 內聯元素(inline)的特色： 
一、和其餘元素都在一行上；
二、高，行高及頂和底邊距不可改變；
三、寬度就是它的文字或圖片的寬度，不可改變。

十二、怎麼去掉字符左邊的空格？

有時咱們須要把字符串的空白符去掉，下面給出去除各部位空白符的方法，其實就是一個套路....

去掉字符串左側空白

/*
* 去掉字符串開頭空白符
* */

function removeBeginBlank(str) {
    return str.replace(/^\s*/g,"");    /* 返回替換後的字符串 */
}
var str = "    hahaha";   /* 要操做的字符串 */
removeBeginBlank(str);

/*
* 去掉字符串開頭空白符結束
* */