80道前端面試經典選擇題，值得收藏！

時間 2020-02-09

標籤前端面試經典選擇題值得收藏欄目快樂工作简体版

原文原文鏈接

前言

看了一下各類面試題，選擇題是必有的javascript

因此我整理了一些經典的前端面試選擇題，但願能對你們往後找工做有所幫助！css

HTML/CSS

一、在 css 選擇器當中，優先級排序正確的是（）html

A、id選擇器>標籤選擇器>類選擇器前端

B、標籤選擇器>類選擇器>id選擇器java

C、類選擇器>標籤選擇器>id選擇器es6

D、id選擇器>類選擇器>標籤選擇器web

解析：面試

選D

4個等級的定義以下：正則表達式

第一等：表明內聯樣式，如: style=」」，權值爲1000算法

第二等：表明ID選擇器，如：#content，權值爲100

第三等：表明類，僞類和屬性選擇器，如.content，權值爲10

第四等：表明類型選擇器和僞元素選擇器，如div p，權值爲1

二、下列定義的 css 中，哪一個權重是最低的？（）

A、#game .name

B、#game .name span

C、#game div

D、#game div.name

解析：

選C

權重越大，優先級越高

CSS選擇器優先級是指「基礎選擇器」的優先級：

ID > CLASS > ELEMENT > *

三、關於HTML語義化，如下哪一個說法是正確的？（）

A、語義化的HTML有利於機器的閱讀，如PDA手持設備、搜索引擎爬蟲；但不利於人的閱讀

B、Table 屬於過期的標籤，遇到數據列表時，需儘可能使用 div 來模擬表格

C、語義化是HTML5帶來的新概念，此前版本的HTML沒法作到語義化

D、header、article、address都屬於語義化明確的標籤

解析：

選D

一、什麼是HTML語義化？

根據內容的結構化（內容語義化），選擇合適的標籤（代碼語義化）便於開發者閱讀和寫出更優雅的代碼的同時讓瀏覽器的爬蟲和機器很好地解析。

二、爲何要語義化？

爲了在沒有CSS的狀況下，頁面也能呈現出很好地內容結構、代碼結構

用戶體驗：例如title、alt用於解釋名詞或解釋圖片信息、label標籤的活用；

有利於SEO ：和搜索引擎創建良好溝通，有助於爬蟲抓取更多的有效信息：

爬蟲依賴於標籤來肯定上下文和各個關鍵字的權重；

方便其餘設備解析（如屏幕閱讀器、盲人閱讀器、移動設備）以意義的方式來渲染網頁；

便於團隊開發和維護，語義化更具可讀性，是下一步吧網頁的重要動向，遵循W3C標準的團隊都遵循這個標準，能夠減小差別化

四、CSS 樣式，下面哪個元素可以達到最大寬度，且先後各有一個換行？（）

A、Block Element

B、Square Element

C、Side Element

D、Box Element

解析：

選A

塊級元素block element

行內元素 inline element

行內塊元素 inline-block element

五、下面使用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是默認的點，對應了[0,0], [1,1]。

而剩下的P一、P2兩點則是咱們經過cubic-bezier()自定義的。

cubic-bezier(x1, y1, x2, y2) 爲自定義，x1,x2,y1,y2的值範圍在[0, 1]。

六、放在HTML裏的哪一部分JavaScripts會在頁面加載的時候被執行？（）

A、文件頭部位置

B、文件尾

C、<head>標籤部分

D、<body>標籤部分

解析：

選D

head部分中的JavaScripts會在被調用的時候才執行。

body部分中的JavaScripts會在頁面加載的時候被執行。

七、問一份標準的HTML文檔有哪幾個必須的HTML標籤？（）

A、<html>

B、<head>

C、<title>

D、<body>

解析：

選A、B、C、D

注意一下題目說的是標準的HTML文檔

八、下列說法正確的有：（）

A、visibility:hidden;所佔據的空間位置仍然存在，僅爲視覺上的徹底透明；

B、display:none;不爲被隱藏的對象保留其物理空間；

C、visibility:hidden;與display:none;二者沒有本質上的區別；

D、visibility:hidden;產生reflow和repaint（迴流與重繪）；

解析：

選A、B

visiblity:看不見，摸的着.

display:看不見，摸不着.

display是dom級別的，能夠渲染和重繪。

visiblity不是dom級別的，不能重繪，只能渲染

九、請選出全部的置換元素（）

A、img

B、input

C、textarea

D、select

解析：

選A、B、C、D

置換元素：瀏覽器根據元素的標籤和屬性，來決定元素的具體顯示內容

