?

目錄

1. 簡述js的數(shù)據(jù)類型

2. Null和undefined的區(qū)別

3. Promise（resolve，reject）

4. Js ?DOM操作

5. Js ?事件綁定和事件監(jiān)聽的區(qū)別，冒泡

6. Js ?string對象

7. Js ?Array對象

8. 比較typeof與instanceof

9. 比較==與===

10. 數(shù)組深淺拷貝

11. 如何理解This

12. New操作符具體干了什么

13. Js原型鏈

14. Js作用域鏈和作用

15. JavaScript變量聲明提前

16. Js如何理解閉包，使用閉包的注意點(diǎn)

17. Js自執(zhí)行函數(shù)（匿名函數(shù)）

19. Js同源策略

20. Js加載時(shí)間線

21. 圖片輪播的思路

22. 垃圾回收機(jī)制方式及內(nèi)存管理

23. 什么叫優(yōu)雅降級(jí)和漸進(jìn)增強(qiáng)

24. 哪些操作會(huì)造成內(nèi)存泄漏

25. 對JSON的了解

26. JSON 與 JS 對象的關(guān)系

27. ?es6

28. ?webpack打包

29. 設(shè)計(jì)模式

30. MVC

31. VUE的MVVM的理解，如何實(shí)現(xiàn)

32. ?vue雙向綁定如何實(shí)現(xiàn)

33. ?vue狀態(tài)管理

34. 虛擬dom?

?

1.簡述js的數(shù)據(jù)類型

什么是js：

js是客戶端和服務(wù)器端的腳本語言，它就像一個(gè)人的靈魂一樣，賦予了人的一切交互動(dòng)作。

數(shù)據(jù)類型：

它的數(shù)據(jù)類型主要分為基本數(shù)據(jù)類型和引用類型，

基本數(shù)據(jù)類型又分為Undefined，Null，Boolean，Number，String

引用類型（保存在內(nèi)存中的對象）大多數(shù)看到的為object，和數(shù)組

2. Null和undefined的區(qū)別

（1）Null是一個(gè)表示“無”的對象，轉(zhuǎn)換為數(shù)值是0

（2）Undefined是一個(gè)表示“無”的原始值，轉(zhuǎn)為數(shù)值為NaN

（3）當(dāng)聲明的變量還未被初始化時(shí)候，變量默認(rèn)的值為undefined

（4）而null用來表示尚未存在的對象，常用來表示函數(shù)企圖返回一個(gè)不存在的對象

3. Promise（resolve，reject）

（1）它是一種es6新增特性，是一種語法糖，用于解決異步問題的思路，方案。

