45道CSS基礎面試題（附答案）

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

標準盒子模型：寬度=內容的寬度（content）+ border + padding + margin

低版本IE盒子模型：寬度=內容寬度（content+border+padding）+ margin

2、 box-sizing屬性？

用來控制元素的盒子模型的解析模式，默認為content-box

context-box：W3C的標準盒子模型，設置元素的 height/width 屬性指的是content部分的高/寬

border-box：IE傳統盒子模型。設置元素的height/width屬性指的是border + padding + content部分的高/寬

3 、CSS選擇器有哪些？哪些屬性可以繼承？

CSS選擇符：id選擇器(#myid)、類選擇器(.myclassname)、標簽選擇器(div, h1, p)、相鄰選擇器(h1 + p)、子選擇器（ul > li）、后代選擇器（li a）、通配符選擇器（*）、屬性選擇器（a[rel="external"]）、偽類選擇器（a:hover, li:nth-child）

可繼承的屬性：font-size, font-family, color

不可繼承的樣式：border, padding, margin, width, height

優先級（就近原則）：!important > [ id > class > tag ]

!important 比內聯優先級高

4、 CSS優先級算法如何計算？

元素選擇符： 1

class選擇符： 10

id選擇符：100

元素標簽：1000

!important聲明的樣式優先級最高，如果沖突再進行計算。
如果優先級相同，則選擇最后出現的樣式。
繼承得到的樣式的優先級最低。

5、 CSS3新增偽類有那些?

p:first-of-type 選擇屬于其父元素的首個元素

p:last-of-type 選擇屬于其父元素的最后元素

p:only-of-type 選擇屬于其父元素唯一的元素

p:only-child 選擇屬于其父元素的唯一子元素

p:nth-child(2) 選擇屬于其父元素的第二個子元素

:enabled :disabled 表單控件的禁用狀態。

:checked 單選框或復選框被選中。

6 、如何居中div？如何居中一個浮動元素？如何讓絕對定位的div居中？

div：

border: 1px solid red;margin: 0 auto; 
height: 50px;width: 80px;

浮動元素的上下左右居中：

border: 1px solid red;float: left;
position: absolute;width: 200px;
height: 100px;left: 50%;top: 50%;
margin: -50px 0 0 -100px;

絕對定位的左右居中：

border: 1px solid black;position: absolute;
width: 200px;height: 100px;margin: 0 auto;
left: 0;right: 0;

還有更加優雅的居中方式就是用flexbox，我以后會做整理。

7、 display有哪些值？說明他們的作用?

inline（默認）--內聯

none--隱藏

block--塊顯示

table--表格顯示

list-item--項目列表

inline-block

8、 position的值？

static（默認）：按照正常文檔流進行排列；

relative（相對定位）：不脫離文檔流，參考自身靜態位置通過 top, bottom, left, right 定位；

absolute(絕對定位)：參考距其最近一個不為static的父級元素通過top, bottom, left, right 定位；

fixed(固定定位)：所固定的參照對像是可視窗口。

9、 CSS3有哪些新特性？

RGBA和透明度
background-image background-origin(content-box/padding-box/border-box) background-size background-repeat
word-wrap（對長的不可分割單詞換行）word-wrap：break-word
文字陰影：text-shadow： 5px 5px 5px #FF0000;（水平陰影，垂直陰影，模糊距離，陰影顏色）
font-face屬性：定義自己的字體
圓角（邊框半徑）：border-radius 屬性用于創建圓角
邊框圖片：border-image: url(border.png) 30 30 round
盒陰影：box-shadow: 10px 10px 5px #888888
媒體查詢：定義兩套css，當瀏覽器的尺寸變化時會采用不同的屬性

10、請解釋一下CSS3的flexbox（彈性盒布局模型）,以及適用場景？

該布局模型的目的是提供一種更加高效的方式來對容器中的條目進行布局、對齊和分配空間。在傳統的布局方式中，block 布局是把塊在垂直方向從上到下依次排列的；而 inline 布局則是在水平方向來排列。彈性盒布局并沒有這樣內在的方向限制，可以由開發人員自由操作。

試用場景：彈性布局適合于移動前端開發，在Android和ios上也完美支持。

11、用純CSS創建一個三角形的原理是什么？

首先，需要把元素的寬度、高度設為0。然后設置邊框樣式。

width: 0;height: 0;border-top: 40px solid transparent;
border-left: 40px solid transparent;border-right: 40px solid transparent;
border-bottom: 40px solid #ff0000;

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

第一種真正的品字：

三塊高寬是確定的；
上面那塊用margin: 0 auto;居中；
下面兩塊用float或者inline-block不換行；
用margin調整位置使他們居中。

第二種全屏的品字布局:

上面的div設置成100%，下面的div分別寬50%，然后使用float或者inline使其不換行。

13 、常見的兼容性問題？

不同瀏覽器的標簽默認的margin和padding不一樣。
*{margin:0;padding:0;}
IE6雙邊距bug：塊屬性標簽float后，又有橫行的margin情況下，在IE6顯示margin比設置的大。hack：display:inline;將其轉化為行內屬性。
漸進識別的方式，從總體中逐漸排除局部。首先，巧妙的使用“9”這一標記，將IE瀏覽器從所有情況中分離出來。接著，再次使用“+”將IE8和IE7、IE6分離開來，這樣IE8已經獨立識別。

{background-color:#f1ee18;/*所有識別*/.background-color:#00deff; /*IE6、7、8識別*/+background-color:#a200ff;/*IE6、7識別*/_background-color:#1e0bd1;/*IE6識別*/}

設置較小高度標簽（一般小于10px），在IE6，IE7中高度超出自己設置高度。hack：給超出高度的標簽設置overflow:hidden;或者設置行高line-height 小于你設置的高度。
IE下，可以使用獲取常規屬性的方法來獲取自定義屬性,也可以使用getAttribute()獲取自定義屬性；Firefox下，只能使用getAttribute()獲取自定義屬性。解決方法:統一通過getAttribute()獲取自定義屬性。
Chrome 中文界面下默認會將小于 12px 的文本強制按照 12px 顯示,可通過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決。
超鏈接訪問過后hover樣式就不出現了，被點擊訪問過的超鏈接樣式不再具有hover和active了。解決方法是改變CSS屬性的排列順序:L-V-H-A ( love hate ): a:link {} a:visited {} a:hover {} a:active {}

14、為什么要初始化CSS樣式

因為瀏覽器的兼容問題，不同瀏覽器對有些標簽的默認值是不同的，如果沒對CSS初始化往往會出現瀏覽器之間的頁面顯示差異。

15、 absolute的containing block計算方式跟正常流有什么不同？

無論屬于哪種，都要先找到其祖先元素中最近的 position 值不為 static 的元素，然后再判斷：

若此元素為 inline 元素，則 containing block 為能夠包含這個元素生成的第一個和最后一個 inline box 的 padding box (除 margin, border 外的區域) 的最小矩形；
否則,則由這個祖先元素的 padding box 構成。

如果都找不到，則為 initial containing block。

補充：

static(默認的)/relative：簡單說就是它的父元素的內容框（即去掉padding的部分）
absolute: 向上找最近的定位為absolute/relative的元素
fixed: 它的containing block一律為根元素(html/body)

16、CSS里的visibility屬性有個collapse屬性值？在不同瀏覽器下以后什么區別？

當一個元素的visibility屬性被設置成collapse值后，對于一般的元素，它的表現跟hidden是一樣的。

chrome中，使用collapse值和使用hidden沒有區別。
firefox，opera和IE，使用collapse值和使用display：none沒有什么區別。

17、 display:none與visibility：hidden的區別？

display：none 不顯示對應的元素，在文檔布局中不再分配空間（回流+重繪）

visibility：hidden 隱藏對應元素，在文檔布局中仍保留原來的空間（重繪）

18、 position跟display、overflow、float這些特性相互疊加后會怎么樣？

display屬性規定元素應該生成的框的類型；position屬性規定元素的定位類型；float屬性是一種布局方式，定義元素在哪個方向浮動。

類似于優先級機制：position：absolute/fixed優先級最高，有他們在時，float不起作用，display值需要調整。float 或者absolute定位的元素，只能是塊元素或表格。

19 、對BFC規范(塊級格式化上下文：block formatting context)的理解？

BFC規定了內部的Block Box如何布局。

定位方案：

內部的Box會在垂直方向上一個接一個放置。
Box垂直方向的距離由margin決定，屬于同一個BFC的兩個相鄰Box的margin會發生重疊。
每個元素的margin box 的左邊，與包含塊border box的左邊相接觸。
BFC的區域不會與float box重疊。
BFC是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。
計算BFC的高度時，浮動元素也會參與計算。

滿足下列條件之一就可觸發BFC

根元素，即html
float的值不為none（默認）
overflow的值不為visible（默認）
display的值為inline-block、table-cell、table-caption
position的值為absolute或fixed

20、為什么會出現浮動和什么時候需要清除浮動？清除浮動的方式？

浮動元素碰到包含它的邊框或者浮動元素的邊框停留。由于浮動元素不在文檔流中，所以文檔流的塊框表現得就像浮動框不存在一樣。浮動元素會漂浮在文檔流的塊框上。

浮動帶來的問題：

父元素的高度無法被撐開，影響與父元素同級的元素
與浮動元素同級的非浮動元素（內聯元素）會跟隨其后
若非第一個元素浮動，則該元素之前的元素也需要浮動，否則會影響頁面顯示的結構。

清除浮動的方式：

父級div定義height
最后一個浮動元素后加空div標簽并添加樣式clear:both。
包含浮動元素的父標簽添加樣式overflow為hidden或auto。
父級div定義zoom

21、上下margin重合的問題

在重合元素外包裹一層容器，并觸發該容器生成一個BFC。

例子：

<div class="aside"></div>
<div class="text">
 <div class="main"></div>
</div>
<!--下面是css代碼--> 
.aside { 
margin-bottom: 100px; 
 width: 100px; 
 height: 150px; 
 background: #f66;
 } 
.main { 
 margin-top: 100px; 
 height: 200px; 
 background: #fcc;
 }
 .text{ 
 /*盒子main的外面包一個div，
通過改變此div的屬性使兩個盒子分屬于兩個不同的BFC，
以此來阻止margin重疊*/
 overflow: hidden; 
//此時已經觸發了BFC屬性。
 }

22、設置元素浮動后，該元素的display值是多少？

自動變成display:block

23、移動端的布局用過媒體查詢嗎？

通過媒體查詢可以為不同大小和尺寸的媒體定義不同的css，適應相應的設備的顯示。

<head>里邊
<link rel="stylesheet" type="text/css" href="xxx.css" media="only screen and (max-device-width:480px)">
CSS : @media only screen and (max-device-width:480px) {/css樣式/}

24 、使用 CSS 預處理器嗎？

Less sass

25、 CSS優化、提高性能的方法有哪些？

避免過度約束
避免后代選擇符
避免鏈式選擇符
使用緊湊的語法
避免不必要的命名空間
避免不必要的重復
最好使用表示語義的名字。一個好的類名應該是描述他是什么而不是像什么
避免！important，可以選擇其他選擇器
盡可能的精簡規則，你可以合并不同類里的重復規則

26、瀏覽器是怎樣解析CSS選擇器的？

CSS選擇器的解析是從右向左解析的。若從左向右的匹配，發現不符合規則，需要進行回溯，會損失很多性能。若從右向左匹配，先找到所有的最右節點，對于每一個節點，向上尋找其父節點直到找到根元素或滿足條件的匹配規則，則結束這個分支的遍歷。

兩種匹配規則的性能差別很大，是因為從右向左的匹配在第一步就篩選掉了大量的不符合條件的最右節點（葉子節點），而從左向右的匹配規則的性能都浪費在了失敗的查找上面。

而在 CSS 解析完畢后，需要將解析的結果與 DOM Tree 的內容一起進行分析建立一棵 Render Tree，最終用來進行繪圖。在建立 Render Tree 時（WebKit 中的「Attachment」過程），瀏覽器就要為每個 DOM Tree 中的元素根據 CSS 的解析結果（Style Rules）來確定生成怎樣的 Render Tree。

27 、在網頁中的應該使用奇數還是偶數的字體？為什么呢？

使用偶數字體。偶數字號相對更容易和 web 設計的其他部分構成比例關系。Windows 自帶的點陣宋體（中易宋體）從 Vista 開始只提供 12、14、16 px 這三個大小的點陣，而 13、15、17 px時用的是小一號的點。（即每個字占的空間大了 1 px，但點陣沒變），于是略顯稀疏。

28、 margin和padding分別適合什么場景使用？

何時使用margin：

需要在border外側添加空白
空白處不需要背景色
上下相連的兩個盒子之間的空白，需要相互抵消時。

何時使用padding：

需要在border內側添加空白
空白處需要背景顏色
上下相連的兩個盒子的空白，希望為兩者之和。

兼容性的問題：在IE5 IE6中，為float的盒子指定margin時，左側的margin可能會變成兩倍的寬度。通過改變padding或者指定盒子的display：inline解決。

29 、元素豎向的百分比設定是相對于容器的高度嗎？

當按百分比設定一個元素的寬度時，它是相對于父容器的寬度計算的，但是，對于一些表示豎向距離的屬性，例如 padding-top , padding-bottom , margin-top , margin-bottom 等，當按百分比設定它們時，依據的也是父容器的寬度，而不是高度。

30 、全屏滾動的原理是什么？用到了CSS的哪些屬性？

原理：有點類似于輪播，整體的元素一直排列下去，假設有5個需要展示的全屏頁面，那么高度是500%，只是展示100%，剩下的可以通過transform進行y軸定位，也可以通過margin-top實現
overflow：hidden；transition：all 1000ms ease；

31、什么是響應式設計？響應式設計的基本原理是什么？如何兼容低版本的IE？

響應式網站設計(Responsive Web design)是一個網站能夠兼容多個終端，而不是為每一個終端做一個特定的版本。

基本原理是通過媒體查詢檢測不同的設備屏幕尺寸做處理。

頁面頭部必須有meta聲明的viewport。

<meta name=’viewport’ content=”width=device-width, 
initial-scale=1. maximum-scale=1,user-scalable=no”>

32、視差滾動效果？

視差滾動（Parallax Scrolling）通過在網頁向下滾動的時候，控制背景的移動速度比前景的移動速度慢來創建出令人驚嘆的3D效果。

CSS3實現
優點：開發時間短、性能和開發效率比較好，缺點是不能兼容到低版本的瀏覽器
jQuery實現
通過控制不同層滾動速度，計算每一層的時間，控制滾動效果。
優點：能兼容到各個版本的，效果可控性好
缺點：開發起來對制作者要求高
插件實現方式
例如：parallax-scrolling，兼容性十分好

33、 ::before 和 :after中雙冒號和單冒號有什么區別？解釋一下這2個偽元素的作用

單冒號(:)用于CSS3偽類，雙冒號(::)用于CSS3偽元素。
::before就是以一個子元素的存在，定義在元素主體內容之前的一個偽元素。并不存在于dom之中，只存在在頁面之中。

:before 和 :after 這兩個偽元素，是在CSS2.1里新出現的。起初，偽元素的前綴使用的是單冒號語法，但隨著Web的進化，在CSS3的規范里，偽元素的語法被修改成使用雙冒號，成為::before ::after

34、你對line-height是如何理解的？

行高是指一行文字的高度，具體說是兩行文字間基線的距離。CSS中起高度作用的是height和line-height，沒有定義height屬性，最終其表現作用一定是line-height。

單行文本垂直居中：把line-height值設置為height一樣大小的值可以實現單行文字的垂直居中，其實也可以把height刪除。

多行文本垂直居中：需要設置display屬性為inline-block。

35 、怎么讓Chrome支持小于12px 的文字？

p{font-size:10px;-webkit-transform:scale(0.8);} //0.8是縮放比例

36、讓頁面里的字體變清晰，變細用CSS怎么做？

-webkit-font-smoothing在window系統下沒有起作用，但是在IOS設備上起作用-webkit-font-smoothing：antialiased是最佳的，灰度平滑。

37、 position:fixed;在android下無效怎么處理？

<meta name="viewport" content="width=device-width, 
initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,
 user-scalable=no"/>

38、如果需要手動寫動畫，你認為最小時間間隔是多久，為什么？

多數顯示器默認頻率是60Hz，即1秒刷新60次，所以理論上最小間隔為1/60＊1000ms ＝ 16.7ms。

39、 li與li之間有看不見的空白間隔是什么原因引起的？有什么解決辦法？

行框的排列會受到中間空白（回車空格）等的影響，因為空格也屬于字符,這些空白也會被應用樣式，占據空間，所以會有間隔，把字符大小設為0，就沒有空格了。

解決方法：

可以將<li>代碼全部寫在一排
浮動li中float：left
在ul中用font-size：0（谷歌不支持）；可以使用letter-space：-3px

40、 display:inline-block 什么時候會顯示間隙？

有空格時候會有間隙解決：移除空格
margin正值的時候解決：margin使用負值
使用font-size時候解決：font-size:0、letter-spacing、word-spacing

41、有一個高度自適應的div，里面有兩個div，一個高度100px，希望另一個填滿剩下的高度

外層div使用position：relative；高度要求自適應的div使用position: absolute; top: 100px; bottom: 0; left: 0

42、 png、jpg、gif 這些圖片格式解釋一下，分別什么時候用。有沒有了解過webp？

png是便攜式網絡圖片（Portable Network Graphics）是一種無損數據壓縮位圖文件格式.優點是：壓縮比高，色彩好。大多數地方都可以用。
jpg是一種針對相片使用的一種失真壓縮方法，是一種破壞性的壓縮，在色調及顏色平滑變化做的不錯。在www上，被用來儲存和傳輸照片的格式。
gif是一種位圖文件格式，以8位色重現真色彩的圖像。可以實現動畫效果.
webp格式是谷歌在2010年推出的圖片格式，壓縮率只有jpg的2/3，大小比png小了45%。缺點是壓縮的時間更久了，兼容性不好，目前谷歌和opera支持。

43、 style標簽寫在body后與body前有什么區別？

頁面加載自上而下當然是先加載樣式。

寫在body標簽后由于瀏覽器以逐行方式對HTML文檔進行解析，當解析到寫在尾部的樣式表（外聯或寫在style標簽）會導致瀏覽器停止之前的渲染，等待加載且解析樣式表完成之后重新渲染，在windows的IE下可能會出現FOUC現象（即樣式失效導致的頁面閃爍問題）

44、 CSS屬性overflow屬性定義溢出元素內容區的內容會如何處理?

參數是scroll時候，必會出現滾動條。

參數是auto時候，子元素內容大于父元素時出現滾動條。

參數是visible時候，溢出的內容出現在父元素之外。

參數是hidden時候，溢出隱藏。

45、闡述一下CSS Sprites

將一個頁面涉及到的所有圖片都包含到一張大圖中去，然后利用CSS的 background-image，background- repeat，background-position 的組合進行背景定位。利用CSS Sprites能很好地減少網頁的http請求，從而大大的提高頁面的性能；CSS Sprites能減少圖片的字節。

選題

JS基礎

js概念與類型檢測

以下不屬于 typeof 運算符返回值的是？

A. "string"
B. "function"
C. "object"
D. "null"

執行以下代碼，錯誤的輸出結果是

A. 輸入：typeof {"x":1} 輸出："object" 
B. 輸入：typeof 1 輸出："number" 
C. 輸入：typeof [{x:1}] 輸出："array" 
D. 輸入：typeof NaN 輸出："number"

可以用typeof來判斷的基本類型有

A. undefined
B. null
C. array
D. object

以下不屬于JavaScript基本數據類型的是：

A. Boolean
B. undefined
C. Symbol
D. Array

以下關于JavaScript中數據類型的說法錯誤的是()

A. 數據類型分為基本數據類型和引用數據類型
B. JavaScript一共有8種數據類型
C. Object是引用數據類型，且只存儲于堆(heap)中
D. BigInt是可以表示任意精度整數的基本數據類型，存儲于棧(stack)中

答案

DCADC

邏輯判斷

請選擇結果為ture的表達式？

A. null instanceof Object
B. null===undefined
C. null==undefined
D. NaN==NaN

下列代碼結果為 true 的是？

A. Symbol.for('a')===Symbol.for('a')
B. Symbol('a')===Symbol('a')
C. NaN===NaN
D. {}==={}

根據如下變量，下列表達式中返回值為true的是

var a=1;
var b=[];
var c='';
var d=true;

A. (a || b)===true
B. (b && c)===true
C. (c && d)===true
D. (d || a)===true

1==true的返回值是true，這句話是否正確？

A. T
B. F

下面代碼輸出為true的是?

A. console.log([]===[]);
B. console.log(undefined==0);
C. console.log(undefined==false);
D. console.log(false=='');

瀏覽器環境下，以下打印結果為true的是

A. console.log("12"===12)
B. console.log (NaN===NaN)
C. console.log (typeof(null)===typeof(window))
D. console.log ([1,2,3]===[1,2,3])

注意瀏覽器環境與node環境的差別，比如C選項

以下表達式，正確的是

A. Number('a')==Number('a')
B. -1==true
C. 3 + '2'===5
D. ![]==''

答案

CADADCD

Math

如何把 7.25 四舍五入為最接近的整數

A. Math.round(7.25)
B. Math.ceil(7.25)
C. round(7.25)
D. Math.rnd(7.25)

下面哪個選項可以產生0<=num<=10的隨機整數

A. Math.floor(Math.random()*6)
B. Math.floor(Math.random()*10)
C. Math.floor(Math.random()*11)
D. Math.ceil(Math.random()*10)

以下( )表達式產生一個0~7之間(含0,7)的隨機整數

A. Math.floor(Math.random()*6)
B. Math.floor(Math.random()*7)
C. Math. floor(Math.random()*8)

答案

A CD(注意D) C

字符串

split() 方法用于把一個字符串分割成字符串數組。

A. T
B. F

String對象的哪個方法可以尋找子字符串并返回該子字符串位置

A. match()
B. indexOf()
C. search()
D. concat()

答案

A BC

JSON

下面哪一個是JSON數據？

A. ｛name:"xiaoming",age,"student"｝
B. ｛"name":"xiaoming","age":"student"｝
C. ｛"xiaoming","student"｝
D. ["xiaoming","student"]

下面分別使用 JSON.stringify 方法，返回值 res 分別是

const fn=function(){}
const res=JSON.stringify(fn)
const num=123
const res=JSON.stringify(num)
const res=JSON.stringify(NaN)
const b=true
const res=JSON.stringify(b)

A. 'function'、'123'、'NaN'、'true'
B. undefined、'123'、undefined、'true'
C. undefined、'123'、'null'、'true'
D. undefined、'123'、'null'、undefined

答案

BC

數組

js數組中不會改變原有數組的方法是()

A. push
B. concat
C. sort
D. shift

下列哪種數組的方法不會修改數組本身

A. slice
B. splice
C. sort
D. unshift

JavaScript中需要往數組末尾處添加一個元素，應該使用以下哪個方法：

A. push
B. pop
C. shift
D. unshift

以下js操作Array的方法中不能添加元素的是：

A. push
B. pop
C. unshift
D. splice

數組以下哪個方法會影響原數組？

A. concat
B. splice
C. slice
D. join

JavaScript中，下列哪一個Array的方法的返回值類型和其他不同

A. concat
B. shift
C. filter
D. map

如下的Array.prototype上的方法中，那個方法不會改變原有的數組？

A. push
B. slice
C. splice
D. sort

對于一個數字組成的數組 nums，現在需要執行在不改動 nums 的基礎上去重操作，返回一個新的無重復元素的數組，以下幾段代碼能完成這一操作的是()

// (1)
const newNums=Array.from(new Set(nums))

// (2)
const newNums=nums.filter((n, i)=> {
    return nums.indexOf(n)===i
})

// (3)
const newNums=nums.forEach((n, i)=> {
    return nums.indexOf(n)===i
})

// (4)
const newNums=nums.reduce((acc, n, i)=> {
    return [].concat(acc, nums.indexOf(n)===i ? n : []
)
})

A. (1)、(2)、(3)、(4)
B. (1)、(3)、(4)
C. (1)、(2)、(4)
D. (1)、(4)

答案

BAABB
BBC

正則

正則表達式 ^d+[^d]+ 能匹配下列哪個字符串？

A. 123
B. 123a
C. d123
D. 123def

下面哪個不是RegExp對象的方法

A. test
B. match
C. exec
D. compile

以下哪項可以去除變量str中的所有空格

A. str.replace(`/\s*/g,""`)
B. str.replace(`/^\s|\s$/g,""`)
C. str.replace(`/^\s*/, ""`)
D. str.replace(`/(\s*$)/g, ""`)

答案

CBA

其他

下列函數哪個不是JavaScript的全局函數

A. encodeURI
B. parseFloat
C. round
D. eval

編寫高性能JavaScript，以下描述錯誤的是

A. 遵循嚴格模式："use strict"
B. 將js腳本放在頁面頂部，加快渲染頁面
C. 將js腳本成組打包，減少請求，盡量減少使用閉包
D. 使用非阻塞方式下載js腳本，最小化重繪(repaint)和回流(reflow)

有關JavaScript中系統方法的描述，錯誤的是？

A. parseFloat方法：該方法將一個字符串轉換成對應的小數
B. isNaN方法：該方法用于檢測參數是否為數值型，如果是，返回true，否則，返回false。
C. escape方法： 該方法返回對一個字符串編碼后的結果字符串
D. eval方法：該方法將某個參數字符串作為一個JavaScript執行題

下面列出的瀏覽器，無webkit內核的是()

A. chrome
B. Safari
C. 搜狗瀏覽器
D. Firefox

下列代碼哪個能夠實現獲取形式為 2017-08-01 形式的日期( )？

// A
var formatDate=getDate()
// B
var formatDate=new Date()
// C
var formatDate=function (date) {
    var y=date.getFullYear();
    var m=date.getMonth() + 1;
    
    var d=date.getDate();
    return y + '-' + m + '-' + d;
};
// D
var formatDate=function (date) {
    var y=date.getFullYear();
    var m=date.getMonth() + 1;
    m=m < 10 ? '0' + m : m;
    var d=date.getDate();
    d=d < 10 ? ('0' + d) : d;
    return y + '-' + m + '-' + d;
};

下面哪一項不能最小化重繪(repaint)和回流(reflow)

A. 需要對元素進行復雜的操作時，可以先隱藏(display:"none")，操作完成后再顯示
B. 需要創建多個DOM節點時，使用DocumentFragment創建完后一次性的加入document
C. 盡量避免用table布局(table元素一旦觸發回流就會導致table里所有的其它元素回流)
D. 盡量不要使用 css 屬性簡寫，如：用border-width, border-style, border-color代替border

答案

CBBDDD

JS深入

this

下列哪種方法不能改變this指向()

A. eval
B. apply
C. bind
D. call

在JavaScript中下面選項關于this描述正確的是

A. 在使用new實例化對象時, this指向這個實例對象
B. 將對象的方法賦值給變量A。執行A()時 該方法中的this指向這個對象。 
C. 在函數定義時,this指向全局變量
D. 在瀏覽器下的全局范圍內，this指向全局對象

下面有關JavaScript中call和apply方法的描述，錯誤的是？

A. call與apply都屬于Function.prototype的一個方法，所以每個function實例都有call、apply屬性
B. 兩者傳遞的參數不同，call函數第一個參數都是要傳入給當前對象的對象，apply不是
C. apply傳入的是一個參數數組，也就是將多個參數組合成為一個數組傳入
D. call傳入的則是直接的參數列表。call 方法可將一個函數的對象上下文從初始的上下文改變為由 thisObj 指定的新對象。

答案

AAB

作用域(閉包)

內存泄漏是 javascript 代碼中必須盡量避免的，以下幾段代碼可能會引起內存泄漏的有()

// (1)
function getName() {
    name='javascript'
}
getName()

// (2)
const elements={
    button: document.getElementById('button')
};
function removeButton() {
    document.body.removeChild(elements.button);
}
removeButton()

// (3)
let timer=setInterval(()=> {
    const node=document.querySelector('#node') 
    if(node) {
        clearInterval(timer)
    }
}, 1000);

A. (1)、(2)、(3)
B. (2)、(3)
C. (1)、(3)
D. (1)、(2)

那個操作不會造成內存泄露

A. 沒有清理的DOM元素引用
B. 被遺忘的定時器
C. 事件偵聽沒有移除
D. 局部變量不用時，沒有設為null

下列關于閉包理解錯誤的是

A. 增加一定的內存消耗
B. 使用不當可能會導致內存泄漏
C. 可以使用閉包模擬私有方法
D. 閉包會改動對象的原型鏈

答案

DDD

原型與繼承

JavaScript實現繼承的方式，不正確的是：

A. 原型鏈繼承
B. 構造函數繼承
C. 組合繼承
D. 關聯繼承

所有對象都有原型

A. T
B. F

以下關于原型鏈的描述正確的是:

A. 通過原型鏈繼承的屬性和對象自己定義的屬性等效
B. 通過原型鏈可以模擬對象的私有屬性
C. 在對象上訪問不存在的屬性時,會依次遍歷整條原型鏈
D. 所有 JavaScript 中的對象都是位于原型鏈頂端的 `Object` 的實例

答案

DBC

其他

以下不屬于前端數據存儲方式的是？

A. jsonp
B. cookie
C. localStorage
D. sessionStorage

答案

DOM題

事件流

將A元素拖拽并放置到B元素中，B元素需要做哪項操作()？

A. event.preventDefault()
B. event.prevent()
C. event.drag()
D. event.drop()

以下不支持冒泡的鼠標事件為( )？

A. mouseover
B. click
C. mouseleave
D. mousemove

在javascript中，用于阻止默認事件的默認操作的方法是

A. stopDeafault()
B. stopPropagation()
C. preventDefault()
D. preventDefaultEven()

事件傳播的三個階段是什么

目標 -> 捕獲 -> 冒泡
冒泡 -> 目標 -> 捕獲
目標 -> 冒泡 -> 捕獲
捕獲 -> 目標 -> 冒泡

下面有關 javascript 常見事件的觸發情況，描述錯誤的是？

A. onchange：用戶改變域的內容
B. onkeypress：某個鍵盤的鍵被按下或按住
C. onmousedown：某個鼠標按鍵被按下
D. onblur：元素獲得焦點

答案

ACCDD

DOM遍歷

下列哪項不屬于DOM查找節點的屬性()？

A. parentObj.firstChild
B. parentObj.children
C. neborNode.previousSibling
D. neborNode.siblings

DOM中，給父節點添加子節點的正確方法為()？

A. appendChild(parentNode,newNode);
B. append(parentNode,newNode);
C. parentNode.append(newNode);
D. parentNode.appendChild(newNode);

JavaScript中document.getElementById()返回值的類型為？

A. Array
B. Object
C. String
D. Function

DOM中，給父節點添加子節點的正確方法為()？

A. appendChild(parentNode,newNode);
B. append(parentNode,newNode);
C. parentNode.append(newNode);
D. parentNode.appendChild(newNode);

答案

DDBD

其他

DOM元素的以下屬性改變會導致重排(reflows)的是

outline
visiblity
font-size
background-color

答案

BOM題

setInterval(updateClock,60)的含義是( )？

A. 每隔60秒調用一次updateClock()
B. 每隔60毫秒調用一次updateClock()
C. 每隔60分鐘調用一次updateClock()
D. 每分鐘調用60次updateClock()

使用方法( )可以獲取到地理位置所在的經緯度？

A. Geolocation.watchPosition()
B. Geolocation.getCurrentPosition()
C. Geolocation.getPosition()
D. Geolocation.Position()

setInterval("alert('welcome');",1000);這段代碼的意思是

A. 等待1000秒后，再彈出一個對話框
B. 等待1秒鐘后彈出一個對話框
C. 每隔一秒鐘彈出一個對話框
D. 語句報錯,語法有問題

答案

BBC

ES6題

箭頭函數

下列對js箭頭函數描述錯誤的是()

A. 箭頭函數沒有原型屬性
B. 箭頭函數不綁定this，會捕獲其所在的上下文的this值，作為自己的this值
C. 箭頭函數可以作為構造函數，使用new
D. 箭頭函數不綁定arguments，取而代之用rest參數解決

關于箭頭函數下列說法錯誤的一項是：

A. 函數體內this的指向是定義時所在的對象，而不是使用時所在的對象
B. 箭頭函數內不能使用arguments對象
C. 箭頭函數不能使用yield命令
D. 可以使用new創建一個箭頭函數的實例

答案

CD

promise

關于將 Promise.all 和 Promise.race 傳入空數組的兩段代碼的輸出結果說法正確的是：

Promise.all([]).then((res)=> {
    console.log('all');
});
Promise.race([]).then((res)=> {
    console.log('race');
});

A. all 和 race 都會被輸出
B. all 和 race 都不會被輸出
C. all 會被輸出，而 race 不會被輸出
D. all 不會被輸出，race 會被輸出

以下方案中，不是用于解決回調陷阱的的是：

A. Promise
B. Generator
C. async
D. Proxy

在 ECMAScript6 中，不屬于promise的狀態是:

A. Pending
B. Pause
C. Fulfilled
D. Rejected

答案

CDB

解構賦值

關于ES6解構表達式,描述正確的是()

let [a,b, c,d, e]="hello";

A. e="hello";
B. 其它都為undefined
C. 當中 a="h", b="e";
D. 語法報錯

答案

多選題

JS基礎

下面哪些數組方法會改變原數組

A. push 
B. concat 
C. splice 
D. map

下面可以聲明數字的js代碼是

A. const a=0xa1
B. const a=076
C. const a=0b21
D. const a=7e2

以下屬于操作符 typeof 的返回值的是：

(1)function
(2) object
(3) null
(4) array
(5) NaN
(6) bigint
(7) regexp
(8) undefined

A. (1)、(2)、(3)、(4)、(5)、(6)、(7)、(8)
B. (1)、(2)、(3)、(8)
C. (1)、(2)、(8)
D. (1)、(2)、(6)、(8)

以下()結果等于字符串string

A. typeof 'string'
B. String('string').toString()
C. 'string'.split('').sort().join('')
D. (function(string){return string})('string')
E. JSON.parse('{"string":"string"}').string

下面的等式成立的是?

A. parseInt(46.8) `==` parseFloat(46.8)
B. NaN `!==` NaN
C. isNaN('abc') `==` NaN
D. typeof NaN `===` 'number'

以下哪些選項可以將集合A轉化為數組？

A. Array.from(A)
B. [].slice.apply(A)
C. [...A]
D. [].map.call(A, o=> o)

下列結果返回 true 的是

A. null==undefined
B. null===undefined
C. null===null
D. NaN==null
E. NaN===NaN
F. Infinity + 1 !==Infinity

答案

AC ABD D ABDE BD ABCD AC

JS深入

關于以下代碼，說法正確的有哪些？

function Person() { } var person=new Person();

A. 每一個原型都有一個constructor屬性指向關聯的構造函數。
B. 每一個對象都有一個prototype屬性。
C. Object.getPrototypeOf(person)===Person.prototype
D. person.constructor===Person

下列在 JS 時間循環機制中屬于微任務(microTask)的是？

A. process.nextTick
B. promise
C. setTimeout
D. setInterval

答案

ACD AB

ES6

以下關于let和const的說法中正確的是:

A. let聲明的變量值和類型都可以改變
B. const聲明的常量不可以改變
C. 兩者都不存在變量提升，同時存在暫時性死區，只能在聲明的位置后面使用
D. const可以先聲明再初始化，可以后賦值

下面關于Promise說法正確的是(注意“返回結果”的意思包含成功或者失敗)

A. Promise.all在所有給定的promise都fulfilled后才返回結果
B. Promise.race在給定的promise中，某個fulfilled后才返回結果
C. promise.then的回調函數中，可以返回一個新的promise
D. 對于一個向后臺獲取數據已經產生結果的promise:p1，再次調用p1.then，不會去重新發起請求獲取數據

答案

ABC CD

DOM

下列關于使用 JS 修改元素樣式的代碼，正確的有哪些？

document.body.style.['background-color']='#fff'
document.body.style.setProperty('background-color', '#fff')
document.body.style='background-color': #fff'
document.body.style.fontSize='14px'

下列方法可用于阻止事件冒泡的有

A. event.cancelBubble=true;
B. event.stopPropagation();
C. event.preventDefault();
D. return false;

答案

BCD ABD

填空題

類型檢測

在JavaScript中，有var arr=[]; typeof arr的結果為
以下使用 typeof 操作符的代碼的輸出結果為

var x=typeof x
var res=typeof typeof x;
console.log(x, res)

[typeof null, null instanceof Object]的結果是什么
typeof typeof 0
JavaScript的typeof運算符的可能結果為array？解釋為什么
下面代碼的輸出結果是多少？

var arr=[];
console.log(typeof arr, Object.prototype.toString.call(arr));

console.log(Object.prototype.toString.call(undefined))

類型轉換

表達式 "2"+3+4 的值為
console.log('5' + 3, 5 + '3')
var a=parseInt(“111辦公室”);alert(a);
["0x1", "0x2", "0x3"].map(parseInt) 的結果
在js中執行 1+'1'的結果是？
在js中執行 parseInt('77',40)的結果是?

邏輯判斷

請給出 [5<6<3,3<2<4] 代碼的運行結果
(2<3)||(3<2) 表達式將返回值為
console.log(true||false&&false, true&&false||true)的輸出結果是？

其他

1 + - + + + - + 1 的結果是
[ 'a', ,'b', ,].length 的結果是

程序題

JS基礎

下面兩個程序的輸出結果分別是？

// case 1
function showCase(value) {
    switch(value) {
    case 'A':
        console.log('Case A');
        break;
    case 'B':
        console.log('Case B');
        break;
    case undefined:
        console.log('Case undefined');
        break;
    default:
        console.log('Case default');
    }
}
showCase(new String('A'));

// case 2
function showCase(value) {
    switch(value) {
    case 'A':
        console.log('Case A');
        break;
    case 'B':
        console.log('Case B');
        break;
    case undefined:
        console.log('Case undefined');
        break;
    default:
        console.log('Case default');
    }
}
showCase(String('A'));

p標簽的的內容會顯示什么？

<html>
    <body>
        <p id="demo"></p>
        <script type="text/javascript">
            var x=10;
            var y="10";
            document.getElementById("demo").innerHTML=Boolean(x==y);
        </script>
    </body>
</html>

document.write的結果會是什么？

function funcA(x){
    var temp=4;

    function funcB(y){
        document.write( ++x + y + (temp--));
    }

    funcB(5);
}

funcA(6)

alert的結果會是多少

var varArr=function(i,j,str) {  
    return j==0 ? str : varArr(i,--j,(str+=" " + i[j]));
}
var arr=new Array('apple','orange','peach','lime');
var str=varArr(arr,arr.length,"");
alert(str);

下面程序的輸出結果是多少？

function greetingMaker(greeting) { 
    function addName(name) {    
        greeting=greeting.split(' ').reverse().join("-");
        return greeting + " " + name;
    }
    
    return addName;
}

var daytimeGreeting=greetingMaker("Good Day to you");
alert(daytimeGreeting(name));

下面程序的輸出結果是多少？

String.prototype.GetNum=function() { 
    var regEx=/[^\d]/g; 
    return this.replace(regEx, ''); 
};

var str="a1b2c3";
str=str.GetNum();
alert(str);

下面程序的輸出結果是多少？

function sum(a, b) {
  return a + b;
}
sum(1, "2");

下面程序的輸出結果是多少？

var str="我非常喜歡編程";
str.length=3;
console.log(str);

下面程序的輸出結果是多少？

let number=0;
console.log(number++);
console.log(++number);
console.log(number);

下面程序的輸出結果是多少？

function nums(a, b) {
    if (a > b)
        console.log('a is bigger')
    else 
        console.log('b is bigger')
    return a + b
}
console.log(nums(4, 2))
console.log(nums(1, 2))

下面程序輸出結果是多少？

function side(arr) {
    arr[0]=arr[2];
}
function func1(a, b, c=3) {
    c=10;
    side(arguments);
    console.log(a + b + c);
}
function func2(a, b, c) {
    c=10;
    side(arguments);
    console.log(a + b + c);
}
func1(1, 1, 1);
func2(1, 1, 1);

下面代碼的輸出結果是什么？

var a=3;
var b=new Number(3);
var c=3;

console.log(a==b);
console.log(a===b);
console.log(b===c);

執行下列語句后，a.length的值為？

var a=[];
a.push(1, 2);
a.shift(3, 4);
a.concat([5, 6]);
a.splice(0, 1, 2);

下面這幾段代碼分別輸出結果是多少？為什么？

var a={}, b='123', c=123;
a[b]='b';
a[c]='c';
console.log(a[b]);
// example 2
var a={}, b=Symbol('123'), c=Symbol('123');
a[b]='b';
a[c]='c';
console.log(a[b]);
// example 3
var a={}, b={key:'123'}, c={key:'456'};
a[b]='b';
a[c]='c';
console.log(a[b]);

下面每項的返回值是什么？為什么？

null==undefined
0.1 + 0.2==0.3
typeof NaN
typeof Function
typeof Object
typeof {}
'a' + 1
'a' - 1
Function instanceof Object
Object instanceof Function

下面程序的輸出結果是多少？

var array=[]
for(var i=0; i < 3; i++) {
    array.push(()=> i)
}
var newArray=array.map(el=> el())
console.log(newArray)

下面程序的輸出結果是多少？

 function a(m, n) {
        var b=function (l) {
            return l <=m ? l * b(l + 1) : 1;
        }

        return b(m - n + 1);
    }

console.log(a(4, 2));

下面程序的輸出結果是多少？

console.log(typeof undefined==typeof NULL);
console.log(typeof function () {}==typeof class {});

執行后a和b.age的值分別為

var a=10
var b={
    age: 11
}
function fn(x,y) {
    --y.age;
    return --x;
}
fn(a,b)

下面程序的執行結果是：

var number=4;
var numberFactorial=(function (number){
    return (number===0)? 1: number* factorial(number-1)
})(number)
console.log(numberFactorial)

下面程序的輸出結果是：

var array=[]
for(var i=0; i < 3; i++) {
    array.push(()=> i)
}
var newArray=array.map(el=> el())
console.log(newArray)

下面程序的輸出結果是：

function addToList(item, list) {
    return list.push(item)
}
const result=addToList("nowcoder", ["hello"])
console.log(result)

下面程序的輸出結果是：

const first=()=> { console.log('first'); return false; }
const second=()=> { console.log('second'); return true; }
console.log( first() && second() );
console.log( second() || first() );

下面代碼的輸出結果是：

var s='12ab3cd', arr=s.split(/\d/);
console.log(arr[3],arr[4])

下面程序的輸出結果是：

function getAge(...args) {
  console.log(typeof args);
}

getAge(21);

下面程序的輸出結果是:

var arr=[1,2,3];
arr.push(arr.shift())
console.log(arr[1],arr[2])

JS深入

this指向

題目解析：this指向題目解析及擴展[3]

關于this還可以看看：可能是最好的 this 解析了...

下列程序的輸出結果是多少？為什么？

var x=1;

var obj={
    x: 3,
    fun:function () {
        var x=5;
        return this.x;
    }
};

var fun=obj.fun;
console.log( obj.fun(), fun() );

下列程序的輸出結果是多少？你能理清楚test函數的this指向嗎？

var a=5;
 function test() { 
    a=0; 
    alert(a); 
    alert(this.a); 
    var a;
    alert(a); 
}
new test();

下列程序的輸出結果是多少？為什么？

function fun () {
    return ()=> {
        return ()=> {
            return ()=> {
                console.log(this.name)
            }
        }
    }
}
var f=fun.call({name: 'foo'})
var t1=f.call({name: 'bar'})()()
var t2=f().call({name: 'baz'})()
var t3=f()().call({name: 'qux'})

執行以下代碼，輸出結果分別是多少？

let obj1={
    a: 1,
    foo: ()=> {
        console.log(this.a)
    }
}
// log1
obj1.foo()
const obj2=obj1.foo
// log2
obj2()

下面程序的輸出結果是什么？為什么？

const Person=(name="wang",age=10)=> {
this.name=name;
this.age=age;
return this.name +' is '+ this.age + 'years old'
}
let result=new Person('zhang',11)
console.log(result)

請表述以下代碼的執行結果和原因

var person={
  age: 18,
  getAge: function() {
    return this.age;
  }
};
var getAge=person.getAge
getAge()

請按順序寫出打印結果，并說明原因。

var name='global';
var obj={
    name: 'local',
    foo: function(){
        this.name='foo';
    }.bind(window)
};
var bar=new obj.foo();
setTimeout(function() {
    console.log(window.name);
}, 0);
console.log(bar.name);
 
var bar3=bar2=bar;
bar2.name='foo2';
console.log(bar3.name);

下面程序的執行結果是：

var obj={
    name:"zhangsan",
    sayName:function(){
        console.info(this.name);
    }
}

var wfunc=obj.sayName;
obj.sayName();
wfunc();
var name="lisi";
obj.sayName();
wfunc();

下面程序的輸出結果是：

var name='test' 
var a={    
    name: 'ass',    
    getName: function() {    
        return this.name;   
    } 
} 
var b=a.getName; 
b();

事件循環

下列程序的輸出結果分別是多少？為什么？

const promiseA=Promise.resolve('a')
promiseA. then((res)=> {
    console.log(res)
}).then((res)=> {
    console.log(res)
})
const promiseB=Promise.resolve('b')
promiseB. then((res)=> {
    console.log(res)
})
promiseB. then((res)=> {
    console.log(res)
})

下面程序的輸出結果依次是多少？

setTimeout(()=> {
    console.log(1)
}, 0)

const P=new Promise((resolve, reject)=> {
    console.log(2)
    setTimeout(()=> {
        resolve()
        console.log(3)
    }, 0)
})

P.then(()=> {
    console.log(4)
})
console.log(5)

下面程序的輸出結果是

setTimeout(function(){
    console.log(1);
}, 0)
new Promise(function(resolve){
    console.log(2);
    resolve();
    console.log(3);
}).then(function(){
    console.log(4);
})
console.log(5);

下面程序的輸出結果是？

(async ()=> {
    console.log(1);
    setTimeout(()=> {
        console.log(2);
}, 0);
await new Promise((resolve, reject)=> {
    console.log(3);
}).then(()=> {
    console.log(4);
});
    console.log(5);
})();

下面程序的輸出結果是:

new Promise((resolve)=> {
    console.log('1')
    resolve()
    console.log('2')
}).then(()=> {
    console.log('3')
})
setTimeout(()=> {
    console.log('4')
})
console.log('5')

下面程序的輸出結果是:

var p1=new Promise(function(resolve, reject){
    resolve("2")
})
setTimeout(function(){
    console.log("1")
},10)
p1.then(function(value){
    console.log(value)
})
setTimeout(function(){
    console.log("3")
},0)

下面程序的輸出結果是：

setTimeout(function() {
  console.log('setTimeout');
}, 0);
Promise.resolve().then(function() {
  console.log('promise1');
}).then(function() {
  console.log('promise2');
});

請表述以下代碼的執行結果和原因

setTimeout(function() {
    console.log(1)
},0)
new Promise(function executor(resolve){
    console.log(2)
    for (var i=0; i<10000; i++) {
        i - 9999 && resolve()
    }
    console.log(3)
}).then(function() {
    console.log(4)
})
console.log(5)

在網頁中有兩個div塊，html代碼如下

<div class="outer">
 <div class="inner"></div>
</div>

對應的js代碼如下：

var outer=document.querySelector('.outer');
var inner=document.querySelector('.inner');

function onClick() {
    console.log('click');

    setTimeout(function() {
        console.log('timeout');
    }, 0);

    Promise.resolve().then(function() {
        console.log('promise');
    });

    outer.setAttribute('data-random', Math.random());
}

inner.addEventListener('click', onClick);
outer.addEventListener('click', onClick);

當點擊class為inner的div塊時，控制臺依次輸出結果是什么？ 10. 下面程序的輸出結果是？

(async ()=> {
    console.log(1);
    setTimeout(()=> {
        console.log(2);
}, 0);
await new Promise((resolve, reject)=> {
    console.log(3);
}).then(()=> {
    console.log(4);
});
    console.log(5);
})();

下面程序的輸出結果是：

setTimeout(()=> console.log('a'));
Promise.resolve().then(
   ()=> console.log('b’);
 ).then(
   ()=> Promise.resolve('c').then(
     (data)=> {
       setTimeout(()=> console.log('d'));
       console.log('f');
       return data;
     }
   )
 ).then(data=> console.log(data));

下面程序的輸出結果是：

console.log('one'); 
setTimeout(function() { console.log('two'); }, 0); 
Promise.resolve()
       .then(function() { console.log('three'); })
 console.log('four');

下面程序的執行結果是：

setTimeout(function () {
    console.log(C)
},0)
console.log('D')
new Promise(function(resolve){
    console.log('E')
    resolve()
    console.log('F')
}).then(function() {
    console.log('G')
})
console.log('H')

有一個輸出函數定義如下：

function log(msg, time) {
  return new Promise((resolve)=> {
    setTimeout(()=> {
      console.log(msg);
      resolve();
    }, time);
  });
}

則下面三段代碼輸出的結果是：

// 第一段代碼：
(async ()=> {
  for (let i=0; i < 5; i++) {
    await log(i, 1000);
  }
})();

// 第二段代碼：
(async ()=> {
  [ 1, 2, 3, 4 ].forEach(async (i)=> {
    await log(i, 1000);
  });
})();

// 第三段代碼：
(async ()=> {
  for (const i of [ 1, 2, 3, 4 ]) {
    await log(i, 1000);
  }
})();

原型與原型鏈

關于原型JS：看完這篇文章，徹底了解 “原型” & “this”

傳送門: 原型與原型鏈題目解析[4]

下面程序的輸出結果依次是？

function Fn1(name) {
    if(name){
    this.name=name;
    }
}
Fn1.prototype.name="jack"
let a=new Fn1();
console.log('a:', a.name);

function Fn2(name) {
    this.name=name;
}
Fn2.prototype.name="jack"
let b=new Fn2();
console.log('b:', b.name);

下面程序的輸出結果是？

var Foo=(function() {
    var x=0;
    function Foo() {}
    Foo.prototype.increment=function() {
        ++x;
        console.log(x);
    };
    return Foo;
})();
 
var a=new Foo();
a.increment();
a.increment();
var b=new Foo();
a.increment();

下面程序的輸出結果是？

var name='Jay'
function Person(name){
    this.name=name;
    console.log(this.name)
}
var a=Person('Tom')
console.log(name)
console.log(a)
var b=new Person('Michael')
console.log(b)

請表述以下代碼的執行結果和原因

class A{}
class B extends A{}
const a=new A()
const b=new B()
a.__proto__
b.__proto__
B. __proto__
B. prototype.__proto__
b.__proto__.__proto__

請表述以下代碼的執行結果和原因

function test() {           
    getName=function() { 
        Promise.resolve().then(()=> console.log(0)); 
        console.log(1);               
    };

    return this; 
}
test.getName=function() { 
     setTimeout(()=> console.log(2), 0); 
     console.log(3);               
};
test.prototype.getName=function() {    

     console.log(4); 
};       
var getName=function() { 
     console.log(5);             
};
function getName() {

     console.log(6); 
}      
      
test.getName(); 
getName(); 
test().getName(); 
getName();  
new test.getName();
new test().getName();
new new test().getName();

請表述以下代碼的執行結果和原因

var tmp={};
var A=function() {};
A. prototype=tmp;

var a=new A();
A. prototype={};

var b=Object.create(tmp);
b.constructor=A. constructor;

console.log(a instanceof A);
console.log(b instanceof A);

下面程序的執行結果是：

function Foo(){}
Foo.prototype.z=3;
var obj=new Foo();
console.info(obj.z)
obj.z=10;
console.info(obj.z);
delete obj.z;
console.info(obj.z);

下面程序的執行結果是：

const Book={
  price: 32
}
const book=Object.create(Book);
book.type='Math';
delete book.price;
delete book.type;
console.log(book.price);
console.log(book.type);

作用域與預編譯

下面的程序會報錯嗎？如果不會，輸出結果分別是多少？

function sayHello() {
    console.log(name);
    console.log(age);
    var name="Tom";
    let age=18;
} 
sayHello();

下面的程序i的打印結果分別是多少？

for (var i=0; i < 3; i++) {
    setTimeout(_=> {
        console.log(i)
    })
}

for (let i=0; i < 3; i++) {
    setTimeout(_=> {
        console.log(i)
    })
}

下面程序的輸出結果是：

console.log(a);
var a='a';
console.log(b);
let b='b';

下面程序的輸出結果是：

var foo="Hello";
(function(){
    var bar=" World";
    alert(foo + bar);
})();
alert(foo + bar);

下面程序的輸出結果是：

var a=10;
(function () {
    console.log(a)
    a=5
    console.log(window.a)
    var a=20;
    console.log(a)
})()

下面代碼的輸出結果是:

const a=10
function runFunction() {
    const a=20
    console.log('inside', a)
}
runFunction()
console.log('outside', a)

請描述打印結果并說明原因

"use strict"
var name='Jay'
var person={
    name: 'Wang',
    pro: {
        name: 'Michael',
        getName: function () {
            return this.name
        }
    }
}
console.log(person.pro.getName)
var people=person.pro.getName
console.log(people())

下面程序的結果是：

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
<script>
var elements=document.getElementsByTagName("li");
for (var i=0;i<elements.length;i++){
    elements[i].onclick=function( ){
    alert(i); 
    };
}

下面程序的輸出結果是

compute(10,100);
var compute=function(A,B) {
    console.info(A * B) ;
};
function compute(A,B){
    console.info(A + B);
}
function compute(A,B){
    console.info((A + B)*2);
}
compute(2,10);

下面程序的執行結果是：

meili()
function meili() {
    console.log("meili")
}
mogu()
var mogu=function() {
    console.log("mogu")
}

下面兩個代碼片段輸出結果有什么區別？為什么？

// 片段1
check('first');
function check(ars){
    console.log(ars);
}
// 片段2
check('second');
var check=function(ars){
    console.log(ars);
}

ES6

對象

下面代碼的輸出結果是？

const student={name: 'ZhangSan'}
Object.defineProperty(student, 'age', {value: 22})
console.log(student)
console.log(Object.keys(student))

generator

下列程序的輸出結果是多少？為什么？

function * cb(x, y) {
    for(let i=Math.ceil(x); i <=y; i++) {
        yield i;
    }
}

var a=cb(6, 9);
console.log(a.next());
console.log(a.next());

擴展運算符

下面程序的輸出結果是：

function fn(...args) {
  console.log(typeof args);
}
fn(21);

promise

Promise.reject(0)
       .catch(e=> e)
       .catch(e=> console.log(e))

class

請寫出下面ES6代碼編譯后所生成的ES5代碼

class Person {
     constructor (name) {
          this.name=name;
     }
     greet () {
          console.log(`Hi, my name is ${this.name}`);
     }
     greetDelay (time) {
          setTimeout(()=> {
               console.log(`Hi, my name is ${this.name}`);
          }, time);
     }
}

標簽模板

下面程序的輸出結果是多少？

function getPersonInfo (one, two, three) {
    console.log(one)
    console.log(two)
    console.log(three)
}
const person='Lydia'
const age=21
getPersonInfo `${person} is ${age} years old`

module

請寫出index里面的輸出結果

// module.js
export default ()=> "Hello world"
export const name="nowcoder"
// index.js
import * as data from "./module"
console.log(data)

有a.js和b.js兩個文件，請寫出b文件中代碼的輸出

// a.js
let a=1
let b={}
setTimeout(()=> {    
a=2    
b.b=2
}, 100)
module.exports={ a, b }

// b.js
const a=require('./a')
console.log(a.a)
console.log(a.b)
setTimeout(()=> {    
    console.log(a.a)    
    console.log(a.b)
}, 500)

其他

輸出結果是：

<div id="box1">
    <div id="box2">
        content
    </div>
</div>
<script>
const $=document.querySelector.bind(document);
const box1=$('#box1');
const box2=$('#box2');

box1.addEventListener('click', ()=>{
    console.log('box1 true');
}, true);

box1.addEventListener('click', ()=>{
    console.log('box1 false');
}, false);

box2.addEventListener('click', ()=>{
    console.log('box2 true');
}, true);

box2.addEventListener('click', ()=>{
    console.log('box2 false');
}, false);
</script>

輸出結果是：

$(function () { 
    function fn1( value ) {
        alert( value );
    }
    function fn2( value ) {
        fn1("A");
        return false;
    }
    var callbacks=$.Callbacks();
    callbacks.add( fn1 ); 
    callbacks.fire( "B" );
    callbacks.add( fn2 ); 
    callbacks.fire( "C" );
})

實現在p元素后添加“Hello World!”，則橫線處應使用的方法為( )？


<html>
    <head>
        <script type="text/javascript" src="/jquery/jquery.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $("button").click(function(){
                    $("<b>Hello World!</b>").______("p");
                });
            });
        </script>
    </head>
    <body>
        <p>This is a paragraph.</p>
        <p>This is another paragraph.</p>
        <button>在每個p元素的結尾添加內容</button>
    </body>
