web面試寶典

paragraph

⑸ 2019Web前端面試題及答案匯總-Jquery篇

今天小編要跟大家分享的文章是關於2019Web前端面試題及答案匯總-Jquery篇。相信最近准備參加Web前端面試的小夥伴一定不在少數，為了幫助大家順利的通過面試成為一名優秀的Web前端工程師，小編為大家准備了前端面試題系列，通過Web知識的整理以及經驗的總結，希望能幫到更多的前端面試者。

Jquery相關


1、jQuery庫中的$()是什麼?


$()函數是jQuery()函數的別稱。$()函數用於將任何對象包裹成jQuery對象，接著你就被允許調用定義在jQuery
對象上的多個不同方法。你可以將一個選擇器字元串傳入$()函數，它會返回一個包含所有匹配的DOM元素數組的jQuery對象。


2、如何找到所有HTMLselect標簽的選中項?


$('[name=selectname]:selected')


3、$(this)和this關鍵字在jQuery中有何不同?


$(this)返回一個jQuery對象，你可以對它調用多個jQuery方法，比如用text()獲取文本，用val()
獲取值等等。


而this代表當前元素，它是JavaScript關鍵詞中的一個，表示上下文中的當前DOM元素。你不能對它調用jQuery方法，直到它被
$()函數包裹，例如$(this)。


4、jquery怎麼移除標簽onclick屬性?


獲得a標簽的onclick屬性:$("a").attr("onclick")


刪除onclick屬性：$("a").removeAttr("onclick")


設置onclick屬性：$("a").attr("onclick","test();")


5、jquery中addClass、removeClass、toggleClass的使用。


$(selector).addClass(class)：為每個匹配的元素添加指定的類名


$(selector).removeClass(class)：從所有匹配的元素中刪除全部或者指定的類，刪除class中某個值;


$(selector).toggleClass(class)：如果存在(不存在)就刪除(添加)一個類


$(selector).removeAttr(class);刪除class這個屬性;


6、JQuery有幾種選擇器?


(1)、基本選擇器：#id，class,element,*;


(2)、層次選擇器：parent>child，prev+next，prev~siblings


(3)、基本過濾器選擇器：:first，:last，:not，:even，:odd，:eq，:gt，:lt


(4)、內容過濾器選擇器：:contains，:empty，:has，:parent


(5)、可見性過濾器選擇器：:hidden，:visible


(6)、屬性過濾器選擇器：[attribute]，[attribute=value]，[attribute!=value]
，[attribute^=value]，[attribute$=value]，[attribute*=value]


(7)、子元素過濾器選擇器：:nth-child，:first-child，:last-child，:only-child


(8)、表單選擇器：:input，:text，:password，:radio，:checkbox，:submit等;


(9)、表單過濾器選擇器：:enabled，:disabled，:checked，:selected


7、jQuery中的Delegate()函數有什麼作用?


delegate()會在以下兩個情況下使用到：


1)、如果你有一個父元素，需要給其下的子元素添加事件，這時你可以使用delegate()了，代碼如下：


$("ul").delegate("li","click",function(){$(this).hide();});


2)、當元素在當前頁面中不可用時，可以使用delegate()


8、$(document).ready()方法和window.onload有什麼區別?


(1)、window.onload方法是在網頁中所有的元素(包括元素的所有關聯文件)完全載入到瀏覽器後才執行的。


(2)、$(document).ready()方法可以在DOM載入就緒時就對其進行操縱，並調用執行綁定的函數。


9、如何用jQuery禁用瀏覽器的前進後退按鈕?


實現代碼如下：



$(document).ready(function(){

window.history.forward(1);

//ORwindow.history.forward(-1);

});



10、jquery中$.get()提交和$.post()提交有區別嗎?


相同點：都是非同步請求的方式來獲取服務端的數據;


異同點：


1、請求方式不同：$.get()方法使用GET方法來進行非同步請求的。$.post()方法使用POST方法來進行非同步請求的。


2、參數傳遞方式不同：get請求會將參數跟在URL後進行傳遞，而POST請求則是作為HTTP消息的實體內容發送給Web伺服器的，這種傳遞是對用戶不可見的。


3、數據傳輸大小不同：get方式傳輸的數據大小不能超過2KB而POST要大的多


4、安全問題：GET方式請求的數據會被瀏覽器緩存起來，因此有安全問題。


11、寫出一個簡單的$.ajax()的請求方式?