（2）es6中提供了then從而進(jìn)行鏈?zhǔn)秸{(diào)用，而catch可以捕獲then中發(fā)送的異常。

（3）它有三種狀態(tài) 初始化（pending），調(diào)用成功（pending=>fulfilled），調(diào)用失敗

（pending=>rejected），

（4）而promise狀態(tài)一旦改變就不會(huì)再次改變。

4. Js ?DOM操作

DOM代表文檔對象模型，負(fù)責(zé)文檔中各種對象的相互交互，它的操作包括

? （1）創(chuàng)建新節(jié)點(diǎn)

　　createDocumentFragment() //創(chuàng)建一個(gè)DOM片段 innerHTML，innerText大多數(shù)情況下，innerHTML更為快速且更加易用，每次操作DOM都要進(jìn)行一系列的重繪，而且所有修改操作是按順序同步執(zhí)行的，這個(gè)過程叫做回流，而重繪和回流都是瀏覽器最昂貴的操作）　　createElement() //創(chuàng)建一個(gè)具體的元素　　createTextNode() //創(chuàng)建一個(gè)文本節(jié)點(diǎn)

（2）添加、移除、替換、插入　　appendChild() //添加　　replaceChild() //替換　　insertBefore() //插入 removeChild() //移除

查詢：（主要有w3c的DOM規(guī)范查詢）

（1）document.getElementById(sle);也許就是最快的id選擇器了。

（2）document.getElementsByClassName(cla);慢于第一種;

（3）document.getElementsByName(na);

（4）document.getElementsByTagName(tag);

和選擇符API規(guī)范查詢 ?最核心的兩個(gè)方法

querySelector() ?接收一個(gè)css選則符，返回與該模式匹配的第一個(gè)元素

querySelectorAll() 接收一個(gè)css選則符，但返回的是所有匹配的元素

區(qū)別

（1）w3c的DOM規(guī)范查詢獲取的是動(dòng)態(tài)集合，選擇符API規(guī)范查詢獲取的是靜態(tài)集合

（2）盡管DOM規(guī)范的查詢效率高于選擇符API規(guī)范的查詢的效率，但是DOM規(guī)范的查詢僅僅局限于通過tag，name，id等查詢，如果想要更精確的查詢，找到你需要的節(jié)點(diǎn)，除非使用比較復(fù)雜的正則表達(dá)式，不然就要用選擇符api定義的規(guī)范來查詢。

5. Js ?事件綁定和事件監(jiān)聽的區(qū)別，冒泡

onclick事件只支持單個(gè)事件，如果添加會(huì)被覆蓋

addEventListener 則可以添加多個(gè)事件，而且該函數(shù)可以設(shè)置是否，冒泡捕獲

注：removeEventHandler 移除事件

事件冒泡：由具體的元素接受，然后逐級(jí)向上傳播

事件捕捉：事件由最不具體的節(jié)點(diǎn)先接收，然后逐級(jí)向下，一直到最具體的。

6. Js ?string對象

concat() – 將兩個(gè)或多個(gè)字符的文本組合起來，返回一個(gè)新的字符串。

Length()?– 返回字符串的長度，所謂字符串的長度是指其包含的字符的個(gè)數(shù)。

substring(start,end) –提取字符串的一部分。傳入?yún)?shù)是起始位置和結(jié)束位置。

slice(start,end) – 提取字符串的一部分，并返回一個(gè)新字符串。

replace(regexp/substr,replacement) – 用來查找匹配一個(gè)正則表達(dá)式的字符串，然后使用新字符串代替匹配的字符串。

split(separator,howmany) – 通過將字符串劃分成子串，將一個(gè)字符串做成一個(gè)字符串?dāng)?shù)組。

toLowerCase() – 將整個(gè)字符串轉(zhuǎn)成小寫字母。

toUpperCase() – 將整個(gè)字符串轉(zhuǎn)成大寫字母。

7. Js ?Array對象

arrObject.concat(arrayX,arrayX,......,arrayX) 連接兩個(gè)或更多的數(shù)組，并返回結(jié)果。

toString() 把數(shù)組轉(zhuǎn)換為字符串，并返回結(jié)果。

arrObject.join(separator) 把數(shù)組的所有元素放入一個(gè)字符串。元素通過指定的分隔符進(jìn)行分隔。

arrayObject.slice(start,end) 從已有的數(shù)組中返回選定的元素。

splice(2,0,”abc”) 刪除元素，并向數(shù)組添加新元素。

push() 向數(shù)組的末尾添加一個(gè)或更多元素，并返回新的長度。

unshift() 向數(shù)組的開頭添加一個(gè)或更多元素，并返回新的長度。

indexOf()返回?cái)?shù)組中某個(gè)指定的元素一次出現(xiàn)的位置，如果沒有返回-1

reverse() 顛倒數(shù)組中元素的順序。

pop() 刪除并返回?cái)?shù)組的最后一個(gè)元素。 ?

shift() 刪除并返回?cái)?shù)組的第一個(gè)元素

8. 比較typeof與instanceof

typeof的定義和用法：返回值是一個(gè)字符串，用來說明變量的數(shù)據(jù)類型。

Instanceof定義和用法：instanceof 用于判斷一個(gè)變量是否屬于某個(gè)對象的

9. 比較==與===

==在比較的時(shí)候可以自動(dòng)類型轉(zhuǎn)換

===用于嚴(yán)格比較?，不會(huì)進(jìn)行自動(dòng)轉(zhuǎn)換，要求進(jìn)行比較的操作數(shù)必須類型一致，不??一致時(shí)返回flase。

