前端面試總結篇（初級）

星冉發表於2019-02-25
前端面試

前端基礎面試題總結

作為一個優秀的程式設計師，不僅僅可以解決工作的問題，還要不斷的關注前端技術的發展，其中也包括瞭解最新的前端面試題，那麼知識點來了，請接好

1. 你熟悉的es6

  • let、const、var的使用區別
    let: 相當於var,用於宣告一個變數,在塊級作用域有效(可解決for迴圈問題);不能重複宣告;不會變數提升;不會預處理
    const: 用於定義一個常量，不能修改，其他特點等同於let，用於儲存不用改變的資料
  • Map與普通物件的區別
    JavaScript 的物件（Object），本質上是鍵值對的集合（Hash 結構），但是傳統上只能用字串當作鍵。這給它的使用帶來了很大的限制。為了解決這個問題，ES6 提供了 Map 資料結構。它類似於物件，也是鍵值對的集合，但是“鍵”的範圍不限於字串，各種型別的值（包括物件）都可以當作鍵。也就是說，Object 結構提供了“字串—值”的對應，Map 結構提供了“值—值”的對應，是一種更完善的 Hash 結構實現。如果你需要“鍵值對”的資料結構，Map 比 Object 更合適。

除了這兩個，關於es6的常用還有箭頭函式、模板字串、變數的解構賦值等

2. 你使用的跨域

所謂的跨域問題是由於瀏覽器的同源策略限制的，當協議域名埠號不同即為跨域，對於協議和埠來說，前端不能解決。
解決跨域的幾種方式：

  • JSONP 跨域 ： 這種方式跨域是通過script標籤引入js檔案，這個js檔案又會返回一個js函式呼叫，也就是請求後通過callback的方式回傳結果
    優點：
    1.不受同源策略的限制
    2.相容性更好
    3.支援老版本瀏覽器
    缺點：只支援get請求
  • CORS 跨域
    其原理是使用自定義的http頭部請求，讓瀏覽器與伺服器之間進行溝通，從而決定請求或響應是否成功
    優點：
    1.支援所有型別的http請求
    2.比jsonp有更好的錯誤處理機制
    3.被大多數瀏覽器所支援
  • h5的postMessage方法
    window.postMessage(message,targetOrigin) 方法是html5新引進的特性，可以使用它來向其它的window物件傳送訊息，無論這個window物件是屬於同源或不同源，目前IE8+、FireFox、Chrome、Opera等瀏覽器都已經支援window.postMessage方法。這種方法不能和服務端交換資料，只能在兩個視窗（iframe）之間交換資料

3. 你瞭解的http狀態碼

 1** 資訊，伺服器收到請求，需要請求者繼續執行操作(101，升級為websocket協議)
 2** 成功，操作被成功接收並處理(206,部分內容，分段傳輸)
 3** 重定向，需要進一步操作以完成請求(301,302重定向；304命中快取)
 4** 客戶端錯誤，請求包含語法錯誤或無法完成請求(401,要求身份驗證；403，伺服器理解客服端需求，但是禁止訪問)
 5** 伺服器錯誤，伺服器在處理請求的過程中發生了錯誤

4. 你來評價一下ajax

  • ajax的優勢
    1.無重新整理頁面請求，使產品更快，更小更友好
    2.伺服器端的任務轉嫁到客戶端處理
    3.減輕瀏覽器負擔，節約頻寬
    4.基於標準化物件，不需要安裝特定的外掛
    5.徹底將頁面與資料分離
  • 缺點
    1.無法使用回退按鈕
    2.不利於網頁的SEO
    3.不能傳送跨域請求
    -寫一個簡單的ajax請求
 getList: function () {
    var me = this;
    $.ajax({
    url: '/test',
    type: 'POST',
    data: {
      repaymentId: repaymentId
    },
    xhrFields: {
      withCredentials: true
    },
    success: function (result) {
       if (result.status == 0) {
           console.log('請求成功')
       } else {
            console.log('請求異常')         
       }
     },
    error: function (result) {
         $.toaster({ title: 'info', priority: 'danger', message: '伺服器異常，請聯絡管理員！' });
      }
    })
   }
複製程式碼

5. 你知道的vue的生命週期

關於vue生命週期，可參考這篇文章 連結

6. 你知道的react的生命週期

初始化

  • componentWillMount 初始化呼叫，只呼叫一次
    render 渲染頁面
  • componentDidMount 第一次渲染後呼叫

