天天看點
傳回

JavaScript面試題②（JS面試題②）

1.解釋 JavaScript 中的作用域與變量聲明提升？

參考答案：

我對作用域的了解是隻會對某個範圍産生作用，而不會對外産生影響的封閉空間。在這樣的一些空間裡，外部不能通路内部變量，但内部可以通路外部變量。

所有申明都會被提升到作用域的最頂上

同一個變量申明隻進行一次，并且是以其他申明都會被忽略

函數聲明的優先級優于變量申明，且函數聲明會連帶定義一起被提升

2.Node. js 的适用場景？

參考答案：比如：RESTFUL API、實時聊天、用戶端邏輯強大的單頁 APP，具體的例子比如說：本地化的線上音樂應用，本地化的線上搜尋應用，本地化的線上 APP 等。

3.bind、call、apply 的差別

call 和 apply 其實是一樣的，差別就在于傳參時參數是一個一個傳或者是以一個數組的方式來傳。

call 和 apply 都是在調用時生效，改變調用者的 this 指向。

bind 也是改變 this 指向，不過不是在調用時生效，而是傳回一個新函數。

4.使用構造函數的注意點

參考答案：

  1. 一般情況下構造函數的首字母需要大寫，因為我們在看到一個函數首字母大寫的情況，就認定這是一個構造函數，需要跟new關鍵字進行搭配使用，建立一個新的執行個體（對象）
  2. 構造函數在被調用的時候需要跟new關鍵字搭配使用。
  3. 在構造函數内部通過this+屬性名的形式為執行個體添加一些屬性和方法。
  4. 構造函數一般不需要傳回值

5.數組的常用方法

參考答案：

  1. Array. map()

    此方法是将數組中的每個元素調用一個提供的函數，結果作為一個新的數組傳回，并沒有改變原來的數組

  2. Array. forEach()

    此方法是将數組中的每個元素執行傳進提供的函數，沒有傳回值，直接改變原數組，注意和 map 方法區分

  3. Array. filter()

    此方法是将所有元素進行判斷，将滿足條件的元素作為一個新的數組傳回

  4. Array. every()

    此方法是将所有元素進行判斷傳回一個布爾值，如果所有元素都滿足判斷條件，則傳回 true，否則為 false

  5. Array. some()

    此方法是将所有元素進行判斷傳回一個布爾值，如果存在元素都滿足判斷條件，則傳回 true，若所有元素都不滿足判斷條件，則傳回 false

  6. Array. reduce()

    此方法是所有元素調用傳回函數，傳回值為最後結果, 傳入的值必須是函數類型

  7. Array. push()

    此方法是在數組的後面添加新加元素，此方法改變了數組的長度

  8. Array. pop()

    此方法在數組後面删除最後一個元素，并傳回數組，此方法改變了數組的長度

  9. Array. shift()

    此方法在數組後面删除第一個元素，并傳回數組，此方法改變了數組的長度

  10. Array.unshift()

    此方法是将一個或多個元素添加到數組的開頭，并傳回新數組的長度

  11. Array.isArray()

    判斷一個對象是不是數組，傳回的是布爾值

  12. Array.concat()

    此方法是一個可以将多個數組拼接成一個數組

6.字元串常用操作