例如：

瀏覽器會根據<img>標籤的src屬性的
值來讀取圖片信息並顯示出來，而若是查看html代碼，則看不到圖片的實際內容；
<input>標籤的type屬性來決定是顯示輸入 框，仍是單選按鈕等。 
html中 的<img>、<input>、<textarea>、<select>、<object> 都是置換元素
這些元素每每沒有實際的內容，便是一個空元素。
置換元素在其顯示中生成了框，這也就是有的內聯元素可以設置寬高的緣由。

不可替換元素：html 的大多數元素是不可替換元素，即其內容直接表現給用戶端（如瀏覽器）

例如：

<label>label中的內容</label> 標籤<label>是一個非置換元素，文字label中的內容」將全被顯示。

十、如下哪些動畫效果沒法經過貝塞爾曲線cubic-bezier實現（）

A、linear

B、ease

C、fade-in

D、ease-out

解析：

選C

fade-in和fade-out爲淡入淡出效果

十一、下面屬於CSS3新增屬性的有？（）

A、box-shadow

B、text-shadow

C、border-radius

D、rgba

解析：

選A、B、C、D

下邊我對CSS3新增屬性用法的整理：

一、box-shadow（陰影效果）

二、border-color（爲邊框設置多種顏色）

三、border-image（圖片邊框）

四、text-shadow（文本陰影）

五、text-overflow（文本截斷）

六、word-wrap（自動換行）

七、border-radius（圓角邊框）

八、opacity（透明度）

九、box-sizing（控制盒模型的組成模式）

十、resize（元素縮放）

十一、outline（外邊框）

十二、background-size（指定背景圖片尺寸）

1三、background-origin（指定背景圖片從哪裏開始顯示）

1四、background-clip（指定背景圖片從什麼位置開始裁剪）

1五、background（爲一個元素指定多個背景）

1六、hsl（經過色調、飽和度、亮度來指定顏色顏色值）

1七、hsla（在hsl的基礎上增長透明度設置）

1八、rgba（基於rgb設置顏色，a設置透明度）

十二、input元素的type屬性的取值能夠是( )

A、image

B、checkbox

C、button

D、select

解析：

選A、B、C

語法：

<input type=」value」>

屬性值：

Button：定義可點擊按鈕(多數狀況下，用於經過JavaScript啓動腳本)

CheckBox：定義複選框

File：定義輸入字段和」瀏覽」按鈕，供文件上傳

Hidden：定義隱藏的輸入字段

Image：定義圖像形式的提交按鈕

Password：定義密碼字段，該字段中的字符被遮碼

Radio：定義單選按鈕

Reset：定義重置按鈕，重置按鈕會清除表單中的全部數據

Submit：定義提交按鈕，提交按鈕會把表單數據發送到服務器

Text：定義單行輸入字段，用戶可在其中輸入文本，默認寬度爲20個字符

1三、新窗口打開網頁，用到如下哪一個值（）

A、_self

B、_blank

C、_top

D、_parent

解析：

選B

在html中經過<a>標籤打開一個連接，經過 <a> 標籤的 target

屬性規定在何處打開連接文檔。

若是在標籤<a>中寫入target屬性，則瀏覽器會根據target的屬性值去打開與其命名或名稱相符的 框架<frame>或者窗口.

在target中還存在四個保留的屬性值以下，

_black：在新窗口中打開被連接文檔

_self：默認。在相同的框架中打開被連接文檔

_ parent：在父框架中打開被連接文檔

_top：在整個窗口中打開被連接文檔

framename：在指定框架中打開被連接文檔

1四、如下所有屬於塊級標籤的是？（）

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中的標籤元素大致被分爲三種不一樣的類型：

塊狀元素、內聯元素（又叫行內元素）和內聯塊狀元素

常見的塊狀元素有：

<div>、<p>、<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote>、<form>

常見的內聯元素有：

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

常見的內聯塊狀元素有：

<img>、<input>

1五、元素的alt和title有什麼異同，選出正確的說法？（）

A、不一樣的瀏覽器，表現同樣

B、alt和title同時設置的時候，alt做爲圖片的替代文字出現，title是圖片的解釋文字

C、alt和title同時設置的時候，title做爲圖片的替代文字出現，alt是圖片的解釋文字

D、以上說法都不正確

解析：

選B

alt是html標籤的屬性，而title既是html標籤，又是html屬性。

title標籤這個不用多說，網頁的標題就是寫在

<title></title>

這對標籤以內的。

title做爲屬性時，用來爲元素提供額外說明信息。