$.ajax({

url:'http://www..com',

type:'POST',

data:data,

cache:true,

headers:{},

beforeSend：function(){},

success:function(){},

error:function(){},

complete:function(){}

});

ja

以上就是小編今天為大家分享的關於2019Web前端面試題及答案匯總-a
Jquery篇的文章，希望本篇文章中的面試題能夠對正准備參加Web前端面試的小夥伴們有所幫助。想要了解更多Web前端方面的知識記得關注北大青鳥Web前端培訓官網。最後祝願小夥伴們面試成功成為一名優秀的Web前端工程師。

⑹ web前端工程師面試自我介紹_web前端工程師面試自我介紹怎麼說

自我介紹 ，就是自己將自己介紹給他人或眾人的一種介紹方式。那麼web前端工程師 面試 時自我介紹應該怎麼說？以下是我為您整理的web前端工程師 面試自我介紹 內容，希望能幫到你。

我喜歡 籃球 和 乒乓球 ，曾擔任大學校籃球隊隊員。在籃球隊中深刻體會到在大家共同努力下擊敗對手的成就感!

對於計算機有著狂熱的喜愛，雖掌握軟體眾多，但對編程情有獨鍾!在每一次解決了問題後都有一種成就感!我喜歡這種感覺，讓我能沉迷於我的代碼的世界中!

愛好 程序設計，喜歡開發自已的小型產品，追求技術上的滿足感;穩固的架構，健壯的代碼，團結的合作，是我的不懈追求。

有良好的編程習慣，以及程序錯誤控制和解決能力，我愛程序員這個崗位，當每天敲著代碼，聽著音樂，是很快樂的

用心工作，用心生活!我可能不是最好的，最合適的，我覺得我是最有潛力的!2016,一起加油!

good morning, my name is jack, it is really a great honor to have this opportunity for a interview, i would like to answer whatever you may raise, and i hope i can make a good performance today, eventually enroll in this prestigious university in september. now i will introce myself briefly,i am 21 years old,born in heilongjiang province ,northeast of china,and i am curruently a senior student at beijing xx uni.my major is packaging engineering.and i will receive my bachelor degree after my graation in june.in the past 4 years,i spend most of my time on study,i have passed cet4/6 with an ease. and i have acquired basic knowledge

of packaging and publishing both in theory and in practice. besides, i have attend several packaging exhibition hold in beijing, this is our advantage study here, i have taken a tour to some big factory and company. through these i have a deeply understanding of domestic packaging instry. compared to developed countries such as us, unfortunately, although we have made extraordinary progress since 1978,our packaging instry are still underdeveloped, mess, unstable, the situation of employees in this field are awkard. but i have full confidence in a bright future if only our economy can keep the growth pace still. i guess you maybe interested in the reason itch to law, and what is my plan ring graate study life, i would like to tell you that pursue law is one of my lifelong goal,i like my major packaging and i won't give up,if i can pursue my master degree here i will combine law with my former ecation. i will work hard in thesefields ,patent ,trademark, right, on the base of my years study in department of p&p, my character? i cannot describe it well, but i know i am optimistic and confident. sometimes i prefer to stay alone, reading, listening to music, but i am not lonely, i like to chat with my classmates, almost talk everything ,my favorite pastime is valleyball,playing cards or surf online. through college life,i learn how to balance between study and entertainment. by the way, i was a actor of our amazing drama club. i had a few glorious memory on stage. that is my pride.

my name is zhao wanjun. wanjun is my given name. wan means sweet and jun means person, so my name means a sweet-tempered girl. i actually am! but you can call me june, for your convenience, j-u-n-e, IT's similar to my chinese name jun. i am from enping, a small cITy in the southwest of guangdong province, near hongkong and macao. maybe you have never been there before, IT's well known for the hot springs there.

in 2014, i got the highest score in the college entrance examinations in my cITy and entered zhongshan universITy. my major is computer science. my gpa ranks in the top 40% among all students, but i have stronger c++ programming skills than many others. also, i was the first one to learn java in my class.

i was chosen by a teacher of mine to participate in his project. the project was about a lan chat room, and i developed the instant messaging system in IT. i was the only female student in this project team.

besides study and the project, i worked in the student union for two years, first year as a member, next year promoted to be the general secretary. my colleagues describe me as a reliable and considerate person.

ibm is top on my job hunting list for of the reasons you hear every day. i look forward to joining a famous company as IT means good training, good pay, and good people to work wITh, just like you gentlemen!

