當前位置:首頁 » 網頁前端 » 前端面試手寫代碼能考哪些
擴展閱讀
webinf下怎麼引入js 2023-08-31 21:54:13
堡壘機怎麼打開web 2023-08-31 21:54:11

前端面試手寫代碼能考哪些

發布時間: 2023-08-08 22:41:41

① WEB前端面試題

第二章 面試題基礎篇

2.1 HTML面試題

面試題:行內元素有哪些?塊級元素有哪些? 空(void)元素有那些?

面試題:頁面導入樣式時,使用link和@import有什麼區別?

面試題:title與h1的區別、b與strong的區別、i與em的區別?

面試題:img標簽的title和alt有什麼區別?

面試題:png、jpg、gif 這些圖片格式解釋一下,分別什麼時候用?

2.2 CSS面試題

面試題:css背景紋路

面試題:介紹一下CSS的盒子模型

面試題:CSS選擇符有哪些?哪些屬性可以繼承?

面試題:CSS優先順序演算法如何計算?

面試題:用CSS畫一個三角形

面試題:一個盒子不給寬度和高度如何水平垂直居中?

面試題:display有哪些值?說明他們的作用。

面試題:對BFC規范(塊級格式化上下文:block formatting context)的理解?

面試題:清除浮動有哪些方式?

面試題:在網頁中的應該使用奇數還是偶數的字體?為什麼呢?

面試題:寫一個左中右布局占滿屏幕,其中左、右倆塊固定寬200,中間自適應寬,要求先載入中間塊,請寫出結構及樣式。

面試題:什麼是CSS reset?

面試題:css sprite是什麼,有什麼優缺點

面試題:display: none;與visibility: hidden;的區別

面試題:position有哪些值?有什麼作用? 【特別多公司問】

面試題:line-height和height有什麼區別?

面試題:opacity 和 rgba區別

2.3 JavaScript基礎面試題

面試題:延遲載入JS有哪些方式?

面試題:JS數據類型有哪些?

面試題:null和undefined的區別

面試題:JS數據類型考題

面試題:==和===有什麼不同

面試題:JS微任務和宏任務

面試題:JS作用域考題

面試題:JS對象考題

面試題:JS作用域+this指向+原型 考題

面試題:JS判斷變數是不是數組,你能寫出哪些方法?

面試題:slice是幹嘛的、splice是否會改變原數組

面試題:JS數組去重

面試題:找出多維數組最大值

面試題:給字元串新增方法實現功能

面試題:找出字元串出現最多次數的字元以及次數

2.4 真正移動端 —— H5/C3面試題

面試題:什麼是語義化標簽

面試題:::before 和 :after中雙冒號和單冒號 有什麼區別?解釋一下這2個偽元素的作用。

面試題:如何關閉iOS鍵盤首字母自動大寫

面試題:怎麼讓Chrome支持小於12px 的文字?

面試題:rem和em有什麼樣區別

面試題:ios系統中元素被觸摸時產生的半透明灰色遮罩怎麼去掉

面試題:webkit表單輸入框placeholder的顏色值能改變嗎?

面試題:禁止ios 長按時不觸發系統的菜單,禁止ios&android長按時下載圖片

面試題:禁止ios和android用戶選中文字

面試題:自適應 [淘寶無線適配]

面試題:響應式

第三章 面試題進階篇

3.1 JavaScript進階面試題

面試題:new操作符具體做了什麼

面試題:閉包 【必須會】

面試題:原型鏈 【必須會】

面試題: JS繼承有哪些方式

面試題:說一下call、apply、bind區別

面試題:sort背後原理是什麼?

面試題:深拷貝和淺拷貝

面試題:localstorage、sessionstorage、cookie的區別

3.2 ES6面試題

面試題:var、let、const區別

面試題:作用域考題

面試題:將下列對象進行合並

面試題:箭頭函數和普通函數有什麼區別?

面試題:Promise有幾種狀態

面試題:find和filter的區別 【大廠】

面試題:some和every的區別 【大廠】

3.3 webpack面試題

面試題:webpack插件

3.4 Git面試題

面試題:git常用命令

面試題:解決沖突

面試題:GitFlow

第四章 面試題框架篇

4.1 區分初中高級的 —— Vue面試題

面試題:Vue2.x 生命周期有哪些?

1.系統自帶八個

2.當一旦進入到某個組件會執行哪些生命周期

3.$el和$data在哪個階段有

4.如果使用keep-alive會多倆個生命周期

5.如果加入keep-alive第一次進入組件會執行哪些生命周期

6.如果加入keep-alive第二次或者第N進入該組件會執行哪些生命周期

面試題:談談你對keep-alive的了解

面試題:v-if和v-show區別

面試題:v-if和v-for優先順序 2.x

面試題:ref是什麼?

面試題:nextTick是什麼?

面試題:Vue中如何做樣式穿透

面試題:scoped原理

面試題:Vuex是單向數據流還是雙向數據流?

面試題:講一下MVVM

面試題:雙向綁定原理

面試題:什麼是虛擬DOM

面試題:key是干什麼?

面試題:diff演算法

面試題:Vue組件傳值

面試題:props和data優先順序誰高?

面試題:computed、methods、watch有什麼區別?

面試題:Vuex

面試題:Vue路由

面試題:Vue項目打包後出現空白頁

4.2 微信小程序面試題

面試題:如何自定義頭部?

面試題:如何自定義底部?

4.3 uni-app面試題

面試題:生命周期

面試題:條件編譯

第五章 面試題性能優化篇

② Web前端5道面試題

1.請說明ECMAScript,JavaScript,Jscript之間的關系?

ECMAScript提供腳本語言必須遵守的規則、

細節和准則,是腳本語言的規范。

比如:ES5,ES6就是具體的一js版本。

JavaScript是ECMAScript的一個分支版本,

JavaScript實現了多數ECMA-262中

描述的ECMAScript規范,但存在少數差異。

JScript是微軟公司對ECMA-262語言規范的

一種實現,除了少數例外(這是為了保持向後兼容),

微軟公司宣稱JScript完全實現了ECMA標准.

關系:

JavaScript和JScript都是ECMAScript的版本分支,

二者在語法上沒有多大的區別;

只不過一個是NetScape公司的,一個是微軟的;

IE系列默認是JScript,其它的則反之用JavaScript。


2.頁面載入過程中可能觸發哪些事件?它們的順序是?

頁面載入時,大致可以分為以下幾個步驟:1)開始解析HTML文檔結構2)載入外部樣式表及JavaScript腳本3)解析執行JavaScript腳本4)DOM樹渲染完成5)載入未完成的外部資源6)頁面載入成功

執行順序:1)documentreadystatechange事件2)documentDOMContentLoaded事件3)windowload事件


3.函數中在聲明變數a前使用a會產生錯誤嗎?為什麼?

不會,JS中能夠進行變數作用域提升,

把所有變數、函數的聲明提升到當前

作用域的最前面,但不進行賦值操作;

所以可能造成獲取的值是undefined。


4.什麼是hash,以及hashchange事件?

先了解下什麼是hash:hash即URL中"#"字元後面的部分。

a)使用瀏覽器訪問網頁時,