例如，給超連接標籤a添加了title屬性
，把鼠標移動到該連接上面是，就會顯示title的內容，以達到補充說明或者提示的效果。

而alt屬性則是用來指定替換文字，只能用在img、area和input元素中（包括applet元素），用於網頁中圖片沒法正常顯示時給用戶提供文字說明使其瞭解圖像信息

1六、下列說法錯誤的是( )

A、設置display:none後的元素只會致使瀏覽器的重排而不會重繪

B、設置visibility:hidde後的元素只會致使瀏覽器重繪而不會重排

C、設置元素opacity:0以後，也能夠觸發點擊事件

D、visibility:hidden的元素沒法觸發其點擊事件

解析：

選A

設置display:none後的元素會致使瀏覽器的重排重繪

1七、下列選項中，不屬於CSS3樣式選擇器的是（）

A、empty選擇器

B、root 選擇器

C、target選擇器

D、ID選擇器

解析：

選D

ID選擇器在css1中就定義了

1八、超連接訪問事後hover樣式就不出現了，被點擊訪問過的超連接樣式再也不具備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以後。

1九、關於position定位，下列說法錯誤的是（）

A、fixed元素，可定位於相對於瀏覽器窗口的指定座標，它始終是以 body 爲依據

B、relative元素以它原來的位置爲基準偏移，在其移動後，原來的位置再也不佔據空間

C、absolute 的元素，若是它的父容器設置了 position 屬性，而且 position 的屬性值爲 absolute 或者 relative，那麼就會依據父容器進行偏移

D、fixed 屬性的元素在標準流中不佔位置

解析：

選B

absolute：

生成絕對定位的元素，相對於static定位之外的第一個父元素進行定位，元素的位置經過」left」、」top」、」right」、以及」bottom」屬性進行規定

fixed：

生成絕對定位的元素，相對於瀏覽器窗口進行定位，元素的位置經過」left」、」top」、」right」以及」bottom」屬性進行規定

relative：

生成相對定位的元素，相對於其正常位置進行定位，所以，」left：20」會向元素的LEFT位置添加20像素

static：

默認值，沒有定位，元素出現正常的流中（忽略top，bottom，left，right或者z-index聲明）

inherit：

規定應該從父元素繼承position屬性的值

20、css中哪些屬性能夠繼承（）

A、font-size

B、color

C、font-family

D、border

解析：

選A、B、C

margin padding border display 不能夠繼承

2一、下列哪些是瀏覽器支持的錨僞類：（）

A、a:link

B、a:disabled

C、a:hover

D、a:active

解析：

選A、C、D

在支持 css 的瀏覽器中，連接的不一樣狀態均可以不一樣的方式顯示，這些狀態包括：活動狀態，已被訪問狀態，未被訪問狀態和鼠標懸停狀態。用來表示連接不一樣狀態的僞類就是錨僞類

a:link {color: green;} / 未訪問的連接 /

a:visited {color: blue;} / 已訪問的連接 /

a:hover {color:orange;} / 鼠標移動到連接上 /

a:active {color: yellow;} / 選定的連接 /

2二、關於CSS選擇器，如下說法正確的是：（）

A、每條選擇器最多隻能出現一個僞元素

B、每條選擇器最多隻能出現一個僞類

C、:nth-child(an+b)中n的取值從0開始

D、A+B匹配A以後全部符合B規則的元素

解析：

選A、C

C選項：

nth-child(an+b)在下標計算表達式an+b中：

a,b是係數能夠是任意整數；

n就是個字面量「n」，表示是遞增變量，而且取值是從0開始的整數。

D選項：

B是A的下一個兄弟節點（AB有相同的父結點，而且B緊跟在A的後面）

2三、列表分爲兩類，一是無序列表，一是有序列表，如下哪一個是無序列表？（）

A、<UL>

B、<OL>

C、<DIR>

D、<DL>

解析：

選A

Ul無序列表

OL有序列表

2四、浮動會致使頁面的非正常顯示，如下幾種清除浮動的方法，哪一個是不推薦使用的？（）

A、在浮動元素末尾添加一個空的標籤例如 <div style=」clear:both」></div>

B、經過設置父元素overflow值爲hidden；

C、父元素也設置浮動

D、給父元素添加clearfix類

解析：

選C

這四種方法均可以清除，最經常使用的是DA方法；

B方法的話，若是子元素中有使用了絕對定位，在頁面上顯示是在父元素外面，通常就無法使用B方法了。

大型項目通常會多層嵌套，若是採用給父元素設置浮動的方法，那麼父元素的父元素頗有可能也要設置浮動，頁面佈局很容易亂掉