10. 數(shù)組深淺拷貝

（1）之所以會(huì)出現(xiàn)深淺拷貝問題，實(shí)質(zhì)上是由于JS對基本類型和引用類型的處理不同?；绢愋椭傅氖呛唵蔚臄?shù)據(jù)段，引用類型指的是對象，又因?yàn)閖s不允許我們直接操作內(nèi)存中的地址，所以我們對對象的操作，其實(shí)只是操作它的引用而已。

（2）淺拷貝的話其實(shí)也就是正常的賦值，基本類型也就是值的賦值，引用對象則為指針的復(fù)制，二者指向的是同一內(nèi)存。 而ES6 對象提供了?Object.assign()這個(gè)方法來實(shí)現(xiàn)淺復(fù)制?？梢园讶我舛鄠€(gè)源對象自身可枚舉的屬性拷貝給目標(biāo)對象，然后返回目標(biāo)對象。

（3）深拷貝則是增加了一個(gè)新的內(nèi)存，無論怎樣修改都不會(huì)影響其他的值。

有一種方法是使用JSON序列化，也就是先序列化為字符串，再解析還原成對象。但是json只支持簡單值，對象和數(shù)組三種類型，不支持變量，函數(shù)和對象實(shí)例，因此有短板。

11. 如何理解This

是js的一個(gè)關(guān)鍵字，This是基于函數(shù)的執(zhí)行環(huán)境綁定的。

如果有對象就指向調(diào)用對象；沒調(diào)用對象就指向全局對象；用new構(gòu)造就指向新對象；通過apply 或 call 或 bind 來改變 this 的所指。

12. New操作符具體干了什么

主要分為這幾步

（1）var obj =new object（）；

創(chuàng)建一個(gè)空對象

（2）obj._proto_ = Func.prototype;

然后讓空對象的內(nèi)部指針__proto__指向函數(shù)的原型prototype

（3）Func.call(obj) ??

this指向obj對象

（4）返回新創(chuàng)建的對象。

instanceof用于判斷引用類型屬于哪個(gè)構(gòu)造函數(shù)的方法

13. Js原型鏈

(1) js中每個(gè)對象都有一個(gè)叫原型的prototype屬性，而原型的值也是一個(gè)對象，因此它也有自己的原型，就這樣串起來就形成了一條原型鏈，而原型鏈鏈頭是object，它的原型為null。

(2)原型鏈主要是用于對象的繼承，假如函數(shù)A被用作構(gòu)造函數(shù)來創(chuàng)建對象，該函數(shù)的原型屬性將被作為原型賦值給對象實(shí)例。

(3)當(dāng)訪問對象的一個(gè)屬性時(shí)，先查找對象本身，如果找不到會(huì)順著原型鏈查找，如果還是找不到，就是undefined

function Name(){ function Firstname(){

????this.name=function(){ this.firstname=function(){

????????console.log("killua") console.log("L")

????} }

} }

Name.prototype = new Firstname();

var he = new Name();

console.log(he.name); //"killua"

console.log(he.firstname); //"L"

14. Js作用域鏈和作用

作用域(scope)：一條數(shù)據(jù)可以在哪個(gè)范圍中使用，這個(gè)范圍就是作用域。

在頁面加載后，會(huì)首先創(chuàng)建一個(gè)全局作用域，然后每執(zhí)行一個(gè)函數(shù)，會(huì)建立一個(gè)對應(yīng)的作用域，從而形成一個(gè)作用域鏈，鏈頭是全局作用域，鏈尾是當(dāng)前函數(shù)的作用域。

作用域鏈的作用是保證執(zhí)行環(huán)境里有權(quán)訪問的變量和函數(shù)是有序的，作用域鏈的變量只能向上訪問，變量訪問到window對象即被終止，作用域鏈向下訪問變量是不被允許的

15. JavaScript變量聲明提前

js編譯器在執(zhí)行函數(shù)的時(shí)候，會(huì)把它函數(shù)體里面的聲明變量提前到最前面進(jìn)行聲明，而此時(shí)變量僅聲明，未賦值。

16. Js如何理解閉包，使用閉包的注意點(diǎn)

