一年前端近期面試總結
目錄
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面試題
- 前端面試總結(at, md)前端面試
- 近期學習總結
- 一年半經驗,百度、有贊、阿里前端面試總結阿里前端面試
- 一年前端使用 react 系列 總結前端React
- 阿里前端社招面試總結阿里前端面試
- 【前端 · 面試 】TCP 總結(一)—— 概述前端面試TCP
- [前端 · 面試 ]TCP 總結(一)—— 概述前端面試TCP
- 前端面試題及其總結前端面試題
- 關於近期的總結
- 前端面試指南之JS面試題總結前端JS面試題
- 學習前端近一年的反思與總結前端
- 前端大廠面試一點總結前端面試
- 前端面試總結篇(初級)前端面試
- 前端常見面試題少量總結前端面試題
- 初級前端開發面試總結前端面試
- [前端 · 面試 ]HTTP 總結(一)—— HTTP 概述前端面試HTTP
- 前端面試題總結(定期更新)前端面試題
- 【面試】三年渣渣前端面試總結面試前端
- 近期回答的問題總結
- 畢業一年左右的前端妹子面經總結前端
- 2020年 近期出去面試Java的總結(持續更新)面試Java
- 前端面試題總結(陸續更新.......)前端面試題
- 2019前端面試總結前端面試
- 前端知識點總結—面試專用前端面試
- 2017前端實習生面試總結前端面試
- 前端計劃——面試題總結-HTML篇前端面試題HTML
- 2018前端面試總結前端面試