參考答案：

  • charAt(index): 傳回指定索引處的字元串
  • charCodeAt(index): 傳回指定索引處的字元的 Unicode 的值
  • concat(str1, str2, … ): 連接配接多個字元串，傳回連接配接後的字元串的副本
  • fromCharCode(): 将 Unicode 值轉換成實際的字元串
  • indexOf(str): 傳回 str 在父串中第一次出現的位置，若沒有則傳回-1
  • lastIndexOf(str): 傳回 str 在父串中最後一次出現的位置，若沒有則傳回-1
  • match(regex): 搜尋字元串，并傳回正規表達式的所有比對
  • replace(str1, str2):str1 也可以為正規表達式，用 str2 替換 str1
  • search(regex): 基于正規表達式搜尋字元串，并傳回第一個比對的位置
  • slice(start, end)：傳回字元索引在 start 和 end（不含）之間的子串
  • split(sep，limit)：将字元串分割為字元數組，limit 為從頭開始執行分割的最大數量
  • substr(start，length)：從字元索引 start 的位置開始，傳回長度為 length 的子串
  • substring(from, to)：傳回字元索引在 from 和 to（不含）之間的子串
  • toLowerCase()：将字元串轉換為小寫
  • toUpperCase()：将字元串轉換為大寫

  • valueOf()：傳回原始字元串值

    7.作用域的概念及作用

    參考答案：

  • 作用域 ： 起作用的一塊區域
  • 作用域的概念： 對變量起保護作用的一塊區域
  • 作用： 作用域外部無法擷取到作用域内部聲明的變量，作用域内部能夠擷取到作用域外界聲明的變量。

8.作用域的分類

參考答案：塊作用域、詞法作用域、動态作用域

解析：

1 塊作用域 花括号 {}

2 詞法作用域（js 屬于詞法作用域） 作用域隻跟在何處被建立有關系，跟在何處被調用沒有關系

3 動态作用域 作用域隻跟在何處被調用有關系，跟在何處被建立沒有關系

9. js 屬于哪種作用域

參考答案：詞法作用域（函數作用域）

10.自執行函數? 用于什麼場景？好處?

參考答案：

自執行函數: 1、聲明一個匿名函數 2、馬上調用這個匿名函數。

作用：建立一個獨立的作用域。

好處：防止變量彌散到全局，以免各種 js 庫沖突。隔離作用域避免污染，或者截斷作用域鍊，避免閉包造成引用變量無法釋放。利用立即執行特性，傳回需要的業務函數或對象，避免每次通過條件判斷來處理

場景：一般用于架構、插件等場景

11.多個頁面之間如何進行通信

參考答案：有如下幾個方式：

  1. cookie
  2. web worker
  3. localeStorage 和 sessionStorage

12.css 動畫和 js 動畫的差異

參考答案：

  1. 代碼複雜度，js 動畫代碼相對複雜一些
  2. 動畫運作時，對動畫的控制程度上，js 能夠讓動畫，暫停，取消，終止，css 動畫不能添加事件
  3. 動畫性能看，js 動畫多了一個 js 解析的過程，性能不如 css 動畫好

13.如何做到修改 url 參數頁面不重新整理

參考答案：

HTML5 引入了 history.pushState() 和 history.replaceState() 方法，它們分别可以添加和修改曆史記錄條目。

14.數組方法 pop() push() unshift() shift()

參考答案：

  • arr. pop() 從後面删除元素，隻能是一個，傳回值是删除的元素
  • arr. push() 從後面添加元素，傳回值為添加完後的數組的長度
  • arr. unshift() 從前面添加元素, 傳回值是添加完後的數組的長度
  • arr. shift() 從前面删除元素，隻能删除一個 傳回值是删除的元素

15.事件綁定與普通事件有什麼差別

參考答案：

  • 用普通事件添加相同僚件，下面會覆寫上面的，而事件綁定不會
  • 普通事件是針對非 dom 元素，事件綁定是針對 dom 元素的事件

16.IE 和标準下有哪些相容性的寫法

參考答案：

var ev = ev || window.event;
document.documentElement.clientWidth || document.body.clientWidth;
var target = ev.srcElement || ev.target;

17.如何阻止冒泡與預設行為

參考答案：

  • 阻止冒泡行為：非 IE 浏覽器 stopPropagation()，IE 浏覽器 window. event. cancelBubble = true
  • 阻止預設行為：非 IE 浏覽器 preventDefault()，IE 浏覽器 window. event. returnValue = false

18.js 中 this 閉包 作用域

參考答案：

this：指向調用上下文

閉包：定義一個函數就開辟了一個局部作用域，整個 js 執行環境有一個全局作用域