2五、下列關於web頁面級優化描述最正確的是（）

A、減小HTTP請求的次數

B、進行資源合拼和壓縮

C、Inline images

D、將外部腳本置於低端

E、減小沒必要要的HTTP跳轉

F、以上描述都對

解析：

選F

一、減小HTTP請求的次數。

http協議是無狀態的應用層協議，每次http請求都須要創建通訊鏈路、進行數據傳輸，而在服務器端每一個http都須要啓動獨立的線程去處理，這些通訊和服務的開銷都很昂貴。因此減小http請求的數目可有效提升訪問性能，A正確。

二、進行資源合拼和壓縮。

合併CSS、合併javascript、合併圖片，將瀏覽器一次訪問須要的javascript和CSS合併成一個文件，這樣瀏覽器就只須要一次請求。在服務器端對文件進行壓縮，在瀏覽器端對文件解壓縮，可有效減小通訊傳輸的數據量，B正確。

三、Inline images，使用data: URL

scheme的方式將圖片嵌入到頁面或CSS中嵌入頁面，由於直接嵌入頁面增大了頁面的體積，並且沒法利用瀏覽器緩存。因此使用在CSS中的圖片則更爲理想一些，C正確。

四、將外部腳本置於低端

瀏覽器在加載javascript後當即執行，有可能會阻塞整個頁面，形成頁面顯示緩慢，所以javascript最好放在頁面最下面，D正確。

五、減小沒必要要的HTTP跳轉

對於以目錄形式訪問的HTTP連接，不少人都會忽略連接最後是否帶’/’，假如你的服務器對此是區別對待的話，那麼你也須要注意，這其中極可能隱藏了301跳轉，增長了多餘請求，E正確

2六、網頁開發中，通常需判斷瀏覽器類型，需經過userAgent中獲取瀏覽器內核來判斷，下列說法錯誤的是？（）

A、一直到IE9，都是Trident內核

B、firefox是Gecko內核

C、chrome是webkit內核

D、IE是目前最快的瀏覽器

解析：

選D

-moz表明firefox瀏覽器私有屬性

-ms表明IE瀏覽器私有屬性

-webkit表明chrome、safari私有屬性 IE使用的是Trident內核，Firefox

使用的是Gecko內核。目前使用IE內核的瀏覽器還有搜狗，遨遊，360等等。

2七、關於浮動元素，下面說法錯誤的是（）

A、若是有多個浮動元素，浮動元素會按順序排下來而不會發生重疊的現象

B、浮動元素會盡量地向頂端對齊、向左或向右對齊

C、若是有非浮動元素和浮動元素同時存在，而且非浮動元素在前，則浮動元素不會高於非浮動元素

D、行內元素與浮動元素髮生重疊，其邊框，背景和內容都會顯示在浮動元素之下

解析：

選D

行內元素與浮動元素髮生重疊，邊框、背景、內容都會顯示在浮動元素之上

塊級元素與浮動元素髮生重疊，邊框、背景會顯示在浮動元素之下，內容會顯示在浮動元素之上

2八、要將下面代碼中超連接文本呈現爲紅色，不可使用的樣式表是（）

<div><a href="http://www.w3.org/">**連接到W3C**</a></div>

A、a:link{color:red}

B、div a:link{color:red}

C、div&gt;a:link{color:red}

D、div:first-child{color:red}

解析：

選D

div：first-child

表示選擇屬於父元素的第一個子元素的每一個<div>元素

2九、下列哪一個不屬於id與class之間的區別（）

A、id在文檔中只能使用一次，而class能夠屢次使用

B、id比class具備更高的樣式優先級

C、一個元素只能有一個id屬性值，卻能夠擁有多個class屬性值

D、在class中能夠定義:hover僞類，在id中不能定義

解析：

選D

在樣式表定義一個樣式的時候，能夠定義id也能夠定義class。

一、在CSS文件裏書寫時，ID加前綴"#"；CLASS用"."

二、id一個頁面只可使用一次；class能夠屢次引用。

三、ID是一個標籤，用於區分不一樣的結構和內容；class是一個樣式，能夠套在任何結構和內容上

四、從概念上說就是不同的：id是先找到結構/內容，再給它定義樣式；class是先定義好一種樣式，再套給多個結構/內容。

30、把鼠標移到按鈕並點擊時，會產生一串什麼樣的事件（）

A、active hover focus

B、foucs hover active

C、hover active foucus

D、hover focus active

解析：

選D

觸發順序爲 link-->visited--->hover--->active