</html>

輸出結果是：

<div id="box1">
  <div id="box2">
    content
  </div>
</div>
<script>
const $=document.querySelector.bind(document);
const box1=$('#box1');
const box2=$('#box2');
box1.addEventListener('click', ()=> {
  console.log('box1 true');
}, true);
box1.addEventListener('click', ()=> {
  console.log('box1 false');
}, false);
box2.addEventListener('click', ()=> {
  console.log('box2 true');
}, true);
box2.addEventListener('click', ()=> {
  console.log('box2 false');
}, false);
</script>

請選擇下面代碼輸出1的次數

、關于HTML語義化，你知道都有哪些標簽？

語義化就是讓計算機能夠快速讀懂內容，高效的處理信息。搜索引擎只能通過標簽來判斷內容的語義，因為頁面的很大一部分流量來自搜索引擎，要使頁面盡可能地對搜索引擎友好，所以盡可能地使用語義化標簽，如：

div是division分離，span是span范圍，table是表格，ol是orderList有序列表，ul是unorderList無序列表，li是list item列表選項，html5進一步推進web語義化的發展，使用了一些新的標簽有header、artical、address等。

2、HTML標簽分類有哪些？都有啥特點?

塊級標簽

默認寬度是100%

塊級標簽獨占一行

塊級標簽可以使用height設置高度

