筆試指南

時間 2019-11-30

原文原文鏈接

題目：類型判斷用到哪些方法？
typeof和instanceofhtml

題目：值類型和引用類型的區別？
根據 JavaScript中的變量類型傳遞方式，又分爲值類型和引用類型，在參數傳遞方式上，值類型是按值傳遞，引用類型是按共享傳遞。前端

說出下面代碼的執行結果，並分析其緣由？node

function foo(a){
    a = a * 10;
}
function bar(b){
    b.value = 'new';
}
var a = 1;
var b = {value: 'old'};
foo(a);
bar(b);
console.log(a); // 1
console.log(b); // value: new

如何理解 JavaScript 的原型？
全部的引用類型（數組、對象、函數），都具備對象特性，便可自由擴展屬性（null除外），都有一個__proto__屬性，屬性值是一個普通的對象，__proto__屬性值指向它的構造函數的prototype屬性值。全部的函數，都有一個prototype屬性，屬性值也是一個普通的對象算法

如何理解 JS 的原型鏈？api

當試圖獲得一個對象的某個屬性時，若是這個對象自己沒有這個屬性，那麼會去它的__proto__（即它的構造函數的prototype）中尋找，若沒有找到，會一直往上找，發現是一個鏈式的結構，因此叫作「原型鏈」跨域

題目：如今有個 HTML 片斷，要求編寫代碼，點擊編號爲幾的連接就alert彈出其編號？（閉包題目）數組

<ul>
    <li>編號1，點擊我請彈出1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

var list = document.getElementsByTagName('li');
for (var i = 0; i < list.length; i++) {
    list[i].addEventListener('click', function(i){
        return function(){
            alert(i + 1)
        }
    }(i), true)
}

題目：說出下面執行的結果（執行上下文，這裏筆者直接註釋輸出了）瀏覽器

console.log(a)  // undefined
var a = 100

fn('zhangsan')  // 'zhangsan' 20
function fn(name) {
    age = 20
    console.log(name, age)
    var age
}

console.log(b); // 這裏報錯
// Uncaught ReferenceError: b is not defined
b = 100;

題目：如何理解 JS 的做用域和做用域鏈？安全

JS 沒有塊級做用域，只有全局做用域和函數做用域，ES6纔有塊級做用域，全局做用域就是最外層的做用域，若是咱們寫了不少行 JS 代碼，變量定義都沒有用函數包括，那麼它們就所有都在全局做用域中。這樣的壞處就是很容易衝突。 jQuery、Zepto 等庫的源碼，全部的代碼都會放在(function(){....})()中。由於放在裏面的全部變量，都不會被外泄和暴露，不會污染到外面，不會對其餘的庫或者 JS 腳本形成影響。這是函數做用域的一個體現。
當前做用域沒有定義的變量，這成爲自由變量。自由變量如何獲得 —— 向父級做用域尋找。若是父級也沒呢？再一層一層向上尋找，直到找到全局做用域仍是沒找到，就宣佈放棄。這種一層一層的關係，就是做用域鏈。自由變量將從做用域鏈中去尋找，可是依據的是函數定義時的做用域鏈，而不是函數執行時性能優化

閉包主要有哪些應用場景？

①函數做爲返回值
②函數做爲參數傳遞

題目：講解下面代碼的執行過程和結果？

var a = true;
setTimeout(function(){
    a = false;
}, 100)
while(a){
    console.log('while執行了')
}

由於JS是單線程的，因此進入while循環以後，沒有「時間」（線程）去跑定時器了，因此這個代碼跑起來是個死循環！

題目：ES6 箭頭函數中的this和普通函數中的有什麼不一樣？
第一寫起來更加簡潔，第二 this是父做用域的 this

function MathHandle(x, y) {
  this.x = x;
  this.y = y;
}

MathHandle.prototype.add = function () {
  return this.x + this.y;
};

var m = new MathHandle(1, 2);
console.log(m.add())


class MathHandle {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  add() {
    return this.x + this.y;
  }
}
const m = new MathHandle(1, 2);
console.log(m.add())

JS 構造函數實現繼承

// 動物
function Animal() {
    this.eat = function () {
        console.log('animal eat')
    }
}
// 狗
function Dog() {
    this.bark = function () {
        console.log('dog bark')
    }
}
Dog.prototype = new Animal()
// 哈士奇
var hashiqi = new Dog()

ES6 class 實現繼承

class Animal {
    constructor(name) {
        this.name = name
    }
    eat() {
        console.log(`${this.name} eat`)
    }
}