如果網頁URL中帶有hash,

頁面就會定位到id(或name)

與hash值一樣的元素的位置;

b)hash還有另一個特點,

它的改變不會導致頁面重新載入如橡尺;

c)hash值瀏如清覽器是不會隨請求發送到伺服器端的;

d)通過window.location.hash屬性獲取和設置hash值。

window.location.hash值的變化會直渣高接

反應到瀏覽器地址欄(#後面的部分會發生變化),同時,瀏覽器地址欄hash值的變化也會觸發

window.location.hash值的變化,

從而觸發onhashchange事件。

再來了解下什麼是hashchange事件:

a)當URL的片段標識符更改時,

將觸發hashchange事件(跟在#符號後面的URL部分,包括#符號)b)

hashchange事件觸發時,

事件對象會有hash改變前的URL(oldURL)和hash改變後的URL(newURL)兩個屬性。


5.什麼是CDN,CDN對於網站有什麼意義,它有什麼樣的缺點?

CDN又稱為內容分發網路;本意在於

盡可能避開互聯網上有可能影響數據

傳輸速度和穩定性的瓶頸和環節,

使內容傳輸的更快、更穩定。

主要目的:

解決因分布、帶寬、伺服器性能帶來的訪問延遲問題,

適用於站點加速、點播、直播等場景。

使用戶可就近取得所需內容,解決Internet網路擁擠的狀況,

提高用戶訪問網站的響應速度和成功率。

缺點:

a)實施復雜,投資大;

b)目前大部分的CDN還只是對靜態內容加速,

對動態加速效果不好;

而雙線對動態加速的效果跟靜態是一樣的。

③ 經典的 Web 前端或者 JavaScript 面試筆試題有哪些

一、不定項選擇題(每題3分,共30分)x0dx0a1.聲明一個對象,給它加上name屬性和show方法顯示其name值,以下代碼中正確的是(D)x0dx0aA.varobj=[name:"zhangsan",show:function(){alert(name);}];x0dx0aB.varobj={name:」zhangsan」,show:」alert(this.name)」};x0dx0aC.varobj={name:」zhangsan」,show:function(){alert(name);}};x0dx0aD.varobj={name:」zhangsan」,show:function(){alert(this.name);}};x0dx0a2.以下關於Array數組對象的說法不正確的是(CD)x0dx0aA.對數組里數據的排序可以用sort函數,如果排序效果非預期,可以給sort函數加一個排序函數的參數x0dx0aB.reverse用於對數組數據的倒序排列x0dx0aC.向數組的最後位置加一個新元素,可以用pop方法x0dx0aD.unshift方法用於向數組刪除第一個元素x0dx0a3.要將頁面的狀態欄中顯示「已經選中該文本框」,下列JavaScript語句正確的是(A)x0dx0aA.window.status=」已經選中該文本框」x0dx0aB.document.status=」已經選中該文本框」x0dx0aC.window.screen=」已經選中該文本框」x0dx0aD.document.screen=」已經選中該文本框」x0dx0a4.點擊頁面的按鈕,使之打開一個新窗口,載入一個網頁,以下JavaScript代碼中可行的是(AD)x0dx0aA.x0dx0aB.x0dx0aC.x0dx0aD.x0dx0ax0dx0ax0dx0a5.使用JavaScript向網頁中輸出

hello

,以下代碼中可行的是(BD)x0dx0aA.x0dx0adocument.write(

hello

);x0dx0ax0dx0aB.x0dx0adocument.write(「

hello

」);x0dx0ax0dx0aC.x0dx0a

hello

x0dx0ax0dx0aD.

x0dx0ax0dx0adocument.write(「hello」);x0dx0ax0dx0a