常見塊級標簽：div、p、h1~h6、ol、ul、table、form等等。

行級標簽

默認寬度由內容撐開

行級標簽不會自動換行，從左到右一次排列

行級標簽height設置高度失效，高度由內容撐開。

常見行級標簽：span、a、br、strong、lable、i、em。

行內塊標簽

結合行級和塊級的優點

可以設置元素的寬高

還可以將多個元素顯示在一行從左到右一次排列。

常見行內塊標簽：img、input。

3、網頁編碼設置有幾種方式？

Charset屬性規定HTML文檔的字符編碼，常見的屬性值有以下幾個：

UTF-8(8-bit Unicode Transformation Format)是一種針對Unicode的可變長度字符編碼，又稱萬國碼。用在網頁上可以同一頁面顯示中文簡體繁體以及其他語言。
GBK是漢字編碼，是雙字節碼，可表示簡體和繁體字。
ISO8859-2字符集，也稱Latin-2，收集了東歐字符。

4、HTML的框架優缺點有哪些？

Html框架有iframe和frame兩個，將多個頁面通過一個瀏覽器窗口顯示。

框架的優點：

重載頁面時不需要重載整個頁面，只需要重載頁面中的一個框架頁，減少數據傳輸，加快網頁加載速度。
Iframe使用簡單不需要引入任何插件，主要用于不需要搜索引擎搜索的頁面。
方便制作導航，多個頁面共用，方便開發和維護。