閉包：形式函數(shù)中套了一個(gè)函數(shù)，

最大用處主要是：

（1）能在函數(shù)外部執(zhí)行函數(shù)內(nèi)部定義的方法，且訪問內(nèi)部的變量

（2）讓變量的值始終保持在內(nèi)存里

注意點(diǎn)：

（1）變量都被保存在內(nèi)存里，因此對內(nèi)存消耗很大，且導(dǎo)致內(nèi)存泄漏，因此在退出函數(shù)之前，要?jiǎng)h除不使用的局部變量。

function?User(){

this.name = "Vicfeel"; //共有屬性?var?age = 23; //私有屬性?this.sayAge:function(){

console.log("my age is "?+ age); }

}

var?user = new?User();

console.log(user.name); //"Vicfeel"????console.log(user.age); //"undefined"?user.sayAge(); //"my age is 23"

17. Js自執(zhí)行函數(shù)（匿名函數(shù)）

匿名函數(shù)其實(shí)就是沒有名字的函數(shù)，用大括號(hào)包起來，然后它可以

（1）開辟封閉的變量作用域環(huán)境，每一次執(zhí)行都創(chuàng)建一個(gè)私有的環(huán)境，也就是說它可以模擬塊級(jí)作用域，減少全局變量，執(zhí)行完函數(shù)后，其儲(chǔ)存在內(nèi)存中變量就會(huì)被銷毀，從而節(jié)省內(nèi)存。

（2）自執(zhí)行函數(shù)（匿名函數(shù)），其實(shí)并不是一個(gè)函數(shù)，而是一個(gè)結(jié)果，因?yàn)樗呀?jīng)執(zhí)行過了。

18. ?j s事件循環(huán) event loop

https://www.cnblogs.com/dong-xu/p/7000163.html

19. Js同源策略

同源策略是瀏覽器的一個(gè)安全功能，同源策略規(guī)定跨域之間的腳本是隔離的，一個(gè)域的腳本不能訪問和操作另外一個(gè)域的絕大部分屬性和方法。這也是為什么產(chǎn)生跨域問題的原因

20. Js加載時(shí)間線

（1）創(chuàng)建document對象，開始解析web頁面

（2）遇到link外部css，就會(huì)創(chuàng)建線程加載，并繼續(xù)解析文檔

（3）遇到script外部js，如果沒有設(shè)置異步加載，就會(huì)阻塞，等js加載完后，繼續(xù)解析文檔，如果設(shè)置了瀏覽器就會(huì)創(chuàng)建線程加載，并繼續(xù)解析文檔

（4）遇到img等，會(huì)先正常解析dom結(jié)構(gòu)，然后瀏覽器異步加載src，并繼續(xù)解析文檔

（5）所有腳本加載完并執(zhí)行后，window對象就會(huì)觸發(fā)load事件。

21. 圖片輪播的思路

（1）所有的li左浮動(dòng)成一排，實(shí)際過程就是將ul往左（右）邊移動(dòng)，改變left值。

（2）計(jì)時(shí)器和點(diǎn)擊來改變index的值，然后根據(jù)index的值來渲染img

22. 垃圾回收機(jī)制方式及內(nèi)存管理

垃圾收集器會(huì)定期（周期性）找出那些不在繼續(xù)使用的變量，然后釋放其內(nèi)存。但是這個(gè)過程不是實(shí)時(shí)的，因?yàn)槠溟_銷比較大，所以垃圾回收器會(huì)按照固定的時(shí)間間隔周期性的執(zhí)行。

方法：標(biāo)記清除\引用計(jì)數(shù)

23. 什么叫優(yōu)雅降級(jí)和漸進(jìn)增強(qiáng)

優(yōu)雅降級(jí)：新式瀏覽器中都能正常工作的情況下，如果用戶使用的是老式瀏覽器，則代碼會(huì)檢查以確認(rèn)它們是否能正常工作。然后為那些無法支持功能的瀏覽器以某種形式降級(jí)體驗(yàn)卻不至于完全失效.

