主頁 > 軟體設計 > 那些JS中常見的面試題及知識點

那些JS中常見的面試題及知識點

2020-11-12 16:48:29 軟體設計

1.什么是閉包

? 當一個函式的回傳值是另一個函式,回傳的那個函式如果呼叫了父函式的內部變數,且在外部被執行就產生了閉包

特性

? 1.函式套函式,

? 2.內部函式訪問外部函式變數,引數

? 3.變數和引數不會被垃圾回識訓制回收

優點

? 1.變數長期住在在記憶體中

? 2.不會造成全域污染

? 3.私有成員的存在

缺點

? 常駐記憶體增大記憶體的使用量,使用不當會造成記憶體的泄露

2.原型和原型鏈

? 原型概念:

? 原型概念:jsvascript都包含了一個proto內部屬性,這個屬性對應的是自身,

? 除了原型proto之外,還有prototype屬性,當函式物件作為建構式創建實體時,prototype屬性值將被作為 實體物件的原型proto

? 原型鏈的概念:原型鏈當一個物件呼叫自身不存在的物件或者方法就會去自己proto關聯的前輩prototype物件上去找,如果沒有找到,就會去prototype原型proto關聯的前輩prototype,依次類推直到undefined,這就是原型鏈,

? 例如:B繼承A的原型上的方法,C繼承B原型上的方法,這時C._proto_指向B的原型,B._proto指向A的原型這就行程了原型鏈

? 隱式原型:用來構成原型鏈,實作基于原型的繼承

? 顯示原型:用來實作原型的繼承與屬性共享

3.組合繼承

? // 父

? function Person(name, age) {

? this.name = name

? this.age = age

? //方法一

? // this.say=function(){

? // console.log(this.name)

? // }

? }

? //方法二

? Person.prototype.say = function () { console.log(this.name) }

? // 子

? function stu(name, age) {

? Person.call(this, name, age)

? }

? //繼承他的方法

? stu.prototype.say = Person.prototype.say

? var s = new stu(“張三”, 33)

? console.log(s)

4.說一下JS原生事件如何系結

? 一、是html事件處理程式

? html事件現在早已不用了,就是在html各種標簽上直接添加事件,類似于css的行內樣式,缺點是不好維護

? 例如:<button οnclick="時間處理函式”>點我

? 二、是DOM0級事件處理程式

? 目前在PC端用的還是比較多的系結事件方式,兼容性也好,主要是先獲取dom元素,然后直接給dom元 素添加事件

		 DOM0事件如何移除呢?很簡單:btn.onclick=null;置為空就行

		優點:兼容性好

		缺點:只支持冒泡,不支持捕獲

? 三、是DOM2級事件處理程式

? 移動端用的比較多,也有很多優點,提供了專門的系結和移除方法

? 優點:支持給個元素系結多個相同事件,支持冒泡和捕獲事件機制

5.說一下JS原生常用dom操作方法?

? 查找:

? getElementByid,

? getElementsByTagName

? querySelector

? querySelectorAll

? 插入:

? appendChild

? insertBefore

? 洗掉:

? removeChild

? 克隆:

? cloneNode

? 設定和獲取屬性:

? setAttribute(“屬性名”,”值”)

? getAttibute(“屬性名”)

6.ES6新增特性

? 1.新增了塊級作用域(let,const)

? 2.提供了定義類的語法糖(class)

? 3.新增了一種基本資料型別(Symbol)

? 4.新增了變數的解構賦值

? 5.函式引數允許設定默認值,引入了rest引數,新增了箭頭函式

? 6.陣列新增了一些API,如 isArray / from / of 方法;陣列實體新增了 entries(),keys() 和 values() 等方法

? 7.物件和陣列新增了擴展運算子

? 8.ES6 新增了模塊化(import/export)

? 9.ES6 新增了 Set 和 Map 資料結構

? 10.ES6 原生提供 Proxy 建構式,用來生成 Proxy 實體

? 11.ES6 新增了生成器(Generator)和遍歷器(Iterator)

7.JS設計模式有哪些(常見的三種)

? 1.單例模式

? 2.工廠模式

? 3.建構式模式

8.說一下你對JS面向物件的理解

JS面向物件主要基于function來實作的,通過function來模擬類,通過prototype來實作類方法的共享

