一年前端近期面試總結

從誩從羊發表於2020-12-03

目錄

一、關於js的

1、陣列的常用方法以及迭代方法,對於push、pop可能會問到返回值

2、js如何減少操作DOM

3、post和get的區別,ajax請求超時如何處理

4、es6新增了哪些特性,你常用哪些

5、對promise的理解

6、js 的eventloop

7、關於js基本型別和引用型別的儲存方式

8、關於原型和原型鏈,原型鏈最終指向的是什麼(null)

9、箭頭函式的特點,let和const,var的區別

10、對於如下兩次函式呼叫,引數 test 函式的函式體內 a,b,c 的值分別是什麼?

11、建立兩個陣列[1,2,3,4],[3,’4’,5,6],求兩個陣列的並集/交集.,並寫出他們的結果.

12、一個假期旅遊團有十八人,[{name: 張,age:16},{name:章,age:15}…].請給出旅遊團平均年齡的演算法.我們該如何判斷旅遊團內是否有人年齡小於14,以便需要監護人同意.現在旅遊團要兩兩結伴做遊戲,如何將前一半人與後一半人按順序結伴.

13、按順序寫出下面程式的列印值。

14、如何判斷資料型別

15、防抖和節流

二、關於HTML和css的

1、使塊級元素&行級元素垂直居中的幾種辦法

2、常見的佈局方式,比如上div固定高度,下div自使用; 左中右佈局,左右固寬,中自適應

3、什麼是BFC,特點以及如何觸發

4、重繪和重排,標準盒子模型和怪異盒子模型

5、rem實現原理

三、關於vue

1、vue的生命週期,created和mounted的區別,在beforeCreate中可以做什麼

2、vue路由的兩種模式history和雜湊

3、vue父子元件的生命週期

4、元件之間的通訊

5、computed和watch的區別以及watch的屬性(deep和immediate、handler)

6、vue的優化方法

7、vue的路由懶載入

8、vue的一些底層原理(雙向資料的繫結原理、v-model實現原理,虛擬DOM)

9、 v-for 中key的作用

10、vuex 的五個屬性,以及適用場景

11、 vue腳手架搭建過程

四、其他

1、git常用命令

2、git和svn的區別

3、http常用方法,http2.0,以及http常見狀態碼

4、401和403的區別

5、協商快取和強快取(體現在狀態碼中就是304:協商快取,200:強快取)

6、做專案的流程以及出現bug如何除錯

 


曾就職於某上市外包公司,由於種種原因辭職,開啟了面試之旅。在這裡給大家一個建議,對於一些剛畢業的最好不要去外包公司,一是待遇低,活多,二是跳槽不好跳,大部分公司會歧視外包公司出來的,懂的都懂。

約了九家公司,面試了四家公司,兩家達成意向發了offer,一家面試體驗極差。在投簡歷過程中大家要有耐心,前幾天回覆的人可能比較少,後面就會好啦。再有就是應聘者和麵試官是平等的,是一個雙向選擇的過程,大家面試一定要自信,遇到高高在上,處處刁難你的面試官不要氣餒。

下面來總結一些面試題,因為畢竟工作經驗不多,所以面試題還是比較基礎比較簡單的。

一、關於js的

1、陣列的常用方法以及迭代方法,對於push、pop可能會問到返回值

2、js如何減少操作DOM

        a. 用修改class名的方法替代

        b. 需要大量修改DOM時,先快取在統一進行修改

        c. 採用虛擬DOM的方式

3、post和get的區別,ajax請求超時如何處理

1.相對post請求是安全的,get請求會暴露在url中

2.get請求引數放在url後,post放在http請求主體裡面

3.get請求有長度限制,而post請求沒有限制

ajax的請求超時

設定一個timeout,利用ajax的complete方法,complete是ajax請求完成的回撥,無論成功或失敗都會觸發

var ajaxTimeoutTest = $.ajax({

 

  url:''//請求的URL

  timeout : 1000, //超時時間設定,單位毫秒

  type : 'get'//請求方式,get或post

  data :{},  //請求所傳引數,json格式

  dataType:'json',//返回的資料格式

  success:function(data){ //請求成功的回撥函式

    alert("成功");

  },

  complete : function(XMLHttpRequest,status){ //請求完成後最終執行引數

    if(status=='timeout'){//超時,status還有success,error等值的情況

       ajaxTimeoutTest.abort();

       alert("超時");

    }

  }

});

status的取值
success"、 "notmodified"、"nocontent"、"error"、"timeout"、 "abort"、"parsererror"

4、es6新增了哪些特性,你常用哪些

5、對promise的理解

https://blog.csdn.net/qq_38974956/article/details/109035460

