80道前端面試經(jīng)典選擇題匯總

前言
看了一下各種面試題,選擇題是必有的
所以我整理了一些經(jīng)典的前端面試選擇題,希望能對大家日后找工作有所幫助!
HTML/CSS
1、在 css 選擇器當中,優(yōu)先級排序正確的是()
A、id選擇器>標簽選擇器>類選擇器
B、標簽選擇器>類選擇器>id選擇器
C、類選擇器>標簽選擇器>id選擇器
D、id選擇器>類選擇器>標簽選擇器
解析:
選D
4個等級的定義如下:
第一等:代表內(nèi)聯(lián)樣式,如: style=””,權(quán)值為1000
第二等:代表ID選擇器,如:#content,權(quán)值為100
第三等:代表類,偽類和屬性選擇器,如.content,權(quán)值為10
第四等:代表類型選擇器和偽元素選擇器,如div p,權(quán)值為1
2、下列定義的 css 中,哪個權(quán)重是最低的?( )
A、#game .name
B、#game .name span
C、#game div
D、#game div.name
解析:
選C
權(quán)重越大,優(yōu)先級越高
CSS選擇器優(yōu)先級是指“基礎(chǔ)選擇器”的優(yōu)先級:
ID > CLASS > ELEMENT > *
3、關(guān)于HTML語義化,以下哪個說法是正確的?( )
A、語義化的HTML有利于機器的閱讀,如PDA手持設(shè)備、搜索引擎爬蟲;但不利于人的閱讀
B、Table 屬于過時的標簽,遇到數(shù)據(jù)列表時,需盡量使用 div 來模擬表格
C、語義化是HTML5帶來的新概念,此前版本的HTML無法做到語義化
D、header、article、address都屬于語義化明確的標簽
解析:
選D
1、什么是HTML語義化?
根據(jù)內(nèi)容的結(jié)構(gòu)化(內(nèi)容語義化),選擇合適的標簽(代碼語義化)便于開發(fā)者閱讀和寫出更優(yōu)雅的代碼的同時讓瀏覽器的爬蟲和機器很好地解析。
2、為什么要語義化?
為了在沒有CSS的情況下,頁面也能呈現(xiàn)出很好地內(nèi)容結(jié)構(gòu)、代碼結(jié)構(gòu)
用戶體驗:例如title、alt用于解釋名詞或解釋圖片信息、label標簽的活用;
有利于SEO :和搜索引擎建立良好溝通,有助于爬蟲抓取更多的有效信息:
爬蟲依賴于標簽來確定上下文和各個關(guān)鍵字的權(quán)重;
方便其他設(shè)備解析(如屏幕閱讀器、盲人閱讀器、移動設(shè)備)以意義的方式來渲染網(wǎng)頁;
便于團隊開發(fā)和維護,語義化更具可讀性,是下一步吧網(wǎng)頁的重要動向,遵循W3C標準的團隊都遵循這個標準,可以減少差異化
4、CSS 樣式,下面哪一個元素能夠達到最大寬度,且前后各有一個換行?( )
A、Block Element
B、Square Element
C、Side Element
D、Box Element
解析:
選A
塊級元素block element
行內(nèi)元素 inline element
行內(nèi)塊元素 inline-block element
5、下面使用Animate-timing-function定義的貝塞爾曲線,哪一個是先快后慢的( )
A、animation-timing-function :
cubic-bezier(.22,1.23,.97,.89)
B、animation-timing-function :
cubic-bezier(1.23,..22,97,.89)
C、animation-timing-function :
cubic-bezier(1.23,.97,.89,.22)
D、animation-timing-function :
cubic-bezier(.22,.97,.89,1.23)
解析:
選A
cubic-bezier即為貝茲曲線中的繪制方法
有四點,分別為P0-3,其中P0、P3是默認的點,對應(yīng)了[0,0], [1,1]。
而剩下的P1、P2兩點則是我們通過cubic-bezier()自定義的。
cubic-bezier(x1, y1, x2, y2) 為自定義,x1,x2,y1,y2的值范圍在[0, 1]。
6、放在HTML里的哪一部分JavaScripts會在頁面加載的時候被執(zhí)行?( )
A、文件頭部位置
B、文件尾
C、<head>標簽部分
D、<body>標簽部分
解析:
選D
head部分中的JavaScripts會在被調(diào)用的時候才執(zhí)行。
body部分中的JavaScripts會在頁面加載的時候被執(zhí)行。
7、問一份標準的HTML文檔有哪幾個必須的HTML標簽?( )
A、<html>
B、<head>
C、<title>
D、<body>
復(fù)制代碼解析:
選A、B、C、D
注意一下題目說的是標準的HTML文檔
8、下列說法正確的有:( )
A、visibility:hidden;所占據(jù)的空間位置仍然存在,僅為視覺上的完全透明;
B、display:none;不為被隱藏的對象保留其物理空間;
C、visibility:hidden;與display:none;兩者沒有本質(zhì)上的區(qū)別;
D、visibility:hidden;產(chǎn)生reflow和repaint(回流與重繪);
解析:
選A、B
visiblity:看不見,摸的著.
display:看不見,摸不著.
display是dom級別的,可以渲染和重繪。
visiblity不是dom級別的,不能重繪,只能渲染
9、請選出所有的置換元素( )
A、img
B、input
C、textarea
D、select
解析:
選A、B、C、D
置換元素:瀏覽器根據(jù)元素的標簽和屬性,來決定元素的具體顯示內(nèi)容
例如:
瀏覽器會根據(jù)<img>標簽的src屬性的
值來讀取圖片信息并顯示出來,而如果查看html代碼,則看不到圖片的實際內(nèi)容;
<input>標簽的type屬性來決定是顯示輸入 框,還是單選按鈕等。
html中 的<img>、<input>、<textarea>、<select>、<object> 都是置換元素
這些元素往往沒有實際的內(nèi)容,即是一個空元素。
置換元素在其顯示中生成了框,這也就是有的內(nèi)聯(lián)元素能夠設(shè)置寬高的原因。
復(fù)制代碼不可替換元素:html 的大多數(shù)元素是不可替換元素,即其內(nèi)容直接表現(xiàn)給用戶端(如瀏覽器)
例如:
<label>label中的內(nèi)容</label> 標簽<label>是一個非置換元素,文字label中的內(nèi)容”將全被顯示。
10、以下哪些動畫效果無法通過貝塞爾曲線cubic-bezier實現(xiàn)( )
A、linear
B、ease
C、fade-in
D、ease-out
解析:
選C
fade-in和fade-out為淡入淡出效果
11、下面屬于CSS3新增屬性的有?( )
A、box-shadow
B、text-shadow
C、border-radius
D、rgba
解析:
選A、B、C、D
下邊我對CSS3新增屬性用法的整理:
1、box-shadow(陰影效果)
2、border-color(為邊框設(shè)置多種顏色)
3、border-image(圖片邊框)
4、text-shadow(文本陰影)
5、text-overflow(文本截斷)
6、word-wrap(自動換行)
7、border-radius(圓角邊框)
8、opacity(透明度)
9、box-sizing(控制盒模型的組成模式)
10、resize(元素縮放)
11、outline(外邊框)
12、background-size(指定背景圖片尺寸)
13、background-origin(指定背景圖片從哪里開始顯示)
14、background-clip(指定背景圖片從什么位置開始裁剪)
15、background(為一個元素指定多個背景)
16、hsl(通過色調(diào)、飽和度、亮度來指定顏色顏色值)
17、hsla(在hsl的基礎(chǔ)上增加透明度設(shè)置)
18、rgba(基于rgb設(shè)置顏色,a設(shè)置透明度)
12、input元素的type屬性的取值可以是( )
A、image
B、checkbox
C、button
D、select
解析:
選A、B、C
語法:
<input type=”value”>
屬性值:
Button:定義可點擊按鈕(多數(shù)情況下,用于通過JavaScript啟動腳本)
CheckBox:定義復(fù)選框
File:定義輸入字段和”瀏覽”按鈕,供文件上傳
Hidden:定義隱藏的輸入字段
Image:定義圖像形式的提交按鈕
Password:定義密碼字段,該字段中的字符被遮碼
Radio:定義單選按鈕
Reset:定義重置按鈕,重置按鈕會清除表單中的所有數(shù)據(jù)
Submit:定義提交按鈕,提交按鈕會把表單數(shù)據(jù)發(fā)送到服務(wù)器
Text:定義單行輸入字段,用戶可在其中輸入文本,默認寬度為20個字符
13、新窗口打開網(wǎng)頁,用到以下哪個值( )
A、_self
B、_blank
C、_top
D、_parent
解析:
選B
在html中通過<a>標簽打開一個鏈接,通過 <a> 標簽的 target
屬性規(guī)定在何處打開鏈接文檔。
如果在標簽<a>中寫入target屬性,則瀏覽器會根據(jù)target的屬性值去打開與其命名或名稱相符的 框架<frame>或者窗口.
在target中還存在四個保留的屬性值如下,
_black:在新窗口中打開被鏈接文檔
_self:默認。在相同的框架中打開被鏈接文檔
_ parent:在父框架中打開被鏈接文檔
_top:在整個窗口中打開被鏈接文檔
framename:在指定框架中打開被鏈接文檔
14、以下全部屬于塊級標簽的是?( )
A、<div><p><input><span><img>
B、<div><h1><p><img><dl>
C、<span><h1><p><img><dl>
D、<div><p><form><ul><h1>
解析:
選D
在CSS中,html中的標簽元素大體被分為三種不同的類型:
塊狀元素、內(nèi)聯(lián)元素(又叫行內(nèi)元素)和內(nèi)聯(lián)塊狀元素
常見的塊狀元素有:
<div>、<p>、<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote>、<form>
常見的內(nèi)聯(lián)元素有:
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
常見的內(nèi)聯(lián)塊狀元素有:
<img>、<input>
15、元素的alt和title有什么異同,選出正確的說法?( )
A、不同的瀏覽器,表現(xiàn)一樣
B、alt和title同時設(shè)置的時候,alt作為圖片的替代文字出現(xiàn),title是圖片的解釋文字
C、alt和title同時設(shè)置的時候,title作為圖片的替代文字出現(xiàn),alt是圖片的解釋文字
D、以上說法都不正確
解析:
選B
alt是html標簽的屬性,而title既是html標簽,又是html屬性。
title標簽這個不用多說,網(wǎng)頁的標題就是寫在
<title></title>
這對標簽之內(nèi)的。
title作為屬性時,用來為元素提供額外說明信息。
例如,給超鏈接標簽a添加了title屬性
,把鼠標移動到該鏈接上面是,就會顯示title的內(nèi)容,以達到補充說明或者提示的效果。
而alt屬性則是用來指定替換文字,只能用在img、area和input元素中(包括applet元素),用于網(wǎng)頁中圖片無法正常顯示時給用戶提供文字說明使其了解圖像信息
16、下列說法錯誤的是( )
A、設(shè)置display:none后的元素只會導(dǎo)致瀏覽器的重排而不會重繪
B、設(shè)置visibility:hidde后的元素只會導(dǎo)致瀏覽器重繪而不會重排
C、設(shè)置元素opacity:0之后,也可以觸發(fā)點擊事件
D、visibility:hidden的元素?zé)o法觸發(fā)其點擊事件
解析:
選A
設(shè)置display:none后的元素會導(dǎo)致瀏覽器的重排重繪
17、下列選項中,不屬于CSS3樣式選擇器的是()
A、empty選擇器
B、root 選擇器
C、target選擇器
D、ID選擇器
解析:
選D
ID選擇器在css1中就定義了
18、超鏈接訪問過后hover樣式就不出現(xiàn)了,被點擊訪問過的超鏈接樣式不再具有hover和active了,解決方法是改變CSS屬性的排列順序?( )
A、a:link {} a:visited {} a:hover {} a:active {}
B、a:visited {} a:link {} a:hover {} a:active {}
C、a:active {} a:link {} a:hover {} a:visited {}
D、a:link {} a:active {} a:hover {} a:visited {}
解析:
選A
a:link; a:visited; a:hover; a:active;
a:hover必須放在a:link和a:visited之后;
a:active必須放在a:hover之后。
19、關(guān)于position定位,下列說法錯誤的是( )
A、fixed元素,可定位于相對于瀏覽器窗口的指定坐標,它始終是以 body 為依據(jù)
B、relative元素以它原來的位置為基準偏移,在其移動后,原來的位置不再占據(jù)空間
C、absolute 的元素,如果它的 父容器設(shè)置了 position 屬性,并且 position 的屬性值為 absolute 或者 relative,那么就會依據(jù)父容器進行偏移
D、fixed 屬性的元素在標準流中不占位置
解析:
選B
absolute:
生成絕對定位的元素,相對于static定位以外的第一個父元素進行定位,元素的位置通過”left”、”top”、”right”、以及”bottom”屬性進行規(guī)定
fixed:
生成絕對定位的元素,相對于瀏覽器窗口進行定位,元素的位置通過”left”、”top”、”right”以及”bottom”屬性進行規(guī)定
relative:
生成相對定位的元素,相對于其正常位置進行定位,因此,”left:20”會向元素的LEFT位置添加20像素
static:
默認值,沒有定位,元素出現(xiàn)正常的流中(忽略top,bottom,left,right或者z-index聲明)
inherit:
規(guī)定應(yīng)該從父元素繼承position屬性的值
20、css中哪些屬性可以繼承( )
A、font-size
B、color
C、font-family
D、border
解析:
選A、B、C
margin padding border display 不可以繼承
21、下列哪些是瀏覽器支持的錨偽類:( )
A、a:link
B、a:disabled
C、a:hover
D、a:active
解析:
選A、C、D
在支持 css 的瀏覽器中,鏈接的不同狀態(tài)都可以不同的方式顯示,這些狀態(tài)包括:活動狀態(tài),已被訪問狀態(tài),未被訪問狀態(tài)和鼠標懸停狀態(tài)。用來表示鏈接不同狀態(tài)的偽類就是錨偽類
a:link {color: green;} /* 未訪問的鏈接 */
a:visited {color: blue;} /* 已訪問的鏈接 */
a:hover {color:orange;} /* 鼠標移動到鏈接上 */
a:active {color: yellow;} /* 選定的鏈接 */
22、關(guān)于CSS選擇器,以下說法正確的是:( )
A、每條選擇器最多只能出現(xiàn)一個偽元素
B、每條選擇器最多只能出現(xiàn)一個偽類
C、:nth-child(an+b)中n的取值從0開始
D、A+B匹配A之后所有符合B規(guī)則的元素
解析:
選A、C
C選項:
nth-child(an+b)在下標計算表達式an+b中:
a,b是系數(shù)可以是任意整數(shù);
n就是個字面量“n”,表示是遞增變量,并且取值是從0開始的整數(shù)。
D選項:
B是A的下一個兄弟節(jié)點(AB有相同的父結(jié)點,并且B緊跟在A的后面)
23、列表分為兩類,一是無序列表,一是有序列表,以下哪個是無序列表?( )
A、<UL>
B、<OL>
C、<DIR>
D、<DL>
解析:
選A
Ul無序列表
OL有序列表
24、浮動會導(dǎo)致頁面的非正常顯示,以下幾種清除浮動的方法,哪個是不推薦使用的?( )
A、在浮動元素末尾添加一個空的標簽例如 <div style=”clear:both”></div>
B、通過設(shè)置父元素overflow值為hidden;
C、父元素也設(shè)置浮動
D、給父元素添加clearfix類
解析:
選C
這四種方法都可以清除,最常用的是DA方法;
B方法的話,如果子元素中有使用了絕對定位,在頁面上顯示是在父元素外面,一般就沒法使用B方法了。
大型項目一般會多層嵌套,如果采用給父元素設(shè)置浮動的方法,那么父元素的父元素很有可能也要設(shè)置浮動,頁面布局很容易亂掉
25、下列關(guān)于web頁面級優(yōu)化描述最正確的是( )
A、減少HTTP請求的次數(shù)
B、進行資源合拼和壓縮
C、Inline images
D、將外部腳本置于低端
E、減少不必要的HTTP跳轉(zhuǎn)
F、以上描述都對
解析:
選F
1、減少HTTP請求的次數(shù)。
http協(xié)議是無狀態(tài)的應(yīng)用層協(xié)議,每次http請求都需要建立通信鏈路、進行數(shù)據(jù)傳輸,而在服務(wù)器端每個http都需要啟動獨立的線程去處理,這些通信和服務(wù)的開銷都很昂貴。所以減少http請求的數(shù)目可有效提高訪問性能,A正確。
2、進行資源合拼和壓縮。
合并CSS、合并javascript、合并圖片,將瀏覽器一次訪問需要的javascript和CSS合并成一個文件,這樣瀏覽器就只需要一次請求。在服務(wù)器端對文件進行壓縮,在瀏覽器端對文件解壓縮,可有效減少通信傳輸?shù)臄?shù)據(jù)量,B正確。
3、Inline images,使用data: URL
scheme的方式將圖片嵌入到頁面或CSS中嵌入頁面,因為直接嵌入頁面增大了頁面的體積,而且無法利用瀏覽器緩存。所以使用在CSS中的圖片則更為理想一些,C正確。
4、將外部腳本置于低端
瀏覽器在加載javascript后立即執(zhí)行,有可能會阻塞整個頁面,造成頁面顯示緩慢,因此javascript最好放在頁面最下面,D正確。
5、減少不必要的HTTP跳轉(zhuǎn)
對于以目錄形式訪問的HTTP鏈接,很多人都會忽略鏈接最后是否帶’/’,假如你的服務(wù)器對此是區(qū)別對待的話,那么你也需要注意,這其中很可能隱藏了301跳轉(zhuǎn),增加了多余請求,E正確
26、網(wǎng)頁開發(fā)中,一般需判斷瀏覽器類型,需通過userAgent中獲取瀏覽器內(nèi)核來判斷,下列說法錯誤的是?( )
A、一直到IE9,都是Trident內(nèi)核
B、firefox是Gecko內(nèi)核
C、chrome是webkit內(nèi)核
D、IE是目前最快的瀏覽器
解析:
選D
-moz代表firefox瀏覽器私有屬性
-ms代表IE瀏覽器私有屬性
-webkit代表chrome、safari私有屬性 IE使用的是Trident內(nèi)核,F(xiàn)irefox
使用的是Gecko內(nèi)核。目前使用IE內(nèi)核的瀏覽器還有搜狗,遨游,360等等。
27、關(guān)于浮動元素,下面說法錯誤的是( )
A、如果有多個浮動元素,浮動元素會按順序排下來而不會發(fā)生重疊的現(xiàn)象
B、浮動元素會盡可能地向頂端對齊、向左或向右對齊
C、如果有非浮動元素和浮動元素同時存在,并且非浮動元素在前,則浮動元素不會高于非浮動元素
D、行內(nèi)元素與浮動元素發(fā)生重疊,其邊框,背景和內(nèi)容都會顯示在浮動元素之下
解析:
選D
行內(nèi)元素與浮動元素發(fā)生重疊,邊框、背景、內(nèi)容都會顯示在浮動元素之上
塊級元素與浮動元素發(fā)生重疊,邊框、背景會顯示在浮動元素之下,內(nèi)容會顯示在浮動元素之上
28、要將下面代碼中超鏈接文本呈現(xiàn)為紅色,不可以使用的樣式表是( )
<div><a href="http://www.w3.org/">**鏈接到W3C**</a></div>
A、a:link{color:red}
B、div a:link{color:red}
C、div>a:link{color:red}
D、div:first-child{color:red}
解析:
選D
div:first-child
表示選擇屬于父元素的第一個子元素的每個<div>元素
29、下列哪個不屬于id與class之間的區(qū)別( )
A、id在文檔中只能使用一次,而class可以多次使用
B、id比class具有更高的樣式優(yōu)先級
C、一個元素只能有一個id屬性值,卻可以擁有多個class屬性值
D、在class中可以定義:hover偽類,在id中不能定義
解析:
選D
在樣式表定義一個樣式的時候,可以定義id也可以定義class。
1、在CSS文件里書寫時,ID加前綴"#";CLASS用"."
2、id一個頁面只可以使用一次;class可以多次引用。
3、ID是一個標簽,用于區(qū)分不同的結(jié)構(gòu)和內(nèi)容;class是一個樣式,可以套在任何結(jié)構(gòu)和內(nèi)容上
4、從概念上說就是不一樣的:id是先找到結(jié)構(gòu)/內(nèi)容,再給它定義樣式;class是先定義好一種樣式,再套給多個結(jié)構(gòu)/內(nèi)容。
30、把鼠標移到按鈕并點擊時,會產(chǎn)生一串什么樣的事件( )
A、active hover focus
B、foucs hover active
C、hover active foucus
D、hover focus active
解析:
選D
觸發(fā)順序為 link-->visited--->hover--->active
31、下列哪些是HTML5相關(guān)的框架或類庫:( )
A、spring-core
B、RactiveJS
C、Dubbo
D、Bootstrap
E、AngularJS
F、Hibernate
解析:
選B、D、E
Spring框架是一個開放源代碼的J2EE應(yīng)用程序框架
Dubbo是一款高性能、輕量級的開源Java RPC框架
Hibernate是一個開放源代碼的對象關(guān)系映射框架
32、css中clear的作用是什么?( )
A、清除該元素所有樣式
B、清除該元素父元素的所有樣式
C、指明該元素周圍不可出現(xiàn)浮動元素
D、指明該元素的父元素周圍不可出現(xiàn)浮動元素
解析:
選C
clear : none | left | right | both.
對于CSS的清除浮動(clear),
這個規(guī)則只能影響使用清除的元素本身,不能影響其他元素
33、css 中可繼承的屬性有哪些( )
A、height
B、font-size
C、border
D、width
E、color
解析:
選B、E
所有元素可繼承:visibility和cursor。
內(nèi)聯(lián)元素可繼承:letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction。
終端塊狀元素可繼承:text-indent和text-align。
列表元素可繼承:list-style、list-style-type、list-style-position、list-style-image
JavaScript
1、JavaScript中window對象的子對象不包含以下哪個對象?( )
A. document B. self C. history D. message
解析:
選D
window的主對象主要有如下幾個:
document frames history location navigator screen
window、self、window.self三者是等價的
2、將一個整數(shù)序列整理為升序,兩趟處理后變?yōu)?0,12,21,9,7,3,4,25,則采用的排序算法可能Z:( )
A、插入排序
B、快速排序
C、選擇排序
D、堆排序
解析:
選C
第一層循環(huán):依次遍歷序列當中的每一個元素
第二層循環(huán):將遍歷得到的當前元素依次與余下的元素進行比較
符合最小元素的條件,則交換
選擇排序的基本思想:比較+交換
3、下邊這代碼輸出的結(jié)果是:( )
function showCase(value) { switch(value) { case 'A': console.log('Case A'); break; case 'B': console.log('Case B'); break; case undefined: console.log('undefined'); break; default: console.log('Do not know!'); } } showCase(new String('A'));
A、Case A
B、Case B
C、undefined
D、Do not know!
解析:
選D
此題考查的是關(guān)于new string();其中new是一個實例對象,要匹配的也是object,
所以輸出結(jié)果為Do not know
4、下邊這代碼輸出的結(jié)果是( )
var two = 0.2 var one = 0.1 var eight = 0.8 var six = 0.6 console.log([two - one == one, eight - six == two]);
A、[true, true]
B、[false, false]
C、[true, false]
D、other
解析:
選C
這題考的是浮點數(shù)計算時精度丟失問題
5、以下代碼的執(zhí)行結(jié)果是什么( )
var string = 'string'; var number = 0; var bool = true; console.log(number || string); console.log(number && string); console.log(bool || number); console.log(bool && number);
A. ‘string’, 0, true,0
B. ‘string’, true,0, 0
C. ‘string’, ‘string’,true, 0
D. ‘string’, 0, true,true
解析:
選A
var string = 'string'; 對象為true var number = 0; 非零數(shù)字為true var bool = true; 非空字符串為true console.log(number || string); 其他為false console.log(number && string); console.log(bool || number); console.log(bool && number);
6、下面可以匹配的正則表達式是( )
<img src=”http://image.163.com”></img>
A、<img src=”[^”]*”></img>
B、<img src=”[.”]*”></img>
C、<img src=”[^”]*></img>
D、<img src=”[.”]*></img>
復(fù)制代碼解析:
選A
var a='<IMG src="http://image.163.com">' var b=/<IMGsrc="[^"]*">/gi var s=a.match(b) for(var i= 0;i<s.length;i++) { alert(s[i]); alert(RegExp.$1) }
7、["1", "2", "3"].map(parseInt) 返回的結(jié)果為( )
A:["1", "2", "3"]
B:[1, 2, 3]
C:[0, 1, 2]
D:other
解析:
選D
這題的答案是:[1,NaN,NaN]
該題用到了map與parseInt;parseInt() 函數(shù)的語法是parseInt(string, radix);
string 必需。要被解析的字符串。
radix可選。表示要解析的數(shù)字的基數(shù)。該值介于 2 ~ 36 之間。
如果省略該參數(shù)或其值為 0,則數(shù)字將以 10 為基礎(chǔ)來解析。如果它以 “0x” 或 “0X” 開頭,將以 16 為基數(shù)。
如果該參數(shù)小于 2 或者大于 36,則 parseInt() 將返回 NaN
實際上map里的callback函數(shù)接受的是三個參數(shù) 分別為元素 下標和數(shù)組
回調(diào)函數(shù)的語法如下所示:
function callbackfn(value, index, array1)
可使用最多三個參數(shù)來聲明回調(diào)函數(shù)。
8、[typeof null, null instanceof Object]這些類型的結(jié)果是( )
A: ["object", false]
B: [null, false]
C: ["object", true]
D: other
解析:
選A
這題考察的是typeof運算符和instanceof運算符
typeof運算符,一些基礎(chǔ)類型的結(jié)果是:
Undefined "undefined" Null "object" Boolean "boolean" Number "number" String "string" Any other object "object" Array "object" Null instanceof任何類型都是false
9、下邊代碼輸出的結(jié)果是( )
var val = 'smtg'; console.log('Value is ' + (val === 'smtg') ? 'Something' : 'Nothing');
A: Value is Something
B: Value is Nothing
C: NaN
D: other
解析:
選D
這題考的是js中的運算符優(yōu)先級,
這里’+’運算符的優(yōu)先級要高于’?’
所以val === ‘smtg’實際上就是true
所以結(jié)果為’Something’
10、下邊代碼輸出的結(jié)果是( )
var name = 'World!'; (function () { if (typeof name === 'undefined') { var name = 'Jack'; console.log('Goodbye ' + name); } else { console.log('Hello ' + name); } })();
A: Goodbye Jack
B: Hello Jack
C: Hello undefined
D: Hello World
解析:
選A
這題考的是js作用域中變量的提升,
js的作用于中使用var定義變量都會被提升到所有代碼的最前面,
所以var name目前是undefined,
題目的typeof name === ‘undefined’的結(jié)果為true時,就會輸出’Goodbye Jack’
11、var arr = [];typeof arr 的結(jié)果是( )
A、array
B、function
C、object
D、undefined
解析:
選C
5種簡單數(shù)據(jù)類型(也稱基本數(shù)據(jù)類型):
Undefined、Null、Boolean、Number、String
1種復(fù)雜數(shù)據(jù)類型:Object(基本上除了上述5種,其余都是Object)
12、以下代碼執(zhí)行后,console 的輸出是( )
function Foo(){ console.log(this.location); } Foo();
A、當前窗口的 Location 對象
B、undefined
C、null
D、TypeError
解析:
選A
這題考的是this的用法
'use strict'條件下,會報TypeError
無'use strict'下,this指向window
13、下列事件哪個不是由鼠標觸發(fā)的事件()
A、click
B、contextmenu
C、mouseout
D、keydown
解析:
選D
常見的事件: 1. 點擊事件: 1. onclick:單擊事件 2. ondblclick:雙擊事件
2. 焦點事件 1. onblur:失去焦點 2. onfocus:元素獲得焦點。
3. 加載事件: 1. onload:一張頁面或一幅圖像完成加載。
4. 鼠標事件: 1. onmousedown 鼠標按鈕被按下。 2. onmouseup 鼠標按鍵被松開。 3. onmousemove 鼠標被移動。 4. onmouseover 鼠標移到某元素之上。 5. onmouseout 鼠標從某元素移開。 5. 鍵盤事件: 1. onkeydown 某個鍵盤按鍵被按下。 2. onkeyup 某個鍵盤按鍵被松開。 3. onkeypress 某個鍵盤按鍵被按下并松開。
6. 選擇和改變 1. onchange 域的內(nèi)容被改變。 2. onselect 文本被選中。
7. 表單事件: 1. onsubmit 確認按鈕被點擊。 2. onreset 重置按鈕被點擊。
14、如何遍歷下面的 my_data 對象?( )
var my_data={a:’Ape’, b:’Banana’, c:’Citronella’};
A、for(var key in my_data) {}
B、foreach(my_data as key=>value) {}
C、for(var i=0;i<my_data.length;i++) {}
D、全不正確
解析:
選A
for in遍歷對象所擁有的屬性(可枚舉的)
由于對象和數(shù)組不同,不能用下標來訪問,只能用for in遍歷
15、如何判斷一個js對象是否是Array,arr為要判斷的對象,其中最準確的方法是?( )
A、typeof(arr)
B、arr instanceof Array
C、arr.toString==='[object Array]';
D、Object.prototype.toString.call(arr) === '[object Array]';
解析:
選D
A選項中的typeof(arr) 返回的是 Object
instanceof 在跨 frame 對象構(gòu)建的場景下會失效
arr.toString 沒有這種用法,正確的用法是 arr.toString() 返回的是數(shù)組的內(nèi)容
16、在很多時候,我們需要給網(wǎng)頁中的一些元素不停的切換樣式,那么要怎樣實現(xiàn)給元素刪除一個樣式的同時,添加另外一個樣式( )
A、
$('#ele').removeClass('className');
$('#ele').addClass('ClassName');
B、
$('us').removeClass('className');
$('us').addClass('ClassName');
C、
$('.us').removeClass('className');
$('.us').addClass('ClassName');
D、
$('us').remove('className');
$('us').add('ClassName');
解析:
選A
B選項錯
選項使用元素選擇器,但是 HTML 中沒有 us 標簽
C選項錯
選項使用類選擇器,但是刪除了類樣式后,如何通過類選擇器給元素添加樣式
D選項錯
add() 方法:把元素添加到已存在的元素組合中。
remove() 方法:移除被選元素,包括所有的文本和子節(jié)點。
17、下列代碼hasOwnProperty的作用是?( )
var obj={} …….. obj.hasOwnProperty("val")
A、判斷obj對象是否具有val屬性
B、判斷obj對象是否具有val的值
C、判斷obj的原型對象是否具有val的屬性
D、判斷obj的原型對象是否具有val的值
解析:
選A
hasOwnProperty:
是用來判斷一個對象是否有你給出名稱的屬性或?qū)ο?br />
isPrototypeOf :
是用來判斷要檢查其原型鏈的對象是否存在于指定對象實例中,是則返回true,否則返回false。
18、下列不屬于javascript內(nèi)置對象的是( )
A、Math
B、Date
C、RegExp
D、Window
E、Error
解析:
選D
js中的內(nèi)部對象包括
Array、Boolean、Date、Function、Global、Math、Number、Object、RegExp、String以及各種錯誤類對象,包括Error、EvalError、RangeError、ReferenceError、SyntaxError和TypeError。
19、javascirpt中的數(shù)字在計算機內(nèi)存儲為多少Byte( )
A、2 Byte
B、4Byte
C、8Byte
D、16Byte
解析:
選C
"JavaScript內(nèi)部,所有數(shù)字都是以64位浮點數(shù)形式儲存,即使整數(shù)也是如此。"
8 Byte = 64bit ;
8個字節(jié),64位
20、以下運行結(jié)果( )
for(var i = 0; i < 10; i++) { setTimeout(function() { console.log(i); }, 1000); }
A、0--9
B、10個10
C、10個9
D、無限循環(huán)
解析:
選B
setTimeout中的閉包函數(shù)是每1s執(zhí)行一次
由于for循環(huán)的執(zhí)行速度遠小于1s,
所以當開始執(zhí)行閉包函數(shù)的時候for循環(huán)已經(jīng)結(jié)束了(i=10),
之后閉包函數(shù)執(zhí)行十次(因為循環(huán)了10次),所以打印了10個10。
21、若需給子scope發(fā)送消息,需使用哪個方法( )
A、$emit()
B、$broadcast()
C、$on()
D、$send()
解析:
選B
$broadcast是向下傳播事件
22、函數(shù)的調(diào)用方式有哪些:( )
A、直接調(diào)用
B、作為對象方法調(diào)用
C、作為構(gòu)造函數(shù)調(diào)用
D、通過call和apply方法調(diào)用
解析:
選A、B、C、D
23、下拉菜單中,用戶更改表單元素Select中的值時,就會調(diào)用( )事件處理程序
A、onMouseOver
B、onFocus
C、onChange
D、onClick
解析:
選C
切換下拉菜單更改狀態(tài)用onchange
A選項:鼠標事件
B選項:焦點事件一般是input
C選項:改變狀態(tài)
D選項:點擊事件
24、在ES6規(guī)范中,以下類型哪些屬于基本數(shù)據(jù)類型( )
A、String
B、Null
C、Undefined
D、Symbol
解析:
選A、B、C、D
基本數(shù)據(jù)類型:Number,String, Null, Undefined, Boolean,Symbol(es6新增)
引用數(shù)據(jù)類型:Object,F(xiàn)unction
25、語句var arr=[a,b,c,d];執(zhí)行后,數(shù)組arr中每項都是一個整數(shù),下面得到其中最大整數(shù)語句正確的是哪幾項?( )
A、Math.max(arr)
B、Math.max(arr[0], arr[1], arr[2], arr[3])
C、Math.max.call(Math, arr[0], arr[1], arr[2], arr[3])
D、Math.max.apply(Math,arr)
解析:
選B、C、D
因為傳入的數(shù)組,所以A選項錯誤
C選項,F(xiàn)unction.call()可以傳入任意多個參數(shù),所以C正確
D選項,F(xiàn)unction.apply()第二個參數(shù)以數(shù)組形式傳遞,所以D正確
26、以下結(jié)果里,返回true的是( )
A、!![]
B、1===’1’
C、null===undefined
D、!!’’
解析:
選A
A選項,由于數(shù)組屬于對象類型,所以空的數(shù)組轉(zhuǎn)換成布爾型是true,前置??!,兩次取反,返回true。A正確。
B選項,“===”同等于(包含數(shù)據(jù)類型),左右兩端數(shù)據(jù)類型不同,因此返回false。
C選項,同上,由于左右兩端數(shù)據(jù)類型不同,返回false。
D選項,字符的編碼值為0的字符,因此返回false。
27、JavaScript實現(xiàn)繼承的方式,不正確的是( )
A、原型鏈繼承
B、構(gòu)造函數(shù)繼承
C、組合繼承
D、關(guān)聯(lián)繼承
解析:
選D
JavaScript實現(xiàn)繼承共6種方式:原型鏈繼承、借用構(gòu)造函數(shù)繼承、組合繼承、原型式繼承、寄生式繼承、寄生組合式繼承。
28、以下代碼執(zhí)行后,console 的輸出是( )
let x = 10; let foo = () => { console.log(x); let x = 20; x++; } foo();)
A、拋出 ReferenceError
B、10
C、20
D、21
解析:
選A
let不存在變量提升,所以沒有事先聲明。
let塊級作用域,所以不會去訪問外部的x。
既不會訪問外部,又沒有事先聲明,輸出x便會報錯
29、關(guān)于 this 的工作原理,下面 4 種情況的描述哪一個是錯誤的?( )
A、在全局范圍內(nèi),this指向全局對象(瀏覽器下指window)
B、對象函數(shù)調(diào)用時,this指向當前對象
C、全局函數(shù)調(diào)用時,this指向全局函數(shù)
D、使用new實例化對象時,this指向新創(chuàng)建的對象
解析:
選C
this有四種情況!
1、當在函數(shù)調(diào)用的時候指向widow
2、當方法調(diào)用的時候指向調(diào)用對象
3、當用apply和call上下文調(diào)用的時候指向傳入的第一個參數(shù)
4、構(gòu)造函數(shù)調(diào)用指向?qū)嵗龑ο?br />
JS中this關(guān)鍵字, 它代表函數(shù)運行時,自動生成的一個內(nèi)部對象,只能在函數(shù)內(nèi)部使用。
全局函數(shù)調(diào)用時,this指向全局函數(shù); 應(yīng)該是指向調(diào)用全局函數(shù)的對象。
30、以下js操作Array的方法中不能添加元素的是:( )
A、push
B、pop
C、unshift
D、splice
解析:
選B
數(shù)組.pop(): 刪除數(shù)組的最后一項,該表達式返回最后一項的數(shù)據(jù)
31、關(guān)于javascript,以下選項描述錯誤的是( )
A、在原型上擴展的可枚舉方法,會被for in循環(huán)出來
B、使用object.defineProperty可向?qū)ο筇砑踊蛘咝薷膶傩?br />
C、通過hasOwnProperty可判斷一個對象以及其原型鏈上是否具有指定名稱的屬性
D、原型鏈是JS實現(xiàn)繼承的一種模型
E、每個對象都有prototype屬性,返回對象類型原型的引用
F、For循環(huán)是按順序的,for in 循環(huán)是不一定按順序的
解析:
選C
hasOwnProperty方法是用來檢測給定的屬性是否在當前對象的實例中。
32、關(guān)于ES6的使用以下描述錯誤的是?( )
A、
const a = 1; const b = 2; const map = {a, b};
B、
enum TYPE { OK, YES }
C、
class A { constructor (a) { this.a = a; } } class AA extends A { constructor (a, b) { super(a); this.b = b; } toString () { return this.a + '' + this.b; } }
D、
function* greet(){ yield "How"; yield "are"; yield "you"; } var greeter = greet(); console.log(greeter.next().value); console.log(greeter.next().value); console.log(greeter.next().value);
解析:
選B
es6中將構(gòu)造方法的function換成了class,
用于與普通函數(shù)區(qū)分,其中的屬性都放在constructor中,
方法在原型中,子類繼承采用extends關(guān)鍵字;對于es6中枚舉的使用,
只能是以類的方式定義枚舉類,不能直接使用enum關(guān)鍵字
33、獲取 input 節(jié)點的錯誤方法是( )
<form class="file" name="upload"> <input id="file" name="file" /> </form>
A、document.querySelectorAll('file')[0]
B、document.getElementById('file')[0]
C、document.getElementByTagName('file')[0]
D、document.getElementById('file')
解析:
選A、B、C、D
A選項:應(yīng)該是 document.querySelectorAll('#file')[0]
B選項:應(yīng)該是 document.getElementById('file')
C選項:應(yīng)該是 document.getElementsByTagName('input')[0]
D選項:input標簽中就沒有class屬性
34、下列哪些會返回false( )
A、null
B、undefined
C、0
D、‘0'
解析:
選A、B、C
35、以下哪些選項可以將集合A轉(zhuǎn)化為數(shù)組( )
A、Array.form(A)
B、[].slice.apply(A)
C、[…A]
D、[].map.call(A, o => o)
解析:
選A、B、C、D
A選項:可以把對象轉(zhuǎn)換成真正的數(shù)組
B選項:slice( )方法可從已有的數(shù)組中返回選定的元素
C選項:展開運算符,把A集合的元素展開后,用數(shù)組[]承載,返回新的數(shù)組
D選項:map() 方法返回一個新數(shù)組,數(shù)組中的元素為原始數(shù)組元素調(diào)用函數(shù)處理后的值
36、js數(shù)組的方法中,哪些方法不能改變自身數(shù)組( )
A、splice
B、concat
C、sort
D、pop
解析:
選B
splice刪除數(shù)據(jù)會改變數(shù)組
concat連接數(shù)組但是不改變院數(shù)組
sort排序會改變數(shù)組
pop出棧返回最后一個最后一個元素,改變數(shù)組
37、下面有關(guān)JavaScript中 call和apply的描述,錯誤的是( )
A、call與apply都屬于Function.prototype的一個方法,所以每個function實例都有call、apply屬性
B、apply傳入的是一個參數(shù)數(shù)組,也就是將多個參數(shù)組合成為一個數(shù)組傳入
C、call傳入的則是直接的參數(shù)列表。call 方法可將一個函數(shù)的對象上下文從初始的上下文改變?yōu)橛?thisObj 指定的新對象。
D、兩者傳遞的參數(shù)不同,call函數(shù)第一個參數(shù)都是要傳入給當前對象的對象,apply不是
解析:
選D
call, apply方法它們除了第一個參數(shù),即執(zhí)行時上下文對象相同外,
call方法的其它參數(shù)將依次傳遞給借用的方法作參數(shù),而apply就兩個參數(shù),
第二個參數(shù)為一個數(shù)組傳遞
38、白屏?xí)r間first paint和可交互時間dom ready的關(guān)系是( )
A、先觸發(fā)first paint ,后觸發(fā)dom ready
B、先觸發(fā)dom ready,后觸發(fā)first paint
C、一起觸發(fā)
D、沒關(guān)系
解析:
選A
白屏?xí)r間(first Paint Time)——用戶從打開頁面開始到頁面開始有東西呈現(xiàn)為止
首屏?xí)r間——用戶瀏覽器首屏內(nèi)所有內(nèi)容都呈現(xiàn)出來所花費的時間
用戶可操作時間(dom Interactive)——用戶可以進行正常的點擊、輸入等操作,默認可以統(tǒng)計domready時間,因為通常會在這時候綁定事件操作
總下載時間——頁面所有資源都加載完成并呈現(xiàn)出來所花的時間,即頁面 onload 的時間
39、最后一句alert的輸出結(jié)果是( )
var msg='hello'; for (var i=0; i<10; i++) { var msg='hello'+i*2+i; } alert(msg);
A、hello
B、hello27
C、hello30
D、hello189
解析:
選D
這里只是for循環(huán)不是函數(shù),
因此for內(nèi)部定義的msg與for外部定義的msg為在同一塊作用域,為同一個變量。
輸出hello189
hello+9*2+9
40、要在10秒后調(diào)用checkState,下列哪個是正確的( )
A、window.setTimeout(checkState, 10);
B、window.setTimeout(checkState(), 10);
C、window.setTimeout(checkState, 10000);
D、window.setTimeout(checkState(), 10000);
解析:
選C
checkState加了( )相當于函數(shù)表達式,會立即執(zhí)行,執(zhí)行的結(jié)果作為返回值傳遞給settimeout
10 s 應(yīng)該為 10000
所以選C
41、下列代碼得到的結(jié)果是( )
console.log(([])?true:false); console.log(([]==false?true:false)); console.log(({}==false)?true:false)
A、false true true
B、true true false
C、true false true
D、true true true
解析:
選B
Boolean([]); //true Number([]); //0 Number({}); // NaN Number(false); //0
console.log(([])?true:fasle);// => console.log((true)?true:false); console.log([]==false?true:false); // => console.log(0==0?true:false); console.log(({}==false)?true:false); // => console.log((NaN==0)?true:false);
第一個
([])布爾轉(zhuǎn)換成true
第二個
==相等比較時,允許類型轉(zhuǎn)換 其他類型值和布爾值==比較時,先將布爾值強制轉(zhuǎn)換為對應(yīng)數(shù)字,再進行比較 []==false []==0 []和數(shù)字相等比較時轉(zhuǎn)數(shù)字0 0==0 true
第三個
{}==false {}==0 NaN==0 false
42、JavaScript定義var a="40",var b=7,則執(zhí)行a%b會得到( )
A、null
B、undefined
C、5
D、"5"
解析:
選C
運算中,+號,數(shù)字隱式轉(zhuǎn)換成字符串
其余的運算符號是字符串隱式轉(zhuǎn)換成數(shù)字
43、下列關(guān)于閉包描述正確的是?( )
A、(function(){})()理論上是一個閉包
B、閉包不耗內(nèi)存,可以隨意使用
C、閉包內(nèi)變量執(zhí)行后不會被清除
D、閉包不滿足鏈式作用域結(jié)構(gòu)
解析:
選A、C
邏輯上立即執(zhí)行函數(shù)可以理解為:聲明閉包函數(shù)-執(zhí)行-釋放內(nèi)存
閉包內(nèi)變量要到整個閉包被清除的時候才會清除
44、在ECMAScript6 中,promise的狀態(tài)有( )
A、Pending
B、Pause
C、Resolved
D、Rejected
解析:
選A、C、D
Promise 對象代表一個異步操作,有3種狀態(tài):
Pending(進行中)、Resolved(已完成,又稱Fulfilled)和Rejected(已完成)’
45、下面有關(guān)瀏覽器中使用js跨域獲取數(shù)據(jù)的描述,說法錯誤的是( )
A、使用window.name來進行跨域
B、域名、端口相同,協(xié)議不同,屬于相同的域
C、js可以使用jsonp進行跨域
D、通過修改document.domain來跨子域
解析:
選B
只要 協(xié)議、域名、端口有任何一個不同, 都被當作是不同的域
46、下面關(guān)于DNS說法正確的是( )
A、DNS協(xié)議端口號為53
B、DNS的作用是域名和IP地址的相互映射
C、DNS協(xié)議大多數(shù)運行在UDP協(xié)議之上
D、DNS的默認緩存時間為1小時
解析:
選A、C
A選項:DNS協(xié)議默認端口號是53
B選項:DNS就是將域名翻譯成IP地址。
C選項:主要用UDP,但是當請求字節(jié)過長超過512字節(jié)時用TCP協(xié)議,將其分割成多個片段傳輸
D:操作系統(tǒng)的DNS緩存:windows DNS緩存的默認值是 MaxCacheTTL,它的默認值是86400s,也就是一天。macOS 嚴格遵循DNS協(xié)議中的TTL。
游覽器的DNS緩存:chrome對每個域名會默認緩存60s;IE將DNS緩存30min;Firefox默認緩存時間只有1分鐘;Safari約為10S。
47、下面運行結(jié)果正確的是( )
var a = {}, b = Object.prototype;
[a.prototype === b, Object.getPrototypeOf(a) === b]
復(fù)制代碼A、other
B、[true, true]
C、[false, false]
D、[false, true]
解析:
選D
這題考的是__proto__和prototype的區(qū)別
Object實際上是一個構(gòu)造函數(shù)(typeof Object的結(jié)果為"function")
使用字面量創(chuàng)建對象和new Object創(chuàng)建對象是一樣的,
所以a.__proto__也就是Object.prototype,
而Object.getPrototypeOf(a)與a.__proto__是一樣的,所以第二個結(jié)果為true
而實例對象是沒有prototype屬性的,只有函數(shù)才有
所以a.prototype其實是undefined,第一個結(jié)果為false
48、下面運行結(jié)果正確的是( )
var a = /678/, b = /678/; a == b a === b
A、other
B、true,true
C、true、false
D、false、false
解析:
選D
JavaScript中的正則表達式依舊是對象,使用typeof運算符就能得出結(jié)果:object
運算符左右兩邊都是對象時,比較他們是否指向同一個對象
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
- 一場疫情過后,又要經(jīng)歷一次次面試,今天小編給大家分享2020前端面試題之HTML篇,非常不錯,對大家有所幫助,需要的朋友參考下吧2020-03-25
- 這篇文章主要介紹了2019大廠前端面試題小結(jié),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2020-03-05
- 隨著疫情的不斷好轉(zhuǎn),各地都開始逐步的復(fù)工,當然對我們來說,也馬上迎來所謂的金三銀四跳槽季。今天小編給大家分享前端常見面試題,需要的朋友跟隨小編一起看看吧2020-02-27
- 這篇文章主要介紹了Web前端面試筆試題總結(jié),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2020-02-18
- 這篇文章主要介紹了面試官常問的web前端問題大全,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下2020-01-03
- 這篇文章主要介紹了前端十幾道含答案的大廠面試題總結(jié),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2020-01-02
- 這篇文章主要介紹了超實用前端面試題整理(小結(jié)),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-12-19
每個前端工程師都應(yīng)該去了解的前端面試題小結(jié)(推薦)
面試對于我們每個程序員來說都是非常重要的環(huán)節(jié),掌握一些面試題技巧是非常有必要的,今天小編給大家分享幾個js有關(guān)的面試題,需要的朋友參考下吧2020-04-15