3一、下列哪些是HTML5相關的框架或類庫：( )

A、spring-core

B、RactiveJS

C、Dubbo

D、Bootstrap

E、AngularJS

F、Hibernate

解析：

選B、D、E

Spring框架是一個開放源代碼的J2EE應用程序框架

Dubbo是一款高性能、輕量級的開源Java RPC框架

Hibernate是一個開放源代碼的對象關係映射框架

3二、css中clear的做用是什麼？（）

A、清除該元素全部樣式

B、清除該元素父元素的全部樣式

C、指明該元素周圍不可出現浮動元素

D、指明該元素的父元素周圍不可出現浮動元素

解析：

選C

clear : none | left | right | both.

對於CSS的清除浮動(clear)，

這個規則只能影響使用清除的元素自己，不能影響其餘元素

3三、css 中可繼承的屬性有哪些（）

A、height

B、font-size

C、border

D、width

E、color

解析：

選B、E

全部元素可繼承：visibility和cursor。

內聯元素可繼承：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

一、JavaScript中window對象的子對象不包含如下哪一個對象？（）

A. document   B. self   C. history   D. message

解析：

選D

window的主對象主要有以下幾個：

document   frames   history  location   navigator   screen

window、self、window.self三者是等價的

二、將一個整數序列整理爲升序，兩趟處理後變爲10,12,21,9,7,3,4,25，則採用的排序算法可能Z:（）

A、插入排序

B、快速排序

C、選擇排序

D、堆排序

解析：

選C

第一層循環：依次遍歷序列當中的每個元素

第二層循環：將遍歷獲得的當前元素依次與餘下的元素進行比較

符合最小元素的條件，則交換

選擇排序的基本思想：比較+交換

三、下邊這代碼輸出的結果是：( )

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

此題考查的是關於new string();其中new是一個實例對象,要匹配的也是object,
因此輸出結果爲Do not know

四、下邊這代碼輸出的結果是（）

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

這題考的是浮點數計算時精度丟失問題

五、如下代碼的執行結果是什麼（）

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;                      非零數字爲true
var bool = true;                     非空字符串爲true
console.log(number || string);         其餘爲false
console.log(number && string);          
console.log(bool || number);
console.log(bool && number);

六、下面能夠匹配的正則表達式是（）

<img src=」http://image.163.com」></img>

A、<img src=」[^」]*」></img>

B、<img src=」[.」]*」></img>

C、<img src=」[^」]*></img>

D、<img src=」[.」]*></img>

選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)
               }

七、["1", "2", "3"].map(parseInt) 返回的結果爲（）

A：["1", "2", "3"]

B：[1, 2, 3]

C：[0, 1, 2]

D：other

解析：

選D

這題的答案是：[1,NaN,NaN]

該題用到了map與parseInt；parseInt() 函數的語法是parseInt(string, radix)；

string 必需。要被解析的字符串。

radix可選。表示要解析的數字的基數。該值介於 2 ~ 36 之間。

若是省略該參數或其值爲 0，則數字將以 10 爲基礎來解析。若是它以「0x」或「0X」開頭，將以 16 爲基數。

若是該參數小於 2 或者大於 36，則 parseInt() 將返回 NaN
實際上map裏的callback函數接受的是三個參數分別爲元素下標和數組
回調函數的語法以下所示： function callbackfn(value, index, array1) 可以使用最多三個參數來聲明回調函數。

八、[typeof null, null instanceof Object]這些類型的結果是（）

A: ["object", false]

B: [null, false]

C: ["object", true]

D: other

解析：

選A

這題考察的是typeof運算符和instanceof運算符

typeof運算符，一些基礎類型的結果是：

Undefined "undefined"

Null "object"

Boolean "boolean"

Number "number"

String "string"

Any other object "object"

Array "object"

Null instanceof任何類型都是false

九、下邊代碼輸出的結果是（）

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中的運算符優先級，

這裏’+’運算符的優先級要高於’?’

因此val === ‘smtg’實際上就是true

因此結果爲’Something’

十、下邊代碼輸出的結果是（）

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’的結果爲true時，就會輸出’Goodbye Jack’

十一、var arr = [];typeof arr 的結果是（）

A、array

B、function

C、object

D、undefined

解析：

選C

5種簡單數據類型（也稱基本數據類型）：

Undefined、Null、Boolean、Number、String

1種複雜數據類型：Object（基本上除了上述5種，其他都是Object）

十二、如下代碼執行後，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

