前端口試之JavaScript（總結）

2023年3月1日 119次阅读 来源: ZJW0215

1. JS基礎的數據範例和援用範例

  • 基礎數據範例：number、string、null、undefined、boolean、symbol — 棧
  • 援用數據範例：object、array、function — 堆
  • 兩種數據範例存儲位置差別
  • 原始數據範例是直接存儲在棧(stack)中的簡樸數據段，佔有空間小、大小牢固，屬於被頻仍運用數據；
  • 援用數據範例存儲在堆(heap)中的對象，佔有空間大、大小不牢固，假如存儲在棧中，將會影響遞次運轉的機能；
  • 援用數據範例在棧中存儲了指針，該指針指向堆中該實體的肇端地點。
  • 當詮釋器尋覓援用值時，會起首檢索其在棧中的地點，取得地點后從堆中取得實體。

2.引見JS的內置對象

  • 數據封裝類對象：Object、String、Number、Boolean、Array
  • 其他對象：Function、Data、Math、Arguments、RegExp、Error
  • ES6新增對象：Promise、Proxy、Map、Set、Symbol、Reflect

3.說幾條JavaScript的基礎範例

  • 變量和函數在運用前聲明
  • 語句完畢后增加分號
  • 代碼段運用{}包裹
  • 以大寫字母開首定義組織函數，以全大寫定義常量
  • 用{} 和 []聲明對象和數組
  • 運用===和!==來比較true和false或許数字值

4.eval是做什麼的

  • 他的功用是把對應的字符串剖析成JS代碼並運轉；
  • 他不安全，而且異常耗能（實行兩次，一次剖析成JS代碼，一次實行）

5.對閉包的明白

閉包是指有權接見另一個函數作用域中變量的函數，建立閉包的最常見的體式格局就是在一個函數里建立另一個函數，經由歷程另一個函數接見這個函數的局部變量，應用閉包能夠打破作用域鏈，將函數內部的變量和要領通報到外部

閉包的特徵：函數內嵌套函數；內部函數能夠援用外部的參數和變量；參數和變量不會被渣滓接納機制接納

6.http狀況碼有哪些

簡樸版 

  100  Continue   繼續，平常在發送post請求時，已發送了http header以後效勞端將返回此信息，示意確認，以後發送詳細參數信息
  200  OK         一般返回信息
  201  Created    請求勝利而且效勞器建立了新的資本
  202  Accepted   效勞器已吸收請求，但還沒有處置懲罰
  301  Moved Permanently  請求的網頁已永遠移動到新位置。
  302 Found       臨時性重定向。
  303 See Other   臨時性重定向，且老是運用 GET 請求新的 URI。
  304  Not Modified 自從上次請求后，請求的網頁未修正過。

  400 Bad Request  效勞器沒法明白請求的花樣，客戶端不應該嘗試再次運用雷同的內容提議請求。
  401 Unauthorized 請求未受權。
  403 Forbidden   制止接見。
  404 Not Found   找不到怎樣與 URI 相匹配的資本。

  500 Internal Server Error  最常見的效勞器端毛病。
  503 Service Unavailable 效勞器端臨時沒法處置懲罰請求（多是過載或保護）。