缺點：

會產生很多頁面，不容易管理。
不方便打印，不能實現對frameset的打印。
瀏覽器后退按鈕失效。
不利于SEO優化，不能為每個頁面設置標題和關鍵字，影響搜索。
多數小型移動設備無法完全顯示框架。
多框架頁面會增加服務器的http請求。
H5已經拋棄該標簽。

5、HTML5有哪些新特性，移除了哪些元素？

H5新增了圖像、位置、存儲、多任務等功能。

新增元素：

Canvas
video和audio元素
本地離線緩存：localStorage長期存儲，瀏覽器關閉之后數據不丟失，sessionStorage的數據在瀏覽器關閉后自動刪除。
語義化標簽：artical、footer、header、nav、section
位置API：Geolocation
表單控件：calendar、date、time、email、search、url
新技術：web worker(運行在后臺的js,獨立于其他腳本，不影響頁面性能。可以在頁面繼續任何操作，此時web worker在后臺運行)、web socket
拖放API：drag、drop

移除元素：

框架元素：frame、frameset、noframes。
純表現元素：basefont、font、center、u、big、strike、tt

Html5新增了 27 個元素，廢棄了 16 個元素，根據現有的標準規范，把 HTML5 的元素按優先級定義為結構性屬性、級塊性元素、行內語義性元素和交互性元素 4 大類。