technical support engineer is my ideal job because i have both a technical background and the abilITy to deal wITh clients. also, traveling isn’t a problem although i am a woman.

⑺ 常見的web前端面試題及答案分享

1、 說下行內元素和塊級元素的區別?行內塊元素的兼容性使用?(IE8 以下)

答：行內元素：會在水平方向排列，不能包含塊級元素，設置width無效，height無效(可以設置line-height)，margin上下無效，padding上下無效。塊級元素：各占據一行，垂直方向排列。從新行開始結束接著一個斷行。兼容性：display:inline-block;*display:inline;*zoom:1。

2、box-sizing常用的屬性有哪些?分別有什麼作用?

答：box-sizing: content-box|border-box|inherit。content-box:寬度和高度分別應用到元素的內容框。在寬度和高度之外繪制元素的內邊距和邊框(元素默認效果)。

border-box:元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪制。通過從已設定的寬度和高度分別減去邊框和內邊距才能得到內容的寬度和高度。

3、Doctype作用?標准模式與兼容模式各有什麼區別?

答：告知瀏覽器的解析器用什麼文檔標准解析這個文檔。DOCTYPE不存在或格式不正確會導致文檔以兼容模式呈現。

標准模式的排版和JS運作模式都是以該瀏覽器支持的最高標准運行。在兼容模式中，頁面以寬松的向後兼容的方式顯示,模擬老式瀏覽器的行為以防止站點無法工作。

4、html5有哪些新特性?如何處理HTML5新標簽的瀏覽器兼容問題?如何區分 HTML 和 HTML5?

答：HTML5 現在已經不是 SGML 的子集，主要是關於圖像，位置，存儲，多任務等功能的增加。

(1)繪畫 canvas;

(2)用於媒介回放的 video 和 audio 元素;

(3)本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉後數據不丟失;

(4)sessionStorage 的數據在瀏覽器關閉後自動刪除;

(5)語意化更好的內容元素，比如 article、footer、header、nav、section;

(6)表單控制項，calendar、date、time、email、url、search;

(7)新的技術webworker, websocket, Geolocation;

IE8/IE7/IE6支持通過document.createElement方法產生的標簽，可以利用這一特性讓這些瀏覽器支持HTML5新標簽，瀏覽器支持新標簽後，還需要添加標簽默認的樣式。當然也可以直接使用成熟的框架、比如html5shim。

以上就是環球青藤小編關於web前端面試題的相關分享，希望對大家有所幫助，想要了解更多相關內容，請及時關注本平台並進行查看!

⑻ 2020年Web前端面試題匯總(一)

今天小編要跟大家分享的文章是關於2020年Web前端面試題匯總。由於內容較多小編分開為大家介紹，今天首先來和小編一起看一看第一部分的內容，希望這些面試題能夠對正准備找Web前端相關工作的小夥伴們有所幫助。

1.說幾條寫JavaScript的基本規范?


1)不要在同一行聲明多個變數;


2)請使用===/!==來比較true/false或者數值;


3)使用對象字面量替代newObject這種形式;


4)減少使用全局函數,全局變數;


5)switch語句必須帶有default分支;


6)if語句必須使用大括弧;


7)for-in循環中的變數;


應該使用var關鍵字明確限定作用域;


從而避免作用域全局污染。


2.說說平衡二叉樹?


平衡二叉搜索樹(Self-balancingbinarysearchtree)


又被稱為AVL樹。


具有以下性質：


1)它是一棵空樹或它的左右兩個子樹


的高度差的絕對值不超過1，


並且左右兩個子樹都是一棵平衡二叉樹。


2)平衡二叉樹必定是二叉搜索樹，反之則不一定。


3)平衡二叉樹的常用實現方法有紅黑樹、AVL、


替罪羊樹、Treap、伸展樹等。


最小二叉平衡樹的節點的公式如下：


F(n)=F(n-1)+F(n-2)+1備註：1是根節點，


F(n-1)是左子樹的節點數量，


F(n-2)是右子樹的節點數量。


3.清除浮動和解決垂直外邊距重疊的解決方案?


問題描述:


1)父元素沒有設置寬高，尺寸由子元素撐起;


子元素一旦浮動，父元素高度會發生塌陷。


2)子元素設置margin-top會作用的父元素的margin-top;


此時會造成垂直外邊距重疊。