完整版 

  1**(信息類)：示意吸收到請求而且繼續處置懲罰
    100——客戶必需繼續發出請求
    101——客戶請求效勞器依據請求轉換HTTP協定版本

  2**(相應勝利)：示意行動被勝利吸收、明白和吸收
    200——表明該請求被勝利地完成，所請求的資本發送回客戶端
    201——提醒曉得新文件的URL
    202——吸收和處置懲罰、但處置懲罰未完成
    203——返回信息不確定或不完整
    204——請求收到，但返回信息為空
    205——效勞器完成了請求，用戶代辦必需複位當前已閱讀過的文件
    206——效勞器已完成了部份用戶的GET請求

  3**(重定向類)：為了完成指定的行動，必需吸收進一步處置懲罰
    300——請求的資本可在多處獲得
    301——本網頁被永遠性轉移到另一個URL
    302——請求的網頁被轉移到一個新的地點，但客戶接見仍繼續經由歷程原始URL地點，重定向，新的URL會在response中的Location中返回，閱讀器將會運用新的URL發出新的Request。
    303——發起客戶接見其他URL或接見體式格局
    304——自從上次請求后，請求的網頁未修正過，效勞器返回此相應時，不會返回網頁內容，代表上次的文檔已被緩存了，還能夠繼續運用
    305——請求的資本必需從效勞器指定的地點獲得
    306——前一版本HTTP中運用的代碼，現行版本中不再運用
    307——說明請求的資本臨時性刪除

  4**(客戶端毛病類)：請求包含毛病語法或不能準確實行
    400——客戶端請求有語法毛病，不能被效勞器所明白
    401——請求未經受權，這個狀況代碼必需和WWW-Authenticate報頭域一同運用
    402——保存有用ChargeTo頭相應
    403——制止接見，效勞器收到請求，然則謝絕供應效勞
    404——一個404毛病表明可銜接效勞器，但效勞器沒法取得所請求的網頁，請求資本不存在。eg：輸入了毛病的URL
    405——用戶在Request-Line字段定義的要領不許可
    406——依據用戶發送的Accept拖，請求資本不可接見
    407——相似401，用戶必需起首在代辦效勞器上獲得受權
    408——客戶端沒有在用戶指定的餓時間內完成請求
    409——對當前資本狀況，請求不能完成
    410——效勞器上不再有此資本且無進一步的參考地點
    411——效勞器謝絕用戶定義的Content-Length屬性請求
    412——一個或多個請求頭字段在當前請求中毛病
    413——請求的資本大於效勞器許可的大小
    414——請求的資本URL善於效勞器許可的長度
    415——請求資本不支持請求項目花樣
    416——請求中包含Range請求頭字段，在當前請求資本局限內沒有range指導值，請求也不包含If-Range請求頭字段
    417——效勞器不滿足請求Expect頭字段指定的期望值，假如是代辦效勞器，多是下一級效勞器不能滿足請求長。

  5**(效勞端毛病類)：效勞器不能準確實行一個準確的請求
    500 - 效勞器碰到毛病，沒法完成請求
    502 - 網關毛病
    503：由於超載或停機保護，效勞器現在沒法運用，一段時間后能夠恢復一般

7.形貌閱讀器襯着的歷程，DOM書和襯着樹的辨別

閱讀器襯着歷程：

  • 剖析HTML構建DOM，并行請求css、image、js
  • css文件下載完成，最先構建CSSOM（CSS樹）
  • CSSOM構建完畢后，和DOM一同天生Render Tree（襯着樹）
  • 規劃（layout）：盤算出每一個節點在屏幕中的位置
  • 顯現：經由歷程顯卡把頁面畫到屏幕上

DOM樹和襯着樹的辨別

  • DOM樹與HTML標籤一一對應，包含head和隱蔽元素
  • 襯着樹不包含head和隱蔽元素，大段文本的每一個行都是自力節點，每一個自力節點都有對應的css屬性

8.怎樣最小化重繪（repaint）和迴流（reflow）

  • 須要建立多個DOM節點時，運用DocumentFragment建立完成后一次性的到場document
  • 緩存layout屬性值，削減迴流次數，如const offsetLeft=element.offsetLeft
  • 只管防止運用table規劃（table元素一旦觸發迴流就會致使table里一切的其他元素迴流）
  • 防止運用css表達式，由於每次挪用都邑從新盤算值（也會從新加載頁面）
  • 只管運用css屬性簡寫
  • 將屢次修正元素款式合併成一次操縱

9.引見JavaScript的原型、原型鏈？有啥特性

原型：

  • JavaScript的一切對象中都包含了一個 (__proto__ ) 內部屬性，這個屬性所對應的就是該對象的原型
  • JavaScript的函數對象，除了原型 (__proto__) 以外，還預置了 prototype 屬性
  • 當函數對象作為組織函數建立實例時，該 prototype 屬性值將被作為實例對象的原型( __proto__)。