作用域：一個函數可以通路其他函數中的變量（閉包是一個受保護的變量空間）

19.javascript 的本地對象，内置對象和宿主對象

參考答案：

  1. 本地對象

    ECMA-262 把本地對象（native object）定義為“獨立于宿主環境的 ECMAScript 實作提供的對象"。簡單來說，本地對象就是 ECMA-262 定義的類（引用類型）。它們包括：Object、Function、Array、String、Boolean、Number、Date、RegExp、Error、EvalError、RangeError、ReferenceError、SyntaxError、TypeError、URIError

  2. 内置對象

    JS中内置了17個對象，常用的是Array對象、Date對象、正規表達式對象、string對象、Global對象

  3. 宿主對象

    由ECMAScript實作的宿主環境提供的對象，可以了解為：浏覽器提供的對象。所有的BOM和DOM都是宿主對象。

20. 事件冒泡與事件捕獲

參考答案：

事件冒泡：由最具體的元素（目标元素）向外傳播到最不具體的元素

事件捕獲：由最不确定的元素到目标元素

21.複雜資料類型如何轉變為字元串

參考答案：

  • 首先，會調用 valueOf 方法，如果方法的傳回值是一個基本資料類型，就傳回這個值
  • 如果調用 valueOf 方法之後的傳回值仍舊是一個複雜資料類型，就會調用該對象的 toString 方法
  • 如果 toString 方法調用之後的傳回值是一個基本資料類型，就傳回這個值，
  • 如果 toString 方法調用之後的傳回值是一個複雜資料類型，就報一個錯誤。

22.javascript 中 this 的指向問題

參考答案：

  • 全局環境、普通函數（非嚴格模式）指向 window
  • 普通函數（嚴格模式）指向 undefined
  • 函數作為對象方法及原型鍊指向的就是上一級的對象
  • 構造函數指向構造的對象
  • DOM 事件中指向觸發事件的元素

23.call 與 apply 差別

參考答案：第二個參數的類型不同

解析：

  1. call 和 apply 的作用，完全一樣，唯一的差別就是在參數上面。
  2. call 接收的參數不固定，第一個參數是函數體内 this 的指向，第二個參數以下是依次傳入的參數。
  3. apply 接收兩個參數，第一個參數也是函數體内 this 的指向。第二個參數是一個集合對象（數組或者類數組）

24.異步加載 js 的方法

參考答案：

方案一：

25.去除字元串裡面的重複字元

參考答案：

最簡單的方式

26.求數組的最大值

參考答案：Math. max. apply(null, 數組)

var a = [1, 2, 3, 5];
alert(Math.max.apply(null, a)); //最大值
alert(Math.min.apply(null, a)); //最小值

27.原型的作用 以及什麼是原型

參考答案：作用：實作資源共享

什麼是原型: 執行個體在被建立的那一刻，構造函數的 prototype 屬性的值。

28. javascript 裡面的繼承怎麼實作，如何避免原型鍊上面的對象共享

參考答案：用構造函數和原型鍊的混合模式去實作繼承，避免對象共享可以參考經典的 extend()函數，很多前端架構都有封裝的，就是用一個空函數當做中間變量

29.說說你對作用域鍊的了解

參考答案：作用域鍊的作用是保證執行環境裡有權通路的變量和函數是有序的，作用域鍊的變量隻能向上通路，變量通路到 window 對象即被終止，作用域鍊向下通路變量是不被允許的。

30.JavaScript 原型，原型鍊 ? 有什麼特點？

  • 原型對象也是普通的對象，是對象一個自帶隐式的 proto 屬性，原型也有可能有自己的原型，如果一個原型對象的原型不為 null 的話，我們就稱之為原型鍊。
  • 原型鍊是由一些用來繼承和共享屬性的對象組成的（有限的）對象鍊。

31.js 延遲加載的方式有哪些？

參考答案：defer 和 async、動态建立 DOM 方式（用得最多）、按需異步載入 js

