前端面試總結篇（初級）

時間 2019-11-08

標籤前端面試總結初級欄目快樂工作简体版

原文原文鏈接

前端基礎面試題總結

做爲一個優秀的程序員，不只僅能夠解決工做的問題，還要不斷的關注前端技術的發展，其中也包括瞭解最新的前端面試題，那麼知識點來了，請接好javascript

1. 你熟悉的es6

let、const、var的使用區別
let: 至關於var,用於聲明一個變量,在塊級做用域有效(可解決for循環問題);不能重複聲明;不會變量提高;不會預處理
const: 用於定義一個常量，不能修改，其餘特色等同於let，用於保存不用改變的數據
Map與普通對象的區別
JavaScript 的對象（Object），本質上是鍵值對的集合（Hash 結構），可是傳統上只能用字符串看成鍵。這給它的使用帶來了很大的限制。爲了解決這個問題，ES6 提供了 Map 數據結構。它相似於對象，也是鍵值對的集合，可是「鍵」的範圍不限於字符串，各類類型的值（包括對象）均可以看成鍵。也就是說，Object 結構提供了「字符串—值」的對應，Map 結構提供了「值—值」的對應，是一種更完善的 Hash 結構實現。若是你須要「鍵值對」的數據結構，Map 比 Object 更合適。

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

2. 你使用的跨域

所謂的跨域問題是因爲瀏覽器的同源策略限制的，當協議域名端口號不一樣即爲跨域，對於協議和端口來講，前端不能解決。
解決跨域的幾種方式： html

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）之間交換數據
其實在工做中若是使用的是cors跨域的話，跨域問題基本上都是由後端來配置，前端仍是比較省心的，即便那你的後端不給你處理，也能夠代理跨域去處理

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生命週期，可參考這篇文章連接vue

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

初始化html5

componentWillMount 初始化調用，只調用一次
render 渲染頁面
componentDidMount 第一次渲染後調用

更新java

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

卸載react

componentWillUnMount

7. react聲明默認props

設置默認props有兩種方式css3

指定 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的區別嗎

一、https協議須要到ca申請證書，通常免費證書較少，於是須要必定費用。
二、http是超文本傳輸協議，信息是明文傳輸，https則是具備安全性的ssl加密傳輸協議。
三、http和https使用的是徹底不一樣的鏈接方式，用的端口也不同，前者是80，後者是443。
四、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>
複製代碼