梳理一波面試題

掘金5025發表於2018-08-11
面試題

1. 如何判斷一個變數的型別是陣列還是物件

因為陣列和物件，typeof操作的返回值都是 object，所以我們需要用別的操作來區分它們的型別。

通過 constructor

var arr = [1, 2];
var obj = { name: 'obj1' };
console.log(arr.constructor === Array); // true
console.log(obj.constructor === Array); // false
複製程式碼

通過 instanceof 運算子

console.log(arr instanceof Array); // true
console.log(obj instanceof Array); // false
複製程式碼

通過 Object.prototype.toString

console.log(Object.prototype.toString.call(arr)); // [object Array]
console.log(Object.prototype.toString.call(obj)); // [object Object]
複製程式碼

2. 簡單表述一下前端的路由是如何實現的

早期的時候，路由是交由後端處理的，url中的每個路徑都有相應的處理邏輯，後端已經都幫你寫好了，所以沒前端什麼事。但是後端路由存在一個問題，就是每次切換頁面都要重新向伺服器傳送請求，這樣就造成了一個延遲的問題，使用者體驗不大好，頁面複雜的話伺服器也亞歷山大。

前端路由實現主要有兩種方式：

  1. 利用hash

在 HTML5 的 history API 出現之前，前端的路由都是通過 hash 來實現的。hash 的好處在於能相容低版本的瀏覽器，它的標誌就是 url 裡帶有 #。

實現原理：Web 服務不會解析 hash，也就是說 url 中 # 後面的部分 Web 服務會自動忽略，但 location.hash 可以取到這部分, 然後通過 hashchange 事件可以監聽 location.hash 的變化，從而進行相應的處理。

localhost:8080/#/index
console.log(location.hash) // #/index
複製程式碼
  1. 利用H5的History

H5新增了兩個API，history.pushState 和 history.replaceState，結合 window.onpostate 事件一起形成了一種新的路由方式。

history.pushState 和 history.replaceState 都可以在不重新整理頁面的情況下改變 url 地址並操作瀏覽器的歷史記錄。不同之處在於，pushState會增加一條新的歷史記錄，而replaceState則會替換當前的歷史記錄。

這種模式下的路由沒有 #，會看著美觀一點，但是需要後臺配置支援，不然會報404， vue-router 文件裡也提到了這一點並給出了處理方法。

3. 擷取字串 abcdefg 中的 efg

沒什麼難的，但是我在答題的時候腦袋抽風，怎麼都想不起來 substr() 方法，明明平時用到的次數還蠻多的，驚呆。

function getStr() {
    var str = 'abcdefg';
    var str2 = ''
    if (/efg/.test(str)) {
        str2 = str.substr(str.indexOf('efg'), 3);
    }
    return str2;
}
複製程式碼

4. 用 JavaScript 給陣列[1,1,2,3,4,4]去重

平常開發中陣列的操作幾乎都是用 lodash 完成的，所以看到這種題目的第一反應就是 _.uniq([...])，呵呵。

方法一：
function fn1(arr) {
    // 新建一個臨時陣列
    var arr1 = [];
    for(var i = 0; i < arr.length; i++) {
        // 如果arr的第i項已經沒有臨時陣列裡，則push進臨時陣列
        if (arr1.indexOf(arr[i]) === -1) arr1.push(arr[i])
    }
    return arr1;
}
複製程式碼
方法二：
function fn2(arr) {
    var arr2 = [];
    arr.forEach((item) => {
        // 利用 es6 的 Array.prototype.includes()
        if (!arr2.includes(item)) arr2.push(item);
    })
    return arr2;
}
複製程式碼
方法三：
function fn3(arr) {
    // es6 的新資料結構 Set，類似陣列，但成員的值唯一
    var set = new Set(arr);
    // Array.from 方法可以將 Set 結構轉為陣列
    // 或者直接用擴充套件運算子（...）結構 Set
    // return [...set]
    return Array.from(set);
}
複製程式碼

5. display 屬性的值和作用

這個很基礎了，記錄一些常用的例子。

值 描述
none 該元素不會被顯示
block 該元素顯示為塊級元素，且元素前後帶有換行符
inline 預設。該元素顯示為內聯元素，元素前後沒有換行符
inine-block 行內塊元素（CSS2.1 新增的值）
table 該元素作為塊級表格（類似 table）顯示，表格前後帶有換行符
inline-table 該元素作為內聯表格（類似 table）顯示，表格前後沒有換行符
table-row 該元素作為一個表格行（類似 tr）顯示
table-cell 該元素元素會作為一個表格單元格（類似 td/th）顯示
inherit 從父元素繼承 display 的值

總結

這篇文章是幾個月前跳槽面試的過程中寫的，前前後後邊工作邊面試大概面了10來家吧。進了新公司後一直很忙，沒能及時將其餘的面試題寫進文章裡，等現在再去回憶發現已經想不起來了。

只能等下次有機會再慢慢補充了。

相關文章