6、js 的eventloop

       這裡是阮一峰的一些講解 : http://www.ruanyifeng.com/blog/2014/10/event-loop.html

       由此題會引申出一些輸出順序的問題,網上有好多例子,多練習一下就會啦

7、關於js基本型別和引用型別的儲存方式

         基本資料型別指的是簡單的資料段,引用資料型別指的是有多個值構成的物件。(也就是棧和堆)

         引用資料型別在記憶體中會有一個記憶體地址,對應著資料值,我們引用是隻是引用的記憶體地址(也就是淺拷貝)   

         這裡可能會引申一道淺拷貝和深拷貝的題,要注意一下,尤其是陣列,不能大意

   var a=[ ]

 var b=a

 a[2]=2

b[3]=3

請寫出下面的輸出結果

a.length    a       b    b.length

結果:4        Array(4) [ undefined, undefined, 2, 3 ]        Array(4) [ undefined, undefined, 2, 3 ]     4

這道題就是一道引用型別的淺拷貝當b=a時,這裡只是進行了淺拷貝,在修改b時修改的是修改堆記憶體中的同一個值

 這裡是關於深拷貝和淺拷貝的一些總結   https://blog.csdn.net/qq_38974956/article/details/109034790

8、關於原型和原型鏈,原型鏈最終指向的是什麼(null)

          https://blog.csdn.net/qq_38974956/article/details/109187713

9、箭頭函式的特點,let和const,var的區別

10、對於如下兩次函式呼叫,引數 test 函式的函式體內 a,b,c 的值分別是什麼?

function test(a,b,...c) {/*a,b,c*/}

test(1,2,3,4,5) 與 test();

結果:

1,2,[3,4,5]

Undefined,undefined,[ ]

這裡考察點是剩餘引數

11、建立兩個陣列[1,2,3,4],[3,’4’,5,6],求兩個陣列的並集/交集.,並寫出他們的結果.

         var a = [1, 2, 3, 4]

        var b = [3, '4', 5, 6]

        a.forEach(item => {

            b.forEach(itemB => {

                if (item === itemB) {

                    console.log(item);

                }

            })

        })

並集:3    這道題比較簡單,注意4和‘4’不一樣就可以,===和==的區別

12、一個假期旅遊團有十八人,[{name: 張,age:16},{name:章,age:15}…].請給出旅遊團平均年齡的演算法.我們該如何判斷旅遊團內是否有人年齡小於14,以便需要監護人同意.現在旅遊團要兩兩結伴做遊戲,如何將前一半人與後一半人按順序結伴.

var arr = [{

            name: '張',

            age: 16

        }, {

            name: '章',

            age: 15

        }, {

            name: 'li',

            age: 12

        }]

        var sum = 0

        arr.forEach(item => {

            sum += item.age

        })

//平均年齡

        console.log(sum/arr.length)

//判斷是否有小於14

  arr.forEach(item => {

                if (item.age < 14) {

                     console.log(item);

                 }

             })

   var a = arr.splice(arr.length / 2)

        arr.forEach((item1, index1) => {

            a.forEach((item2, index2) => {

                if (index1 == index2) {

                    console.log(item1.name + '和' + item2.name);

                }

            })

        })

13、按順序寫出下面程式的列印值。

 

new Promise(function executor(resolve){

    console.log(1);

    for (var i = 0; i < 10000; i++) {

        i == 9999 && resolve();

    }

    console.log(2);

}).then(function () {

    setTimeout(function () {

        console.log(3);

    },10);

    console.log(4);

});

setTimeout(function () {

    console.log(5);

}, 0);

console.log(6);

結果:1,2,6,4,5,3

14、如何判斷資料型別

https://blog.csdn.net/qq_38974956/article/details/109109935

15、防抖和節流

 

二、關於HTML和css的

          有關這部分問的還是比較少的,但是應屆生要多看看這部分

1、使塊級元素&行級元素垂直居中的幾種辦法

行級元素:

  1. 設定height和line-height

  2. vertical-align

塊級元素

  1. flex佈局,設定align-items

  2. 絕對定位,上下左右設定為0,margin:0 auto

  3. 絕對定位,top:50%;margin-top:-高度的一半

2、常見的佈局方式,比如上div固定高度,下div自使用; 左中右佈局,左右固寬,中自適應

經典佈局總結:https://blog.csdn.net/qq_38974956/article/details/108048434

佈局題:請使用至少兩種佈局方式.其中一種必須為 flex 佈局..

  1. flex佈局

  .container {

            height: 100vh;

            background-color: black;

            display: flex;

            flex-direction: column;

        }

       

        .header {

            width: 100%;

            height: 100px;

            background-color: pink;

        }

       

        .main {

            width: 100%;

            flex: 1;

            background-color: green;

            position: relative;

        }

       

        .left {

            float: left;

            width: 200px;

            background: red;

            height: 100%;

        }

       

        .right {

            margin-left: 200px;

            height: 100%;

            background: #000;

        }

       

        @media screen and (max-width: 992px) {

            .left {

                display: none;

            }

            .right {

                margin-left: 0;

                height: 100%;

                background: #000;

            }

        }

    </style>

