2017前端面試之基本問

時間 2019-11-22

原文原文鏈接

最近正在找前端開發工做，在各大公司中遇到了如下的面試題，和你們分享一下：
先說下個人簡歷上寫的技能：
熟悉移動端開發，並熟練使用vue.js,es6,jquery,ajax,javascript,html5+css3,webpack打包,MVC或MVVM的模塊化開發，微信小程序，微信二次開發，Photoshop切圖，h5混合開發（懂得很少，第一次發，寫的很差的地方多諒解，多批評，謝謝）

因此遇到如下各式問題：
1.vue中v-show和v-if的區別？

v-show:條件不知足時會自動設置爲display:none，仍是會出如今dom中;
v-if:條件不知足時將不會有這個html標籤生成，不會出如今dom中;

2.單頁面應用瞭解嗎，本身以爲單頁面應該的概念？

單頁是指在瀏覽器中運行的應用，使用期間頁面無刷新，整個webapp就一個html文件，全部數據交由ajax完成。

3.vue的雙向綁定？

v-model使用的時候是雙向綁定，可是vue是單向數據流，v-model只是語法糖。
舉個例子：

<input v-model="data.name"/>
<!--上面的雙向綁定 在實際運行中會被轉換成下行代碼：-->
<input :value="data.name" v-on:input="data.name = $event.target.value"/>複製代碼

4.es6和es5的區別是什麼？

1.let 和 var

es5只有全局做用域和函數做用域
es6則新增了塊級做用域，let命令只在代碼塊內有效

2.繼承

es5經過原型鏈繼承
es6有類的概念，更像java的面向對象（封裝、繼承、多態）

3.es6有新的api

箭頭函數：箭頭函數內部沒有constructor方法，也沒有prototype，因此不支持new操做。可是它對this的處理與通常的普通函數不同。箭頭函數的 this 始終指向函數定義時的 this，而非執行時。若是要改變箭頭指向能夠用.bind(this)

Promise：是處理異步操做的對象，使用了 Promise對象以後能夠用一種鏈式調用的方式來組織代碼
……

5.jsonp的原理？

利用script標籤的異步加載特性實現給服務端傳一個回調函數，服務器返回一個傳遞過去的回調函數名稱的js代碼

6.如何封裝一個公用的方法，好比jquery中ajax步驟說明？

問到這種實際的問題，通常事先都沒有準備都是當時直接發揮，能夠如今腦子裏理下思路：
先定義一個公共方法，在方法裏面傳調接口的數據，地址，成功函數，失敗函數等等

7.如何將數組排序？數字和字母是如何排序的？（筆試題常常有）

1.數組有原生的方法sort()排序，sort排序是先數字後字母排序。
2.冒泡排序(來個稍微複雜點的，真實面試題)：

冒泡排序原理：依次比較相鄰的兩個值，若是後面的比前面的小，則將小的元素排到前面。依照這個規則進行屢次而且遞減的迭代，直到順序正確。

題目:根據data中的id進行排序

var data = [{'id':1,'name':'小鯉魚'},{'id':5,'name':'李四'},{'id':4,'name':'王五'},{'id':2,'name':'趙六'},{'id':3,'name':'綠茶'}];
      for(var i =0;i<data.length-1;i++){
        for(var j = i+1;j<data.length;j++){
          if(data[i].id>data[j].id){
            var temp = data[i];
            data[i] = data[j];
            data[j] = temp;
          }
        }
      }複製代碼

8.數組去重（筆試題）

var arr = [1,2,8,5,3,6,4,1,5,9,3,7];
    var newArr = [];
    var json = {};
    for(var i = 0; i < arr.length; i++){
      if(!json[arr[i]]){
        newArr.push(arr[i]);
        json[arr[i]] = 1;
      }
    }複製代碼

9.如何只獲取對象中的key

var obj = {'id':1,'name':'小老鼠','sex':'boy','age':21};
for(var key in obj){if(obj.hasOwnProperty(key)){console.log(key);}}複製代碼

10.引用值和原始值有哪些？

原始值：string,undefined,null,number,boolean
引用值：array,object,function

11.簡述一下h5的新特性

1.新的Doctype：儘管使用<!DOCTYPE html>，即便瀏覽器不懂這句話也會按照標準模式去渲染
2.input表單元素類型：date,email
3.html語義化:用正確的標籤包含正確的內容，好處是結構良好便於閱讀，提升搜索率seo
4.webstorage:localstorage和sessionstorage
5.新增api:地圖、拖放，音頻
6.web worker:是運行在瀏覽器後臺的js程序。不影響主程序的運行，是另開的一個js線程，能夠用這個線程執行復雜的數據操做，而後把操做結果經過postMessage傳遞給主線程。

12.分別說出localstorage和sessionstorage，cookie的區別和內存及生命週期

localstorage：持久話存儲在客戶端，只要用戶不主動刪除，就不會消失；存儲大小是5M;
sessionstorage：存儲在客戶端，關閉會話，存儲的數據則消失；存儲大小是5M;
cookie:存儲在瀏覽器端；存儲大小是4096個字節

13.行內樣式如何轉換爲塊級元素？

1.外層包一個div
2.反過來則是用display:inline;

14.兩個div左邊爲200px;右邊自動填充寬度

<div id="conent" style="display:-webkit-box;">
      <div class="left">left</div>
      <div class="right">right</div>
    </div>
    <style>  
      #conent {width:100%;height:300px;}
      .left {width:100px;}
      .right {width:100%;}
    </style>複製代碼

15.em和rem的區別
javascript