6、如何區分HTML和HTML5？

DOCUMENT聲明方式是區分的重要元素。

Html聲明方式：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd”>
Html5聲明方式：<!DOCTYPE html>

根據新增加的結構、功能來區分。H5有好多新增語義化標簽。

7、H5文件離線存儲怎么使用，工作原理是什么？

在線情況下，瀏覽器發現html頭部有manifest屬性，它會請求manifest文件，如果是第一次訪問那么瀏覽器就會根據manifest文件的內容下載相應的資源，并進行離線存儲。如果已經訪問過并且資源已經離線存儲了，那么瀏覽器就會使用離線的資源加載頁面。然后瀏覽器會對比新的manifest文件與舊的manifest文件，如果文件沒有改變，就不會有任何操作，如果文件改變了，那么就會重新下載資源，并進行離線緩存。

頁面頭部加入manifest屬性。如：<html manifest="demo.appcache">

在cache.manifest文件中編寫離線存儲的資源。

8、Cookies,sessionStorage和localStorage的區別？

共同點：都是保存在瀏覽器端，而且都是同源的。

區別：

Cookies是為了標識用戶身份而存儲在用戶本地的數據，始終在同源http請求中攜帶，在瀏覽器與服務器間來回傳遞，而sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存。
存儲大小差異。Cookie保存的數據很小，不能超過4k，而sessionStorage和localStorage保存數據大，可達到5M。
存儲有效期不同。Cookie在設置的cookie過期前始終有效，而sessionStorage僅在瀏覽器關閉之前有效，localStorage始終有效，與瀏覽器窗口沒關系。
作用域不同：cookie在所有同源窗口都是共享，sessionStorage不能在不同瀏覽器窗口上共享，localStorage在所有同源窗口都是共享的。