x0dx0a6.分析下面的代碼:x0dx0ax0dx0ax0dx0ax0dx0afunctionwriteIt(value){document.myfm.first_text.value=value;}x0dx0ax0dx0ax0dx0ax0dx0ax0dx0ax0dx0ax0dx0ax0dx0ax0dx0ax0dx0a以下說法中正確的是(CD)x0dx0aA.在頁面的第二個文本框中輸入內容後,當滑鼠離開第二個文本框時,第一個文本框的內容不變x0dx0aB.在頁面的第一個文本框中輸入內容後,當滑鼠離開第一個文本框時,將在第二個文本框中復制第一個文本框的內容x0dx0aC.在頁面的第二個文本框中輸入內容後,當滑鼠離開第二個文本框時,將在第一個文本框中復制第二個文本框的內容x0dx0aD.在頁面的第一個文本框中輸入內容後,當滑鼠離開第一個文本框時,第二個文本框的內容不變x0dx0a7.下面的JavaScript語句中,(D)實現檢索當前頁面中的表單元素中的所有文本框,並將它們全部清空x0dx0aA.for(vari=0;i存儲數據,是對html的補充,兩者的目的不同x0dx0aC.在JavaScript里解析和處理xml數據時,因為瀏覽器的不同,其做法也不同x0dx0aD.在IE瀏覽器里處理xml,首先需要創建ActiveXObject對象x0dx0a二、問答題x0dx0a1.列舉瀏覽器對象模型BOM里常用的至少4個對象,並列舉window對象的常用方法至少5個(10分)x0dx0a對象:x0dx0a方法:Alert()confirm()prompt()open()close()x0dx0a2.簡述列舉文檔對象模型DOM里document的常用的查找訪問節點的方法並做簡單說明(10分)x0dx0aDocument.getElementById根據元素id查找元素x0dx0aDocument.getElementByName根據元素name查找元素x0dx0aDocument.getElementTagName根據指定的元素名查找元素x0dx0a三、程序題x0dx0a1、補充按鈕事件的函數,確認用戶是否退出當前頁面,確認之後關閉窗口;(10分)x0dx0ax0dx0ax0dx0ax0dx0afunctioncloseWin(){x0dx0a//在此處添加代碼x0dx0aif(confirm(「確定要退出嗎?」)){x0dx0awindow.close();x0dx0a}x0dx0a}x0dx0ax0dx0ax0dx0ax0dx0ax0dx0ax0dx0ax0dx0a2、寫出簡單描述html標簽(不帶屬性的開始標簽和結束標簽)的正則表達式,並將以下字元串中的html標簽去除掉(15分)x0dx0avarstr=「
這里是div

裡面的段落

④ 經典的 Web 前端或者 JavaScript 面試筆試題有哪些

一、不定項選擇題 (每題3分,共30分)
1. 聲明一個對象,給它加上name屬性和show方法顯示其name值,以下代碼中正確的是( D )
A. var obj = [name:"zhangsan",show:function(){alert(name);}];
B. var obj = {name:」zhangsan」,show:」alert(this.name)」};
C. var obj = {name:」zhangsan」,show:function(){alert(name);}};
D. var obj = {name:」zhangsan」,show:function(){alert(this.name);}};
2. 以下關於Array數組對象的說法不正確的是( CD )
A. 對數組里數據的排序可以用sort函數,如果排序效果非預期,可以給sort函數加一個排序函數的參數
B. reverse用於對數組數據的倒序排列
C. 向數組的最後位置加一個新元素,可以用pop方法
D. unshift方法用於向數組刪除第一個元素
3. 要將頁面的狀態欄中顯示「已經選中該文本框」,下列JavaScript語句正確的是( A )
A. window.status=」已經選中該文本框」
B. document.status=」已經選中該文本框」
C. window.screen=」已經選中該文本框」
D. document.screen=」已經選中該文本框」
4. 點擊頁面的按鈕,使之打開一個新窗口,載入一個網頁,以下JavaScript代碼中可行的是( AD )
A. <input type=」button」 value=」new」
onclick=」open(『new.html』, 『_blank』)」/>
B. <input type=」button」 value=」new」
onclick=」window.location=』new.html』;」/>
C. <input type=」button」 value=」new」
onclick=」location.assign(『new.html』);」/>
D. <form target=」_blank」action=」new.html」>
<inputtype=」submit」 value=」new」/>
</form>
5. 使用JavaScript向網頁中輸出<h1>hello</h1>,以下代碼中可行的是( BD )
A. <scripttype=」text/javascript」>
document.write(<h1>hello</h1>);
</script>
B. <scripttype=」text/javascript」>
document.write(「<h1>hello</h1>」);
</script>
C. <scripttype=」text/javascript」>
<h1>hello</h1>
</script>
D. <h1>
<scripttype=」text/javascript」>
document.write(「hello」);
</script>
</h1>
6. 分析下面的代碼:
<html>
<head>
<script type=」text/javascript」>
function writeIt (value) { document.myfm.first_text.value=value;}
</script>
</head>
<body bgcolor=」#ffffff」>
<form name=」myfm」>
<input type=」text」 name=」first_text」>
<input type=」text」 name=」second_text」>
</form>
</body>
</html>
以下說法中正確的是( CD )
A. 在頁面的第二個文本框中輸入內容後,當滑鼠離開第二個文本框時,第一個文本框的內容不變
B. 在頁面的第一個文本框中輸入內容後,當滑鼠離開第一個文本框時,將在第二個文本框中復制第一個文本框的內容
C. 在頁面的第二個文本框中輸入內容後,當滑鼠離開第二個文本框時,將在第一個文本框中復制第二個文本框的內容
D. 在頁面的第一個文本框中輸入內容後,當滑鼠離開第一個文本框時,第二個文本框的內容不變
7. 下面的JavaScript語句中,( D )實現檢索當前頁面中的表單元素中的所有文本框,並將它們全部清空
A. for(vari=0;i< form1.elements.length;i++) {
if(form1.elements.type==」text」)
form1.elements.value=」";}
B. for(vari=0;i<document.forms.length;i++) {
if(forms[0].elements.type==」text」)
forms[0].elements.value=」";
}
C. if(document.form.elements.type==」text」)
form.elements.value=」";
D. for(vari=0;i<document.forms.length; i++){
for(var j=0;j<document.forms.elements.length; j++){
if(document.forms.elements[j].type==」text」)
document.forms.elements[j].value=」";
}
}
8. 在表單(form1)中有一個文本框元素(fname),用於輸入電話號碼,格式如:010-82668155,要求前3位是010,緊接一個「-」,後面是8位數字。要求在提交表單時,根據上述條件驗證該文本框中輸入內容的有效性,下列語句中,( A )能正確實現以上功能
A. var str= form1.fname.value;
if(str.substr(0,4)!=」010-」|| str.substr(4).length!=8 ||
isNaN(parseFloat(str.substr(4))))
alert(「無效的電話號碼!」);
B. var str= form1.fname.value;
if(str.substr(0,4)!=」010-」 && str.substr(4).length!=8 &&
isNaN(parseFloat(str.substr(4))))
alert(「無效的電話號碼!」);
C. var str= form1.fname.value;
if(str.substr(0,3)!=」010-」|| str.substr(3).length!=8 ||
isNaN(parseFloat(str.substr(3))))
alert(「無效的電話號碼!」);
D. var str= form1.fname.value;
if(str.substr(0,4)!=」010-」&& str.substr(4).length!=8 &&
!isNaN(parseFloat(str.substr(4))))
alert(「無效的電話號碼!」);
9. 關於正則表達式聲明6位數字的郵編,以下代碼正確的是( C )
A. var reg = /\d6/;
B. var reg = \d{6}\;
C. var reg = /\d{6}/;
D. var reg = new RegExp(「\d{6}」);
10. 關於JavaScript里的xml處理,以下說明正確的是( BCD )
A. Xml是種可擴展標記語言,格式更規范,是作為未來html的替代
B. Xml一般用於傳輸和存儲數據,是對html的補充,兩者的目的不同
C. 在JavaScript里解析和處理xml數據時,因為瀏覽器的不同,其做法也不同
D. 在IE瀏覽器里處理xml,首先需要創建ActiveXObject對象
二、問答題
1. 列舉瀏覽器對象模型BOM里常用的至少4個對象,並列舉window對象的常用方法至少5個 (10分)
對象:Window document location screen history navigator
方法:Alert() confirm() prompt() open() close()
2. 簡述列舉文檔對象模型DOM里document的常用的查找訪問節點的方法並做簡單說明 (10分)
Document.getElementById 根據元素id查找元素
Document.getElementByName 根據元素name查找元素
Document.getElementTagName 根據指定的元素名查找元素
三、程序題
1、補充按鈕事件的函數,確認用戶是否退出當前頁面,確認之後關閉窗口; (10分)
<html>
<head>
<script type=」text/javascript」 >
function closeWin(){
//在此處添加代碼
if(confirm(「確定要退出嗎?」)){
window.close();
}
}
</script>
</head>
<body>
<input type=」button」value=」關閉窗口」onclick=」closeWin()」/>
</body>
</html>
2、寫出簡單描述html標簽(不帶屬性的開始標簽和結束標簽)的正則表達式,並將以下字元串中的html標簽去除掉(15分)
var str = 「<div>這里是div<p>裡面的段落</p></div>」;
//
<scripttype=」text/javascript」>
varreg = /<\/?\w+\/?>/gi;
varstr = 「<div>這里是div<p>裡面的段落</p></div>」;
alert(str.replace(reg,」"));
</script>
3、完成foo()函數的內容,要求能夠彈出對話框提示當前選中的是第幾個單選框。(10分)
<html>
<head>
<metahttp-equiv=」Content-Type」 content=」text/html;charset=utf-8″ />
</head>
<body>
<script type=」text/javascript」 >
function foo() {
//在此處添加代碼
var rdo =document.form1.radioGroup;
for(var i =0 ;i<rdo.length;i++){
if(rdo.checked){
alert(「您選擇的是第」+(i+1)+」個單選框」);
}
}
}
</script>
<body>
<form name=」form1″ >
<input type=」radio」 name=」radioGroup」/>
<input type=」radio」 name=」radioGroup」/>
<input type=」radio」 name=」radioGroup」/>
<input type=」radio」 name=」radioGroup」/>
<input type=」submit」/>
</form>
</body>
</html>
4、完成函數showImg(),要求能夠動態根據下拉列表的選項變化,更新圖片的顯示 (15分)
<body>
<script type=」text/javascript」 >
function showImg (oSel) {
//在此處添加代碼
var str = oSel.value;
document.getElementById(「pic」).src= str+」.jpg」;
}
</script>
<img id=」pic」src=」img1.jpg」width=」200″ height=」200″ />
<br />
<select id=」sel」>
<option value=」img1「>城市生活</option>
<option value=」img2「>都市早報</option>
<option value=」img3「>青山綠水</option>
</select></body>

⑤ java兩年經驗面試都會問什麼問題

個人介紹:
首先介紹下我面試時的自身條件情況,我把自己的情況分為優勢和劣勢來說可能更有利於你們比較自身情況。
劣勢:
1.15年7月畢業後開始到上海工作,面試的時候是17年3月到4月,一年多的經驗,勉強算兩年經驗。分析:一年多經驗我認為是比較尷尬的,處於一個不上不下的位置,很多公司比較喜歡招三年經驗的,或者直接招應屆生來培養。
2.畢業於一個非985/211,勉強上一本的高校。分析:這個相對影響較小,因為有工作經驗後,公司對學校的要求就沒那麼高了,只要是本科就基本沒問題,但是還是有個別叼毛公司只要985/211。
3.前一家公司是傳統電信行業,加入項目組時,項目已經上線有段時間了,我們的任務就是有需求就開發,有bug就優化,其他時間就聊騷,各干各的,工作一年多跟在養老一樣,用一句話說就是編程5分鍾,扯淡2小時,項目經驗嚴重不足,沒開發過很難的需求。分析:這一點是最傷的,公司招有經驗的就想看你都幹了些什麼牛批的東西,結果你告訴面試官我寫的需求都是垃圾。
優勢:
1.大學時拿過比較多的獎,每年都是校級優秀學生,畢業時是市級優秀畢業生,拿過省級ACM二等獎等。分析:大學的榮譽對一個有工作經驗的人來說,公司不一定會看重,但是可能會對面試官產生微妙的影響,特別是ACM獎,我碰到過有的面試官也是搞過ACM的,有共同的話題聊起來總是比較容易的,但是也要注意不能把這一欄篇幅寫的過於多,只能當作點綴用,我當時是放在簡歷最後一欄,簡要的寫了最主要的幾個獎。
2.良好的溝通交流能力。分析:這個能力不會是關鍵性的,但是可以加分。
3.較強的學習能力和邏輯思維能力。分析:有些公司和面試官還是比較看重一個人的學習能力的,經驗代表著你現在在什麼級別,而學習能力則代表著你將來能到達什麼級別。
學習過程:
看了我的優劣勢介紹,你會發現我的優勢相對於我的劣勢來說,簡直不值一提。我自己對此也有清晰的認識,因此從過完年之後,我就開始抓緊空閑時間學習。學習的過程如下:
1.看面試題
正常人第一步肯定都會看面試題,我也不例外,在看的過程中,我發現有些文章寫的不錯,對我幫助不小值得推薦,如下:
Java面試題全集(上)很多基礎的東西,建議先看。
各大公司Java後端開發面試題總結
面試心得與總結—BAT、網易、蘑菇街
關於Java面試,你應該准備這些知識點
2.深入學習
在看面試題的過程,你會遇到一些自己沒接觸過的或者以前沒深入學習過的知識,例如最常問的HashMap內部實現原理,這就促使你得開始去看jdk的源碼或者是學習一些新的東西。看源碼是很重要的一步,起步很難,但是會讓你收益良多,看源碼的過程如果碰到無法理解的地方,可以網路看下別人的理解。我學習源碼的過程中,看過幾個人的關於源碼的文章寫的很不錯,如下:
五月的倉頡
佔小狼
zhangshixi的Core java系列
3.熟悉項目
找出自己工作以來開發過的最叼的功能,將整個功能的流程和涉及的東西吃透。項目是面試中必問的環節,一般是以一個功能點為基礎展開問,因此你必須對這個功能有很深的認識,不能有模糊的地方。如果有時間,能把涉及到的知識點也搞懂最好。
4.做面試題
有不少公司是有面試的,如果你沒有準備過,很容易在各種小地方犯錯,建議去一些面試題網站多做些題目,我自己是用的牛客網。
5.學習記錄
把自己每天的學習時間和學習內容記錄下來,可以讓自己更有動力的學習,學習是一個枯燥的過程,你必須讓自己時刻保持有動力。
投簡歷、約面試環節
1.在哪些網站投?
拉勾網、BOSS直聘、獵聘網。
2.是否該海投?
投簡歷分為兩個情況。
1)沒有社招面試經驗:建議採取海投的方式,只要職位要求跟自己比較匹配都可以投,累計面試經驗。這個環節可以把投簡歷的網站增加兩家:智聯和無憂。
2)自認為社招面試經驗已經足夠:投那些職位匹配、公司滿意的職位。公司評價可以去看準網、網路、知乎等查詢。
3.一天約幾家面試合適?
最理想的情況為2家面試,上午一般在10點左右,下午一般在2點左右。建議把理想的公司放下午,因為下午的時間比較充足,可以讓公司更充分的了解你。我開始面的時候,每次都是上午面的不好,下午面的不錯。
4.投簡歷經常沒下文?
我當初也沒想到簡歷篩選這關有這么難,可能是我的簡歷確實亮點不多,再者HR很多都不是行內人,因此他們看得最直接的就是你上家的公司和你畢業的學校,如果你不是從牛逼的公司/學校出來,可能會碰到和我一樣的情況,應對的辦法就是多投。
5.是否該裸辭?
我一開始是邊上班邊投,然後利用調休時間,或者請假去面試。後來,面試機會越來越多,請假太頻繁了,自己都不好意思了,並且自己也已經有足夠的信心,這個時候我選擇了裸辭。裸辭還有一個原因是,在面試過程中你會發現,有的公司要人要的緊,如果你的辭職流程過長可能會導致你錯過這個公司。
6.注意事項
1)面試前一天把路線和時間算好,最好別遲到。
2)背個書包,帶好簡歷、充電寶、紙巾、雨傘。
面試環節
1.筆試常見的問題?
面試常見的問題上面給的面試題鏈接基本都有。我只提幾點:1)寫sql:寫SQL很常考察group by、內連接和外連接。2)手寫代碼:手寫代碼一般考單例、排序、線程、消費者生產者。我建議排序演算法除了冒泡排序,最好還能手寫一種其他的排序代碼。試想:如果一般面試者都寫的冒泡排序,而你寫的是快速排序/堆排序,肯定能給面試官留下不錯的印象。
2.面試流程?
1)讓你自我介紹
2)問Java基礎知識
3)問項目
4)情景問題,例如:你的一個功能上了生產環境後,伺服器壓力驟增,該怎麼排查。
5)你有什麼想問面試官的
3.面試常問的知識點?
1)集合相關問題(必問):
HashMap、LinkedHashMap、ConcurrentHashMap、ArrayList、LinkedList的底層實現。
HashMap和Hashtable的區別。
ArrayList、LinkedList、Vector的區別。
HashMap和ConcurrentHashMap的區別。
HashMap和LinkedHashMap的區別。
HashMap是線程安全的嗎。
ConcurrentHashMap是怎麼實現線程安全的。
2)線程相關問題(必問):
創建線程的3種方式。
什麼是線程安全。
Runnable介面和Callable介面的區別。
wait方法和sleep方法的區別。
synchronized、Lock、ReentrantLock、ReadWriteLock。
介紹下CAS(無鎖技術)。
什麼是ThreadLocal。
創建線程池的4種方式。
ThreadPoolExecutor的內部工作原理。
分布式環境下,怎麼保證線程安全。
3)JVM相關問題:
介紹下垃圾收集機制(在什麼時候,對什麼,做了什麼)。
垃圾收集有哪些演算法,各自的特點。
類載入的過程。
雙親委派模型。
有哪些類載入器。
能不能自己寫一個類叫java.lang.String。
4)設計模式相關問題(必問):
先問你熟悉哪些設計模式,然後再具體問你某個設計模式具體實現和相關擴展問題。
5)資料庫相關問題,針對Mysql(必問):
給題目讓你手寫SQL。
有沒有SQL優化經驗。
Mysql索引的數據結構。
SQL怎麼進行優化。
SQL關鍵字的執行順序。
有哪幾種索引。
什麼時候該(不該)建索引。
Explain包含哪些列。
Explain的Type列有哪幾種值。
6)框架相關問題:
Hibernate和Mybatis的區別。
Spring MVC和Struts2的區別。
Spring用了哪些設計模式。
Spring中AOP主要用來做什麼。
Spring注入bean的方式。
什麼是IOC,什麼是依賴注入。
Spring是單例還是多例,怎麼修改。
Spring事務隔離級別和傳播性。
介紹下Mybatis/Hibernate的緩存機制。
Mybatis的mapper文件中#和$的區別。
Mybatis的mapper文件中resultType和resultMap的區別。
Mybatis中DAO層介面沒有寫實現類,Mapper中的方法和DAO介面方法是怎麼綁定到一起的,其內部是怎麼實現的。
7)其他遇到問題:
介紹下棧和隊列。
IO和NIO的區別。
介面和抽象類的區別。
int和Integer的自動拆箱/裝箱相關問題。
常量池相關問題。
==和equals的區別。
重載和重寫的區別。
String和StringBuilder、StringBuffer的區別。
靜態變數、實例變數、局部變數線程安全嗎,為什麼。
try、catch、finally都有return語句時執行哪個。
介紹下B樹、二叉樹。
ajax的4個字母分別是什麼意思。
xml全稱是什麼。
分布式鎖的實現。
分布式session存儲解決方案。
常用的linux命令。
一些經驗:
1.先投一些普通公司,等面出了心得再去投理想的公司。
2.不熟悉的技術不要主動提。
3.對於那種實習期6個月還打8折的公司,除非你沒有其他選擇了,否則不要去。
4.小公司喜歡在薪水上壓你,開的時候適當提高。
5.不要去參加招聘會,純粹是浪費時間。
6.把面試當作一次技術的交流,不要太在意是否能被錄取。
7.公司一般面完就決定是否錄取了,讓你回去等消息這種情況一般沒戲,無論你自己覺得面的有多好。
8.盡量少通過電話面試,效果不好。
9.在面試的日子裡,要保持每天學習,無論是學習新東西還是復習舊東西。
10.拿到offer了,問問自己這個公司讓自己100%滿意了嗎,如果不是,請繼續努力找更好的。
11.通過面試官可以大概判斷這家公司的情況。
12.拉勾投的簡歷很多會被篩掉,但是拉勾還是面試機會的最主要來源。
13.理想的公司可以多投幾次,我有好幾次都是第一次投被篩掉,多投幾次就過的經驗。
14.問到自己有深入研究過的知識,抓住機會好好表現,不要輕易放過。