漸進(jìn)增強(qiáng)：從被所有瀏覽器支持的基本功能開始，逐步地添加那些只有新式瀏覽器才支持的功能，當(dāng)瀏覽器支持時(shí)，它們會(huì)自動(dòng)地呈現(xiàn)出來并發(fā)揮作用。

24. 哪些操作會(huì)造成內(nèi)存泄漏

內(nèi)存泄漏指在瀏覽器進(jìn)程結(jié)束之前的某一塊內(nèi)存既不使用，又不能回收，就會(huì)造成內(nèi)存泄漏。

（1）dom清空或刪除時(shí)，事件未清除導(dǎo)致的內(nèi)存泄漏（移除元素綁定的事件）

（2）.setTimeout （計(jì)時(shí)器）的第一個(gè)參數(shù)使用字符串而非函數(shù)的話，會(huì)引發(fā)內(nèi)存泄漏（先停止定時(shí)器，然后置空字符串）。

（3）閉包也可以引起內(nèi)存泄漏

（4）沒有清理console控制臺(tái)日志

（5）定義全局變量

查看內(nèi)存

Chrome自帶的內(nèi)存調(diào)試工具可以很方便地查看內(nèi)存使用情況和內(nèi)存泄露：

在Timeline -> Memory點(diǎn)擊record即可：

25. 對JSON的了解

JSON是一種輕量級(jí)的數(shù)據(jù)交換格式，本質(zhì)是一個(gè)字符串，使用文本表示一個(gè)js對象的信息，易于讀寫，且占用帶寬小

26. JSON 與 JS 對象的關(guān)系

實(shí)現(xiàn)從JSON字符串轉(zhuǎn)換為對象，使用JSON.parse() 方法，

要實(shí)現(xiàn)從對象轉(zhuǎn)換為JSON 字符串，使用 JSON.stringify() 方法：

27. ?es6

（1）新增變量聲明const，let

（2）新增模版字符串

（3）箭頭函數(shù)

不需要function來創(chuàng)建函數(shù)

省略return 關(guān)鍵字

繼承當(dāng)前上下文的this關(guān)鍵字

（4）對象，數(shù)組的解構(gòu)

在ES6之前我們獲取對象信息的時(shí)候，是一個(gè)一個(gè)獲取?，F(xiàn)在，解構(gòu)能讓我們從對象或者數(shù)組里取出數(shù)據(jù)存為變量，

const?people = {

????????name: 'lux',

????????age: 20

????}

????const?{ name, age } = people

（5）展開運(yùn)算符，可以組裝對象或數(shù)組

想獲取數(shù)組或者對象除了前幾項(xiàng)或者除了某幾項(xiàng)的其他項(xiàng)

（6）import導(dǎo)入和export導(dǎo)出

（7）promise

用同步編程的方式來編寫異步代碼，保存線性的代碼邏輯，極大的降低了代碼耦合性而提高了程序的可擴(kuò)展性。

28. ?webpack打包

webpack是一個(gè)模塊打包工具，可以用webpack來管理項(xiàng)目的模塊依賴，并編譯輸出模塊所需的靜態(tài)文件。

29. 設(shè)計(jì)模式

Mvp，mvvm，

Mvp：MVP 模式將 Controller 改換為 Presenter，同時(shí)斷開View和Model之間聯(lián)系，通過Presenter做橋梁來溝通。

30. MVC

（1）MVC是模型-視圖-控制器的縮寫

（2）由屏幕獲取響應(yīng)指令，View 傳送指令到 Controller，Controller 完成業(yè)務(wù)邏輯后，要求Model 改變狀態(tài)Model 將新的數(shù)據(jù)發(fā)送到 View，用戶得到反饋

31. VUE的MVVM的理解，如何實(shí)現(xiàn)

它采用雙向綁定（data-binding）：View <->ViewModel , ViewModel作為Model中值的映射，數(shù)據(jù)發(fā)生改變時(shí)，通知View中發(fā)生改變?，以后不需要考慮View和Model 之間的交互更新，只需著手界面布局邏輯即可

32. ?vue雙向綁定如何實(shí)現(xiàn)

33. ?vue狀態(tài)管理

34. 虛擬dom