9、title與h1的區別、b與strong的區別、i與em的區別？

title屬性沒有明確意義，只表示標題，h1表示層次明確的標題，對頁面信息抓取也有很大的影響。

strong標明重點內容，語氣加強含義，b表示無意義的視覺表示

em表示強調文本，i是斜體，是無意義的視覺表示

視覺樣式標簽：b、u、i、s

語義樣式標簽：strong、em、ins、del、code

10、viewport 所有屬性？

viewport是用戶網頁的可視區域，使用meta設置viewport時有很多屬性，分別對以下各個屬性介紹

width :設置layout viewport的寬度，為一個正整數，或字符串'device-width';
initial-scale:設置頁面的初始縮放值，為一個數字，可以帶小數。
minimum-scale:允許用戶的最小縮放值，為一個數字，可以帶小數。
maximum-scale:允許用戶的最大縮放值，為一個數字，可以帶小數。
height:設置layout viewport的高度，這個屬性對我們并不重要，很少使用
user-scalable:是否允許用戶進行縮放，值為‘no’或者‘yes’。
target-densitydpi:值可以為一個數值或者 high-dpi 、 medium-dpi、 low-dpi、 device-dpi 這幾個字符串中的一個

安卓中還支持：target-densitydpi，表示目標設備的密度等級，作用是決定css中的1px 代表多少物理像素。