.clearfix::after,.clearfix::before{


content:''


display:table;


clear:both;


}


4.sessionStorage、localStorage和cookie?


相同點:


都用於瀏覽器端存儲的緩存數據;


不同點:


1)存儲內容是否發送到伺服器端


當設置了Cookie後，數據會發送到伺服器端，


造成一定的寬頻浪費;xxxstorage則會將數據保存


到本地，不會造成寬頻浪費;


2)數據存儲大小不同


Cookie數據不能超過4K，適用於會話標識;


xxxstorage數據存儲可以達到5M;


3)數據存儲的有效期限不同


cookie只在設置了Cookid過期時間


之前一直有效，即使關閉窗口或者瀏覽器;


sessionStorage,僅在關閉瀏覽器之前有效;


localStorage,數據存儲永久有效;


4)作用域不同


cookie和localStorage是在同源同窗口中


都是共享的;


sessionStorage不在不同的瀏覽器窗口


中共享，即使是同一個頁面;


5.判斷一個單詞是否是迴文?


迴文是指把相同的詞彙或句子，


在下文中調換位置或顛倒過來，


產生首尾回環的情景，


叫做迴文，也叫回環。


比如cacac，redivider。


letcheckPalindrom=(str)=>{


returnstr===


str.split('').reverse().join('');


}


6.不藉助臨時變數，進行兩個整數的交換?


輸入a=3,b=1,


輸出a=1,b=3


letswap=(a,b)=>{


b=b-a;


a=a+b;


b=a-b;


return[a,b];


}


7.請寫出至少5個html5新增的標簽，並說明其語義和應用場景?


section：定義文檔中的一個章節;


nav：定義只包含導航鏈接的章節;


header：定義頁面或章節的頭部;


它經常包含logo、頁面標題和導航性的目錄。


footer：定義頁面或章節的尾部;


它經常包含版權信息、法律信息鏈接和反饋建議用的地址。


aside：定義和頁面內容關聯度較低的內容，


如果被刪除，剩下的內容仍然很合理。


8.get和post請求在緩存方面的區別?


get請求類似於查找的過程，用戶獲取數據，


可以不用每次都與資料庫連接，所以可以使用緩存。


post不同，post做的一般是修改和刪除的工作，


所以必須與資料庫交互，所以不能使用緩存。


因此get請求適合於請求緩存。


9.如何解決非同步回調地獄?


promise、generator、async/await


10.圖片的懶載入和預載入?


預載入：提前載入圖片，


當用戶需要查看時可直接


從本地緩存中渲染。


懶載入：懶載入的主要目的


是作為伺服器前端的優化，


減少請求數或延遲請求數。


兩種技術的本質：


兩者的行為是相反的，


一個是提前載入，


一個是遲緩甚至不載入。


懶載入對伺服器前端有一定


的緩解壓力作用，


預載入則會增加伺服器前端壓力。


11.bind，apply，call的區別?


通過apply和call改變函數的this指向，


這兩個函數的第一個參數都是一樣的，


表示要改變指向的那個對象，


第二個參數，apply是數組，


而call則是arg1,arg2...這種形式。


通過bind改變this作用域


會返回一個新的函數，


這個函數不會馬上執行。


12.js怎麼控制一次載入一張圖片，載入完後再載入下一張?


方法一:





varobj=newImage();


obj.src="#/21.jpg";


obj.onload=function(){


document.getElementById("pic")


.innnerHTML="";


}


載入中

⑼ web前端面試十大總結，不了解一下嗎

在互聯網時代，瀏覽器幾乎主宰著一切，而前端開發人員決定著瀏覽器的內容展現形式和信息的提供，是不可或缺的一部分。前端開發實際上具有很明顯的時代特徵，它在很大程度上決定著大眾的信息攝入，以及用戶讀取信息的有效方式。那麼今天小編為大家總結了一些web前端的面試題，希望對大家有幫助哦！

一：字體高亮函數


題目：請你完成highlight函數，可以把模版字元串中的插入內容替換掉，並且插入文檔以後顯示紅色。例如：


constyourName='ScriptOJ'


constmyName='Jerry'


document.body.innerHTML=highlight`Hello,${yourName}.Iam
${myName}.`


上面例子的頁面顯示如下：


0_1498033735172_upload-2abd65b1-1e98-46ba-b46f-df4188a036a5


請你完成highlight函數的編寫。


答案：


css:


.highlight{


color:red;


}


js:


//考察的是Taggedtemplateliterals的使用