更新

  • componentWillReceireProps 接收新的props時呼叫
  • shouldComponentUpdate state或props改變時呼叫
  • componentWillUpdate 將要更新時呼叫，可改變state的值
    render
  • componentDidUpdate 更新後呼叫

解除安裝

  • componentWillUnMount

7. react宣告預設props

設定預設props有兩種方式

  • 指定 props 的預設值， 這個方法只有瀏覽器編譯以後 才會生效
static defaultProps = { 
  age: 18
}
複製程式碼
  • 指定 props 的預設值，這個方法會一直生效
  Greeting.defaultProps = {    
    name: '我是props的預設值！'
  }
複製程式碼

8. react建立元件的三種方式

1.函式式定義的無狀態元件，適用於純展示元件，只負責根據傳入的props展示，不涉及state狀態的操作，特點如下

  • 元件不會被例項化，整體渲染效能得到提升。
  • 元件不能訪問this物件
  • 元件無法訪問生命週期的方法
  • 無狀態元件只能訪問輸入的props，同樣的props會得到同樣的渲染結果，不會有副作用
function  MyTest1() {
  return <h1>工廠(無狀態)函式(最簡潔, 推薦使用)</h1>
}
複製程式碼

2.es5原生方式React.createClass定義有狀態的元件

  • 元件會被例項化
  • 可以訪問生命週期
  • 會自繫結函式方法
var MyTest2=React.createClass({
  render(){
   return <h1>ES5老語法(不推薦使用了)</h1>
  }
})
複製程式碼

3.es6形式的extends React.Component定義的元件，是以ES6的形式來建立react的元件的，是React目前極為推薦的建立有狀態元件的方式

class  MyTest3 extends React.Component{
  render(){
     return <h1>ES6類語法(複雜元件, 推薦使用)</h1>
  }
}
複製程式碼

React.createClass與React.Component區別

  • this繫結不同
    React.createClass建立的元件，其每一個成員函式的this都有React自動繫結，任何時候使用，直接使用this.method即可，函式中的this會被正確設定。
    React.Component建立的元件，其成員函式不會自動繫結this，需要開發者手動繫結，否則this不能獲取當前元件例項物件。
  • 元件屬性型別propTypes及其預設props屬性defaultProps配置不同
  • 元件初始狀態state的配置不同
  • Mixins的支援不同

9. 你知道http與https的區別嗎

1、https協議需要到ca申請證照，一般免費證照較少，因而需要一定費用。
2、http是超文字傳輸協議，資訊是明文傳輸，https則是具有安全性的ssl加密傳輸協議。
3、http和https使用的是完全不同的連線方式，用的埠也不一樣，前者是80，後者是443。
4、http的連線很簡單，是無狀態的；HTTPS協議是由SSL+HTTP協議構建的可進行加密傳輸、身份認證的網路協議，比http協議安全

10. get與post的區別

  • 表單的method屬性設定post時傳送的是post請求，其餘都是get請求
  • get請求通過url地址傳送請求引數，引數可以直接在位址列中顯示，安全性較差；post是通過請求體傳送請求引數，引數不能直接顯示，相對安全
  • get請求URL地址有長度限制，根據瀏覽器的不同，限制位元組長度不同，post請求沒有長度限制

11. 你對閉包的瞭解

外部函式呼叫之後其變數物件本應該被銷燬，但閉包的存在使我們仍然可以訪問外部函式的變數物件

12. vue動態傳參以及獲取 

// 傳參
router: {
path: '/test/:id'
}
// 獲取
this.$route.params.id
// 通過query
<router-link :to="{path: '/test',query:{name: 'aaa'}}">跳轉</router-link>
複製程式碼

13. h5和css3新屬性

1.H5

  • 語意化標籤(nav、aside、dialog、header、footer等)
  • canvas
  • 拖放相關api
  • Audio、Video
  • 獲取地理位置
  • 更好的input校驗
  • web儲存(localStorage、sessionStorage)
  • webWorkers(類似於多執行緒併發)
  • webSocket
    2.CSS3
  • 選擇器
  • 邊框(border-image、border-radius、box-shadow)
  • 背景(background-clip、background-origin、background-size)
  • 漸變(linear-gradients、radial-gradents)
  • 字型(@font-face)
  • 轉換、形變(transform)
  • 過度(transition)
  • 動畫(animation)
  • 彈性盒模型(flex-box)
  • 媒體查詢(@media)

