深刻淺析前端面試總結---1

時間 2019-11-24

原文原文鏈接

爲何要初始化CSS樣式(reset css)？

由於瀏覽器的兼容問題，不一樣瀏覽器對有些標籤的默認值是不一樣的，若是沒對CSS初始化每每會出現瀏覽器之間的頁面顯示差別javascript
最簡單粗暴的css
```
* {
    margin: 0;
    padding: 0;
}
```
更好的選擇Normalize.css 相比於傳統的CSS reset，Normalize.css是一種現代的、爲HTML5準備的優質替代方案html
Reset CSS:只選對的，不選"貴"的，因根據具體項目來作選擇權衡，不該該濫用前端

如何水平垂直居中`div`？（至少給出2種解決方法）

1.absolute + transform:java

<div class="parent">
  <div class="child">Demo</div>
</div>

<style>
  .parent {
    position: relative;
  }
  .child {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
</style>

2.inline-block + text-align + table-cell + vertical-aligngit

<div class="parent">
  <div class="child">Demo</div>
</div>

<style>
  .parent {
    text-align: center;
    display: table-cell;
    vertical-align: middle;
  }
  .child {
    display: inline-block;
  }
</style>

3.flex + justify-content + align-itemses6

<div class="parent">
  <div class="child">Demo</div>
</div>

<style>
  .parent {
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /*垂直居中*/
  }
</style>

漸進加強 VS 優雅降級，你怎麼看？

漸進加強（Progressive Enhancement）：一開始就針對低版本瀏覽器進行構建頁面，完成基本的功能，而後再針對高級瀏覽器進行效果、交互、追加功能達到更好的體驗
優雅降級（Graceful Degradation）：一開始就構建站點的完整功能，而後針對瀏覽器測試和修復。好比一開始使用 CSS3 的特性構建了一個應用，而後逐步針對各大瀏覽器進行 hack 使其能夠在低版本瀏覽器上正常瀏覽

JavaScript 數組去重？(簡述思路便可)

遍歷數組法：這應該是最簡單的去重方法（實現思路：新建一新數組，遍歷數組，值不在新數組就加入該新數組中）github

// 遍歷數組去重法
function unique(arr){
  var _arr = []
  //遍歷當前數組
  for(var i = 0; i < arr.length; i++){
    //若是當前數組的第i已經保存進了臨時數組，那麼跳過，
    //不然把當前項push到臨時數組裏面
    if (_arr.indexOf(arr[i]) == -1) _arr.push(arr[i])
  }
  return _arr
}

注意點：indexOf 爲 ES5 的方法，注意瀏覽器兼容，須要本身實現 indexOfajax

對象鍵值對(hash) 法：速度快，高效，佔用更大的內存換取更快的時間，用 JavaScript 中的 Object 對象來當作哈希表，hash去重的核心是構建了一個 hash 對象來替代 indexOfjson

// hash 去重法
function unique(arr){
    var _arr = [], 
        hash = {}
    for (var i = 0; i < arr.length; i++) {
        var item = arr[i]
        var key = typeof(item) + item
          // 對象的鍵值只能是字符串, typeof(item) + item來去分1和'1'的狀況
        if(hash[key] !== 1){
            _arr.push(item)
            hash[key] = 1
        }
    }
    return _arr
}

炫酷的 es6 Set數據結構: ES6 提供了新的數據結構 Set。它相似於數組，可是成員的值都是惟一的，沒有重複的值

function unique(arr){
    return Array.from(new Set(arr))
    // Array.from方法用於將兩類對象轉爲真正的數組：
    // 相似數組的對象（array-like object）和可遍歷（iterable）的對象
}

關於 JavaScript 數組去重，還有不少不少能夠講，篇幅有限，這裏介紹了幾種常規的，更多的本身去探索

使用原生`ajax`獲取 Linus Torvalds 的GitHub信息(API:https://api.github.com/users/torvalds，如記不清具體代碼簡述過程便可)，並將JSON字符串解析爲JSON對象，並講講對JSON的瞭解

這是對 ajax與json的考察

ajax的全稱：Asynchronous Javascript And XML，異步傳輸+js+xml 如今差很少都用JSON

建立XMLHttpRequest對象,也就是建立一個異步調用對象
建立一個新的HTTP請求,並指定該HTTP請求的方法、URL及驗證信息
設置響應HTTP請求狀態變化的函數
發送HTTP請求
獲取異步調用返回的數據
數據處理

下面就來貼代碼吧：

var api = 'https://api.github.com/users/torvalds'
var xhr = new XMLHttpRequest() // 建立XMLHttpRequest對象

if(window.XMLHttpRequest){ // 兼容處理
    xhr = new XMLHttpRequest()
}else{
    xhr = new ActiveXObject('Microsoft.XMLHTTP')// 兼容ie6如下下
}

xhr.open('get',api,true)    //設置請求信息    
xhr.send()  //提交請求

//等待服務器返回內容
xhr.onreadystatechange = function() {
    if ( xhr.readyState == 4 && xhr.status == 200 ) {
         console.log(JSON.parse(xhr.responseText)) // 使用JSON.parse解析JSON字符串
    } 
}