//
#/en-US/docs/Web/JavaScript/Reference/Template_literals


consthighlight=(strings,...args)=>{


returnstrings.rece((str,cur,i)=>{


return`${str}${cur}${args[i]?`class="highlight">${args[i]}`:''}`


},'')


}


二：數組去重


題目：編寫一個函數unique(arr)，返回一個去除數組內重復的元素的數組。例如：


unique([0,1,2,2,3,3,4])//=>[0,1,2,3,4]


unique([0,1,Ƈ',Ƈ',2])//=>[0,1,Ƈ',2]


答案：


constunique=(arr)=>[...newSet(arr)]


三：解析字串


題目：完成一個extractStr函數，可以把一個字元串中所有的:到.的子串解析出來並且存放到一個數組當中，例如：


extractStr('Mynameis:Jerry.Myageis:12.')//=>['Jerry',཈']


注意，:和.之間不包含:和.。也即是說，如果::abc..，則返回['abc']。


(本題來源：《JavaScriptCookbook》)


答案：·


constextractStr=(str)=>{


constret=str.match(/:([^:.])*?./g)||[]


returnret.map((subStr)=>subStr.replace(/[:.]/g,''))


}


四：spacify題目：


請你給字元串都添加上原型方法spacify，可以讓一個字元串的每個字母都多出一個空格的間隔："ScriptOJ".spacify()//=>
"ScriptO
J"(本題來源：#/interview-questions)答案：String.prototype.spacify
=function(){


returnthis.split('').join('')


}


五：safeGet


題目：有時候我們需要訪問一個對象較深的層次，但是如果這個對象某個屬性不存在的話就會報錯，例如：


vardata={a:{b:{c:'ScriptOJ'}}}


data.a.b.c//=>scriptoj


data.a.b.c.d//=>報錯，代碼停止執行


console.log('ScriptOJ')//=>不會被執行


請你完成一個safeGet函數，可以安全的獲取無限多層次的數據，一旦數據不存在不會報錯，會返回undefined，例如：


vardata={a:{b:{c:'ScriptOJ'}}}


safeGet(data,'a.b.c')//=>scriptoj


safeGet(data,'a.b.c.d')//=>返回undefined


safeGet(data,'a.b.c.d.e.f.g')//=>返回undefined


console.log('ScriptOJ')//=>列印ScriptOJ


答案：


constsafeGet=(o,path)=>{


try{


returnpath.split('.').rece((o,k)=>o[k],o)


}catch(e){


returnvoid666


}


}


六：判斷兩個矩形是否重疊


題目：用一個對象的數據來表示一個矩形的位置和大小：


{


x:100,


y:100,


width:150,


height:250


}


它表示一個寬為150高為250的矩形在頁面上的(100,100)的位置。


請你完成一個函數isOverlap可以接受兩個矩形作為參數，判斷這兩個矩形在頁面上是否重疊。例如：


constrect1={x:100,y:100,width:100,height:100}


constrect2={x:150,y:150,width:100,height:100}


isOverlap(rect1,rect2)//=>true


答案：


//原理：#/find-two-rectangles-overlap/


constisOverlap=(rect1,rect2)=>{


constl1={x:rect1.x,y:rect1.y}


constr1={x:rect1.x+rect1.width,y:rect1.y+rect1.height}


constl2={x:rect2.x,y:rect2.y}


constr2={x:rect2.x+rect2.width,y:rect2.y+rect2.height}


if(


l1.x>r2.x||


l2.x>r1.x||


l1.y>r2.y||


l2.y>r1.y


)returnfalse


returntrue


}


七：按下標插入


題目：現在有一個數組存放字元串數據：


['item1','item2','item3','item4','item5']


有另外一個數組存放一組對象：


[


{content:'section1',index:0},


{content:'section2',index:2}


]


它每個對象表示的是會往原來的數組的index坐標插入content數據(index不會重復)：


01234


item1itme2item3item4item5


^^


||


section1section2


最後結果是：['section1','item1','item2','section2','item3','item4',
'item5']


請你完成injectSections函數，可以達到上述的功能：


injectSections(


['item1','item2','item3','item4','item5'],


[


{content:'section1',index:0},


{content:'section2',index:2}


]


)//=>['section1','item1','item2','section2','item3','item4',
'item5']


答案：