9.說一下JS陣列常用方法

push

pop

unshift

shift

splice

join

concat

forEach

filter

map

sort

some

every

10.說一下JS陣列內置遍歷方法有哪些和區別

? forEach

? 這個方法是為了取代for回圈遍歷陣列的,回傳值為undefined

? filter

? 是一個過濾遍歷的方法,如果回傳條件為true,則回傳滿足條件為true的新陣列

? map

? 這個map方法主要對陣列的復雜邏輯處理時用的多,特別是react中遍歷資料,也經常用到,寫法和forEach 類似

? some

? 這個some方法用于只要陣列中至少存在一個滿足條件的結果回傳值就為true,否則回傳fasel

? 寫法和forEach類似

? every

? 這個every方法用于陣列中每一項都得滿足條件時,才回傳true,否則回傳false, 寫法和forEach類似

11.說一下JS作用域

在 JavaScript 中, 作用域為可訪問變數,物件,函式的集合,

1.JavaScript 區域作用域

? 變數在函式內宣告,變數為區域作用域,

? 區域變數:只能在函式內部訪問

2.JavaScript全域作用域

? 也就是定義在window下的變數范圍,在任何地方都可以訪問,

3.JavaScript塊級作用域

? 塊級作用域:簡單來說用let和const在任意的代碼塊中定義的變數都認為是塊級作用域中的變數

注:

? 1. 盡量不要使用全域變數,因為容易導致全域的污染,命名沖突,對bug查找不利,

  2. 而所謂的作用域鏈就是由最內部的作用域往最外部,查找變量的程序.形成的鏈條就是作用域鏈

12. 從輸入URL到頁面加載完中間發生了什么