⑥ Web前端崗位面試題有哪些

前端面試題匯總,基本上會有四大類問題,具體如下:
一、HTML

1、Doctype作用?嚴格模式與混雜模式如何區分?它們有何意義?

2、HTML5 為什麼只需要寫 <!DOCTYPE HTML>?
3、行內元素有哪些?塊級元素有哪些? 空(void)元素有那些?
4、頁面導入樣式時,使用link和@import有什麼區別?
5、介紹一下你對瀏覽器內核的理解?
6、常見的瀏覽器內核有哪些?
7、html5有哪些新特性、移除了那些元素?如何處理HTML5新標簽的瀏覽器兼容問題?如何區分 HTML 和 HTML5?
8、簡述一下你對HTML語義化的理解?
9、HTML5的離線儲存怎麼使用,工作原理能不能解釋一下?
10、瀏覽器是怎麼對HTML5的離線儲存資源進行管理和載入的呢?
11、請描述一下 cookies,sessionStorage 和 localStorage 的區別?
12、iframe有那些缺點?
13、Label的作用是什麼?是怎麼用的?(加 for 或 包裹)
14、HTML5的form如何關閉自動完成功能?
15、如何實現瀏覽器內多個標簽頁之間的通信? (阿里)
16、webSocket如何兼容低瀏覽器?(阿里)
17、頁面可見性(Page Visibility)API 可以有哪些用途?
18、如何在頁面上實現一個圓形的可點擊區域?
19、實現不使用 border 畫出1px高的線,在不同瀏覽器的Quirksmode和CSSCompat模式下都能保持同一效果。
20、網頁驗證碼是幹嘛的,是為了解決什麼安全問題?
21、tite與h1的區別、b與strong的區別、i與em的區別?

