【面試題記錄】最近一波筆試題目記錄

筆試題記錄

1. 空元素 Empty Element

空元素是HTML/SVG裏的不可能存在子節點的元素。
個人理解就是：自閉和標籤

HTML中的空元素：

• <br/> <hr> <img> <input/> <link> <meta>
• <area> <source> <track> <wbr> <base> <param> <keygen> <col> <colgroup> <command> <embed>

2. <video src="movie.ogg" controls="controls">

<video>video是閉合標籤</video>，不用必須指定寬高
類似，<audio></audio>也是閉合標籤

video和audio都有的屬性：

• autoplay loop src controls

3. 否定僞類 :not()

僞類pseudo Class爲一個元素的特定狀態應用樣式
僞元素pseudo Element爲一個元素的特定部分應用樣式

僞類：

• :active :hover :focus :visited :enabled disabled :invalid :lang() :not() :optional :out-of-range
• :readonly :read-write :required :root :scope :target :valid
• :checked :default :defined :empty :first :focus-within :host :indeterminate :in-range :left :link
• 長子first-child 嫡長子first-of-type 幼子:last-child 嫡幼子:last-of-type
• 自定義規則:nth-child() :nth-of-type() 從後往前:nth-last-child() :nth-last-of-type()
• 獨子:only-child :only-of-type

僞元素：

• ::after ::before ::first-letter ::first-line ::selection ::slotted

4. 狀態碼

301 永久移動
302 臨時移動
304 Not Modified
502 Bad Gateway
503 Service Unavailable

5. 獲取元素?getElementByLabel()?

document.getXXX系列：

• getElementById() // id
• getElementsByClassName() // 類名
• getElementsByName() // name屬性
• getElementsByTagName() // 標籤名
• getElementsByTagNameNS() // 使用命名空間的XML文檔

獲取元素還有Selector:

• document.queySelector()
• document.querySelectorAll()

6. GET和POST區別

GET - 從指定的資源請求數據
POST - 向指定資源提交要被處理的數據

GET：

• 請求可被緩存
• 請求保留在瀏覽器歷史記錄中
• 可被收藏成書籤
• 不應用於敏感數據
• 請求有長度限制
• 只應當用於取數據
• 請求參數只能是ASCII碼，所以需要encode編碼

POST：

• 請求不會被緩存
• 不保留在歷史記錄中
• 不能被收藏成書籤
• 對數據長度無要求

7. 死鎖

死鎖產生的四個必要條件：

• 互斥條件
• .不可剝奪條件
• 請求和保持條件
• 循環等待條件

死鎖預防：

• 破壞“不可剝奪”：一個進程不能獲得所需的全部資源便處於等待狀態，等待期間他佔有的資源被隱式地釋放
• 破壞“請求與保持”：一、靜態分配：每個進程在開始執行時就申請他所需的全部資源。二、動態分配：每個進程在申請所需資源時它本身不佔用系統資源。
• 破壞“循環等待”：按編號順序進行

8. CSS優先級問題（僞類+屬性選擇器）

    <div class="main">
        <div class="test"></div>
    </div>
    <style>
        .main div{
            width: 200px;
            height: 200px;
            border: 1px red solid;
        }
        .test {
            border: 1px green solid;
        }
    </style>

.main div要比.test優先級高
ICE（Id > Class > Element）

    <div class="text">
        <p>僞類與類的優先級相等</p>
        <p>所以後者起作用</p>
    </div>
    <style>
        .text p{
            color: red;
        }
        p:first-child{
            color: green;
        }
    </style>

類和僞類優先級一致；元素和僞元素優先級一致

    <div>
        <p class="text" id="zpj">屬性選擇器</p>
    </div>
    <style>
        p[class="text"]{
            color: green;
        }
        [id="zpj"]{
            color: blue;
        }
        .text{
            color: red;
        }
    </style>

屬性選擇器的優先級等於類選擇器

9. innerHTML和innerText

共同點是都可以讀寫。
text表文本；html表格式；inner是標籤內部；outer包含標籤本身；value只用於input和textarea

• innerText : 只要文本
• innerHTML : HTML格式
• outerText：包含標籤自己
• outerHTML ：包含標籤自己
• value ： input和textarea

10. 箭頭函數

1. 箭頭函數更適用於那些本來需要匿名函數的地方
2. 箭頭函數不能用作構造函數
3. 沒有自己的this、arguments、super和new.target

• 箭頭函數不會創建自己的this，只能從自己的作用域鏈上一層繼承this
• 使用剩餘參數相較於使用arguments是更好的選擇
• 箭頭函數不要用作對象方法，this指向問題
• 箭頭函數沒有prototype屬性
• 箭頭函數不能使用yield關鍵字，不能用作生成器

高級用法：

// 加括號的函數體返回對象字面量
() => ({name: 'zpj'});
// 支持剩餘參數和默認參數
(a =1,b =true,...rest) => {};
// 支持參數列表解構
([a,b]=[1,2], {name: c} ={name: a+b}) => a+b+c;

說到this，提一下setTimeout

setTimeout調用的代碼運行在與所在函數完全分離的執行環境上。這會導致代碼中的this指向window

bind改變this指向，只改變一次

11. 能冒泡的事件

先說on和addEventListener/attachEvent的區別

• on+事件，只能綁定一個事件，後面的會覆蓋前面的
• addEventListener(eventName, function, useCapture)可以綁定多個事件
• 移除事件有removeEventListener/dettachEvent()

事件模型一般分爲capture -> target -> bubble 的過程
注意到useCapture，true是在捕獲階段處理事件，默認false是在冒泡階段處理事件

有的事件沒有冒泡過程。每個event都有一個event.bubles屬性，可以知道他是否可以冒泡。