constinjectSections=(items,sections)=>{


/*需要插入坐標對應數據存放到map裡面*/


constsectionsMap=newMap(sections.map(({index,content})=>[index,
content]))


/*新建一個數組，然後往裡面push原來數組的數據*/


returnitems.rece((ret,item,index)=>{


/*push的時候先檢查map裡面有沒有，有的話先pushmap裡面的數據*/


if(sectionsMap.has(index))ret.push(sectionsMap.get(index))


/*再push原來的數據*/


ret.push(item)


returnret


},[])


}


八：數組拍平(二)


題目：編寫一個JavaScriptgenerator函數，接受一個僅包含數字的多維數組
，返回一個迭代器，可以遍歷得到它拍平以後的結果。例如：


constnumbers=flatten2([1,[[2],3,4],5])


numbers.next().value//=>1


numbers.next().value//=>2


numbers.next().value//=>3


numbers.next().value//=>4


numbers.next().value//=>5


答案：


function*flatten2(arr){


for(leti=0;i

constitem=arr[i]


/*yield*的使用可以大大簡化程序編寫*/


Array.isArray(item)?yield*flatten2(item):yielditem;


}


}


/*用flatten2來完成flatten也是很方便的*/


//constflatten=(arr)=>[...flatten2(arr)]


九：判斷兩個Set是否相同


題目：完成isSameSet函數，它接受了兩個Set對象作為參數，請你返回true/false來表明這兩個set
的內容是否完全一致，例如：


consta={}


constb=1


constc='ScriptOJ'


constset1=newSet([a,b,c])


constset2=newSet([a,c,b])


isSameSet(set1,set2)//=>true


答案：


//codefrom#/js-example.html


/*這道題不能簡單地使用sort，使用sort並不靠譜。因為Set裡面的內容可能有很多種類


*字元串、對象、數字，不同類型之間是不可對比的，所以排序結果並不會一致


*


*最好的方式是按照數學上集合相等的定義：


*A=B當且僅當A是B的子集並且B是A的子集。


*


*這種判斷方式還可以用在對象、map等其他數據類型的判斷當中。


*/


constisSameSet=(s1,s2)=>{


/*獲取一個集合所有的值，判斷另外一個集合是否全部包含該這些值*/


constisSame=(a,b)=>{


constvalues=[...a]


for(letvalofvalues){


/*及時跳出循環，可以降低演算法復雜度*/


if(!b.has(val))returnfalse


}


returntrue


}


/*a包含b，b包含a，那麼兩個集合相同*/


returnisSame(s1,s2)&&isSame(s2,s1)


}


/*By陳小俊*/


//constisSameSet=(set1,set2)=>


//[...set1].every((o)=>set2.has(o))&&


//[...set2].every((o)=>set1.has(o))


十：記憶化斐波那契函數(Memoization)


題目：斐波那契數列指的是類似於以下的數列：


1,1,2,3,5,8,13,....


也就是，第n個數由數列的前兩個相加而來：f(n)=f(n-1)+f(n-2)


請你完成fibonacci函數，接受n作為參數，可以獲取數列中第n個數，例如：


fibonacci(1)//=>1


fibonacci(2)//=>1


fibonacci(3)//=>2


...


測試程序會從按順序依次獲取斐波那契數列中的數，請注意程序不要超時，也不要添加額外的全局變數。


本題來源：《JavaScript語言精髓》


答案：


constfibonacci=((memo=[0,1])=>{


constfib=(n)=>{


letresult=memo[n]


if(typeofresult!=="number"){


result=fib(n-1)+fib(n-2)


memo[n]=result


}


returnresult


}


returnfib


})()
最後就是反應能力，臨場出現意外什麼的了，這就看你自己了，萬一自己一不留神說錯話了，大神給你指出來，請記得謝謝一定要謙虛！在這里小編也希望每一位web培訓班畢業的學員都能順利找到稱心的工作！


免責聲明：內容和圖片源自網路，版權歸原作者所有，如有侵犯您的原創版權請告知，我們將盡快刪除相關內容
在互聯網時代，瀏覽器幾乎主宰著一切，而前端開發人員決定著瀏覽器的內容展現形式和信息的提供，是不可或缺的一部分。前端開發實際上具有很明顯的時代特徵，它在很大程度上決定著大眾的信息攝入，以及用戶讀取信息的有效方式。那麼今天小編為大家總結了一些web前端的面試題，希望對大家有幫助哦！

一：字體高亮函數