二、css

1、介紹一下標準的CSS的盒子模型?與低版本IE的盒子模型有什麼不同的?

2、CSS選擇符有哪些?哪些屬性可以繼承?
3、CSS優先順序演算法如何計算?
4、CSS3新增偽類有那些?
5、如何居中div?如何居中一個浮動元素?如何讓絕對定位的div居中?
6、display有哪些值?說明他們的作用。
7、position的值relative和absolute定位原點是?
8、CSS3有哪些新特性?
9、請解釋一下CSS3的Flexbox(彈性盒布局模型),以及適用場景?
10、用純CSS創建一個三角形的原理是什麼?

11、一個滿屏 品 字布局 如何設計?

三、常見兼容性問題?


  1. 1、li與li之間有看不見的空白間隔是什麼原因引起的?有什麼解決辦法?
    2、經常遇到的瀏覽器的兼容性有哪些?原因,解決方法是什麼,常用hack的技巧 ?
    3、為什麼要初始化CSS樣式。
    4、absolute的containing block計算方式跟正常流有什麼不同?
    5、CSS里的visibility屬性有個collapse屬性值是幹嘛用的?在不同瀏覽器下以後什麼區別?
    6、position跟display、margin collapse、overflow、float這些特性相互疊加後會怎麼樣?
    7、對BFC規范(塊級格式化上下文:block formatting context)的理解?
    8、CSS權重優先順序是如何計算的?
    9、請解釋一下為什麼會出現浮動和什麼時候需要清除浮動?清除浮動的方式
    10、移動端的布局用過媒體查詢嗎?
    11、使用 CSS 預處理器嗎?喜歡那個?
    12、CSS優化、提高性能的方法有哪些?
    13、瀏覽器是怎樣解析CSS選擇器的?
    14、在網頁中的應該使用奇數還是偶數的字體?為什麼呢?
    15、margin和padding分別適合什麼場景使用?
    16、抽離樣式模塊怎麼寫,說出思路,有無實踐經驗?[阿里航旅的面試題]
    17、元素豎向的百分比設定是相對於容器的高度嗎?
    18、全屏滾動的原理是什麼?用到了CSS的那些屬性?
    19、什麼是響應式設計?響應式設計的基本原理是什麼?如何兼容低版本的IE?
    20、視差滾動效果,如何給每頁做不同的動畫?(回到頂部,向下滑動要再次出現,和只出現一次分別怎麼做?)
    21、::before 和 :after中雙冒號和單冒號 有什麼區別?解釋一下這2個偽元素的作用。
    22、如何修改chrome記住密碼後自動填充表單的黃色背景 ?
    23、你對line-height是如何理解的?
    24、設置元素浮動後,該元素的display值是多少?(自動變成display:block)
    25、怎麼讓Chrome支持小於12px 的文字?
    26、讓頁面里的字體變清晰,變細用CSS怎麼做?(-webkit-font-smoothing: antialiased;)
    27、font-style屬性可以讓它賦值為「oblique」 oblique是什麼意思?
    28、position:fixed;在android下無效怎麼處理?
    29、如果需要手動寫動畫,你認為最小時間間隔是多久,為什麼?(阿里)
    30、display:inline-block 什麼時候會顯示間隙?(攜程)
    31、overflow: scroll時不能平滑滾動的問題怎麼處理?
    32、有一個高度自適應的div,裡面有兩個div,一個高度100px,希望另一個填滿剩下的高度。
    33、png、jpg、gif 這些圖片格式解釋一下,分別什麼時候用。有沒有了解過webp?
    34、什麼是Cookie 隔離?(或者說:請求資源的時候不要讓它帶cookie怎麼做)
    35、style標簽寫在body後與body前有什麼區別?

    四、JavaScript

    1、介紹JavaScript的基本數據類型。
    2、說說寫JavaScript的基本規范?
    3、JavaScript原型,原型鏈 ? 有什麼特點?
    4、JavaScript有幾種類型的值?(堆:原始數據類型和 棧:引用數據類型),你能畫一下他們的內存圖嗎?
    5、Javascript如何實現繼承?
    6、Javascript創建對象的幾種方式?
    7、Javascript作用鏈域?
    8、談談This對象的理解。
    9、eval是做什麼的?
    10、什麼是window對象? 什麼是document對象?
    11、null,undefined的區別?
    12、寫一個通用的事件偵聽器函數(機試題)。
    13、[「1」, 「2」, 「3」].map(parseInt) 答案是多少?
    14、關於事件,IE與火狐的事件機制有什麼區別? 如何阻止冒泡?
    15、什麼是閉包(closure),為什麼要用它?
    16、javascript 代碼中的」use strict」;是什麼意思 ? 使用它區別是什麼?
    17、如何判斷一個對象是否屬於某個類?
    18、new操作符具體幹了什麼呢?
    19、用原生JavaScript的實現過什麼功能嗎?
    20、Javascript中,有一個函數,執行時對象查找時,永遠不會去查找原型,這個函數是?
    21、對JSON的了解?
    22、[].forEach.call($$("*"),function(a){ a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16) }) 能解釋一下這段代碼的意思嗎?
    23、js延遲載入的方式有哪些?
    24、Ajax 是什麼? 如何創建一個Ajax?
    25、同步和非同步的區別?
    26、如何解決跨域問題?
    27、頁面編碼和被請求的資源編碼如果不一致如何處理?
    28、模塊化開發怎麼做?
    29、AMD(Moles/Asynchronous-Definition)、CMD(Common Mole

    Definition)規范區別?
    30、requireJS的核心原理是什麼?(如何動態載入的?如何避免多次載入的?如何 緩存的?)
    31、讓你自己設計實現一個requireJS,你會怎麼做?
    32、談一談你對ECMAScript6的了解?
    33、ECMAScript6 怎麼寫class么,為什麼會出現class這種東西?
    34、非同步載入的方式有哪些?
    35、documen.write和 innerHTML的區別?
    36、DOM操作——怎樣添加、移除、移動、復制、創建和查找節點?
    37、.call() 和 .apply() 的含義和區別?
    38、數組和對象有哪些原生方法,列舉一下?
    39、JS 怎麼實現一個類。怎麼實例化這個類
    40、JavaScript中的作用域與變數聲明提升?
    41、如何編寫高性能的Javascript?
    42、那些操作會造成內存泄漏?
    43、JQuery的源碼看過嗎?能不能簡單概況一下它的實現原理?
    44、jQuery.fn的init方法返回的this指的是什麼對象?為什麼要返回this?
    45、jquery中如何將數組轉化為json字元串,然後再轉化回來?
    46、jQuery 的屬性拷貝(extend)的實現原理是什麼,如何實現深拷貝?
    47、jquery.extend 與 jquery.fn.extend的區別?
    48、jQuery 的隊列是如何實現的?隊列可以用在哪些地方?
    49、談一下Jquery中的bind(),live(),delegate(),on()的區別?
    50、JQuery一個對象可以同時綁定多個事件,這是如何實現的?
    51、是否知道自定義事件。jQuery里的fire函數是什麼意思,什麼時候用?
    52、jQuery 是通過哪個方法和 Sizzle 選擇器結合的?(jQuery.fn.find()進入Sizzle)
    53、針對 jQuery性能的優化方法?
    54、Jquery與jQuery UI有啥區別?
    55、JQuery的源碼看過嗎?能不能簡單說一下它的實現原理?
    56、jquery 中如何將數組轉化為json字元串,然後再轉化回來?
    57、jQuery和Zepto的區別?各自的使用場景?
    58、針對 jQuery 的優化方法?
    59、Zepto的點透問題如何解決?
    60、jQueryUI如何自定義組件?
    61、需求:實現一個頁面操作不會整頁刷新的網站,並且能在瀏覽器前進、後退時正確響應。給出你的技術實現方案?
    62、如何判斷當前腳本運行在瀏覽器還是node環境中?(阿里)
    63、移動端最小觸控區域是多大?
    64、jQuery 的 slideUp動畫 ,如果目標元素是被外部事件驅動, 當滑鼠快速地連續觸發外部元素事件, 動畫會滯後的反復執行,該如何處理呢?
    65、把 Script 標簽 放在頁面的最底部的body封閉之前 和封閉之後有什麼區別?瀏覽器會如何解析它們?
    66、移動端的點擊事件的有延遲,時間是多久,為什麼會有? 怎麼解決這個延時?(click 有 300ms 延遲,為了實現safari的雙擊事件的設計,瀏覽器要知道你是不是要雙擊操作。)
    67、知道各種JS框架(Angular, Backbone, Ember, React, Meteor, Knockout…)么? 能講出他們各自的優點和缺點么?
    68、Underscore 對哪些 JS 原生對象進行了擴展以及提供了哪些好用的函數方法?
    69、解釋JavaScript中的作用域與變數聲明提升?
    70、那些操作會造成內存泄漏?
    71、JQuery一個對象可以同時綁定多個事件,這是如何實現的?
    72、Node.js的適用場景?
    (如果會用node)知道route, middleware, cluster, nodemon, pm2, server-side rendering么?
    73、解釋一下 Backbone 的 MVC 實現方式?
    74、什麼是「前端路由」?什麼時候適合使用「前端路由」? 「前端路由」有哪些優點和缺點?
    75、知道什麼是webkit么? 知道怎麼用瀏覽器的各種工具來調試和debug代碼么?
    76、如何測試前端代碼么? 知道BDD, TDD, Unit Test么? 知道怎麼測試你的前端工程么(mocha, sinon, jasmin, qUnit..)?
    77、前端templating(Mustache, underscore, handlebars)是幹嘛的, 怎麼用?
    78、簡述一下 Handlebars 的基本用法?
    79、簡述一下 Handlerbars 的對模板的基本處理流程, 如何編譯的?如何緩存的?
    80、用js實現千位分隔符?(來源:前端農民工,提示:正則+replace)
    檢測瀏覽器版本版本有哪些方式?
    81、我們給一個dom同時綁定兩個點擊事件,一個用捕獲,一個用冒泡,你來說下會執行幾次事件,然後會先執行冒泡還是捕獲