1三、下列事件哪一個不是由鼠標觸發的事件（）

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    域的內容被改變。
        2. onselect    文本被選中。

    7. 表單事件：
        1. onsubmit    確認按鈕被點擊。
        2. onreset    重置按鈕被點擊。

1四、如何遍歷下面的 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遍歷對象所擁有的屬性(可枚舉的)

因爲對象和數組不一樣，不能用下標來訪問，只能用for in遍歷

1五、如何判斷一個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 對象構建的場景下會失效

arr.toString 沒有這種用法，正確的用法是 arr.toString() 返回的是數組的內容

1六、在不少時候，咱們須要給網頁中的一些元素不停的切換樣式，那麼要怎樣實現給元素刪除一個樣式的同時，添加另一個樣式（ )

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() 方法：移除被選元素，包括全部的文本和子節點。

1七、下列代碼hasOwnProperty的做用是？（）

var obj={}
……..
obj.hasOwnProperty("val")

A、判斷obj對象是否具備val屬性

B、判斷obj對象是否具備val的值

C、判斷obj的原型對象是否具備val的屬性

D、判斷obj的原型對象是否具備val的值

解析：

選A

hasOwnProperty：

是用來判斷一個對象是否有你給出名稱的屬性或對象

isPrototypeOf :

是用來判斷要檢查其原型鏈的對象是否存在於指定對象實例中，是則返回true，不然返回false。

1八、下列不屬於javascript內置對象的是（）

A、Math

B、Date

C、RegExp

D、Window

E、Error

解析：

選D

js中的內部對象包括

Array、Boolean、Date、Function、Global、Math、Number、Object、RegExp、String以及各類錯誤類對象，
包括Error、EvalError、RangeError、ReferenceError、SyntaxError和TypeError。

1九、javascirpt中的數字在計算機內存儲爲多少Byte（）

A、2 Byte

B、4Byte

C、8Byte

D、16Byte

解析：

選C

"JavaScript內部，全部數字都是以64位浮點數形式儲存，即便整數也是如此。"

8 Byte = 64bit ;

8個字節，64位

20、如下運行結果（）

for(var i = 0; i < 10; i++) {
    setTimeout(function() {
        console.log(i);
    }, 1000);
}

A、0--9

B、10個10

C、10個9

D、無限循環

解析：

選B

setTimeout中的閉包函數是每1s執行一次

因爲for循環的執行速度遠小於1s，

因此當開始執行閉包函數的時候for循環已經結束了（i=10），

以後閉包函數執行十次（由於循環了10次），因此打印了10個10。

2一、若需給子scope發送消息，需使用哪一個方法（）

A、$emit()

B、$broadcast()

C、$on()

D、$send()

解析：

選B

$broadcast是向下傳播事件

2二、函數的調用方式有哪些：（）

A、直接調用

B、做爲對象方法調用

C、做爲構造函數調用

D、經過call和apply方法調用

解析：

選A、B、C、D

2三、下拉菜單中，用戶更改表單元素Select中的值時，就會調用（）事件處理程序

A、onMouseOver

B、onFocus

C、onChange

D、onClick

解析：

選C

切換下拉菜單更改狀態用onchange

A選項：鼠標事件

B選項：焦點事件通常是input

C選項：改變狀態

D選項：點擊事件

2四、在ES6規範中，如下類型哪些屬於基本數據類型（）

A、String

B、Null

C、Undefined

D、Symbol

解析：

選A、B、C、D

基本數據類型：

Number,String, Null, Undefined,  Boolean，Symbol（es6新增）

引用數據類型：

Object，Function

2五、語句var arr=[a,b,c,d];執行後，數組arr中每項都是一個整數，下面獲得其中最大整數語句正確的是哪幾項？（）

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

由於傳入的數組，因此A選項錯誤

C選項，Function.call()能夠傳入任意多個參數，因此C正確

D選項，Function.apply()第二個參數以數組形式傳遞，因此D正確

2六、如下結果裏，返回true的是（）

A、!![]

B、1===’1’

C、null===undefined

D、!!’’

解析：

選A

A選項，因爲數組屬於對象類型，因此空的數組轉換成布爾型是true，前置！！，兩次取反，返回true。A正確。

B選項，「===」同等於（包含數據類型），左右兩端數據類型不一樣，所以返回false。

C選項，同上，因爲左右兩端數據類型不一樣，返回false。

D選項，字符的編碼值爲0的字符，所以返回false。

2七、JavaScript實現繼承的方式，不正確的是( )

A、原型鏈繼承

B、構造函數繼承

C、組合繼承

D、關聯繼承

解析：

選D

JavaScript實現繼承共6種方式：