</head>

 

<body>

    <div class="container">

        <div class="header">header</div>

        <div class="main">

            <div class="left">left</div>

            <div class="right">right</div>

        </div>

    </div>

</body>

 

2、

body {

            margin: 0;

            padding: 0;

        }

       

        .container {

            height: 100vh;

            background-color: black;

        }

       

        .header {

            width: 100%;

            height: 100px;

            background-color: pink;

            position: absolute;

            top: 0;

            left: 0;

        }

       

        .main {

            width: 100%;

            background-color: green;

            position: absolute;

            top: 100px;

            bottom: 0;

        }

       

        .left {

            width: 200px;

            background: red;

            height: 100%;

            float: left;

        }

       

        .right {

            margin-left: 200px;

            height: 100%;

            background: #000;

        }

       

        @media screen and (max-width: 992px) {

            .left {

                display: none;

            }

            .right {

                margin-left: 0;

                height: 100%;

                background: #000;

            }

        }

       

        */

    </style>

</head>

 

<body>

    <div class="container">

        <div class="header">header</div>

        <div class="main">

            <div class="left">left</div>

            <div class="right">right</div>

        </div>

    </div>

</body>

 

 

 

3、什麼是BFC,特點以及如何觸發

       https://blog.csdn.net/qq_38974956/article/details/108088443

4、重繪和重排,標準盒子模型和怪異盒子模型

      自行百度

5、rem實現原理

    https://blog.csdn.net/qq_38974956/article/details/108109295

三、關於vue

1、vue的生命週期,created和mounted的區別,在beforeCreate中可以做什麼

       https://blog.csdn.net/qq_38974956/article/details/109455991

2、vue路由的兩種模式history和雜湊

vue-router 有 2 種路由模式:hash、history

其中,2 種路由模式的說明如下:

  • hash: 使用 URL hash 值來作路由。支援所有瀏覽器,包括不支援 HTML5 History Api 的瀏覽器;

  • history : 依賴 HTML5 History API 和伺服器配置。具體可以檢視 HTML5 History 模式;

(1)hash 模式的實現原理

早期的前端路由的實現就是基於 location.hash 來實現的。其實現原理很簡單,location.hash 的值就是 URL 中 # 後面的內容。比如下面這個網站,它的 location.hash 的值為 '#search':

https://www.word.com#search

hash 路由模式的實現主要是基於下面幾個特性:

  • URL 中 hash 值只是客戶端的一種狀態,也就是說當向伺服器端發出請求時,hash 部分不會被髮送;
  • hash 值的改變,都會在瀏覽器的訪問歷史中增加一個記錄。因此我們能通過瀏覽器的回退、前進按鈕控制hash 的切換;
  • 可以通過 a 標籤,並設定 href 屬性,當使用者點選這個標籤後,URL 的 hash 值會發生改變;或者使用  JavaScript 來對 loaction.hash 進行賦值,改變 URL 的 hash 值;
  • 我們可以使用 hashchange 事件來監聽 hash 值的變化,從而對頁面進行跳轉(渲染)。

(2)history 模式的實現原理

history 路由模式的實現主要基於存在下面幾個特性:

  • pushState 和 repalceState 兩個 API 來操作實現 URL 的變化 ;
  • 我們可以使用 popstate 事件來監聽 url 的變化,從而對頁面進行跳轉(渲染);
  • history.pushState() 或 history.replaceState() 不會觸發 popstate 事件,這時我們需要手動觸發頁面跳轉(渲染)。

3、vue父子元件的生命週期

       https://www.cnblogs.com/status404/p/8733629.html

4、元件之間的通訊

5、computed和watch的區別以及watch的屬性(deep和immediate、handler

https://blog.csdn.net/qq_38974956/article/details/109457767

6、vue的優化方法

7、vue的路由懶載入

8、vue的一些底層原理(雙向資料的繫結原理、v-model實現原理,虛擬DOM)

9、 v-for 中key的作用

10、vuex 的五個屬性,以及適用場景

11、 vue腳手架搭建過程

四、其他

1、git常用命令

2、git和svn的區別

3、http常用方法,http2.0,以及http常見狀態碼

4、401和403的區別

      401是用於身份驗證

       403是禁止響應

5、協商快取和強快取(體現在狀態碼中就是304:協商快取,200:強快取)

6、做專案的流程以及出現bug如何除錯

 

    

相關文章