一年前端近期面試總結
目錄
1、陣列的常用方法以及迭代方法，對於push、pop可能會問到返回值
10、對於如下兩次函式呼叫,引數 test 函式的函式體內 a,b,c 的值分別是什麼?
11、建立兩個陣列[1,2,3,4],[3,’4’,5,6],求兩個陣列的並集/交集.,並寫出他們的結果.
2、常見的佈局方式，比如上div固定高度，下div自使用； 左中右佈局，左右固寬，中自適應
1、vue的生命週期，created和mounted的區別，在beforeCreate中可以做什麼
5、computed和watch的區別以及watch的屬性（deep和immediate、handler）
8、vue的一些底層原理（雙向資料的繫結原理、v-model實現原理，虛擬DOM）
3、http常用方法，http2.0，以及http常見狀態碼
5、協商快取和強快取（體現在狀態碼中就是304：協商快取，200：強快取）
曾就職於某上市外包公司，由於種種原因辭職，開啟了面試之旅。在這裡給大家一個建議，對於一些剛畢業的最好不要去外包公司，一是待遇低，活多，二是跳槽不好跳，大部分公司會歧視外包公司出來的，懂的都懂。
約了九家公司，面試了四家公司，兩家達成意向發了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請求完成的回撥，無論成功或失敗都會觸發
|
|
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、使塊級元素&行級元素垂直居中的幾種辦法
行級元素：
-
設定height和line-height
-
vertical-align
塊級元素
-
flex佈局，設定align-items
-
絕對定位，上下左右設定為0，margin：0 auto
-
絕對定位，top：50%；margin-top：-高度的一半
2、常見的佈局方式，比如上div固定高度，下div自使用； 左中右佈局，左右固寬，中自適應
經典佈局總結：https://blog.csdn.net/qq_38974956/article/details/108048434
佈局題:請使用至少兩種佈局方式.其中一種必須為 flex 佈局..
- 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如何除錯
相關文章
- 記錄近期面試題，面試總結面試題
- 近期前端效能測試採坑總結前端
- NET近期面試總結和麵試題面試
- 新晉面試官對近期面試的感想與總結面試
- 前端秋招面試總結前端面試
- 前端React面試題總結前端React面試題
- 2020年 近期出去面試Java的總結（持續更新）面試Java
- 阿里前端社招面試總結阿里前端面試
- [前端 · 面試 ]TCP 總結（一）—— 概述前端面試TCP
- 【前端 · 面試 】TCP 總結（一）—— 概述前端面試TCP
- 畢業一年左右的前端妹子面經總結前端
- 近期總結
- 前端一面手寫面試題總結前端面試題
- 初級前端開發面試總結前端面試
- 前端大廠面試一點總結前端面試
- 前端常見面試題少量總結前端面試題
- [前端 · 面試 ]HTTP 總結（十一）—— HTTPS 概述前端面試HTTP
- [前端 · 面試 ]HTTP 總結（一）—— HTTP 概述前端面試HTTP
- 前端面試指南之JS面試題總結前端JS面試題
- 前端計劃——面試題總結-HTML篇前端面試題HTML
- 前端知識點總結—面試專用前端面試
- [前端 · 面試 ]HTTP 總結（五）—— GET 和 POST前端面試HTTP
- [前端 · 面試 ]HTTP 總結（十二）—— URL 和 URI前端面試HTTP
- 【前端 · 面試 】HTTP 總結（十二）—— URL 和 URI前端面試HTTP
- [前端 · 面試 ]HTTP 總結（二）—— HTTP 訊息前端面試HTTP
- 社招中級前端筆試面試題總結前端筆試面試題
- 【面試】三年渣渣前端面試總結面試前端
- 近期學習總結
- 多年前端面試官的面試套路總結前端面試
- 【前端面試】Vue面試題總結(持續更新中)前端Vue面試題
- 前端經典的JavaScript面試知識總結前端JavaScript面試
- [前端 · 面試 ]HTTP 總結（四）—— HTTP 狀態碼前端面試HTTP
- [前端 · 面試 ]HTTP 總結（三）—— HTTP 請求方法前端面試HTTP
- [前端 · 面試 ]HTTP 總結（七）—— HTTP 快取概述前端面試HTTP快取
- [前端 · 面試 ]HTTP 總結（八）—— HTTP 強快取前端面試HTTP快取
- 面試總結面試
- 【面試】社招中級前端筆試面試題總結-答案及擴充前端筆試面試題
- 前端演算法類面試總結(持續更新...)前端演算法面試