前端面試中容易讓你忽略的知識點（一）

超人他不會飛發表於2018-03-04
前端面試

前言

最近在看一些網上的面試題的時候，發現有很多零碎的、容易被忽略的知識點，有些是概念性的技術點，有些是不經常用的冷知識，不經常用可能印象不深刻，在這裡做一個簡單的小總結。

（以下只是我看到的，覺得有必要整理的，後續會更新～）

1. 實現多行文字溢位顯示...

單行文字溢位顯示省略號這可能比較常用，多行溢位顯示還真用的不多。

貼程式碼：

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
複製程式碼

適用範圍：

因使用了WebKit的CSS擴充套件屬性，該方法適用於WebKit瀏覽器及移動端；

注：

1、-webkit-line-clamp用來限制在一個塊元素顯示的文字的行數。
   為了實現該效果，它需要組合其他的WebKit屬性。常見結合屬性：
2、display: -webkit-box; 必須結合的屬性 ，將物件作為彈性伸縮盒子模型顯示 。
3、-webkit-box-orient 必須結合的屬性 ，設定或檢索伸縮盒物件的子元素的排列方式 。
複製程式碼

2. 讓圖文不可被複制

有時候可能有要維護版權，禁止盜圖之類的這種需求。。。

-webkit-user-select: none; 
-ms-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
複製程式碼

思路：

1、答案區域監聽copy事件，並阻止這個事件的預設行為。

2、獲取選中的內容（window.getSelection()）加上版權資訊，然後設定到剪下板（clipboarddata.setData()）。

3. 盒子垂直水平居中

面試必問的題目，雖然很簡單，也有多種實現方法，在這裡列出：

 1、定位 盒子寬高已知
 position: absolute;
 left: 50%;
 top: 50%;
 margin-left:-自身一半寬度;
 margin-top: -自身一半高度;

2、table-cell佈局
父級 display: table-cell; vertical-align: middle;
子級 margin: 0 auto;

3、定位 + transform ; 適用於 子盒子 寬高不定時；
    position: relative / absolute;
    /*top和left偏移各為50%*/
       top: 50%;
       left: 50%;
    /*translate(-50%,-50%) 偏移自身的寬和高的-50%*/
    transform: translate(-50%, -50%);

4、flex 佈局
    父級： 
        /*flex 佈局*/
        display: flex;
        /*實現垂直居中*/
        align-items: center;
        /*實現水平居中*/
        justify-content: center;

再加一種水平方向上居中 ：margin-left : 50% ; transform: translateX(-50%);
複製程式碼

4. 快速的讓一個陣列亂序排列

    var arr = [1,2,3,4,5,6,7,8,9,10];
    arr.sort(function(){
        return Math.random() - 0.5;
    })
    console.log(arr);
複製程式碼

結果：

前端面試中容易讓你忽略的知識點（一）

原理：

首先 sort() 的引數是一個比較函式;

如果指明瞭 compareFunction ，那麼陣列會按照呼叫該函式的返回值排序。

即 a 和 b 是兩個將要被比較的元素：

  1. 如果 compareFunction(a, b) 小於 0 ，那麼 a 會被排列到 b 之前；
  2. 如果 compareFunction(a, b) 等於 0 ， a 和 b 的相對位置不變。
  3. 如果 compareFunction(a, b) 大於 0 ， b 會被排列到 a 之前。

所以，比較函式格式如下：

function compare(a, b) {
  if (a < b ) {           // 按某種排序標準進行比較, a 小於 b
    return -1;
  }
  if (a > b ) {
    return 1;
  }
  // a must be equal to b
  return 0;
}
複製程式碼

要比較數字而非字串，比較函式可以簡單的以 a 減 b，如下的函式將會將陣列升序排列

function compareNumbers(a, b) {
  return a - b;
}
複製程式碼

一開始這個陣列是按照升序排列的，在比較函式裡，當Math.random() > 0.5 的時候，當前的這個數和他後邊的數不會互換位置，進行下一輪比較，以此類推，直到 Math.random() < 0.5 的時候，當前數和他後邊的數互換位置，一共進行9次排列。

程式如下：

前端面試中容易讓你忽略的知識點（一）

5.陣列去重

原生方法用indexOf()迴圈當前陣列即可去重，但這不是我說的重點

其實用ES6的方法，一行程式碼就搞定，誰還會去寫那三五行的for迴圈？

ES6中新增了Set資料結構，類似於陣列，但是 它的成員都是唯一的 ，其建構函式可以接受一個陣列作為引數。

let array = [1, 1, 1, 1, 2, 3, 4, 4, 5, 3];
 let set = new Set(array);
 console.log(set);
 // => Set {1, 2, 3, 4, 5}
複製程式碼

ES6中Array新增了一個靜態方法Array.from，可以把類似陣列的物件轉換為陣列。

改進後：

let array = [1, 1, 1, 1, 2, 3, 4, 4, 5, 3];
let set = Array.from(new Set(array));
console.log(set);
// => Set {1, 2, 3, 4, 5}
複製程式碼

還是附上ES5的方法吧：

function unique(arr) {
    var newArr = [];
    for(var i=0; i < arr.length; i++) {
        if (newArr.indexOf(arr.[i]) === -1) {
            newArr.push(arr[i])
        }
        return newArr;
    }
}
複製程式碼

6. javascript的typeof返回哪些資料型別?

   object number function boolean undefined string
複製程式碼

(面試的時候被問到過，回答的不完整，心痛。。。)

7. javascript的本地物件，內建物件和宿主物件?

  1. 本地物件為array obj regexp等可以new例項化，具體有：
Object、Function、Array、String、Boolean、Number、Date、RegExp、
Error、EvalError、RangeError、ReferenceError、SyntaxError、TypeError、URIError
複製程式碼

  1. 內建物件為Global Math 等不可以例項化的 宿主為瀏覽器自帶的document,window 等。

  2. 所有非本地物件都是宿主物件（host object），即由 ECMAScript 實現的宿主環境提供的物件。

相關文章