class Dog extends Animal {
    constructor(name) {
        super(name)
        this.name = name
    }
    say() {
        console.log(`${this.name} say`)
    }
}
const dog = new Dog('哈士奇')
dog.say()
dog.eat()

ES6 中新增的數據類型有哪些？

Set 和 Map

DOM 和 HTML 區別和聯繫？

HTML 是一個有既定標籤標準的 XML 格式，標籤的名字、層級關係和屬性，都被標準化（不然瀏覽器沒法解析），它也是一棵樹。HTML 是一棵樹，DOM 也是一棵樹。能夠認爲 DOM 就是 JS 能識別的 HTML 結構，一個普通的 JS 對象或者數組。

property 和 attribute 的區別是什麼？
兩種有很大的區別，property 的獲取和修改，是直接改變 JS 對象，而 attribute 是直接改變 HTML 的屬性，attribute 就是對 HTML 屬性的 get 和 set，和 DOM 節點的 JS 範疇的 property 沒有關係。

什麼是事件冒泡？
DOM 結構中，事件會沿着 DOM 樹向上級節點冒泡，若是咱們在上級節點中都綁定了事件，它是會根據 DOM 的結構來冒泡，從下到上挨個執行的。可是咱們可使用e.stopPropagation()來阻止冒泡

如何使用事件代理？有何好處？

如有以下場景，一個<div>中包含了若干個<a>，並且還能繼續增長。那如何快捷方便地爲全部<a>綁定事件呢？

<div id="div1">
    <a href="#">a1</a>
    <a href="#">a2</a>
    <a href="#">a3</a>
    <a href="#">a4</a>
</div>
<button>點擊增長一個 a 標籤</button>

這裏就會用到事件代理。咱們要監聽<a>的事件，但要把具體的事件綁定到<div>上，而後看事件的觸發點是否是<a>

var div1 = document.getElementById('div1')
div1.addEventListener('click', function (e) {
    // e.target 能夠監聽到觸發點擊事件的元素是哪個
    var target = e.target
    if (e.nodeName === 'A') {
        // 點擊的是 <a> 元素
        alert(target.innerHTML)
    }
})

使用代理的優勢以下：使代碼簡潔，減小瀏覽器的內存佔用

手寫 XMLHttpRequest 不借助任何庫？

var xhr = new XMLHttpRequest()
xhr.onreadystatechange = function () {
    // 這裏的函數異步執行，可參考以前 JS 基礎中的異步模塊
    if (xhr.readyState == 4) {
        if (xhr.status == 200) {
            alert(xhr.responseText)
        }
    }
}
xhr.open("GET", "/api", false)
xhr.send(null)

HTTP 協議中，response 的狀態碼，常見的有哪些？

xhr.status即 HTTP 狀態碼，有 2xx 3xx 4xx 5xx 這幾種，比較經常使用的有如下幾種：

200 正常
3xx
301 永久重定向。如http://xxx.com這個 GET 請求（最後沒有/），就會被301到http://xxx.com/（最後是/）
302 臨時重定向。臨時的，不是永久的
304 資源找到可是不符合請求條件，不會返回任何主體。如發送 GET 請求時，head 中有If-Modified-Since: xxx（要求返回更新時間是xxx時間以後的資源），若是此時服務器端資源未更新，則會返回304，即不符合要求
404 找不到資源
5xx 服務器端出錯了

另：
xhr.readyState是瀏覽器判斷請求過程當中各個階段的，xhr.status是 HTTP 協議中規定的不一樣結果的返回狀態說明。

xhr.readyState的狀態碼說明：

0 -代理被建立，但還沒有調用 open() 方法。
1 -open() 方法已經被調用。
2 -send() 方法已經被調用，而且頭部和狀態已經可得到。
3 -下載中， responseText 屬性已經包含部分數據。
4 -下載操做已完成

什麼是跨域，如何實現跨域？
瀏覽器中有同源策略，url 協議、域名、端口不一樣算跨域

解決跨域 - 服務器端設置 http header
一、JSONP
可是 HTML 中幾個標籤能逃避過同源策略——<script src="xxx">、<img src="xxxx"/>、<link href="xxxx">，這三個標籤的src/href能夠加載其餘域的資源，不受同源策略限制。

二、服務器端設置 http header

response.setHeader("Access-Control-Allow-Origin", "http://m.juejin.com/"); // 第二個參數填寫容許跨域的域名稱，不建議直接寫 "*"
response.setHeader("Access-Control-Allow-Headers", "X-Requested-With");
response.setHeader("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");