11、meta標簽的name屬性值？

name屬性主要用于描述網頁，與之對應的屬性值為content，content中的內容主要是便于搜索機器人查找信息和分類信息用的。

Meta標簽的name屬性語法格式是：

Name主要有以下幾個參數：

Keywords（關鍵字）：關鍵字用來告訴搜索引擎你網頁的關鍵字是什么。
Description（網站內容描述）：描述用來瀏覽器你的網頁主要內容是什么。
Robots（機器人向導）：robots用來搜索機器人哪些頁面需要索引，哪些頁面不需要索引。
Author（作者）：添加網頁作者信息。

Content的參數主要有name的參數來決定，如果是關鍵字的時候，多個關鍵字之間使用逗號隔開，一般使用5個關鍵字為宜；如果是描述的時候，描述長度一般控制在200字左右；如果是索引的時候，一般使用inde、noindex、none、all，默認是all。

在線咨詢

上一篇：Django 使用模板 templates
下一篇：古瑪雅社會人類是如何生產食鹽的？

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

45道CSS基礎面試題（附答案）

選題

JS基礎

js概念與類型檢測

邏輯判斷

Math

字符串

JSON

數組

正則

其他

JS深入

this

作用域(閉包)

原型與繼承

其他

DOM題

事件流

DOM遍歷

其他

BOM題

ES6題

箭頭函數

promise

解構賦值

多選題

JS基礎

JS深入

ES6

DOM

填空題

類型檢測

類型轉換

邏輯判斷

其他

程序題

JS基礎

JS深入

this指向

事件循環

原型與原型鏈

作用域與預編譯

ES6

對象

generator

擴展運算符

promise

class

標簽模板

module

其他

您的項目需求