⑦ 前端經典面試題(包含JS、CSS、React、瀏覽器等)

防抖

節流

誤區:我們經常說get請求參數的大小存在限制,而post請求的參數大小是無限制的。

實際上HTTP 協議從未規定 GET/POST 的請求長度限制是多少。對get請求參數的限制是來源與瀏覽器或web伺服器,瀏覽器或web伺服器限制了url的長度。為了明確這個概念,我們必須再次強調下面幾點:

補充補充一個get和post在緩存方面的區別:

可從IIFE、AMD、CMD、CommonJS、UMD、webpack(require.ensure)、ES Mole、

vue和react都是採用diff演算法來對比新舊虛擬節點,從而更新節點。在vue的diff函數中(建議先了解一下diff演算法過程)。在交叉對比中,當新節點跟舊節點 頭尾交叉對比 沒有結果時,會根據新節點的key去對比舊節點數組中的key,從而找到相應舊節點(這里對應的是一個key => index 的map映射)。如果沒找到就認為是一個新增節點。而如果沒有key,那麼就會採用遍歷查找的方式去找到對應的舊節點。一種一個map映射,另一種是遍歷查找。相比而言。map映射的速度更快。vue部分源碼如下:

創建map函數

遍歷尋找

在React中, 如果是由React引發的事件處理(比如通過onClick引發的事件處理),調用setState不會同步更新this.state,除此之外的setState調用會同步執行this.state 。所謂「除此之外」,指的是繞過React通過addEventListener直接添加的事件處理函數,還有通過setTimeout/setInterval產生的非同步調用。