? 1.DNS決議(決議URL對應的IP

? 2.TCP 連接(三次握手)

? 3.發送 HTTP 請求

? 4.服務器處理請求并回傳需要的資料

? 5.瀏覽器決議渲染頁面

? 6.連接結束(四次揮手)

? 三次握手

? 三次握手是連接協議

? 四次揮手

? 關閉連接是四次協議

13.JS事件代理(也稱事件委托)是什么,及實作原理

JS事件代理就是通過給父級元素系結事件,不給子級元素系結事件,然后當點擊子級元素時,通過事件冒泡機制在其系結的父元素上觸發事件處理函式主要目的是為了提升性能

? 特別是給動態添加的元素系結事件,這個特別起作用

14.說一下js資料型別有哪些

js資料型別有:

? 1.基本資料型別:

? number

? string

? Boolean

? null

? undefined

? symbol(ES6新增)

? 2.復合型別

? Object

? function

15.說一下 call,apply,bind區別

? call,apply,bind主要作用都是改變this指向的,但使用上略有區別

? call和apply的主要區別是在傳遞引數上不同

? 1.call后面傳遞的引數是以逗號的形式分開的

? 2.apply傳遞的引數是陣列形式

? bind回傳的是一個函式形式如果要執行,則后面要再加一個小括號

16.JavaScript的作用域鏈理解

? 其本質是JavaScript在執行程序中會創造可執行背景關系,可執行背景關系中的詞法環境中含有外部詞法環境的參考,我們可以通過這個參考獲取外部詞法環境的變數、宣告等,這些參考串聯起來一直指向全域的詞法環境,因此形成了作用域鏈,

17.ES6模塊與CommonJS模塊有什么區別

ES6 Module和CommonJS模塊的區別:
CommonJS是對模塊的淺拷貝,ES6 Module是對模塊的參考,即ES6 Module只存只讀,不能改變其值,具體點就是指標指向不能變,類似const
import的介面是read-only(只讀狀態),不能修改其變數值, 即不能修改其變數的指標指向,但可以改變變數內部指標指向,可以對commonJS對重新賦值(改變指標指向),

ES6 Module和CommonJS模塊的共同點:
CommonJS和ES6 Module都不可以對引入的物件進行賦值,即對物件內部屬性的值進行改變,

18.null與undefined的區別是什么

? null表示為空,代表此處不應該有值的存在,一個物件可以是null,代表是個空物件,而null本身也是物件,

? undefined表示『不存在』,JavaScript是一門動態型別語言,成員除了表示存在的空值外,還有可能根本就不 存在(因為存不存在只在運行期才知道),這就是undefined的意義所在

19.箭頭函式的this指向

? 箭頭函式并沒有屬于自己的this,它的所謂的this是捕獲其所在背景關系的 this 值,作為自己的 this 值,并且由于 沒有屬于自己的this,而箭頭函式是不會被new呼叫的,這個所謂的this也不會被改變.

20.async/await

是一套關于異步解決的方案

兩個作用1.求值關鍵字2.異步操作變為同步操作

  1. async會回傳一個promise物件,執行時遇到await就會先回傳,觸發異步操作完成后,再接著執行函式后面的陳述句
  2. 優勢就在于改善pramise的.then鏈
  3. await必須在async的函式內部使用
  4. awati后面必須要跟一個promise(不是的話用reslove轉換他)
  5. await的回傳結果就是后面promise執行的結果

21.async/await相比于Promise的優勢

1.代碼讀起來更加同步,改善Promise.then鏈

2.Promise傳遞中間值非常麻煩,async/await幾乎是同步的寫法,看著簡潔明了

3.錯誤處理友好,async/await可以用成熟的try/catch,Promise的錯誤捕獲非常冗余

4.除錯友好,Promise的除錯很差,

22.JavaScript的基本型別和復雜型別是儲存在哪里的

基本型別儲存在堆疊中

復雜型別會儲存在記憶體堆中

23.堆疊和堆的區別

堆疊:

1.存盤基本資料型別

2.存盤空間小

3.查找迅速性能高

堆:

1.存多個值得復合型別

2.存盤空間大

3.查找速度慢性能較低

24.深拷貝和淺拷貝的區別

深拷貝和淺拷貝是針對復雜的資料型別來說的淺拷貝只拷貝一層,深拷貝是層層拷貝

深拷貝:

復制變數值,對于非基本型別的變數,遞回到基本型別再復制,與原物件完全隔離互不影響,

最簡單的實作是json.parse(json.stringfy(obj))

淺拷貝:

復制屬性,只拷貝第一層屬性,當前物件的屬性值是參考型別時,實質復制的是參考,參考的值也會發生變化

可以使用for in、object.assign、擴展運算子、遞回等來實作

25.瀏覽器是如何渲染頁面的

渲染的流程如下:

1.決議HTML檔案,創建DOM樹,

自上而下,遇到任何樣式(link、style)與腳本(script)都會阻塞(外部樣式不阻塞后續外部腳本的加載),

2.決議CSS,優先級:瀏覽器默認設定<用戶設定<外部樣式<行內樣式<HTML中的style樣式;

3.將CSS與DOM合并,構建渲染樹(Render Tree)

4.布局和繪制,重繪(repaint)和重排(reflow)

26.json和jsonp的區別

? json回傳的是一串json格式資料;而jsonp回傳的是腳本代碼

? jsonp跨域的一種方式

? 原理:

? 因為瀏覽器有同源策略,所有ajax不能請求資料,但script標簽不受同源策略的影響,所以通過動態創建script標簽來加載服務器回傳的資料,資料就是一個函式的呼叫

27.如何阻止冒泡

冒泡型事件:事件按照從最特定的事件目標到最不特定的事件目標(document物件)的順序觸發,

1.w3c的方法是e.stopPropagation()

2.IE則是使用e.cancelBubble = true

28.如何阻止默認事件

1.w3c的方法是e.preventDefault()

2.IE則是使用e.returnValue = false

29.JavaScript事件流模型都有什么

“事件冒泡”:事件開始由最具體的元素接受,然后逐級向上傳播

“事件捕捉”:事件由最不具體的節點先接收,然后逐級向下,一直到最具體的

“DOM 事件流”:三個階段:事件捕捉,目標階段,事件冒泡

30.請你談談cookie的弊端

1.Cookie 數量和長度的限制,每個 domain 最多只能有 20 條 cookie,每個 cookie 長度 不能超過 4KB,否則會被截掉,

2.安全性問題,如果 cookie 被人攔截了,那人就可以取得所有的 session 資訊,即使加密也與事無補,因為攔截者并不需要知道 cookie 的意義,他只要原樣轉發 cookie 就可以達到目的了,

3.有些狀態不可能保存在客戶端,

31.哪些操作會造成記憶體泄漏

  1. setTimeout 的第一個引數使用字串而非函式的話,會引發記憶體泄漏,
  2. 閉包
  3. 控制臺日志
  4. 回圈(在兩個物件彼此參考且彼此保留時,就會產生一個回圈)

32.如何優化自己的代碼

1.代碼重用

2.避免全域變數(命名空間,封閉空間,模塊化 mvc…)

3.拆分函式避免函式過于臃腫

33.解釋 JavaScript 中的相等性

JavaScript 中有嚴格比較和型別轉換比較:

  • 嚴格比較(例如 ===)在不允許強制轉型的情況下檢查兩個值是否相等;
  • 抽象比較(例如 ==)在允許強制轉型的情況下檢查兩個值是否相等,

34. 你能解釋一下 ES5 和 ES6 之間的區別嗎

  • ECMAScript 5(ES5):ECMAScript 的第 5 版,于 2009 年標準化,這個標準已在所有現代瀏覽器中完全實作,
  • ECMAScript 6(ES6)或 ECMAScript 2015(ES2015):第 6 版 ECMAScript,于 2015 年標準化,這個標準已在大多數現代瀏覽器中部分實作,

35.解釋 JavaScript 中“undefined”和“not defined”之間的區別

  1. not defined一般會出現在控制臺,提示錯誤:“xxx is not defined”表示xxxx沒有被定義,是未定義的,
  2. undefined一般是表示JS中變數宣告了如:var str;但是后續沒有對其進行賦值就直接alert等進行輸出操作,這時會提示undefined,即變數或者物件已經被定義但是沒有被賦值所以不知道該變數用來做什么,此時console.log該變數會是undefined,

36.什么是 JavaScript 中的提升操作

提升(hoisting)是 JavaScript 解釋器將所有變數和函式宣告移動到當前作用域頂部的操作,有兩種型別的提升:

  • 變數提升——非常少見
  • 函式提升——常見

無論 var(或函式宣告)出現在作用域的什么地方,它都屬于整個作用域,并且可以在該作用域內的任何地方訪問它,

轉載請註明出處,本文鏈接:https://www.uj5u.com/ruanti/212177.html

標籤:其他

上一篇:IntelliJ IDEA 配置Tomcat 控制臺亂碼解決方案

下一篇:前端面試題整合(JS從看懂到看開)

標籤雲
其他(157675) Python(38076) JavaScript(25376) Java(17977) C(15215) 區塊鏈(8255) C#(7972) AI(7469) 爪哇(7425) MySQL(7132) html(6777) 基礎類(6313) sql(6102) 熊猫(6058) PHP(5869) 数组(5741) R(5409) Linux(5327) 反应(5209) 腳本語言(PerlPython)(5129) 非技術區(4971) Android(4554) 数据框(4311) css(4259) 节点.js(4032) C語言(3288) json(3245) 列表(3129) 扑(3119) C++語言(3117) 安卓(2998) 打字稿(2995) VBA(2789) Java相關(2746) 疑難問題(2699) 细绳(2522) 單片機工控(2479) iOS(2429) ASP.NET(2402) MongoDB(2323) 麻木的(2285) 正则表达式(2254) 字典(2211) 循环(2198) 迅速(2185) 擅长(2169) 镖(2155) 功能(1967) .NET技术(1958) Web開發(1951) python-3.x(1918) HtmlCss(1915) 弹簧靴(1913) C++(1909) xml(1889) PostgreSQL(1872) .NETCore(1853) 谷歌表格(1846) Unity3D(1843) for循环(1842)

熱門瀏覽
  • 面試突擊第一季,第二季,第三季

    第一季必考 https://www.bilibili.com/video/BV1FE411y79Y?from=search&seid=15921726601957489746 第二季分布式 https://www.bilibili.com/video/BV13f4y127ee/?spm_id_fro ......

    uj5u.com 2020-09-10 05:35:24 more
  • 第三單元作業總結

    1.前言 這應該是本學期最后一次寫作業總結了吧。總體來說,對作業的節奏也差不多掌握了,作業做起來的效率也更高了。雖然和之前的作業一樣,作業中都要用到新的知識,但是相比之前,更加懂得了如何利用工具以及資料。雖然之間卡過殼,但總體而言,這幾次作業還算完成的比較好。 2.作業程序總結 相比前兩個單元,此單 ......

    uj5u.com 2020-09-10 05:35:41 more
  • 北航OO(2020)第四單元博客作業暨課程總結博客

    北航OO(2020)第四單元博客作業暨課程總結博客 本單元作業的架構設計 在本單元中,由于UML圖具有比較清晰的樹形結構,因此我對其中需要進行查詢操作的元素進行了包裝,在樹的父節點中存盤所有孩子的參考。考慮到性能問題,我采用了快取機制,一次查詢后盡可能快取已經遍歷過的資訊,以減少遍歷次數。 本單元我 ......

    uj5u.com 2020-09-10 05:35:48 more
  • BUAA_OO_第四單元

    一、UML決議器設計 ? 先看下題目:第四單元實作一個基于JDK 8帶有效性檢查的UML(Unified Modeling Language)類圖,順序圖,狀態圖分析器 MyUmlInteraction,實際上我們要建立一個有向圖模型,UML中的物件(元素)可能與同級元素連接,也可與低級元素相連形成 ......

    uj5u.com 2020-09-10 05:35:54 more
  • 6.1邏輯運算子

    邏輯運算子 1. && 短路與 運算式1 && 運算式2 01.運算式1為true并且運算式2也為true 整體回傳為true 02.運算式1為false,將不會執行運算式2 整體回傳為false 03.只要有一個運算式為false 整體回傳為false 2. || 短路或 運算式1 || 運算式2 ......

    uj5u.com 2020-09-10 05:35:56 more
  • BUAAOO 第四單元 & 課程總結

    1. 第四單元:StarUml檔案決議 本單元采用了圖模型決議UML。 UML檔案可以抽象為圖、子圖、邊的邏輯結構。 在實作中,圖的節點包括類、介面、屬性,子圖包括狀態圖、順序圖等。 采用了三次遍歷UML元素的方法建圖,第一遍遍歷建點,第二、三次遍歷設定屬性、連邊,實作圖物件的初始化。這里借鑒了一些 ......

    uj5u.com 2020-09-10 05:36:06 more
  • 談談我對C# 多型的理解

    面向物件三要素:封裝、繼承、多型。 封裝和繼承,這兩個比較好理解,但要理解多型的話,可就稍微有點難度了。今天,我們就來講講多型的理解。 我們應該經常會看到面試題目:請談談對多型的理解。 其實呢,多型非常簡單,就一句話:呼叫同一種方法產生了不同的結果。 具體實作方式有三種。 一、多載 多載很簡單。 p ......

    uj5u.com 2020-09-10 05:36:09 more
  • Python 資料驅動工具:DDT

    背景 python 的unittest 沒有自帶資料驅動功能。 所以如果使用unittest,同時又想使用資料驅動,那么就可以使用DDT來完成。 DDT是 “Data-Driven Tests”的縮寫。 資料:http://ddt.readthedocs.io/en/latest/ 使用方法 dd. ......

    uj5u.com 2020-09-10 05:36:13 more
  • Python里面的xlrd模塊詳解

    那我就一下面積個問題對xlrd模塊進行學習一下: 1.什么是xlrd模塊? 2.為什么使用xlrd模塊? 3.怎樣使用xlrd模塊? 1.什么是xlrd模塊? ?python操作excel主要用到xlrd和xlwt這兩個庫,即xlrd是讀excel,xlwt是寫excel的庫。 今天就先來說一下xl ......

    uj5u.com 2020-09-10 05:36:28 more
  • 當我們創建HashMap時,底層到底做了什么?

    jdk1.7中的底層實作程序(底層基于陣列+鏈表) 在我們new HashMap()時,底層創建了默認長度為16的一維陣列Entry[ ] table。當我們呼叫map.put(key1,value1)方法向HashMap里添加資料的時候: 首先,呼叫key1所在類的hashCode()計算key1 ......

    uj5u.com 2020-09-10 05:36:38 more
最新发布
  • 【中介者設計模式詳解】C/Java/JS/Go/Python/TS不同語言實作

    * 中介者模式是一種行為型設計模式,它可以用來減少類之間的直接依賴關系,
    * 將物件之間的通信封裝到一個中介者物件中,從而使得各個物件之間的關系更加松散。
    * 在中介者模式中,物件之間不再直接相互互動,而是通過中介者來中轉訊息。 ......

    uj5u.com 2023-04-20 08:20:47 more
  • 露天煤礦現場調研和交流案例分享

    他們集團的資訊化公司及研究院在一個礦區正在做智能礦山的統一平臺的 試點,專案投資大概1億,包括了礦山的各方面的內容,顯示得我們這次交流有點多余。他們2年前開始做智能礦山的規劃,有很多煤礦行業專家的加持,他們的描述是非常完美,但是去年底應該上線的平臺,現在還沒有看到影子。他們確實有很多場景需求,但是被... ......

    uj5u.com 2023-04-20 08:20:25 more
  • 《社區人員管理》實戰案例設計&個人案例分享

    設計是一個讓人夢想成真程序,開始編碼、測驗、除錯之前進行需求分析和架構設計,才能保證關鍵方面都做正確 ......

    uj5u.com 2023-04-20 08:20:17 more
  • 軟體架構生態化-多角色交付的探索實踐

    作為一個技術架構師,不僅僅要緊跟行業技術趨勢,還要結合研發團隊現狀及痛點,探索新的交付方案。在日常中,你是否遇到如下問題 “ 業務需求排期長研發是瓶頸;非研發角色感受不到研發技改提效的變化;引入ISV 團隊又擔心質量和安全,培訓周期長“等等,基于此我們探索了一種新的技術體系及交付方案來解決如上問題。 ......

    uj5u.com 2023-04-20 08:20:10 more
  • 【中介者設計模式詳解】C/Java/JS/Go/Python/TS不同語言實作

    * 中介者模式是一種行為型設計模式,它可以用來減少類之間的直接依賴關系,
    * 將物件之間的通信封裝到一個中介者物件中,從而使得各個物件之間的關系更加松散。
    * 在中介者模式中,物件之間不再直接相互互動,而是通過中介者來中轉訊息。 ......

    uj5u.com 2023-04-20 08:19:44 more
  • 露天煤礦現場調研和交流案例分享

    他們集團的資訊化公司及研究院在一個礦區正在做智能礦山的統一平臺的 試點,專案投資大概1億,包括了礦山的各方面的內容,顯示得我們這次交流有點多余。他們2年前開始做智能礦山的規劃,有很多煤礦行業專家的加持,他們的描述是非常完美,但是去年底應該上線的平臺,現在還沒有看到影子。他們確實有很多場景需求,但是被... ......

    uj5u.com 2023-04-20 08:19:07 more
  • 《社區人員管理》實戰案例設計&個人案例分享

    設計是一個讓人夢想成真程序,開始編碼、測驗、除錯之前進行需求分析和架構設計,才能保證關鍵方面都做正確 ......

    uj5u.com 2023-04-20 08:18:57 more
  • 軟體架構生態化-多角色交付的探索實踐

    作為一個技術架構師,不僅僅要緊跟行業技術趨勢,還要結合研發團隊現狀及痛點,探索新的交付方案。在日常中,你是否遇到如下問題 “ 業務需求排期長研發是瓶頸;非研發角色感受不到研發技改提效的變化;引入ISV 團隊又擔心質量和安全,培訓周期長“等等,基于此我們探索了一種新的技術體系及交付方案來解決如上問題。 ......

    uj5u.com 2023-04-20 08:18:49 more
  • 05單件模式

    #經典的單件模式 public class Singleton { private static Singleton uniqueInstance; //一個靜態變數持有Singleton類的唯一實體。 // 其他有用的實體變數寫在這里 //構造器宣告為私有,只有Singleton可以實體化這個類! ......

    uj5u.com 2023-04-19 08:42:51 more
  • 【架構與設計】常見微服務分層架構的區別和落地實踐

    軟體工程的方方面面都遵循一個最基本的道理:沒有銀彈,架構分層模型更是如此,每一種都有各自優缺點,所以請根據不同的業務場景,并遵循簡單、可演進這兩個重要的架構原則選擇合適的架構分層模型即可。 ......

    uj5u.com 2023-04-19 08:42:41 more