// 接收跨域的cookie
response.setHeader("Access-Control-Allow-Credentials", "true");

cookie 和 localStorage 有何區別？

它是設計用來在服務器和客戶端進行信息傳遞的，所以咱們的每一個 HTTP 請求都帶着 cookie。可是 cookie 也具有瀏覽器端存儲的能力（例如記住用戶名和密碼），所以就被開發者用上了。
使用方法：document.cookie = '···'

缺點：
存儲量過小，只有 4KB
全部 HTTP 請求都帶着，會影響獲取資源的效率
API 簡單，須要封裝才能用

locationStorage 和 sessionStorage
二者的區別就在於sessionStorage根據 session 過去時間而實現，而localStorage會永久有效。一些須要及時失效的重要信息放在sessionStorage中，一些不重要可是不常常設置的信息，放在localStorage中。

優勢
存儲量增大到 5MB
不會帶到 HTTP 請求中
API 適用於數據存儲 localStorage.setItem(key, value) localStorage.getItem(key)

什麼是盒子模型？
內邊距、邊框和外邊距。它們三者就構成了一個「盒子」

盒子模型的寬度如何計算？
固定寬度的盒子：內容寬度（固定的寬度） + border寬度 + padding寬度 + margin寬度之和
充滿父容器的盒子：內容寬度 + border寬度 + padding寬度 + margin寬度之和，內容寬度=父容器的內容寬度-（本身的 border寬度 + 本身的padding寬度 + 本身的margin寬度）
包裹內容的盒子：內容的寬度按照內容計算，盒子的寬度=內容寬度的基礎上+padding寬度 + border寬度 + margin寬度之和。

爲什麼 float 會致使父元素塌陷？
被設置了 float 的元素會脫離文檔流，破壞了父標籤的本來結構，使得父標籤出現了坍塌現象

float 的重要的特性是什麼？
包裹性和清空格

手寫 clearfix？

.clearfix:after {
    content: '';
    display: table;
    clear: both;
}
.clearfix {
    *zoom: 1; /* 兼容 IE 低版本 */
}

relative、absolute 和 fixed 有何區別？什麼是定位上下文？

relative 會致使自身位置的相對變化，而不會影響其餘元素的位置、大小，就是 relative 產生一個新的定位上下文。

absolute 元素脫離了文檔結構，只要元素會脫離文檔結構，它就會產生破壞性，致使父元素坍塌，absolute 元素具備「包裹性」。bsolute 元素具備「跟隨性」。雖然 absolute 元素脫離了文檔結構，若咱們沒有設置 top、left 的值，它的位置並不發生變化，呆在它本來的位置。absolute 元素會懸浮在頁面上方，會遮擋住下方的頁面內容。置了 top、left 值時，元素是相對於最近的定位上下文來定位的，而不是相對於瀏覽器定位。
fixed 和 absolute 是同樣的，惟一的區別在於：absolute 元素是根據最近的定位上下文肯定位置，而 fixed 根據 window （或者 iframe）肯定位置。

relative 元素的定位永遠是相對於元素自身位置的，和其餘元素不要緊，也不會影響其餘元素。

absolute 設置了 top、left，瀏覽器會遞歸查找該元素的全部父元素，若是找到一個設置了position:relative/absolute/fixed的元素，就以該元素爲基準定位，若是沒找到，就以瀏覽器邊界定位。

fixed 元素的定位是相對於 window （或 iframe）邊界的，和其餘元素沒有關係。可是它具備破壞性，會致使其餘元素位置的變化。

相對於flex佈局，傳統佈局的方式是什麼？
佈局的傳統解決方案基於盒子模型，依賴 display 屬性 + position 屬性 + float 屬性

如何實現水平居中？
inline 元素用text-align: center;
block 元素可以使用margin: auto;
絕對定位元素可結合left和margin實現，可是必須知道寬度

.container {  //container是item的父級
    position: relative;
    width: 500px;
}
.item {
    width: 300px;
    height: 100px;
    position: absolute;
    left: 50%;  
    margin: -150px;   
}

如何實現垂直居中？
inline 元素可設置line-height的值等於height值
絕對定位元素，可結合left和margin實現，可是必須知道尺寸（優勢：兼容性好
缺點：須要提早知道尺寸）

.container {
    position: relative;
    height: 200px;
}
.item {
    width: 80px;
    height: 40px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -20px;
    margin-left: -40px;
}