原型鏈繼承、借用構造函數繼承、組合繼承、原型式繼承、寄生式繼承、寄生組合式繼承。

2八、如下代碼執行後，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便會報錯

2九、關於 this 的工做原理，下面 4 種狀況的描述哪個是錯誤的？（）

A、在全局範圍內，this指向全局對象（瀏覽器下指window）

B、對象函數調用時，this指向當前對象

C、全局函數調用時，this指向全局函數

D、使用new實例化對象時，this指向新建立的對象

解析：

選C

this有四種狀況！

一、當在函數調用的時候指向widow

二、當方法調用的時候指向調用對象

三、當用apply和call上下文調用的時候指向傳入的第一個參數

四、構造函數調用指向實例對象

JS中this關鍵字，它表明函數運行時，自動生成的一個內部對象，只能在函數內部使用。

全局函數調用時，this指向全局函數；應該是指向調用全局函數的對象。

30、如下js操做Array的方法中不能添加元素的是：（）

A、push

B、pop

C、unshift

D、splice

解析：

選B

數組.pop(): 刪除數組的最後一項，該表達式返回最後一項的數據

3一、關於javascript，如下選項描述錯誤的是（）

A、在原型上擴展的可枚舉方法，會被for in循環出來

B、使用object.defineProperty可向對象添加或者修改屬性

C、經過hasOwnProperty可判斷一個對象以及其原型鏈上是否具備指定名稱的屬性

D、原型鏈是JS實現繼承的一種模型

E、每一個對象都有prototype屬性，返回對象類型原型的引用

F、For循環是按順序的，for in 循環是不必定按順序的

解析：

選C

hasOwnProperty方法是用來檢測給定的屬性是否在當前對象的實例中。

3二、關於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中將構造方法的function換成了class，

用於與普通函數區分，其中的屬性都放在constructor中，

方法在原型中，子類繼承採用extends關鍵字;對於es6中枚舉的使用，

只能是以類的方式定義枚舉類，不能直接使用enum關鍵字

3三、獲取 input 節點的錯誤方法是( )

<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選項：應該是 document.querySelectorAll('#file')[0]

B選項：應該是 document.getElementById('file')

C選項：應該是 document.getElementsByTagName('input')[0]

D選項：input標籤中就沒有class屬性

3四、下列哪些會返回false（）

A、null

B、undefined

C、0

D、‘0'

解析：

選A、B、C

3五、如下哪些選項能夠將集合A轉化爲數組（）

A、Array.form(A)

B、[].slice.apply(A)

C、[…A]

D、[].map.call(A, o => o)

解析：

選A、B、C、D

A選項：能夠把對象轉換成真正的數組

B選項：slice( )方法可從已有的數組中返回選定的元素

C選項：展開運算符，把A集合的元素展開後，用數組[]承載，返回新的數組

D選項：map() 方法返回一個新數組，數組中的元素爲原始數組元素調用函數處理後的值

3六、js數組的方法中，哪些方法不能改變自身數組（）

A、splice

B、concat

C、sort

D、pop

解析：

選B

splice刪除數據會改變數組

concat鏈接數組可是不改變院數組

sort排序會改變數組

pop出棧返回最後一個最後一個元素，改變數組

3七、下面有關JavaScript中 call和apply的描述，錯誤的是( )

A、call與apply都屬於Function.prototype的一個方法，因此每一個function實例都有call、apply屬性

B、apply傳入的是一個參數數組，也就是將多個參數組合成爲一個數組傳入

C、call傳入的則是直接的參數列表。call 方法可將一個函數的對象上下文從初始的上下文改變爲由 thisObj 指定的新對象。

D、二者傳遞的參數不一樣，call函數第一個參數都是要傳入給當前對象的對象，apply不是

解析：

選D

call, apply方法它們除了第一個參數,即執行時上下文對象相同外,

call方法的其它參數將依次傳遞給借用的方法做參數,而apply就兩個參數,

第二個參數爲一個數組傳遞

3八、白屏時間first paint和可交互時間dom ready的關係是（）

A、先觸發first paint ，後觸發dom ready

B、先觸發dom ready，後觸發first paint

C、一塊兒觸發

D、不要緊

解析：

選A

白屏時間（first Paint Time）——用戶從打開頁面開始到頁面開始有東西呈現爲止

首屏時間——用戶瀏覽器首屏內全部內容都呈現出來所花費的時間

用戶可操做時間(dom Interactive)——用戶能夠進行正常的點擊、輸入等操做，默承認以統計domready時間，由於一般會在這時候綁定事件操做