**原因:**在React的setState函數實現中,會根據一個變數isBatchingUpdates判斷是直接更新this.state還是放到隊列中回頭再說,而isBatchingUpdates默認是false,也就表示setState會同步更新this.state,但是, 有一個函數batchedUpdates,這個函數會把isBatchingUpdates修改為true,而當React在調用事件處理函數之前就會調用這個batchedUpdates,造成的後果,就是由React控制的事件處理過程setState不會同步更新this.state

虛擬dom相當於在js和真實dom中間加了一個緩存,利用dom diff演算法避免了沒有必要的dom操作,從而提高性能。

具體實現步驟如下:

用 JavaScript 對象結構表示 DOM 樹的結構;然後用這個樹構建一個真正的 DOM 樹,插到文檔當中

當狀態變更的時候,重新構造一棵新的對象樹。然後用新的樹和舊的樹進行比較,記錄兩棵樹差異

把2所記錄的差異應用到步驟1所構建的真正的DOM樹上,視圖就更新了。

結構:display:none: 會讓元素完全從渲染樹中消失,渲染的時候不佔據任何空間, 不能點擊, visibility: hidden:不會讓元素從渲染樹消失,渲染元素繼續占據空間,只是內容不可見,不能點擊 opacity: 0: 不會讓元素從渲染樹消失,渲染元素繼續占據空間,只是內容不可見,可以點擊

繼承:display: none:是非繼承屬性,子孫節點消失由於元素從渲染樹消失造成,通過修改子孫節點屬性無法顯示。visibility: hidden:是繼承屬性,子孫節點消失由於繼承了hidden,通過設置visibility: visible;可以讓子孫節點顯式。

性能:displaynone : 修改元素會造成文檔迴流,讀屏器不會讀取display: none元素內容,性能消耗較大 visibility:hidden: 修改元素只會造成本元素的重繪,性能消耗較少讀屏器讀取visibility: hidden元素內容 opacity: 0 :修改元素會造成重繪,性能消耗較少

聯系:它們都能讓元素不可見

常用的一般為三種 .clearfix , clear:both , overflow:hidden ;

比較好是 .clearfix ,偽元素萬金油版本,後兩者有局限性.

clear:both :若是用在同一個容器內相鄰元素上,那是賊好的,有時候在容器外就有些問題了, 比如相鄰容器的包裹層元素塌陷

overflow:hidden :這種若是用在同個容器內,可以形成 BFC 避免浮動造成的元素塌陷

概念:將多個小圖片拼接到一個圖片中。通過 background-position 和元素尺寸調節需要顯示的背景圖案。

優點:

缺點:

block 元素特點:

1.處於常規流中時,如果 width 沒有設置,會自動填充滿父容器 2.可以應用 margin/padding 3.在沒有設置高度的情況下會擴展高度以包含常規流中的子元素 4.處於常規流中時布局時在前後元素位置之間(獨佔一個水平空間) 5.忽略 vertical-align

inline 元素特點

1.水平方向上根據 direction 依次布局

2.不會在元素前後進行換行

3.受 white-space 控制

4. margin/padding 在豎直方向上無效,水平方向上有效

5. width/height 屬性對非替換行內元素無效,寬度由元素內容決定

6.非替換行內元素的行框高由 line-height 確定,替換行內元素的行框高由 height , margin , padding , border 決定 7.浮動或絕對定位時會轉換為 block 8. vertical-align 屬性生效

GIF :

JPEG

PNG

七種數據類型

(ES6之前)其中5種為基本類型: string , number , boolean , null , undefined ,

ES6出來的 Symbol 也是原始數據類型 ,表示獨一無二的值

Object 為引用類型(范圍挺大),也包括數組、函數,

輸出結果是:

工廠模式

簡單的工廠模式可以理解為解決多個相似的問題;

單例模式

只能被實例化(構造函數給實例添加屬性與方法)一次

沙箱模式

將一些函數放到自執行函數裡面,但要用閉包暴露介面,用變數接收暴露的介面,再調用裡面的值,否則無法使用裡面的值

發布者訂閱模式

就例如如我們關注了某一個公眾號,然後他對應的有新的消息就會給你推送,

代碼實現邏輯是用數組存貯訂閱者, 發布者回調函數裡面通知的方式是遍歷訂閱者數組,並將發布者內容傳入訂閱者數組