絕對定位可結合transform實現居中（優勢：不須要提早知道尺寸
缺點：兼容性很差）

.container {
    position: relative;
    height: 200px;
}
.item {
    width: 80px;
    height: 40px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: blue;
}

絕對定位結合margin: auto（不須要提早知道尺寸，兼容性好）
測試：

<html>

<head>
<style>
.container {
    position: relative;
    height: 300px;
    border:1px blue solid;
}
.item {
    width: 100px;
    height: 50px;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    background:red
}

</style>

<title>個人第一個 HTML 頁面</title>
</head>

<body>
<div class="container"><div class="item"></div></div>

</body>

</html>

如何理解 HTML 語義化？
所謂「語義」就是爲了更易讀懂，分兩部分：讓人（寫程序、讀程序）更易讀懂和讓機器（瀏覽器、搜索引擎）更易讀懂
爲了增強 HTML 語義化，HTML5 標準中又增長了header section artical等標籤。

CSS 的transition和animation有何區別？
首先transition和animation均可以作動效，從語義上來理解，transition是過渡，由一個狀態過渡到另外一個狀態，好比高度100px過渡到200px；而animation是動畫，即更專業作動效的，animation有幀的概念，能夠設置關鍵幀keyframe，一個動畫能夠由多個關鍵幀多個狀態過渡組成，另外animation也包含多個屬性。

什麼是重繪和迴流？

重繪：指的是當頁面中的元素不脫離文檔流，而簡單地進行樣式的變化，好比修改顏色、背景等，瀏覽器從新繪製樣式
迴流：指的是處於文檔流中 DOM 的尺寸大小、位置或者某些屬性發生變化時，致使瀏覽器從新渲染部分或所有文檔的狀況
迴流要比重繪消耗性能開支更大。

找出下面代碼的優化點，而且優化它？

var data = ['string1', 'string2', 'string3'];
for(var i = 0; i < data.length; i++){
    var dom = document.getElementById('list');
    dom.innerHTML += '<li>' + data[i] + '</li>';
}

var dom = document.getElementById('list');
var data = ['string1', 'string2', 'string3'];
var frag = document.createDocumentFragment();
var li;
for(var i = 0; i < data.length; i++){    
    li = document.createElement("li");
    li.innerHTML = data[i];
    frag.appendChild(li);  // 先放在 frag 中，最後一次性插入到 DOM 結構中。
}
listNode.appendChild(frag);

前端常見的安全問題有哪些？
XSS（跨站腳本攻擊）和CSRF（跨站請求僞造）

何爲構建工具，爲何要使用？
構建」也可理解爲「編譯」，就是將開發環境的代碼轉換成運行環境代碼的過程。開發環境的代碼是爲了更好地閱讀，而運行環境的代碼是爲了更快地執行，二者目的不同，所以代碼形式也不同，爲了達到這個目的，就要使用構建工具。
總結一下須要構建工具處理的幾種狀況：

構建工具的做用？
處理模塊化、編譯語法、代碼壓縮

何爲抓包？
PC 端的網頁，咱們能夠經過 Chrome、Firefox 等瀏覽器自帶的開發者工具來查看網頁的全部網絡請求，以幫助排查 bug。這種監聽、查看網絡請求的操做稱爲抓包。

如何抓取數據？如何使用工具來配置代理？

監聽請求：
Mac 系統下推薦使用 Charles，Windows 系統推薦使用 Fiddler
一、將安裝好 Charles 的電腦和要抓包的手機，鏈接到同一個網絡，保證 IP 段相同
二、手機設置網絡代理，（代理IP）代理到電腦的 IP，代理的端口爲8888，Charles選擇「容許」代理
三、使用手機端訪問的網頁或者聯網的請求，Charles 就能監聽到

線上的地址代理到測試環境：
一、Charles 爲例，點擊菜單欄中 Tools 菜單，二級菜單中點擊 Map Remote
二、選中 Enable Map Remote 複選框，而後點擊 Add 按鈕，添加一個代理項
三、將添加的代理項，map from 設置https://www.aaa.com/api/getuser?name=xxx，Map to設置http://168.1.1.100:8080/api/getuser?name=xxx
四、單擊OK

本筆試指南缺少數據結構和算法，以及性能優化內容

本文由https://juejin.im/book/5a8f9ddcf265da4e9f6fb959/section/5a8f9fcb6fb9a063417b3f9e整理而得，權利歸做者全部，侵刪！