32.分别闡述 split(), slice(), splice(), join()？

參考答案：

  • join()用于把數組中的所有元素拼接起來放入一個字元串。所帶的參數為分割字元串的分隔符，預設是以逗号分開。歸屬于 Array
  • split()即把字元串分離開，以數組方式存儲。歸屬于 Stringstring
  • slice() 方法可從已有的數組中傳回標明的元素。該方法并不會修改數組，而是傳回一個子數組。如果想删除數組中的一段元素，應該使用方法 Array. splice()

  • splice() 方法向/從數組中添加/删除項目，然後傳回被删除的項目。傳回的是含有被删除的元素的數組。

    33.document. write 和 innerHTML 的差別?

    參考答案：

    document. write 是重寫整個 document, 寫入内容是字元串的 html 2. innerHTML 是 HTMLElement 的屬性，是一個元素的内部 html 内容

34.讓你自己設計實作一個 requireJS，你會怎麼做？

參考答案：核心是實作 js 的加載子產品，維護 js 的依賴關系，控制好檔案加載的先後順序

35.requireJS 的核心原理是什麼？（如何動态加載的？如何避免多次加載的？如何緩存的？）

參考答案：核心是 js 的加載子產品，通過正則比對子產品以及子產品的依賴關系，保證檔案加載的先後順序，根據檔案的路徑對加載過的檔案做了緩存

36.用原生 JavaScript 的實作過什麼功能嗎？

參考答案：輪播圖、手風琴、放大鏡、3D動畫效果等，切記，所答的一定要知道實作原理！，不知道還不如不說！

37.BOM 對象有哪些，列舉 window 對象？

參考答案：

1、window對象 ，是JS的最頂層對象，其他的BOM對象都是window對象的屬性；

2、document對象，文檔對象；

3、location對象，浏覽器目前URL資訊；

4、navigator對象，浏覽器本身資訊；

5、screen對象，用戶端螢幕資訊；

6、history對象，浏覽器通路曆史資訊；

38.什麼是三元表達式？“三元”表示什麼意思？

參考答案：三元如名字表示的三元運算符需要三個操作數。

文法是 條件 ? 結果1 : 結果2; . 這裡你把條件寫在問号(?)的前面後面跟着用冒号(:)分隔的結果1和結果2。滿足條件時結果1否則結果2。

39.我們給一個 dom 同時綁定兩個點選事件，一個用捕獲，一個用冒泡，你來說下會執行幾次事件，然後會先執行冒泡還是捕獲

參考答案：所有事件的順序是：其他元素捕獲階段事件 -> 本元素代碼順序事件 -> 其他元素冒泡階段事件 。

40.知道什麼是 webkit 麼? 知道怎麼用浏覽器的各種工具來調試和 debug 代碼麼?

參考答案：Webkit 是浏覽器引擎，包括 html 渲染和 js 解析功能，手機浏覽器的主流核心，與之相對應的引擎有 Gecko（Mozilla Firefox 等使用）和 Trident（也稱 MSHTML，IE 使用）。 對于浏覽器的調試工具要熟練使用，主要是頁面結構分析，背景請求資訊檢視，js 調試工具使用，熟練使用這些工具可以快速提高解決問題的效率

41.JavaScript 的循環語句有哪些？

參考答案：while for do while forEach

42.作用域-編譯期執行期以及全局局部作用域問題

參考答案：js 執行主要的兩個階段：預解析和執行期

43.如何添加 html 元素的事件，有幾種方法？請列舉

參考答案：直接在标簽裡添加；在元素上添加、使用事件注冊函數添加

44.事件綁定的方式

參考答案：

嵌入 dom

<button onclick="func()">按鈕</button>

直接綁定

btn.onclick = function() {};

事件監聽

btn.addEventListener("click", function() {});
javascript 面試 node.js
上一篇: 【面試題】Vue面試題整理
下一篇: 物聯網記——《數通》：子網劃分和ICMP

繼續閱讀