1.字面量

2.Object構造函數創建

3.使用工廠模式創建對象

4.使用構造函數創建對象

HTML中與javascript交互是通過事件驅動來實現的,例如滑鼠點擊事件onclick、頁面的滾動事件onscroll等等,可以向文檔或者文檔中的元素添加事件偵聽器來預訂事件。想要知道這些事件是在什麼時候進行調用的,就需要了解一下「事件流」的概念。

什麼是事件流:事件流描述的是從頁面中接收事件的順序,DOM2級事件流包括下面幾個階段。

addEventListener addEventListener 是DOM2 級事件新增的指定事件處理程序的操作,這個方法接收3個參數:要處理的事件名、作為事件處理程序的函數和一個布爾值。最後這個布爾值參數如果是true,表示在捕獲階段調用事件處理程序;如果是false,表示在冒泡階段調用事件處理程序。

IE只支持事件冒泡

獲取一個對象的原型,在chrome中可以通過__proto__的形式,或者在ES6中可以通過Object.getPrototypeOf的形式。

那麼Function.proto是什麼么?也就是說Function由什麼對象繼承而來,我們來做如下判別。

我們發現Function的原型也是Function。

我們用圖可以來明確這個關系:

這里來舉個栗子,以 Object 為例,我們常用的 Object 便是一個構造函數,因此我們可以通過它構建實例。

則此時, 實例為instance , 構造函數為Object ,我們知道,構造函數擁有一個 prototype 的屬性指向原型,因此原型為:

這里我們可以來看出三者的關系:

在 JS 中,繼承通常指的便是 原型鏈繼承 ,也就是通過指定原型,並可以通過原型鏈繼承原型上的屬性或者方法。

在函數式編程中,函數是一等公民。那麼函數柯里化是怎樣的呢?

函數柯里化指的是將能夠接收多個參數的函數轉化為接收單一參數的函數,並且返回接收餘下參數且返回結果的新函數的技術。

函數柯里化的主要作用和特點就是參數復用、提前返回和延遲執行。

在一個函數中,首先填充幾個參數,然後再返回一個新的函數的技術,稱為函數的柯里化。通常可用於在不侵入函數的前提下,為函數 預置通用參數 ,供多次重復調用。

call 和 apply 都是為了解決改變 this 的指向。作用都是相同的,只是傳參的方式不同。

除了第一個參數外, call 可以接收一個參數列表, apply 只接受一個參數數組。

bind 和其他兩個方法作用也是一致的,只是該方法會返回一個函數。並且我們可以通過 bind 實現柯里化。

如何實現一個 bind 函數

對於實現以下幾個函數,可以從幾個方面思考

如何實現一個call函數

如何實現一個apply函數

箭頭函數其實是沒有 this 的,這個函數中的 this 只取決於他外面的第一個不是箭頭函數的函數的 this 。在這個例子中,因為調用 a 符合前面代碼中的第一個情況,所以 this 是 window 。並且 this 一旦綁定了上下文,就不會被任何代碼改變。

在函數中,我們首先使用 var 關鍵字聲明了 name 變數。這意味著變數在創建階段會被提升( JavaScript 會在創建變數創建階段為其分配內存空間),默認值為 undefined ,直到我們實際執行到使用該變數的行。我們還沒有為 name 變數賦值,所以它仍然保持 undefined 的值。

使用 let 關鍵字(和 const )聲明的變數也會存在變數提升,但與 var 不同,初始化沒有被提升。在我們聲明(初始化)它們之前,它們是不可訪問的。這被稱為「暫時死區」。當我們在聲明變數之前嘗試訪問變數時, JavaScript 會拋出一個 ReferenceError 。

關於 let 的是否存在變數提升,我們何以用下面的例子來驗證:

let 變數如果不存在變數提升, console.log(name) 就會輸出 ConardLi ,結果卻拋出了 ReferenceError ,那麼這很好的說明了, let 也存在變數提升,但是它存在一個「暫時死區」,在變數未初始化或賦值前不允許訪問。

變數的賦值可以分為三個階段:

關於 let 、 var 和 function :

依次輸出:undefined -> 10 -> 20

答案: D

colorChange 方法是靜態的。靜態方法僅在創建它們的構造函數中存在,並且不能傳遞給任何子級。由於 freddie 是一個子級對象,函數不會傳遞,所以在 freddie 實例上不存在 freddie 方法:拋出 TypeError 。

1.使用第一次push,obj對象的push方法設置 obj[2]=1;obj.length+=1 2.使用第二次push,obj對象的push方法設置 obj[3]=2;obj.length+=1 3.使用console.log輸出的時候,因為obj具有 length 屬性和 splice 方法,故將其作為數組進行列印 4.列印時因為數組未設置下標為 0 1 處的值,故列印為empty,主動 obj[0] 獲取為 undefined

undefined {n:2}

首先,a和b同時引用了{n:2}對象,接著執行到a.x = a = {n:2}語句,盡管賦值是從右到左的沒錯,但是.的優先順序比=要高,所以這里首先執行a.x,相當於為a(或者b)所指向的{n:1}對象新增了一個屬性x,即此時對象將變為{n:1;x:undefined}。之後按正常情況,從右到左進行賦值,此時執行a ={n:2}的時候,a的引用改變,指向了新對象{n:2},而b依然指向的是舊對象。之後執行a.x = {n:2}的時候,並不會重新解析一遍a,而是沿用最初解析a.x時候的a,也即舊對象,故此時舊對象的x的值為{n:2},舊對象為 {n:1;x:{n:2}},它被b引用著。後面輸出a.x的時候,又要解析a了,此時的a是指向新對象的a,而這個新對象是沒有x屬性的,故訪問時輸出undefined;而訪問b.x的時候,將輸出舊對象的x的值,即{n:2}。

在比較相等性,原始類型通過它們的值進行比較,而對象通過它們的引用進行比較。 JavaScript 檢查對象是否具有對內存中相同位置的引用。

我們作為參數傳遞的對象和我們用於檢查相等性的對象在內存中位於不同位置,所以它們的引用是不同的。

這就是為什麼 { age: 18 } === { age: 18 } 和 { age: 18 } == { age: 18 } 返回 false 的原因。

所有對象鍵(不包括 Symbols )都會被存儲為字元串,即使你沒有給定字元串類型的鍵。這就是為什麼 obj.hasOwnProperty(Ƈ') 也返回 true 。

上面的說法不適用於 Set 。在我們的 Set 中沒有 「1」 : set.has(Ƈ') 返回 false 。它有數字類型 1 , set.has(1) 返回 true 。

這題考察的是對象的鍵名的轉換。

catch 塊接收參數 x 。當我們傳遞參數時,這與變數的 x 不同。這個變數 x 是屬於 catch 作用域的。

之後,我們將這個塊級作用域的變數設置為 1 ,並設置變數 y 的值。現在,我們列印塊級作用域的變數 x ,它等於 1 。

在 catch 塊之外, x 仍然是 undefined ,而 y 是 2 。當我們想在 catch 塊之外的 console.log(x) 時,它返回 undefined ,而 y 返回 2 。