原型鏈：

  • 當一個對象挪用的屬性/要領本身不存在時，就會去本身(__proto__ )關聯的先輩 prototype 對象上去找
  • 假如沒找到，就會去該 prototype 原型 ( __proto__) 關聯的先輩 prototype 去找。順次類推，直到找到屬性/要領或 undefined 為止。從而形成了所謂的“原型鏈”

原型特性：

  • JavaScript對象是經由歷程援用來通報的，當修正原型時，與之相干的對象也會繼續這一轉變

10.JavaScript怎樣完成繼續

組織函數綁定：運用 call 或 apply 要領，將父對象的組織函數綁定在子對象上 

function Apple(size, num) {
    Fruit.apply(this, arguments);
    this.size = size;
    this.num = num;
}

ES6運用extends繼續 

class Apple extends Fruit{
    constructor() {
        super()
    }
}

實例繼續：將子對象的prototype指向父對象的一個實例 

Apple.prototype = new Fruit()
Apple.prototype.constructor = Apple

原型繼續 

function inherits(Child, Parent) {
    var F = function () {};
    F.prototype = Parent.prototype;
    Child.prototype = new F();
    Child.prototype.constructor = Child;
}

拷貝繼續：假如把父對象的一切屬性和要領，拷貝進子對象 

function extend(Child, Parent) {
  　　var p = Parent.prototype;
  　　var c = Child.prototype;
  　　for (var i in p) {
  　　　   c[i] = p[i];
  　　}
}

11.什麼是window對象，什麼是Document對象

  • Window 對象示意當前閱讀器的窗口，是JavaScript的頂級對象。
  • 我們建立的一切對象、函數、變量都是 Window 對象的成員。
  • Window 對象的要領和屬性是在全局局限內有用的。
  • Document 對象是 HTML 文檔的根節點與一切其他節點（元素節點，文本節點，屬性節點, 解釋節點）
  • Document 對象使我們能夠經由歷程劇本對 HTML 頁面中的一切元素舉行接見
  • Document 對象是 Window 對象的一部份，可經由歷程 window.document 屬性對其舉行接見

12. 在一個DOM上同時綁定兩個點擊事宜：一個用捕捉，一個用冒泡。事宜會實行頻頻，先實行冒泡照樣捕捉？

  • 該DOM上的事宜假如被觸發，會實行兩次（實行次數即是綁定次數）
  • 假如該DOM是目的元素，則按事宜綁定遞次實行，不辨別冒泡/捕捉
  • 假如該DOM是處於事宜流中的非目的元素，則先實行捕捉，后實行冒泡

13. 事宜的代辦/託付

  • 事宜託付是指將事宜綁定目的元素的到父元素上，應用冒泡機制觸發該事宜

長處：

  • 能夠削減事宜註冊，節約大批內存佔用
  • 能夠將事宜應用於動態增加的子元素上

瑕玷：

  • 運用不當會形成事宜在不應該觸發時觸發

14. 編寫一個要領 求一個字符串的字節長度

function GetBytes(str){
    var len = str.length;
    var bytes = len;
    for(var i=0; i<len; i++){
        if (str.charCodeAt(i) > 255) bytes++;
    }
    return bytes;
}
alert(GetBytes("你好,as"));

15. 枚舉一下JavaScript數組和對象有哪些原生要領？

數組：

arr.concat(arr1, arr2, arrn);
arr.join(",");
arr.sort(func);
arr.pop();
arr.push(e1, e2, en);
arr.shift();
arr.unshift(e1, e2, en);
arr.reverse();
arr.slice(start, end);
arr.splice(index, count, e1, e2, en);
arr.indexOf(el);
arr.includes(el); // ES6

對象：

object.hasOwnProperty(prop);
object.propertyIsEnumerable(prop);
object.valueOf();
object.toString();
object.toLocaleString();
Class.prototype.isPropertyOf(object);
    原文作者：ZJW0215
    原文地址: https://segmentfault.com/a/1190000015294769
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