總下載時間——頁面全部資源都加載完成並呈現出來所花的時間，即頁面 onload 的時間

3九、最後一句alert的輸出結果是( )

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循環不是函數，

所以for內部定義的msg與for外部定義的msg爲在同一塊做用域，爲同一個變量。

輸出hello189

hello+9*2+9

40、要在10秒後調用checkState，下列哪一個是正確的（）

A、window.setTimeout(checkState, 10);

B、window.setTimeout(checkState(), 10);

C、window.setTimeout(checkState, 10000);

D、window.setTimeout(checkState(), 10000);

解析：

選C

checkState加了( )至關於函數表達式，會當即執行，執行的結果做爲返回值傳遞給settimeout

10 s 應該爲 10000

因此選C

4一、下列代碼獲得的結果是（）

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);

第一個

([])布爾轉換成true

第二個

==相等比較時，容許類型轉換

其餘類型值和布爾值==比較時，先將布爾值強制轉換爲對應數字，再進行比較

[]==false

[]==0

[]和數字相等比較時轉數字0

0==0

true

第三個

{}==false

{}==0

NaN==0

false

4二、JavaScript定義var a="40",var b=7,則執行a%b會獲得( )

A、null

B、undefined

C、5

D、"5"

解析：

選C

運算中，+號，數字隱式轉換成字符串

其他的運算符號是字符串隱式轉換成數字

4三、下列關於閉包描述正確的是？（）

A、(function(){})()理論上是一個閉包

B、閉包不耗內存，能夠隨意使用

C、閉包內變量執行後不會被清除

D、閉包不知足鏈式做用域結構

解析：

選A、C

邏輯上當即執行函數能夠理解爲：聲明閉包函數-執行-釋放內存

閉包內變量要到整個閉包被清除的時候纔會清除

4四、在ECMAScript6 中,promise的狀態有（）

A、Pending

B、Pause

C、Resolved

D、Rejected

解析：

選A、C、D

Promise 對象表明一個異步操做，有3種狀態：

Pending(進行中)、Resolved(已完成，又稱Fulfilled)和Rejected(已完成)’

4五、下面有關瀏覽器中使用js跨域獲取數據的描述，說法錯誤的是（）

A、使用window.name來進行跨域

B、域名、端口相同，協議不一樣，屬於相同的域

C、js可使用jsonp進行跨域

D、經過修改document.domain來跨子域

解析：

選B

只要協議、域名、端口有任何一個不一樣, 都被看成是不一樣的域

4六、下面關於DNS說法正確的是（）

A、DNS協議端口號爲53

B、DNS的做用是域名和IP地址的相互映射

C、DNS協議大多數運行在UDP協議之上

D、DNS的默認緩存時間爲1小時

解析：

選A、C

A選項：DNS協議默認端口號是53

B選項：DNS就是將域名翻譯成IP地址。

C選項：主要用UDP，可是當請求字節過長超過512字節時用TCP協議，將其分割成多個片斷傳輸

D：操做系統的DNS緩存：windows DNS緩存的默認值是 MaxCacheTTL，它的默認值是86400s，也就是一天。macOS 嚴格遵循DNS協議中的TTL。
遊覽器的DNS緩存：chrome對每一個域名會默認緩存60s；IE將DNS緩存30min；Firefox默認緩存時間只有1分鐘；Safari約爲10S。

4七、下面運行結果正確的是（）

var a = {}, b = Object.prototype;
[a.prototype === b, Object.getPrototypeOf(a) === b]

A、other

B、[true, true]

C、[false, false]

D、[false, true]

解析：

選D

這題考的是__proto__和prototype的區別

Object其實是一個構造函數（typeof Object的結果爲"function"）

使用字面量建立對象和new Object建立對象是同樣的，

因此a.__proto__也就是Object.prototype，

而Object.getPrototypeOf(a)與a.__proto__是同樣的，因此第二個結果爲true

而實例對象是沒有prototype屬性的，只有函數纔有

因此a.prototype實際上是undefined，第一個結果爲false

4八、下面運行結果正確的是（）

var a = /678/,
    b = /678/;
a == b
a === b

A、other

B、true，true

C、true、false

D、false、false

解析：

選D

JavaScript中的正則表達式依舊是對象，使用typeof運算符就能得出結果：object

運算符左右兩邊都是對象時，比較他們是否指向同一個對象

最後

但願看到文章的同窗都有收穫！

文章要是有不對的地方還望指正！

最後祝你們都愈來愈優秀！

歡迎你們加入，一塊兒學習前端，共同進步！

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。