14. 實現左右固定寬，中間自適應（已知寬高和未知寬高） 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>css居中的十種方式</title>
  <style>
   .wrap {
       width: 200px;
       height: 200px;
       border: 1px solid red;
       position: relative;
   }
   .size {
       width: 100px;
       height: 100px;
   }
   /*第一種 已知元素寬高下使用position+ 負margin實現 相容性較好*/
   .box1 {
        background-color: pink;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -50px;
        margin-left: -50px;
   }
   /*第二種 已知元素寬高下使用position+margin auto實現 相容性較好*/
   .box2 {
        background-color: pink;
        position: absolute;
        top: 0px;
        left: 0px;
        right: 0px;
        bottom: 0px;
        margin: auto;
   }
   /*第三種 已知元素寬高下使用position+calc計算實現 考慮c3 calc相容性 需注意的問題是運算子之間要有空格，否則不生效*/
   .box3 {
        background-color: pink;
        position: absolute;
        top: calc(50% - 50px);
        left: calc(50% - 50px);
   }
   /*第四種 未知元素寬高下使用position+transform實現 依賴translate2d相容性*/
   .box4 {
       position: absolute;
       background-color: pink;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
   }
   /*第五種 未知元素寬高下使用lineheight實現*/
   .wrap2 {
       line-height: 400px;
       width: 200px;
       text-align: center;
       border: 1px solid red;
   }
    .box5 {
        background-color: pink;
        /*不加以下內容內部div會擴充外部div，且內容居中*/
        display: inline-block; /*不獨佔一行的塊元素*/
        vertical-align: middle; /*垂直方向居中*/
        line-height: initial; /*預設內容行高*/
        text-align: left;
    }
    /*第六種 未知寬高使用writing-mode屬性*/
    .wrap3 {
        writing-mode: vertical-lr; /*內容變為垂直分佈*/
        text-align: center;
    }
    /*inner 部分寬度100%居中*/
    .inner{
        writing-mode: horizontal-tb;
        text-align: center;
        display:inline-block;
        width: 100%;
        background-color: pink;
    }
    .box6 {
        display: inline-block;
        margin: auto;  
        background-color: rgb(140, 216, 68);
    }
    /*第七種 未知寬高使用table-cell屬性*/
    .wrap4 {
        display: table-cell;
        text-align: center;
        vertical-align: middle;
    }
    .box7 {
        background-color: pink;
        display: inline-block;
    }
     /*第八種 未知寬高使用flex屬性*/
    .box8{
    background-color: pink;
    }
    .wrap5{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    /*第九種 未知寬高使用grid, 相容性較差*/
    .wrap6{
        display: grid;
    }
    .box9 {
        align-self: center;
        justify-self: center;
        background-color: pink;
    }
    /*第十種 使用表格table實現*/
    .wrap7 {
        text-align: center;
    }
    .box10 {
        display: inline-block;
        background-color: pink;
    }
  </style>
</head>
<body>
  <div class="wrap">
    <div class="box1 size">知11111</div>
  </div>
  <div class="wrap">
    <div class="box2 size">知2222</div>
  </div>
  <div class="wrap">
    <div class="box3 size">知3333</div>
  </div>
  <div class="wrap">
    <div class="box4">未44444</div>
  </div>
  <div class="wrap2">
    <div class="box5">未55555</div>
  </div>
  <div class="wrap3 wrap">
      <div class="inner">
        <div class="box6">未66666</div>
      </div>
  </div>
  <div class="wrap wrap4">
    <div class="box7">未777777</div>
  </div>
  <div class="wrap wrap5">
    <div class="box8">未88888</div>
  </div>
  <div class="wrap wrap6">
    <div class="box9">未9999</div>
  </div>
  <table>
    <tbody>
        <tr>
            <td class="wrap wrap7">
                <div class="box10">未10101010</div>
            </td>
        </tr>
    </tbody>
</table>
</body>
</html>
複製程式碼

15.父子元件傳值

  • 父傳子：通過props傳遞
  • 子傳父： 通過$emit傳遞
  • 子孫之間： 通過一箇中間檔案作為媒介，子元件傳值到中間檔案，上級檔案在中間檔案中獲取，避免逐級獲取

這裡值得注意的是，在react的子元件中是不可以改變父元件中的值，解決辦法可以是在子元件中向父元件傳遞一個狀態，接著在父元件中通過這個狀態值來判斷是否要改變資料值，並在父元件中更新狀態

還在後續補充中，不足之處還請指教……

相關文章