題目：請你完成highlight函數，可以把模版字元串中的插入內容替換掉，並且插入文檔以後顯示紅色。例如：


constyourName='ScriptOJ'


constmyName='Jerry'


document.body.innerHTML=highlight`Hello,${yourName}.Iam
${myName}.`


上面例子的頁面顯示如下：


0_1498033735172_upload-2abd65b1-1e98-46ba-b46f-df4188a036a5


請你完成highlight函數的編寫。


答案：


css:


.highlight{


color:red;


}


js:


//考察的是Taggedtemplateliterals的使用


//
#/en-US/docs/Web/JavaScript/Reference/Template_literals


consthighlight=(strings,...args)=>{


returnstrings.rece((str,cur,i)=>{


return`${str}${cur}${args[i]?`class="highlight">${args[i]}`:''}`


},'')


}


二：數組去重


題目：編寫一個函數unique(arr)，返回一個去除數組內重復的元素的數組。例如：


unique([0,1,2,2,3,3,4])//=>[0,1,2,3,4]


unique([0,1,Ƈ',Ƈ',2])//=>[0,1,Ƈ',2]


答案：


constunique=(arr)=>[...newSet(arr)]


三：解析字串


題目：完成一個extractStr函數，可以把一個字元串中所有的:到.的子串解析出來並且存放到一個數組當中，例如：


extractStr('Mynameis:Jerry.Myageis:12.')//=>['Jerry',཈']


注意，:和.之間不包含:和.。也即是說，如果::abc..，則返回['abc']。


(本題來源：《JavaScriptCookbook》)


答案：·


constextractStr=(str)=>{


constret=str.match(/:([^:.])*?./g)||[]


returnret.map((subStr)=>subStr.replace(/[:.]/g,''))


}


四：spacify題目：


請你給字元串都添加上原型方法spacify，可以讓一個字元串的每個字母

⑽ 資深HR揭秘：Web前端面試技巧有哪些

Web前端面試技巧

Web前端工程師的面試前的准備:

1. 自我介紹

准備不同時間版本的1 分鍾、3 分鍾的自我介紹.反復練習,並脫稿,但不是背誦.因為背的話自我介紹就顯得十分的生硬,一定要用自然的語言將自我介紹說出來.這樣可以給面試官留下很好的第一印象.

2. 預演

搜索一些你應聘的公司和職位,在宿舍里、家裡,先自己預演下,可能會被問及的各種問題和答案.即使你不能猜中所有問題--當然HR也不會面面俱到、一直不停的提問,最關鍵詞的只有那麼幾個.思考問題的過程會讓你減輕緊張而且在面試時心裡有底.

3. 積極自我暗示

在群面的時候,我們可能會因為別人的發言而繞亂了自己的思路.這時候千萬不要亂,適當的做深呼吸調整一下自己,做到沉著冷靜,整理好自己的思路,努力回憶自己所學和所掌握的知識,給自己積極的心理暗示,一句話:相信自己能行!你是最棒的.

4. 面試簡歷一定要准備充分

面試你的人可能不止1 個.預先料到這點.並准備好會顯得你做事正規、細致.沒有比當被要求提供多一份簡歷而你卻沒有.更能表明你缺乏准備的事了.你說呢?

5. 完整而認真的填寫公司要求的表格

盡管你認為它們用處不大、盡管你帶了簡歷來,很多公司都會要求你填一張表.你願意並且有始有終地填完這張表,會傳達出你做事正規、做事善始善終.

面試過程:

1. 給面試官留下深刻的印象

最初和最後的五分鍾是面試中最關鍵的,在這段時間里決定了你留給人的第一印象和臨別印象以及主考人是否欣賞你.最初的五分鍾內應當主動溝通,離開的時候,要確定你已經被記住了.要讓人產生好感,富於熱情.人們都喜歡聘請容易相處且為公司自豪的人.要正規穩重,也要表現你的精力和興趣.

2. 學會自我營銷

營銷自己十分重要,將你所有的優勢推銷出去,包括你的技術資格,一般能力和性格優點,僱主只在乎兩點:你的資歷憑證、你的個人性格.你能在以往業績的基礎上工作並適應公司文化嗎?談一下你性格中的積極方面並結合例子告訴對方你在具體工作中會怎麼做.

展示你勤奮工作追求團體目標的能力,大多數主考人都希望找一位有創造力、性格良好、能夠融入到團體之中的人.你要必須通過強調自己給對方帶來的好處來說服對方你兩者皆優.