JS

1、說一下innerHTML 與 innerText的作用與區(qū)別？

1. 作用：都可以獲取或者設(shè)置元素的內(nèi)容
2. 區(qū)別：innerHTML可以解析內(nèi)容中的html標(biāo)簽
3. innerText不能解析內(nèi)容中的html標(biāo)簽

2、JavaScript 由以下三部分組成：

1. ECMAScript（語法部分）：JavaScript 語言基礎(chǔ)
2. DOM（文檔對(duì)象模型）：規(guī)定了訪問 HTML 和 XML 的方法
3. BOM（瀏覽器對(duì)象模型）：提供了瀏覽器窗口之間進(jìn)行交互的對(duì)象和方法

3、介紹 JS 有哪些內(nèi)置對(duì)象？

1. 數(shù)據(jù)封裝類對(duì)象：Object、Array、Boolean、Number、String
2. 其他對(duì)象：Function、Arguments、Math、Date、RegExp、Error
3. ES6 新增對(duì)象：Symbol、Map、Set、Promises、Proxy、Reflect

4、JS 的基本數(shù)據(jù)類型和引用數(shù)據(jù)類型

1. 基本(原始)數(shù)據(jù)類型: number、string、boolean、undefined, null, symbol
2. 引用數(shù)據(jù)類型: Object、Function、Array

5、說幾條寫 JavaScript 書寫的基本規(guī)范？

1. 代碼一定要正確縮進(jìn)，建議使用"二個(gè)或者四個(gè)空格"縮進(jìn)
2. 語句結(jié)束使用分號(hào);
3. 規(guī)范定義 JSON 對(duì)象，補(bǔ)全雙引號(hào)
4. 用{}和[]聲明對(duì)象和數(shù)組
5. 變量和函數(shù)在使用前進(jìn)行聲明
6. 以大寫字母開頭命名構(gòu)造函數(shù)，全大寫命名常量
7. 代碼段使用花括號(hào){}包裹
8. 還有要書寫正確的標(biāo)識(shí)標(biāo)簽

6、什么是標(biāo)識(shí)符？

• 在JS中，可以自定義命名的東西都屬性標(biāo)識(shí)符；
• 比如變量名，函數(shù)名，參數(shù)名都是標(biāo)識(shí)符

7、DOM 元素e的 e.getAttribute(propName)和 e.propName 有什么區(qū)別和聯(lián)系

1. e.getAttribute：獲取的是標(biāo)簽上屬性
2. 可以通過e.setAttribute(propName, propValue)設(shè)置標(biāo)簽上屬性
3. e.propName：獲取的是元素對(duì)象上屬性

8、offsetWidth/offsetHeight,clientWidth/clientHeight,scrollWidth/scrollHeight 的區(qū)別?

1. offsetWidth/offsetHeight 返回值包含 content + padding + border + 包含滾動(dòng)條，效果與 e.getBoundingClientRect()相同
2. clientWidth/clientHeight 返回值只包含 content + padding，如果有滾動(dòng)條，也不包含滾動(dòng)條
3. scrollWidth/scrollHeight 返回值包含 content + padding + 溢出內(nèi)容的尺寸

9、檢測瀏覽器版本版本有哪些方式？

1. 根據(jù) navigator.userAgent // UA.toLowerCase().indexOf('chrome')

10、說一下元素節(jié)點(diǎn)、文本節(jié)點(diǎn)、屬性節(jié)點(diǎn)的nodeType、nodeName、nodeValue分別是什么

1. nodeType(節(jié)點(diǎn)類型) ?nodeName(節(jié)點(diǎn)名稱) ?nodeValue(節(jié)點(diǎn)的值)
2. 元素節(jié)點(diǎn)： ? ? ?1 ? ? ? ? ? ? ? ?元素標(biāo)簽名 ? ? ? ? ?null(沒有值)
3. 屬性節(jié)點(diǎn)： ? ? ?2 ? ? ? ? ? ? ? ?屬性名 ? ? ? ? ? ? ?屬性值
4. 文本節(jié)點(diǎn)： ? ? ?3 ? ? ? ? ? ? ? ?text ? ? ? ? ? ? ? ?節(jié)點(diǎn)內(nèi)容

11、==和===的區(qū)別

1. 雙等號(hào)判斷時(shí)，只需要值相等
2. 三等號(hào)判斷時(shí)，需要值與類型都相等

12、函數(shù)聲明與函數(shù)表達(dá)式的區(qū)別？

1. 數(shù)聲明就是直接通過function進(jìn)行聲明函數(shù)，例如：function show(){}可以在聲明函數(shù)之前調(diào)用0函

13、數(shù)組方法pop() push() unshift() shift()

1. pop()尾部刪除
2. push()尾部添加
3. unshift()頭部添加
4. shift()頭部刪除

14、ajax請(qǐng)求的時(shí)候get 和post方式的區(qū)別

（1）get請(qǐng)求

參數(shù)要跟在url后面
安全性不高
傳輸數(shù)據(jù)比較小，但速度快
一般用于獲取，刪除

（2）post請(qǐng)求

參數(shù)會(huì)放在請(qǐng)求體中，
安全性相對(duì)高些
傳輸數(shù)據(jù)大，但相對(duì)速度慢些
post一般用于修改或者添加

15、解釋什么是Json:

1. json是一種輕量級(jí)的數(shù)據(jù)交換格式，一般用于數(shù)據(jù)傳遞
2. 里邊只允許出現(xiàn)雙引號(hào)
3. JSON的語法表示三種類型值，簡單值(字符串，數(shù)值，布爾值，null), 數(shù)組，對(duì)象

16、dom事件委托什么原理，有什么優(yōu)缺點(diǎn)
事件委托原理: 事件冒泡機(jī)制（把子元素的事件行為 委托給 父級(jí)元素執(zhí)行優(yōu)點(diǎn)）

優(yōu)點(diǎn):
1. 可以大量節(jié)省內(nèi)存占用，減少事件注冊(cè)
2. 可以實(shí)現(xiàn)當(dāng)新增子對(duì)象時(shí)，無需再對(duì)其進(jìn)行事件綁定

缺點(diǎn):
如果把所有事件都用事件代理，可能會(huì)出現(xiàn)事件誤判

17、Javascript的事件流模型都有什么?

1. “事件冒泡”：事件逐級(jí)向上傳播
2. “事件捕捉”：事件逐級(jí)向下傳播，一直到最具體的
3. “DOM事件流”：三個(gè)階段：事件捕捉，目標(biāo)階段，事件冒泡

18、split() join() 的區(qū)別

1. split()：以指定的字符分割字符串返回一個(gè)數(shù)組,字符串方法
2. join(): 以指定的字符連接數(shù)組中元素返回一個(gè)字符串,數(shù)組方法

19、如何阻止事件冒泡

1. ev.stopPropagation();

20、如何阻止默認(rèn)事件

• 答案：return false 或者 ev.prevent Default();

21、JavaScript中如何檢測一個(gè)變量是一個(gè) String 類型?

1. typeof 變量
2. 變量.constructor === String
3. Object.prototype.toString.call(變量) ? ?// 推薦使用

22、javascript 的 typeof 返回哪些數(shù)據(jù)類型（至少六個(gè)）檢測類型如下：

1. string、? ?number、? boolean? 、undefined 、object? 、function? ?、symbol（ES6之后新增的類型）

23、如何判斷變量為NaN

• 通過isNaN()判斷
• isNaN(NaN) ? ? // 返回true
• isNaN(1000) ? ?// 返回false
• isNaN('小明') ?// 返回true（判斷前會(huì)轉(zhuǎn)換成number類型）
• isNaN('101') ? // 返回false

24、什么是JS變量提升 與 塊級(jí)作用域

• 變量提升：就是會(huì)把變量定義提升到當(dāng)前作用域的最上面
• 塊級(jí)作用域：JS 中作用域有：全局作用域、函數(shù)作用域。沒有塊作用域的概念。ES6中新增了塊級(jí)作用域。塊作用域由 { } 包括，if 語句和 for 語句里面的{ }也屬于塊作用域。在外邊不能調(diào)用塊作用域里邊定義的變量

25、null / undefined 的區(qū)別

• null值：屬于null類型,代表“空值"，代表一個(gè)空對(duì)象指針；使用typeof運(yùn)算得到 “object"，所以你可以認(rèn)為它是一個(gè)特殊的對(duì)象值。
• undefined值：屬于undefined類型，當(dāng)一個(gè)聲明的變量未初始化賦值時(shí)，得到的就是undefined。使用typeof運(yùn)算得到“undefined"，

26、foo = foo || bar，這行代碼是什么意思？為什么要這樣寫？

• 如果foo轉(zhuǎn)為false, 則返回bar；否則直接返回foo
• 邏輯或：如果第一個(gè)值為true，直接返回第一個(gè)值；否則直接返回第二個(gè)值
• 邏輯與：如果第一個(gè)值為false，直接返回第一個(gè)值；否則返回第二個(gè)值、

27、target 和 currentTarget 區(qū)別

• 都是事件對(duì)象上的屬性
• event.target：返回觸發(fā)事件的元素
• event.currentTarget：返回綁定事件的元素(相當(dāng)于事件中this)

28、prototype 和 proto 的關(guān)系是什么

• prototype: 所有函數(shù)都會(huì)有一個(gè)prototype屬性, 它就是函數(shù)的原型對(duì)象
• proto: 所有實(shí)例對(duì)象上都會(huì)有一個(gè)proto屬性, 它等同于函數(shù)的原型對(duì)象

(補(bǔ)充說明)
原型鏈：因?yàn)樗袑?shí)例對(duì)象都原型對(duì)象，原型對(duì)象也個(gè)對(duì)象，
所以它也自己原型對(duì)象(這樣形成原型鏈)

答案：

• 所有的對(duì)象都擁有proto屬性，它指向?qū)ο髽?gòu)造函數(shù)的 prototype 屬性
• 所有的函數(shù)都同時(shí)擁有proto和 prototype 屬性
• 函數(shù)的proto指向自己的函數(shù)實(shí)現(xiàn) 函數(shù)的 protytpe 是一個(gè)對(duì)象(原型)
• 所以函數(shù)的 prototype 也有proto屬性 指向 Object.prototype
• Object.prototype.proto指向 null

29、請(qǐng)說一下你常用的數(shù)組方法(至少七個(gè))
答案：

• 1）Array.push()：此方法是在數(shù)組的后面添加新加元素，此方法改變了數(shù)組的長度：
• 2）Array.pop()：此方法在數(shù)組后面刪除最后一個(gè)元素，并返回?cái)?shù)組，此方法改變了數(shù)組的長度：
• 3） Array.shift()：此方法在數(shù)組后面刪除第一個(gè)元素，并返回?cái)?shù)組，此方法改變了數(shù)組的長度：
• 4） Array.unshift()：此方法是將一個(gè)或多個(gè)元素添加到數(shù)組的開頭，并返回新數(shù)組的長度：
• 5）Array.isArray()：判斷一個(gè)對(duì)象是不是數(shù)組，返回的是布爾值
• 6） Array.concat()：此方法是一個(gè)可以將多個(gè)數(shù)組拼接成一個(gè)數(shù)組：
• 7）Array.toString() ：?把數(shù)組作為字符串返回
• 8） Array.join() ? ? ??：以指定字符拼接成字符串，然后返回

• 9） Array.splice：(開始位置， 刪除的個(gè)數(shù)，元素)
• 10）Array.map()：此方法是將數(shù)組中的每個(gè)元素調(diào)用一個(gè)提供的函數(shù)，結(jié)果作為一個(gè)新的數(shù)組返回，并沒有改變?cè)瓉淼臄?shù)組
• 11）Array.forEach()：此方法是將數(shù)組中的每個(gè)元素執(zhí)行傳進(jìn)提供的函數(shù)，沒有返回值，直接改變?cè)瓟?shù)組，注意和 map 方法區(qū)分
• 12）Array.filter()：此方法是將所有元素進(jìn)行判斷，將滿足條件的元素作為一個(gè)新的數(shù)組返回
• 13）Array.every()：此方法是將所有元素進(jìn)行判斷返回一個(gè)布爾值，如果所有元素都滿足判斷條件，則返回 true，否則為 false：
• 14）Array.some()：此方法是將所有元素進(jìn)行判斷返回一個(gè)布爾值，如果存在元素都滿足判斷條件，則返回 true，若所有元素都不滿足判斷條件，則返回 false：
• 15）Array.reduce()：此方法是所有元素調(diào)用返回函數(shù)，返回值為最后結(jié)果,傳入的值必須是函數(shù)類型：

與之相對(duì)應(yīng)的還有一個(gè) Array.reduceRight() 方法，區(qū)別是這個(gè)是從右向左操作

30、請(qǐng)說一下你常用的字符串方法（至少七個(gè)）

• trim(): 去首尾空格
• split(sep，limit)：將字符串分割為字符數(shù)組，limit 為從頭開始執(zhí)行分割的最大數(shù)量
• indexOf(str):返回 str 在父串中第一次出現(xiàn)的位置，若沒有則返回-1
• lastIndexOf(str):返回 str 在父串中最后一次出現(xiàn)的位置，若沒有則返回-1
• substr(start，length)：從字符索引 start 的位置開始，返回長度為 length 的子串
• substring(from,to)：返回字符索引在 from 和 to（不含）之間的子串
• slice(start,end)：返回字符索引在 start 和 end（不含）之間的子串
• toLowerCase()：將字符串轉(zhuǎn)換為小寫
• toUpperCase()：將字符串轉(zhuǎn)換為大寫
• replace(str1,str2):str1 也可以為正則表達(dá)式，用 str2 替換 str1
• concat(str1,str2,...):連接多個(gè)字符串，返回連接后的字符串的副本
• match(regex):搜索字符串，并返回正則表達(dá)式的所有匹配
• charAt(index):返回指定索引處的字符串
• charCodeAt(index):返回指定索引處的字符的 Unicode 的值
• fromCharCode():將 Unicode 值轉(zhuǎn)換成實(shí)際的字符串
• search(regex):基于正則表達(dá)式搜索字符串，并返回第一個(gè)匹配的位置
• valueOf()：返回原始字符串值

31、原型和原型鏈

• 原型：portoType這個(gè)屬性就是函數(shù)的原型
• 原型鏈：1.所有對(duì)象都有原型，而原型本身就是對(duì)象，所以原型也有自己的原型對(duì)象，就形成原型鏈
• 如果對(duì)象本身沒有屬性，則就會(huì)去原型鏈上去找
• Object原型對(duì)象的原型值為null

32、new操作符具體做了什么？

1. 在內(nèi)存創(chuàng)建一個(gè)新對(duì)象
2. 把構(gòu)造函數(shù)中this指向新建的對(duì)象
3. 會(huì)在新對(duì)象上添加一個(gè)__proto__屬性,指向函數(shù)的原型對(duì)象prototype
4. 判斷函數(shù)返回值,如果值是引用類型就直接返回值；否則返回this(創(chuàng)建的新對(duì)象)

33、說下什么是IIFE函數(shù)

• IIFE(立即調(diào)用函數(shù)表達(dá)式)是一個(gè)在定義時(shí)就會(huì)立即執(zhí)行的函數(shù)。

34、淺拷貝與深拷貝有何區(qū)別？如何實(shí)現(xiàn)？

• 淺拷貝：拷貝的是原對(duì)象的內(nèi)存地址
• 深拷貝：在內(nèi)存中把原對(duì)象復(fù)制一份
• 淺拷貝的實(shí)現(xiàn)方式有：

????????（1）直接變量賦值

????????（2）Object.assign()；但目標(biāo)對(duì)象只有一層的時(shí)候，是深拷貝；

????????（3）擴(kuò)展運(yùn)算符(...)；目標(biāo)對(duì)象只有一層的時(shí)候，是深拷貝；

深拷貝就是在拷貝數(shù)據(jù)的時(shí)候，將數(shù)據(jù)的所有引用結(jié)構(gòu)都拷貝一份。

• 深拷貝的實(shí)現(xiàn)方式有：

????????（1）結(jié)合使用JSON.parse()和JSON.stringify()方法。

????????（2）手寫遍歷遞歸賦值；

35、字符串截取方法substr、 substring、 slice三者的區(qū)別

• substr(n,m)：截取的是字符串中索引為n開始的，并且截取m位
• substring(n,m)：從索引為n的位置開始截取，截取到索引為m的位置但是不包含索引為m這一項(xiàng)
• slice(n,m)：和substring一樣，但是他可以支持負(fù)數(shù)索引

36、函數(shù)柯里化

????????概念：把一個(gè)接收多個(gè)參數(shù)的函數(shù)變成接收單一參數(shù)?并且返回能夠接收新參數(shù)的函數(shù)；比如：

add(1)(2)(3)(4) = 10;

function add(num){

? ? var sum=num;

? ? var fn=function(v){

? ? ? ? sum+=v;

? ? ? ? return fn

? ? };

? ? fn.toString=function(){

? ? ? ? return sum

? ? };

? ? return fn

}

console.log(add(1)(2)(3)(4)) // 10

37、判斷Array類型的幾種方式0

1、[ ] instanceof Array

2、[ ].constructor === Array

3、Object.prototype.toString.call([]) === '[object Array]'

4、Array.isArray([])

38.this指向的各種情況都有什么？

1. 全局作用域中的函數(shù)：非嚴(yán)格模式下其內(nèi)部this指向window
2. 對(duì)象內(nèi)部的函數(shù)：其內(nèi)部this指向?qū)ο蟊旧恚?/li>
3. 構(gòu)造函數(shù)：其內(nèi)部this指向生成的實(shí)例：
4. 由apply、call、bind改造的函數(shù)：其this指向第一個(gè)參數(shù)：
5. 箭頭函數(shù)：箭頭函數(shù)沒有自己的this，看其外層的是否有函數(shù)，如果有，外層函數(shù)的this就是內(nèi)部箭頭函數(shù)的this，如果沒有，則this是window。(函數(shù)定義時(shí)的this，而不是調(diào)用時(shí)this)

39.什么是AJAX？如何實(shí)現(xiàn)？

• ajax是一種能夠?qū)崿F(xiàn)網(wǎng)頁局部刷新的技術(shù)，可以使網(wǎng)頁異步刷新。
• ajax的實(shí)現(xiàn)主要包括四個(gè)步驟：

????????（1）創(chuàng)建核心對(duì)象XMLhttpRequest；

????????（2）利用open方法打開與服務(wù)器的連接；

????????（3）利用send方法發(fā)送請(qǐng)求；（"POST"請(qǐng)求時(shí)，還需額外設(shè)置請(qǐng)求頭）

????????（4）監(jiān)聽服務(wù)器響應(yīng)，接收返回值。

40.什么是高階函數(shù)？

• 高階函數(shù)是對(duì)其他函數(shù)進(jìn)行操作的函數(shù);
• 高階函數(shù)就是一個(gè)接收函數(shù)作為參數(shù)或?qū)⒑瘮?shù)作為輸出返回的函數(shù)。

1. 例如，Array.prototype.map，Array.prototype.filter 和Array.prototype.reduce 是語言中內(nèi)置的一些高階函數(shù)。

41、描述瀏覽器的渲染過程？，DOM樹和渲染樹的區(qū)別？

• 瀏覽器的渲染過程：

1. 解析 HTML 構(gòu)建 DOM(DOM樹)，并行請(qǐng)求 css/image/js
2. CSS 文件下載完成，開始構(gòu)建 CSSOM(CSS樹)
3. CSSOM 構(gòu)建結(jié)束后 和 DOM 一起生成 Render Tree(渲染樹)
4. 布局(Layout)：計(jì)算出每個(gè)節(jié)點(diǎn)在屏幕中的位置
5. 顯示(Painting)：通過顯卡把頁面畫到屏幕上

• DOM 樹 和 渲染樹 的區(qū)別：

1. DOM 樹與 HTML 標(biāo)簽一一對(duì)應(yīng)，包括 head 和隱藏元素
2. 渲染樹不包括 head 和隱藏元素，大段文本的每一個(gè)行都是獨(dú)立節(jié)點(diǎn)，每一個(gè)節(jié)點(diǎn)都有對(duì)應(yīng)的 css 屬性

42、Javascript 如何實(shí)現(xiàn)繼承？

• 實(shí)例繼承：將子構(gòu)造函數(shù)的 prototype 指向父構(gòu)造函數(shù)的一個(gè)實(shí)例
• 原型繼承：將子構(gòu)造函數(shù)的 prototype 指向父構(gòu)造函數(shù)的 prototype
• 構(gòu)造函數(shù)綁定：使用 call 或 apply 方法，將父對(duì)象的構(gòu)造函數(shù)綁定在子對(duì)象上
• 拷貝繼承：如果把父對(duì)象的所有屬性和方法，拷貝進(jìn)子對(duì)象
• ES6 語法 extends：class ColorPoint extends Point {}

43、Javascript 作用域鏈?

• 如果當(dāng)前作用域沒有找到屬性或方法，會(huì)向上層作用域查找，
  直至全局函數(shù)，這種形式就是作用域鏈

44、eval是做什么的？
eval 的功能是把對(duì)應(yīng)的字符串解析成 JS 代碼并運(yùn)行

• 應(yīng)該避免使用 eval，不安全，非常耗性能（先解析成 js 語句，再執(zhí)行）
• 由 JSON 字符串轉(zhuǎn)換為 JSON 對(duì)象的時(shí)候可以用 eval('('+ str +')');

45、js延遲加載的方式有哪些？
動(dòng)態(tài)創(chuàng)建 DOM 方式（用得最多）、defer 和 async標(biāo)簽屬性

46、defer 和 async區(qū)別

• defer 并行加載 js 文件，會(huì)按照頁面上 script 標(biāo)簽的順序執(zhí)行
• async 并行加載 js 文件，下載完成立即執(zhí)行，不會(huì)按照頁面上 script 標(biāo)簽的順序執(zhí)行

47、同步和異步的區(qū)別?

• 同步: 下面代碼會(huì)等待上面 同步代碼執(zhí)行完畢
• 異步: 下面代碼不會(huì)等待上面異步代碼執(zhí)行完畢
• 同步：瀏覽器訪問服務(wù)器請(qǐng)求，用戶看得到頁面刷新，重新發(fā)請(qǐng)求,等請(qǐng)求完，頁面刷新，
  新內(nèi)容出現(xiàn)，用戶看到新內(nèi)容,進(jìn)行下一步操作
• 異步：瀏覽器訪問服務(wù)器請(qǐng)求，用戶正常操作，瀏覽器后端進(jìn)行請(qǐng)求。
  等請(qǐng)求完，頁面不刷新，新內(nèi)容也會(huì)出現(xiàn)，用戶看到新內(nèi)容

48、documen.write 和 innerHTML 的區(qū)別

• document.write 只能重繪整個(gè)頁面
• innerHTML 可以重繪頁面的某一部分

49、說說你對(duì)閉包的理解
閉包有三個(gè)特性：

• 函數(shù)嵌套函數(shù)
• 函數(shù)內(nèi)部可以引用外部的參數(shù)和變量
• 參數(shù)和變量不會(huì)被垃圾回收機(jī)制回收,會(huì)永遠(yuǎn)留駐在內(nèi)存中

使用閉包主要是為了設(shè)計(jì)私有的方法和變量。
優(yōu)點(diǎn)：是可以避免全局變量的污染，

缺點(diǎn)：是閉包會(huì)常駐內(nèi)存，會(huì)增大內(nèi)存使用量，使用不當(dāng)很容易造成內(nèi)存泄露。

50、 把 <script> 放在 </body> 之前和之后有什么區(qū)別？

• 瀏覽器會(huì)如何解析它們？
• 按照HTML標(biāo)準(zhǔn)，在結(jié)束后出現(xiàn)<script>或任何元素的開始標(biāo)簽都是解析錯(cuò)
• 雖然不符合 HTML 標(biāo)準(zhǔn)，但瀏覽器會(huì)自動(dòng)容錯(cuò)，使實(shí)際效果與寫在</body>之前沒有區(qū)別
• 瀏覽器的容錯(cuò)機(jī)制會(huì)忽略<script>之前的，視作<script>仍在 body 體內(nèi)。

51、 為什么 JS 是單線程, ?而不是多線程 [常考]

• 單線程是指 JavaScript 在執(zhí)行的時(shí)候，有且只有一個(gè)主線程來處理所有的任務(wù)。
• 目的是為了實(shí)現(xiàn)與瀏覽器交互。
• 我們?cè)O(shè)想一下，如果 JavaScript 是多線程的，現(xiàn)在我們?cè)跒g覽器中同時(shí)操作一個(gè)
  DOM，一個(gè)線程要求瀏覽器在這個(gè) DOM 中添加節(jié)點(diǎn)，
  而另一個(gè)線程卻要求瀏覽器刪掉這個(gè) DOM 節(jié)點(diǎn)，
  那這個(gè)時(shí)候?yàn)g覽器就會(huì)很郁悶，他不知道應(yīng)該以哪個(gè)線程為準(zhǔn)。
  所以為了避免此類現(xiàn)象的發(fā)生，降低復(fù)雜度，JavaScript
  選擇只用一個(gè)主線程來執(zhí)行代碼，以此來保證程序執(zhí)行的一致性。

52、請(qǐng)說出以下結(jié)果輸出什么？為什么？
?

for(var i = 0; i < 5; i++) {
    setTimeout(function(){
        console.log(i)
    }, 0)
}

答案：5個(gè)5
解釋：異步代碼需要等同步代碼先執(zhí)行，所以當(dāng)異步定時(shí)器執(zhí)行時(shí)，
同步的for循環(huán)已經(jīng)循環(huán)完畢

53、請(qǐng)說出以下flag的結(jié)果？為什么？

function show(){}

function getName() { return '牛夫人' }

var flag = show() || getName()

答案：flag值為'牛夫人'
解釋：1.函數(shù)都會(huì)有一個(gè)默認(rèn)的返回值undefined
2.邏輯或如果第一個(gè)值成立就直接返回第一個(gè)值，否則直接返回第二個(gè)值

54、請(qǐng)解釋一下什么是重排與重繪？

• 重排：當(dāng)改變dom結(jié)構(gòu)的時(shí)候，就會(huì)從dom樹開始從新渲染頁面，這過程叫重排比如添加或者刪除可見的DOM元素、元素尺寸改變、元素內(nèi)容改變、瀏覽器窗口尺寸改變等等
• 重繪：當(dāng)改變樣式（不改變幾何結(jié)構(gòu)）的時(shí)候，它會(huì)從render樹開始重新開始渲染頁面，這過程叫重繪，比如改變顏色，透明等

55、怎么減少重排與重繪？

• 盡量避免操作DOM元素
• 避免多次修改dom結(jié)構(gòu)或者css,集中處理，只引發(fā)一次重繪或者重排

56、請(qǐng)解釋一下什么是防抖與節(jié)流

• 防抖（debounce）

1. 總結(jié)：就是指觸發(fā)事件后在 n 秒內(nèi)函數(shù)只能執(zhí)行一次，如果在 n 秒內(nèi)又觸發(fā)了事件，則會(huì)重新計(jì)算函數(shù)執(zhí)行時(shí)間。

• 節(jié)流（throttle）

1. 總結(jié)：就是每次觸發(fā)事件的隔間至少要大于等于n秒，不會(huì)重置計(jì)時(shí)

57、說一下call、apply、bind三者的作用 與 區(qū)別

• 作用：三者的作用都是可以改變函數(shù)的this指向(function對(duì)象自帶的方法)
• 區(qū)別：1.call、apply會(huì)直接調(diào)用原函數(shù)，bind不會(huì)直接調(diào)用函數(shù)，而會(huì)拷貝一份返回一個(gè)新函數(shù)
• call、bind傳參時(shí)一個(gè)個(gè)傳入，而apply是把所有參數(shù)放到一個(gè)數(shù)組中傳入

58、JS嚴(yán)格模式的使用與作用
答案：在代碼前面使用"use strict"就可以開啟嚴(yán)格模式;

作用：

• 消除 Javascript 語法的一些不合理、不嚴(yán)謹(jǐn)之處，減少一些怪異行為;
• 消除代碼運(yùn)行的一些不安全之處，保證代碼運(yùn)行的安全；
• 提高編譯器效率，增加運(yùn)行速度；
• 為未來新版本的 Javascript 做好鋪墊。

59、舉例JS嚴(yán)格模式的特點(diǎn)

• 變量必須要通過修飾符進(jìn)行聲明
• 函數(shù)的參數(shù)不能有同名屬性，否則報(bào)錯(cuò)
• 禁止 this 指向全局對(duì)象
• 增加了保留字（比如 protected 、 static 和 interface ）
• 不能刪除變量 delete prop

60、執(zhí)行下面代碼打印什么？為什么？
?

var a = {};
var b = {key: 'b'};
var c = {key: 'c'};
var d = [3,5,6];
a[b] = 123;
a[c] = 345;
a[d] = 333;
console.log(a[b]); ?
console.log(a[c]); ?
console.log(a[d]); ?

console.log(a[b]); ?// 打?。?45
console.log(a[c]); ?// 打?。?45
console.log(a[d]); ?// 打?。?33
為什么：對(duì)象轉(zhuǎn)化字符串會(huì)變成一個(gè)'[object Object]'

61、JS中的Array.prototype.splice()和Array.prototype.slice()方法作用與區(qū)別

• 兩都的作用都是截取數(shù)組中元素，返回一個(gè)新數(shù)組

1. splice(): 第一個(gè)參數(shù)為下標(biāo)，第二個(gè)參數(shù)為截取個(gè)數(shù)，并且會(huì)影響原數(shù)組
2. slice()：第一個(gè)參數(shù)為起始下標(biāo)，第二個(gè)參數(shù)為結(jié)束下標(biāo)，不會(huì)影響原數(shù)組

63、下方j(luò)s執(zhí)行后的打印值為？

function demo() {
    this.length = 10;
    var fn = function() {
        console.log(this.length); ? ? // 輸出多少？
    }
    arr = [fn, 'hello layui'];
    fn.length = 100;
    arr0;
}

window.demo()

?console.log(this.length)------打印結(jié)果為2

64、事件綁定的三種方式

1. 在標(biāo)簽上直接設(shè)置事件 ?onclik="a()"
2. dom.onclick = function(){}
3. addEventListener('click',function(){},true)

65、事件綁定和普通事件有什么區(qū)別？

• 普通事件會(huì)覆蓋掉，只執(zhí)行后者方法

1. dom.onclick = function(){}

• 事件綁定不會(huì)覆蓋掉，會(huì)依次執(zhí)行

1. addEventListener('click',function(){},true)

66、漸進(jìn)增強(qiáng)與優(yōu)雅降級(jí)

• 漸進(jìn)增強(qiáng)：針對(duì)低版本瀏覽器進(jìn)行構(gòu)建頁面，保證最基本的功能，然后再針對(duì)高級(jí)瀏覽器進(jìn)行效果、交互等改進(jìn)，達(dá)到更好的用戶體驗(yàn)。
• 優(yōu)雅降級(jí)：一開始就構(gòu)建完整的功能，然后再針對(duì)低版本瀏覽器進(jìn)行兼容。

67、瀏覽器對(duì)象有哪些

• navigator：含有正在使用的Navigator的名稱、版本屬性，
• window：最高等級(jí)的對(duì)象，擁有整個(gè)窗口的屬性;
• document：包含基于文檔內(nèi)容的屬性
• location：含有基于當(dāng)前的URL的屬性。
• history：包含客戶機(jī)先前已經(jīng)請(qǐng)求過的URL。

68、列舉3種強(qiáng)制類型轉(zhuǎn)換(顯示類型轉(zhuǎn)換) ? 和 ? 2種隱式類型轉(zhuǎn)換

• 強(qiáng)制類型轉(zhuǎn)換

1. Number('1235')
2. parseInt('1235')
3. parseFloat('1235')

• 隱式類型轉(zhuǎn)換

1. '10' - 0
2. '10' * 0

69、for in 和 for of
答案：
?(1)、for in

• 1.一般用于遍歷對(duì)象的可枚舉屬性。以及對(duì)象從構(gòu)造函數(shù)原型中繼承的屬性
• 2.不建議使用 for in 遍歷數(shù)組，因?yàn)檩敵龅捻樞蚴遣还潭ǖ摹?/li>
• 3.如果迭代的對(duì)象的變量值是 null 或者 undefined,
  for in 不執(zhí)行循環(huán)體，建議在使用 for in 循環(huán)之前，
  先檢查該對(duì)象的值是不是 null 或者 undefined

(2)、for of

• for…of 語句在可迭代對(duì)象（包括 Array，Map，Set，String，TypedArray，arguments 對(duì)象等等）
  上創(chuàng)建一個(gè)迭代循環(huán)，調(diào)用自定義迭代鉤子，并為每個(gè)不同屬性的值執(zhí)行語句

70、回答以下代碼，alert的值分別是多少？

<script>
    var a = 100;

    function test(){
      alert(a); //輸出為100
      a = 10;   
      alert(a); //輸出為10 
    }
    test();

    alert(a);   //輸出為10
</script>

通過var(let、const)定義聲明變量，如果var則就僅僅只給變量賦值

71、form中的input可以設(shè)置為readonly和disabled，請(qǐng)問2者有什么區(qū)別？

• readonly不可編輯，但可以選擇和復(fù)制；值可以傳遞到后臺(tái)
• disabled不能編輯，不能復(fù)制，不能選擇；值不可以傳遞到后臺(tái)

72、怎么降維數(shù)組 [[1,2],[3,4]] --> [1, 2, 3, 4]

1. 使用遞歸循環(huán)，把所有元素放到一個(gè)新數(shù)組
2. Array.prototype.concat.apply([],[[1,2],[3,4]]);

73、請(qǐng)說出三種減低頁面加載時(shí)間的方法

• 壓縮css、js文件
• 合并js、css文件，減少http請(qǐng)求(精靈圖)
• 外部js、css文件放在最底下
• 減少dom操作，盡可能用變量替代不必要的dom操作

74、基本數(shù)據(jù)類型和引用數(shù)據(jù)類型有什么區(qū)別？

（1）變量直接賦值時(shí)：

????????基本數(shù)據(jù)類型賦值的是數(shù)據(jù)的副本，原數(shù)據(jù)的更改不會(huì)影響傳入后的數(shù)據(jù)。

????????引用數(shù)據(jù)類型賦值的是數(shù)據(jù)的引用地址，原數(shù)據(jù)的更改會(huì)影響傳入后的數(shù)據(jù)。

（2）兩者在內(nèi)存中的存儲(chǔ)位置：

????????基本數(shù)據(jù)類型存儲(chǔ)在棧中。

????????引用數(shù)據(jù)類型在棧中存儲(chǔ)了指針，該指針指向的數(shù)據(jù)實(shí)體存儲(chǔ)在堆中。

75、如何改變this指針的指向？

可以使用apply、call、bind方法改變this指向(并不會(huì)改變函數(shù)的作用域)。比較如下：

（1）三者第一個(gè)參數(shù)都是this要指向的對(duì)象，也就是想指定的上下文，上下文就是指調(diào)用函數(shù)的那個(gè)對(duì)象(沒有就指向全局window)；

（2）apply第二個(gè)參數(shù)都是數(shù)組，call和bind接收多個(gè)參數(shù)并用逗號(hào)隔開；

（3）apply和call只對(duì)原函數(shù)做改動(dòng)，bind會(huì)返回新的函數(shù)(要生效還得再調(diào)用一次)。

76、document load事件 和 document ready事件 的區(qū)別

頁面加載完成有兩種事件

1）load是當(dāng)頁面所有資源全部加載完成后（包括DOM文檔樹，css文件，js文件，圖片資源等），執(zhí)行一個(gè)函數(shù)

問題：如果圖片資源較多，加載時(shí)間較長，onload后等待執(zhí)行的函數(shù)需要等待較長時(shí)間，所以一些效果可能受到影響

2）$(document).ready()是當(dāng)DOM文檔樹加載完成后執(zhí)行一個(gè)函數(shù) （不包含圖片，css等）所以會(huì)比load較快執(zhí)行

在原生的jS中不包括ready()這個(gè)方法，只有l(wèi)oad方法就是onload事件

77、JS中有哪些不同類型的彈出框可用

• 在JS中有三種類型的彈出框可用，分別是：

1. Alert
2. Confirm
3. Prompt

78、線程與進(jìn)程的區(qū)別

• 一個(gè)程序至少有一個(gè)進(jìn)程, 一個(gè)進(jìn)程至少有一個(gè)線程。
• 線程的劃分尺度小于進(jìn)程，使得多線程程序的并發(fā)性高。
• 另外，進(jìn)程在執(zhí)行過程中擁有獨(dú)立的內(nèi)存單元，而多個(gè)線程共享內(nèi)存，從而極大地提高了程序的運(yùn)行效率。
• 線程在執(zhí)行過程中與進(jìn)程還是有區(qū)別的。每個(gè)獨(dú)立的線程有一個(gè)程序運(yùn)行的入口、順序執(zhí)行序列和程序的出口。但是線程不能夠獨(dú)立執(zhí)行，必須依存在應(yīng)用程序中，
• 由應(yīng)用程序提供多個(gè)線程執(zhí)行控制。
• 從邏輯角度來看，多線程的意義在于一個(gè)應(yīng)用程序中，有多個(gè)執(zhí)行部分可以同時(shí)執(zhí)行。但操作系統(tǒng)并沒有將多個(gè)線程看做多個(gè)獨(dú)立的應(yīng)用，來實(shí)現(xiàn)進(jìn)程的調(diào)度和管理以及資源分配。這就是進(jìn)程和線程的重要區(qū)別。

79、什么是回調(diào)

• 回調(diào)函數(shù)是作為參數(shù)或選項(xiàng)傳遞給某個(gè)方法的普通JS函數(shù)。
• 它是一個(gè)函數(shù)，在另一個(gè)函數(shù)完成調(diào)用后執(zhí)行，因此稱為回調(diào)。

80、如何使用 JS 刪除 cookie

• 如果要?jiǎng)h除cookie以便后續(xù)嘗試讀取cookie，則只需將過期日期設(shè)置為過去的時(shí)間。
• 咱們應(yīng)該定義cookie路徑以確保刪除正確的cookie。
• 如果未指定路徑，某些瀏覽器將不允許咱們刪除cookie

81、2+5+'3'的結(jié)果是什么

答案：'73'

由于2和5是整數(shù)，它們將以數(shù)字形式相加。因?yàn)?是一個(gè)字符串，它將與 7 拼接，結(jié)果是73。

82、如何在JS中清空數(shù)組

1、arrayList = []


2、arrayList.length = 0;


3、arrayList.splice(0, arrayList.length);


4、 while(arrayList.length){

        arrayList.pop();

    }

83、innerHTML 和 innerText 的共同點(diǎn)與區(qū)別

• 共同點(diǎn)：獲取或者設(shè)置元素的內(nèi)容
• 區(qū)別：

1. innerHTML可以解析內(nèi)容中html標(biāo)簽
2. innerText不可以解析內(nèi)容中html標(biāo)簽

84、請(qǐng)選擇結(jié)果為真的表達(dá)式：（C）

A.null instanceof Object

B.null === undefined

C.null == undefined+

D.NaN == NaN

86、原生JS中如何從一個(gè)頁面 跳轉(zhuǎn) 到另一個(gè)頁面

• 跳轉(zhuǎn)到其它頁面（會(huì)產(chǎn)生歷史記錄）

????????location.href = '路徑'

• 跳轉(zhuǎn)且替換頁面（不會(huì)產(chǎn)生歷史記錄）

????????location.replace('路徑')

87、在JS中編碼與解碼URL

• .encodeURI() 可以對(duì)字符串編碼
• .decodeURI() 可以對(duì)字符串解碼

88、callee 與 call 與 caller的區(qū)別:

• callee是arguments上面的屬性，表示當(dāng)前正在執(zhí)行的函數(shù)
• call改變函數(shù)調(diào)用時(shí)里邊this的指向
• caller是函數(shù)上的一個(gè)屬性,它指向當(dāng)前函數(shù)外一層函數(shù)，沒有外一層函數(shù)，則為null

89、什么是jsonp

• jsonp是一種解決跨域請(qǐng)求問題的技術(shù)
• 不足點(diǎn)：它只能是get請(qǐng)求

90、[1, 2, 3].map(Math.pow)的結(jié)果是什么?

請(qǐng)說出代碼的運(yùn)行結(jié)果，為什么？

結(jié)果時(shí) 129

map()會(huì)根據(jù)提供提供的函數(shù)對(duì)指定序列(列表)做映射。

pow()方法返回 x的y次方的值。

map(function(當(dāng)前元素的值value,下標(biāo)index));

91、toString() 與 valueOf()的區(qū)別

1. toString() 方法返回一個(gè)表示該對(duì)象的字符串。
2. valueOf() 方法返回指定對(duì)象的原始值, 如果對(duì)象沒有原始值，則valueOf將返回對(duì)象本身

92、怎么自定義一個(gè)dom事件，并且編程式觸發(fā)它？

• 通過new Event('事件名')創(chuàng)建一個(gè)事件對(duì)象
• 給指定元素綁定事件
• document.dispatchEvent(事件對(duì)象)來觸發(fā)事件

示例

const ev = new Event('abc');

document.addEventListener('abc', function (e) {

    console.log('abc事件觸發(fā)了。。。。。。')

})

document.dispatchEvent(ev)

93、continue 與 break的區(qū)別

• continue：跳過本次循環(huán)，直接進(jìn)入下一次循環(huán)
• break：直接終止循環(huán)

94、簡述一下你對(duì) HTML 語義化標(biāo)簽的理解？

① 用正確的標(biāo)簽做正確的事情。
② html語義化讓頁面的 內(nèi)容結(jié)構(gòu)化，結(jié)構(gòu)更清晰，
便于對(duì)瀏覽器、搜索引擎解析；即使在沒有樣式 CSS 情況下也以一種文檔格式顯示，
并且是容易閱讀的;
③ 搜索引擎的爬蟲也依賴于 HTML 標(biāo)記來確定上下文和各個(gè)關(guān)鍵字的權(quán)重，利于SEO;
④ 使閱讀源代碼的人對(duì)網(wǎng)站更容易將網(wǎng)站分塊，便于閱讀維護(hù)理解。

95、圖片img標(biāo)簽title與alt屬性的區(qū)別

• title屬性：光標(biāo)移入要顯示圖片文字
• alt屬性：當(dāng)圖片加載失敗時(shí)要顯示的文字

96、HTML5 的 form 如何關(guān)閉自動(dòng)完成功能？

答案：將不想要自動(dòng)完成的form或input設(shè)置為autocomplete=off

97、簡述一下 src 與 href 的區(qū)別。

答案：src 用于引用資源，替換當(dāng)前元素；
href 用于在當(dāng)前文檔和引用資源之間確立聯(lián)系。

解析：
●  href 
href 標(biāo)識(shí)超文本引用，用在 link 和 a 等元素上，href 是引用和頁面關(guān)聯(lián)，
是在當(dāng)前元素和引用資源之間建立聯(lián)系，在加載它的時(shí)候，
不會(huì)停止對(duì)當(dāng)前文檔的處理，
瀏覽器會(huì)繼續(xù)往下走

若在文檔中添加 href ，瀏覽器會(huì)識(shí)別該文檔為 CSS 文件，
就會(huì)并行下載資源并且不會(huì)停止對(duì)當(dāng)前文檔的處理。
這也是為什么建議使link方式加載 CSS，而不是使用 @import  方式。  
●  src 
src 表示引用資源，替換當(dāng)前元素，用在 img，script，iframe 上，
src 是頁面內(nèi)容不可缺少的一部分。

當(dāng)瀏覽器解析到 src ，會(huì)暫停其他資源的下載和處理
（圖片不會(huì)暫停其他資源下載和處理），直到將該資源加載、編譯、執(zhí)行完畢，
圖片和框架等也如此，類似于將所指向資源應(yīng)用到當(dāng)前內(nèi)容。
這也是為什么建議把 js 腳本放在底部而不是頭部的原因。 

98、對(duì) WEB 標(biāo)準(zhǔn)以及 W3C 的理解與認(rèn)識(shí)

1. 標(biāo)簽閉合、標(biāo)簽小寫、不亂嵌套
2. 使用外鏈css 和 js腳本、結(jié)構(gòu)行為表現(xiàn)的分離、文件下載與頁面速度更快
3. W3C標(biāo)準(zhǔn)使網(wǎng)站容易維護(hù)、有利于搜索引擎查找

99、Label的作用是什么？是怎么用的？

答案：label 標(biāo)簽來定義表單控制間的關(guān)系,**當(dāng)用戶選擇該標(biāo)簽時(shí)，
瀏覽器會(huì)自動(dòng)將焦點(diǎn)轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件上**。

兩種用法：一種是 id 綁定，一種是嵌套;

示例：  
<label for="pwd">用戶名：</label>

<input id="pwd" type="checkbox">

100、每個(gè) HTML 文件頭里都有個(gè)很重要的東西，Doctype，知道這是干什么的么？

<!DOCTYPE> 聲明位于文檔中的最前面的位置，處于 <html> 標(biāo)簽之前。

• 告知瀏覽器文檔使用哪種 HTML 或 XHTML 規(guī)范。
• 告訴瀏覽器按照何種規(guī)范解析頁（如果你的頁面沒有 DOCTYPE 的聲明，那么 compatMode 默認(rèn)就是 BackCompat,瀏覽器按照自己的方式解析渲染頁面）

解析：
doctype 是一種標(biāo)準(zhǔn)通用標(biāo)記語言的文檔類型聲明，目的是告訴標(biāo)準(zhǔn)通用標(biāo)記語言解析器要使用什么樣的文檔類型定義（DTD）來解析文檔。
瀏覽器本身分為兩種模式，一種是標(biāo)準(zhǔn)模式，一種是怪異模式，瀏覽器通過 doctype 來區(qū)分這兩種模式，doctype 在 html
中的作用就是觸發(fā)瀏覽器的標(biāo)準(zhǔn)模式，如果 html 中省略了 doctype，瀏覽器就會(huì)進(jìn)入到 Quirks 模式的怪異狀態(tài)，在這種模式下，有些樣式會(huì)和標(biāo)準(zhǔn)模式存在差異，而 html 標(biāo)準(zhǔn)和 dom 標(biāo)準(zhǔn)值規(guī)定了標(biāo)準(zhǔn)模式下的行為，沒有對(duì)怪異模式做出規(guī)定，因此不同瀏覽器在怪異模式下的處理也是不同的，所以一定要在 html 開頭使用 doctype。

• 自己總結(jié)一下：

1. doctype是一種標(biāo)準(zhǔn)通用標(biāo)記語言的文檔類型聲明;
2. doctype在 html中的作用就是觸發(fā)瀏覽器的標(biāo)準(zhǔn)模式,否則為怪異模式;
3. 不同瀏覽器在怪異模式下會(huì)有一些不同的表現(xiàn)，不建議使用怪異模式;
4. doctype一定需要寫html上面才會(huì)生效;

-----------------------------------------------------------6月27--------------------------------------------------------------

101、為什么最好把 CSS 的<link>標(biāo)簽放在<head></head>之間？
為什么最好把 JS 的<script>標(biāo)簽恰好放在</body>之前，有例外情況嗎？

• CSS 的<link>標(biāo)簽放在<head></head>:

1. 內(nèi)容規(guī)范
2. 讓頁面逐步呈現(xiàn),提高用戶體驗(yàn)感
3. 防止呈現(xiàn)給用戶空白的頁面或沒有樣式的內(nèi)容

• JS 的<script>標(biāo)簽恰好放在</body>之前 :

1. 規(guī)范;
2. 把<script>標(biāo)簽放在底部，保證 HTML 首先完成解析，將頁面盡早呈現(xiàn)給用戶;

解析：
1).把<link>放在<head>中:
把<link>標(biāo)簽放在<head></head>之間是規(guī)范要求的內(nèi)容。
此外，這種做法可以讓頁面逐步呈現(xiàn)，提高了用戶體驗(yàn)。
將樣式表放在文檔底部附近，會(huì)使許多瀏覽器（包括 Internet Explorer）
不能逐步呈現(xiàn)頁面。一些瀏覽器會(huì)阻止渲染，以避免在頁面樣式發(fā)生變化時(shí)，
重新繪制頁面中的元素。這種做法可以防止呈現(xiàn)給用戶空白的頁面或沒有樣式的內(nèi)容。

2).把<script>標(biāo)簽恰好放在</body>之前:
腳本在下載和執(zhí)行期間會(huì)阻止 HTML 解析。
把<script>標(biāo)簽放在底部，保證 HTML 首先完成解析，將頁面盡早呈現(xiàn)給用戶。
例外情況是當(dāng)你的腳本里包含document.write()時(shí)。但是現(xiàn)在，
document.write()不推薦使用。同時(shí)，將<script>標(biāo)簽放在底部，
意味著瀏覽器不能開始下載腳本，直到整個(gè)文檔（document）被解析。
也許，對(duì)此比較好的做法是，<script>使用defer屬性，放在<head>中。

102、title 與 h1 的區(qū)別、b 與 strong 的區(qū)別、i 與 em 的區(qū)別？

• title：表示文檔窗口標(biāo)題
• h1：內(nèi)容標(biāo)題
• b：粗體
• strong：粗體（strong會(huì)表示強(qiáng)調(diào)）(語義化)
• i：斜體
• em：斜體（em會(huì)表示強(qiáng)調(diào)，強(qiáng)調(diào)比strong弱）(語義化)

103、CSS 隱藏元素的幾種方法（至少說出三種）

• Opacity: 0 ----設(shè)置透明度來隱藏元素
• visibility:hidden; --- 隱藏對(duì)應(yīng)的元素并且擠占該元素原來的空間。
• display:none; ----隱藏對(duì)應(yīng)的元素但不擠占該元素原來的空間。
• position:absolute; top:-9999px; ---讓該元素脫離文檔流移出視覺區(qū)域.

104、頁面導(dǎo)入樣式時(shí)，使用 link 和 @import 有什么區(qū)別？
答案：

相同點(diǎn) : link 和 @import 都是用于引入外部css樣式文件

區(qū)別:

• link:

1. html標(biāo)簽
2. 與頁面一起加載
3. 權(quán)重比@import大
4. 由于是html標(biāo)簽,不存在瀏覽器兼容性問題

• @import:

1. css語法
2. 需要等頁面加載完成后才會(huì)加載引用的 CSS
3. @import 只有在 ie5 以上才可以被識(shí)別
4. 權(quán)重比link小

105、rgba()和 opacity 的透明效果有什么不同？
答案：

• 相同點(diǎn) : rgba()和 opacity 都能實(shí)現(xiàn)透明效果，
• 不同點(diǎn) : 但最大的不同是 opacity 作用于元素，以及元素內(nèi)的所有內(nèi)容的透明度，而 rgba()只作用于元素的顏色或其背景色。（設(shè)置 rgba 透明的元素的子元素不會(huì)繼承透明效果?。?/li>

106、display:none 與 visibility:hidden 的區(qū)別是什么？

答案：
display?:? 隱藏對(duì)應(yīng)的元素但不擠占該元素原來的空間。
visibility:? 隱藏對(duì)應(yīng)的元素并且擠占該元素原來的空間。

即是，使用 CSS display:none 屬性后，HTML 元素（對(duì)象）的寬度、高度等各種屬性值都將“丟失”;
而使用 visibility:hidden 屬性后，HTML 元素（對(duì)象）僅僅是在視覺上看不見（完全透明），
而它所占據(jù)的空間位置仍然存在。

107、哪些 css 屬性可以繼承？
答案：

• 可繼承：text-align、font、color、line-height、letter-spacing、word-spacing、text-indent
• 不可繼承 ：border padding margin width height ;

108、精靈圖和 base64 如何選擇？

精靈圖:

• 優(yōu)點(diǎn):

1. 將多個(gè)圖像加載請(qǐng)求合并為一個(gè)請(qǐng)求;

• 弊端:

1. 難以維護(hù)和更新;
2. 增加內(nèi)存消耗;

base64:

• 優(yōu)點(diǎn):

1. 將多個(gè)圖像加載請(qǐng)求合并為一個(gè)CSS文件請(qǐng)求;
2. 輕松更新生成文件;

• 弊端:

1. base64編碼比原始二進(jìn)制表示大約大25%;
2. IE6或IE7不支持;

109、請(qǐng)說一下你用過的瀏覽器存儲(chǔ)，并說出它們的區(qū)別?

• sessionStorage
• localStorage
• cookie

相同點(diǎn) : 三者都是在瀏覽器本地存放數(shù)據(jù);

• 區(qū)別 :

1. sessionStorage：數(shù)據(jù)只存在于會(huì)話期間
2. localStorage：數(shù)據(jù)永久存儲(chǔ)
3. cookie：數(shù)據(jù)默認(rèn)會(huì)話結(jié)束時(shí)過期，但可以設(shè)置過期時(shí)間，在請(qǐng)求服務(wù)端，瀏覽器會(huì)默認(rèn)把cookie數(shù)據(jù)發(fā)送給服務(wù)器，cookie能存放的數(shù)據(jù)相對(duì)較小

110、請(qǐng)說一個(gè)pushState與replaceState兩個(gè)方法的作用與區(qū)別

作用 : 都是改變路由(路徑)的，路徑改變時(shí)不會(huì)請(qǐng)求服務(wù)器（除非你f5刷新）

• 區(qū)別：

1. pushState：不會(huì)替換掉之前的歷史路徑
2. replaceState：會(huì)替換掉之前的歷史路徑

------------------------------------------------------------6.28---------------------------------------------------------------

111、請(qǐng)解析一下數(shù)組map、filter, reduce三個(gè)方法的作用

• map()方法：把回調(diào)函數(shù)中返回的值，作為一個(gè)新數(shù)組返回
• filter()方法：返回符合回調(diào)函數(shù)中條件的元素，形成一個(gè)新數(shù)組
• reduce()方法：對(duì)數(shù)組中元素進(jìn)行從左到右的累計(jì)，并返回最終結(jié)果

112、怎么樣刪除一個(gè)對(duì)象的屬性

• delete 對(duì)象.屬性名

113、請(qǐng)說一下深拷貝與淺拷貝的區(qū)別

• 淺拷貝：只把對(duì)象的內(nèi)存地址，賦值給新變量
• 深拷貝：而是整個(gè)對(duì)象在堆空間中，復(fù)制一份，返回一個(gè)新地址給變量

114、如何對(duì)一個(gè)數(shù)組進(jìn)行去重？

方式一：
var arr01 = [2,3,4,2,2,2,3];
var arr02 = [];
for(var i = 0; i < arr01.length; i++){
  if( arr02.indexOf(arr01[i]) === -1 ){
    arr02.push(  arr01[i]  )
  }
}


方式二(set去重)：
var arr01 = [2,5,2,2,5,7];
var set = new Set(arr01)

115、如果對(duì)一個(gè)數(shù)組進(jìn)行排序，不能少于2種?

方法一：
var arr = [4,7,2,10,5,9]
for(var i = 0; i < arr.length - 1; i++){
  for(var j = 0; j < arr.length - 1 - i; j++){
    if(arr[j] > arr[j+1]){
      var tem = arr[j]
      arr[j] = arr[j+1]
      arr[j+1] = tem
    }
  }
}


方式二：
arr.sort(function(n1, n2){
  return n1 - n2
})

116、在JS中如何把一個(gè)偽數(shù)組 轉(zhuǎn)換成一個(gè) 真正的數(shù)組？

方式一:
Array.from(偽數(shù)組)

方式二:
var arr = [];
for(var i = 0; i < 偽數(shù)組.length; i++){
  arr.push(偽數(shù)組元素)
}

117、請(qǐng)說一下CSS樣式的優(yōu)先級(jí)問題

1. ID選擇器 id> 類選擇器 class> 標(biāo)簽選擇器
2. 行類樣式 > 內(nèi)部樣式 與 外部樣式； 后聲明的樣式 > 先聲明的樣式

118、如果實(shí)現(xiàn)一個(gè)超鏈接下載功能

• 添加download屬性

119、一次完整的HTTP事務(wù)是怎樣的一個(gè)過程？

1. 域名解析
2. 發(fā)起TCP的3次握手
3. 建立TCP鏈接后發(fā)起http請(qǐng)求
4. 服務(wù)器端響應(yīng)http請(qǐng)求，瀏覽器得到html代碼
5. 瀏覽器解析html代碼，并請(qǐng)求html代碼中的資源
6. 瀏覽器對(duì)頁面進(jìn)行渲染呈現(xiàn)給用戶

120、怎么把一個(gè)對(duì)象存儲(chǔ)到瀏覽器本地中

答案 : 利用sessionStorage或者localStorage把對(duì)象存到瀏覽器中;

( 但是在存儲(chǔ)之前需要把對(duì)象變成JSON格式的字符串，獲取數(shù)據(jù)時(shí)再解析

利用JSON.stringify()與JSON.parse()兩個(gè)方法)

121、json和jsonp的區(qū)別?

• json是一種數(shù)據(jù)格式，一般用于數(shù)據(jù)交互;
• jsonp是一種解決跨域請(qǐng)求技術(shù)，只能是get請(qǐng)求;

122、jsonp的實(shí)現(xiàn)原理

• 利用script請(qǐng)求并且執(zhí)行服務(wù)端響應(yīng)的代碼；
• 執(zhí)行代碼調(diào)用頁面中的函數(shù)，且把代碼中數(shù)據(jù)傳入

123、jsonp是否為ajax請(qǐng)求，為什么？

• 不是正真ajax請(qǐng)求
• jsonp是通過script標(biāo)簽發(fā)的請(qǐng)求，并沒有XMLHttpRequest對(duì)象

124、字符串翻轉(zhuǎn)

'abcde' -> 'edcba'
console.log(str1.split('').reverse().join(''))?

//切割數(shù)組 ?reverse()(反轉(zhuǎn)數(shù)組中元素的位置) ?切位字符串 ?

125、for循環(huán) 與 forEach循環(huán)的區(qū)別?

1. for循環(huán)中可以使用break、continue不用使用return 因?yàn)樗醒h(huán)體，且不是函數(shù);
2. forEach循環(huán)不能使用break、continue，可以return，因?yàn)樗鼒?zhí)行的是函數(shù);

126、通過 new 的方式創(chuàng)建對(duì)象和通過字面量創(chuàng)建有什么區(qū)別？

1. 字面量創(chuàng)建對(duì)象，不會(huì)調(diào)用 Object 構(gòu)造函數(shù), 簡潔且性能更好;
2. new Object() 方式創(chuàng)建對(duì)象本質(zhì)上是方法調(diào)用，涉及到在 proto
   鏈中遍歷該方法，當(dāng)找到該方法后，又會(huì)生產(chǎn)方法調(diào)用必須的 堆棧信息，
   方法調(diào)用結(jié)束后，還要釋放該堆棧，性能不如字面量的方式

127、javascript的同源策略（跨域問題）

• 跨域是什么：實(shí)際上就是一個(gè)網(wǎng)站不能執(zhí)行其他網(wǎng)站上的網(wǎng)址，是由瀏覽器同源策略造成的，是瀏覽器對(duì)js施加的安全限制，所謂同源，實(shí)際上是指域名，協(xié)議，端口都相同，也就是說當(dāng)，域名或者協(xié)議，或者端口不同的時(shí)候，就是跨域

128、常見的瀏覽器內(nèi)核有哪些？

• Trident 內(nèi)核：IE,MaxThon,TT,The World,360,搜狗瀏覽器等。[又稱 MSHTML]
• Gecko ? 內(nèi)核：Netscape6 及以上版本，F(xiàn)F,MozillaSuite/SeaMonkey 等
• Presto ?內(nèi)核：Opera7 及以上。 [Opera 內(nèi)核原為：Presto，現(xiàn)為：Blink;]
• Webkit ?內(nèi)核：Safari,Chrome 等。 [ Chrome 的：Blink（WebKit 的分支）]

129、如何實(shí)現(xiàn)瀏覽器內(nèi)多個(gè)標(biāo)簽頁之間的數(shù)據(jù)通信?

• 調(diào)用 localstorge、cookies 等本地存儲(chǔ)方式；

注意：sessionstorge不可以哦（它只在本窗口使用）

130、javascript 代碼中的"use strict";是什么意思 ? 使用它區(qū)別是什么？

use strict 是一種 ECMAscript5 添加的（嚴(yán)格）運(yùn)行模式,

• 區(qū)別 ：這種模式使得 Javascript 在更嚴(yán)格的條件下運(yùn)行,使 JS 編碼更加規(guī)范化的模式,消除 Javascript 語法的一些不合理、不嚴(yán)謹(jǐn)之處，減少一些怪異行為

-------------------------------------------------------------6.29--------------------------------------------------------------

131、行內(nèi)元素和塊級(jí)元素的具體區(qū)別是什么？行內(nèi)元素的 padding 和 margin 可設(shè)置嗎？

• 塊級(jí)元素(block)特性

1. 總是獨(dú)占一行，表現(xiàn)為另起一行開始，而且其后的元素也必須另起一行顯示;
2. 寬度(width)、高度(height)、內(nèi)邊距(padding)和外邊距(margin)都可控制;

• 內(nèi)聯(lián)元素(inline)特性：

1. 和相鄰的內(nèi)聯(lián)元素在同一行;
2. 寬度(width)、高度(height)不能設(shè)置
3. 可以設(shè)置padding，但是上下的padding會(huì)上下相鄰的元素重疊
4. 可以設(shè)置左右的margin,但是不能設(shè)置上下的margin

132、那么問題來了，瀏覽器還有默認(rèn)的天生 inline-block 元素（擁有內(nèi)在尺寸，可設(shè)置高寬，但不會(huì)自動(dòng)換行），有哪些？

答案：<input> 、<img> 、<button> 、<texterea> 、<label>。

133、px 和 em 的區(qū)別。

px 和 em 都是長度單位

區(qū)別：

• px 的值是固定的，指定是多少就是多少，計(jì)算比較容易。
• em 得值不是固定的，并且 em 會(huì)繼承父級(jí)元素的字體大小。

瀏覽器的默認(rèn)字體高都是 16px。所以未經(jīng)調(diào)整的瀏覽器都符合: 1em=16px。那么 12px=0.75em, 10px=0.625em。

134、Sass、LESS 是什么？大家為什么要使用他們？

• 他們是 CSS 預(yù)處理器。
• 他們是 CSS 上的一種抽象層。
• 他們是一種特殊的語法/語言編譯成 CSS。

例如 Less 是一種動(dòng)態(tài)樣式語言. 將 CSS 賦予了動(dòng)態(tài)語言的特性，如變量，繼承，運(yùn)算， 函數(shù). LESS 既可以在客戶端上運(yùn)行 (支持 IE 6+, Webkit, Firefox)，也可一在服務(wù)端運(yùn)行 (借助 Node.js)。

• 為什么要使用它們？

1. 結(jié)構(gòu)清晰，便于擴(kuò)展。
2. ?可以輕松實(shí)現(xiàn)多重繼承與混合
3. 完全兼容 CSS 代碼，可以方便地應(yīng)用到老項(xiàng)目中。LESS 只是在 CSS 語法上做了擴(kuò)展，所以老的 CSS 代碼也可以與 LESS 代碼一同編譯。
4. ?還提供了一些比較方便的函數(shù)，語句等等
5. 可以方便地屏蔽瀏覽器私有語法差異。這個(gè)不用多說，封裝對(duì)瀏覽器語法差異的重復(fù)處理，減少無意義的機(jī)械勞動(dòng)。

135、為什么要初始化CSS樣式（CSSReset）
答案：

• 因?yàn)闉g覽器的兼容問題，不同瀏覽器對(duì)有些標(biāo)簽的默認(rèn)值是不同的，
  如果沒對(duì) CSS 初始化往往會(huì)出現(xiàn)瀏覽器之間的頁面顯示差異。
• 去掉標(biāo)簽的默認(rèn)樣式如：margin,padding，其他瀏覽器默認(rèn)解析字體大小，字體設(shè)置。

136、什么是重寫，什么是重載？

• 重寫：子類覆蓋掉從父類繼承過來的方法
• 重載：有多個(gè)同名的方法，但是參數(shù)列表不一樣

重寫就是子類覆蓋掉父類的方法

重載就是在一個(gè)類里面，方法名字相同，而參數(shù)不同。

返回類型可以相同也可以不同。

137、一句代碼隨機(jī)打亂數(shù)組元素順序

let arr = [1,1,2,3,4,6,9,1]
arr.sort( function(n1, n2){ return Math.random() - 0.5 } )

138、什么是web worker，為什么我們需要他們web worker？

• 什么是web worker :

1. web worker是一種開啟線程方式;

• 使用Web workers的原因：

1. 通過使用Web Worker， 我們可以在瀏覽器后臺(tái)運(yùn)行Javascript， 而不占用瀏覽器自身線程（Web work實(shí)現(xiàn)多線程）。
2. Web Worker可以提高應(yīng)用的總體性能，并且提升用戶體驗(yàn)。

可以在主線程的下面通過web worker開啟一個(gè)子線程
子線程的執(zhí)行不會(huì)阻塞主線程執(zhí)行
當(dāng)我們需要去代碼一些高運(yùn)算的代碼時(shí)，為了不阻塞主線程，
這個(gè)時(shí)則就可以開啟一個(gè)子線程去做這個(gè)事件

139、JS中如何將頁面重定向到另一個(gè)頁面？

1. location.replace()
2. location.href = 'url'

140、解釋一下回調(diào)函數(shù)

當(dāng)我們把一個(gè)函數(shù)(A)作為一個(gè)實(shí)參傳入給函數(shù)(B)時(shí)，則這個(gè)時(shí)候函數(shù)A就是一個(gè)回調(diào)函數(shù)

---------------------------------------------------------6.30-----------------------------------------------------------

141、jQuery對(duì)象與js對(duì)象互相轉(zhuǎn)換

• jquery對(duì)象轉(zhuǎn)成js對(duì)象（通過下標(biāo)轉(zhuǎn)換）

????????$("div")[0]

• js對(duì)象轉(zhuǎn)成jquery對(duì)象（只需要對(duì)象用$包起來）

????????$(js對(duì)象)

142、script的位置是否會(huì)影響首屏顯示時(shí)間？

在解析 HTML 生成 DOM 過程中，js 文件的下載是并行的，不需要 DOM 處理到 script 節(jié)點(diǎn)。

因此，script 的位置不影響首屏顯示的開始時(shí)間。

瀏覽器解析 HTML 是自上而下的線性過程，

script 作為 HTML 的一部分同樣遵循這個(gè)原則

因此，script 會(huì)延遲 DomContentLoad，只顯示其上部分首屏內(nèi)容，

143、JavaScript 對(duì)象生命周期的理解？

一個(gè)東西從創(chuàng)建開始 到 銷毀結(jié)束這個(gè)期間，就叫做生命周期

144、請(qǐng)描述一下var、const、let三者的區(qū)別

• var可以變量提升，const、let不會(huì)
• var沒有塊級(jí)作用域，const、let存在塊級(jí)作用域
• var可以重復(fù)定義變量，const、let不能重復(fù)定義
• var定義的變量會(huì)作為window對(duì)象的屬性，let與const定義的變量不會(huì)
• const需要有初始值，并且值不能修改（定義的是常量）

145、var let 在 for 循環(huán)中的區(qū)別

• var不存在塊級(jí)作用域，所以在for循環(huán)時(shí)，每次循環(huán)var定義變量i的值，都會(huì)被后一次循環(huán)覆蓋;
• let存在塊級(jí)作用域，每一次循環(huán)都是一個(gè)獨(dú)立的域，let定義變量i的值，就不會(huì)被后一次循環(huán)覆蓋

146、forEach、for in、for of三者區(qū)別

1. forEach更多的用來遍歷數(shù)組
2. for in 一般常用來遍歷對(duì)象或json
3. for of數(shù)組對(duì)象都可以遍歷，for of不能直接的去遍歷對(duì)象，因?yàn)閷?duì)象不是一個(gè)可迭代數(shù)據(jù)，遍歷對(duì)象通過Object.keys()獲取到對(duì)象的屬性名，然后再遍歷

for in循環(huán)出的是key，for of循環(huán)出的是value（for of循環(huán)時(shí)沒有下標(biāo)）

147、Promise構(gòu)造函數(shù)是同步執(zhí)行還是異步執(zhí)行，那么 then 方法呢？

• 創(chuàng)建Promise時(shí)，傳入的回調(diào)函數(shù)的執(zhí)行，是同步的
• promise對(duì)象上 then函數(shù)中的回調(diào)執(zhí)行，是異步的

148、使用箭頭函數(shù)應(yīng)注意什么？

1. 箭頭函數(shù)的this指向父級(jí)函數(shù)的this，如果沒有父級(jí)則指向window
2. 不能夠使用arguments對(duì)象
3. 不能用作構(gòu)造函數(shù)，這就是說不能夠使用new命令，否則會(huì)拋出一個(gè)錯(cuò)誤
4. 不可以使用yield命令，因此箭頭函數(shù)不能用作 Generator 函數(shù)

149、解構(gòu)賦值過程 ?及其原理
答案：

• 解構(gòu)賦值：其實(shí)就是分解出一個(gè)對(duì)象的解構(gòu)，分成兩個(gè)步驟：

• 解構(gòu)賦值過程:

1. 變量的聲明
2. 變量的賦值

原理：
ES6 變量的解構(gòu)賦值本質(zhì)上是“模式匹配”,只要等號(hào)兩邊的模式相同，
左邊的變量就會(huì)被賦予匹配的右邊的值，
如果匹配不成功變量的值就等于 undefined

150、es5和es6的區(qū)別，說一下你所知道的es6

ECMAScript5，即ES5，是ECMAScript的第五次修訂，于2009年完成標(biāo)準(zhǔn)化ECMAScript6，
即ES6，是ECMAScript的第六次修訂，于2015年完成，也稱ES2015ES6是繼ES5之后的一次改進(jìn)，
相對(duì)于ES5更加簡潔，提高了開發(fā)效率ES6新增的一些特性：

1. let聲明變量和const聲明常量，兩個(gè)都有塊級(jí)作用域ES5中是沒有塊級(jí)作用域的，并且var有變量提升，在let中，使用的變量一定要進(jìn)行聲明
2. 箭頭函數(shù)ES6中的函數(shù)定義不再使用關(guān)鍵字function()，而是利用了()=>來進(jìn)行定義
3. 字符串模板字符串是增強(qiáng)版的字符串，用反引號(hào)標(biāo)識(shí)，可以當(dāng)作普通字符串使用，也可以用來定義多行字符串
4. 解構(gòu)賦值ES6 允許按照一定模式，從數(shù)組和對(duì)象中提取值，對(duì)變量進(jìn)行賦值
5. for...of循環(huán)可以遍歷數(shù)組、Set和Map結(jié)構(gòu)、某些類似數(shù)組的對(duì)象、對(duì)象，以及字符串
6. import、export模塊化導(dǎo)入導(dǎo)出ES6標(biāo)準(zhǔn)中，Js原生支持模塊(module)。將JS代碼分割成不同功能的小塊進(jìn)行模塊化，將不同功能的代碼分別寫在不同文件中，各模塊只需導(dǎo)出公共接口部分，然后通過模塊的導(dǎo)入的方式可以在其他地方使用
7. Set數(shù)據(jù)結(jié)構(gòu)，類似數(shù)組。所有的數(shù)據(jù)都是唯一的，沒有重復(fù)的值。它本身是一個(gè)構(gòu)造函數(shù)
8. 展開運(yùn)算符可以將數(shù)組或?qū)ο罄锩娴闹嫡归_；還可以將多個(gè)值收集為一個(gè)變量
9. class 類的繼承ES6中不再像ES5一樣使用原型鏈實(shí)現(xiàn)繼承，而是引入Class這個(gè)概念
10. async、await使用 async/await, 搭配promise,可以通過編寫形似同步的代碼來處理異步流程, 提高代碼的簡潔性和可讀性async 用于申明一個(gè) function 是異步的，而 await 用于等待一個(gè)異步方法執(zhí)行完成
11. Promise是異步編程的一種解決方案，比傳統(tǒng)的解決方案（回調(diào)函數(shù)和事件）更合理、強(qiáng)大
12. Symbol是一種基本類型。Symbol 通過調(diào)用symbol函數(shù)產(chǎn)生，它接收一個(gè)可選的名字參數(shù)，該函數(shù)返回的symbol是唯一的
13. Proxy代理使用代理（Proxy）監(jiān)聽對(duì)象的操作，然后可以做一些相應(yīng)事情

---------------------------------------------------------------7.4--------------------------------------------------------------

151、理解 async/await 以及對(duì) Generator 的優(yōu)勢

async/await的介紹：
async await 是用來解決異步的，async函數(shù)是Generator函數(shù)的語法糖
使用關(guān)鍵字async來表示，在函數(shù)內(nèi)部使用 await 來表示異步
async函數(shù)返回一個(gè) Promise 對(duì)象，可以使用then方法添加回調(diào)函數(shù)
當(dāng)函數(shù)執(zhí)行的時(shí)候，一旦遇到await就會(huì)先返回，等到異步操作完成，
再接著執(zhí)行函數(shù)體內(nèi)后面的語句

async較Generator的優(yōu)勢：
（1）內(nèi)置執(zhí)行器。Generator 函數(shù)的執(zhí)行必須依靠執(zhí)行器，而 Aysnc 函數(shù)自帶執(zhí)行器，
調(diào)用方式跟普通函數(shù)的調(diào)用一樣
（2）更好的語義。async 和 await 相較于 * 和 yield 更加語義化　　
（3）返回值是 Promise。async 函數(shù)返回的是 Promise 對(duì)象，
比Generator函數(shù)返回的Iterator對(duì)象方便，可以直接使用 then() 方法進(jìn)行調(diào)用

152、promise有哪幾種狀態(tài)，什么時(shí)候會(huì)進(jìn)入catch（或者then函數(shù)的第二個(gè)回調(diào)）？

• 三個(gè)狀態(tài)：

1. pending（初始化）、fulfilled（履行|成功）、reject（拒絕|失?。?/li>

• 兩個(gè)過程：

1. padding -> fulfilled、
2. padding -> rejected
3. 當(dāng)pending為rejectd時(shí)，會(huì)進(jìn)入catch

1. 初始化，狀態(tài)：pending
2. 當(dāng)調(diào)用resolve(成功)，狀態(tài)：pengding=>fulfilled
3. 當(dāng)調(diào)用reject(失敗)，狀態(tài)：pending=>rejected

153、什么時(shí)候不使用箭頭函數(shù)? 說出三個(gè)或更多的例子

1. 使用函數(shù)作為構(gòu)造函數(shù)時(shí)(箭頭函數(shù)沒有構(gòu)造函數(shù))
2. 要在函數(shù)中使用 this/arguments 時(shí)，由于箭頭函數(shù)本身不具有
   this/arguments，因此它們?nèi)Q于外部上下文
3. 當(dāng)想要函數(shù)被提升時(shí)(箭頭函數(shù)是匿名的)
4. 當(dāng)我們希望函數(shù)中的this指向調(diào)用這個(gè)函數(shù)的對(duì)象時(shí)，也不用箭頭函數(shù)，
   因?yàn)樵蹅儫o法保證 this 即對(duì)象本身。

154、什么是Async/Await?

• async/await是寫異步代碼的新方式，以前的方法有回調(diào)函數(shù)和Promise。
• async/await使得異步代碼看起來像同步代碼，這正是它的魔力所在。
• async/await與Promise一樣，是非阻塞(異步)的。

155、jquery的ajax 和 axios區(qū)別

• 兩者其實(shí)并沒有太大的區(qū)別，在寫法上大致相同。
• 其實(shí)axios是通過 promise 實(shí)現(xiàn)對(duì) ajax 技術(shù)的一種封裝。
• 就像jQuery對(duì)原生ajax封裝一樣。

也就是說，jQuery 將請(qǐng)求技術(shù)進(jìn)行了封裝 變成了 ajax ,

而 通過 promise 把 ajax 進(jìn)行封裝就成了 axios。

156、箭頭函數(shù)與普通函數(shù)區(qū)別？

1. 寫法不一樣
2. 普通函數(shù)存在提升的現(xiàn)象
3. 箭頭函數(shù)不能作為構(gòu)造函數(shù)使用
4. 兩者this的指向不同
5. 箭頭函數(shù)本身沒有arguments對(duì)象
6. 箭頭函數(shù)沒有new.target

157、ECMAScript 6 怎么寫 class ，為何會(huì)出現(xiàn) class？

寫法: 直接用class來定義

ES6的class可以看作是一個(gè)語法糖，它的絕大部分功能ES5都可以做到，

新的class寫法只是讓對(duì)象原型的寫法更加清晰、更像面向?qū)ο缶幊痰恼Z法

158、Promise構(gòu)造函數(shù)是同步執(zhí)行還是異步執(zhí)行，那么 then 方法呢？

• promise構(gòu)造函數(shù)中回調(diào)函數(shù)是同步執(zhí)行的，
• then方法中回調(diào)函數(shù)是異步執(zhí)行的

159、setTimeout、Promise、Async/Await 的區(qū)別

• 宏任務(wù)：全局執(zhí)行、setTimeout，定時(shí)器等等
• 微任務(wù)：Promise等

1. setTimeout 的回調(diào)函數(shù)放到宏任務(wù)隊(duì)列里，等到執(zhí)行棧清空以后執(zhí)行;
2. Promise.then 里的回調(diào)函數(shù)會(huì)放到相應(yīng)宏任務(wù)的微任務(wù)隊(duì)列里，等宏任務(wù)里面的同步代碼執(zhí)行完再執(zhí)行;
3. async 函數(shù)表示函數(shù)里面可能會(huì)有異步方法，await 后面跟一個(gè)表達(dá)式;
4. async 方法執(zhí)行時(shí)，遇到 await 會(huì)立即執(zhí)行表達(dá)式，然后把表達(dá)式后面的代碼放到微任務(wù)隊(duì)列里，讓出執(zhí)行棧讓同步代碼先執(zhí)行;

160、說出至少5個(gè)ES6的新特性，并簡述它們的作用。（簡答題）

1. let關(guān)鍵字，用于聲明只在塊級(jí)作用域起作用的變量。
2. const關(guān)鍵字，用于聲明一個(gè)常量。
3. ?結(jié)構(gòu)賦值，一種新的變量賦值方式。常用于交換變量值，提取函數(shù)返回值，設(shè)置默認(rèn)值。
4. ?Symbol數(shù)據(jù)類型，定義一個(gè)獨(dú)一無二的值。
5. ?Proxy代理，用于編寫處理函數(shù)，來攔截目標(biāo)對(duì)象的操作。
6. ?for...of遍歷，可遍歷具有iterator 接口的數(shù)據(jù)結(jié)構(gòu)。
7. ?Set結(jié)構(gòu)，存儲(chǔ)不重復(fù)的成員值的集合。
8. ?Map結(jié)構(gòu)，鍵名可以是任何類型的鍵值對(duì)集合。
9. ?Promise對(duì)象，更合理、規(guī)范地處理異步操作。
10. ?Class類定義類和更簡便地實(shí)現(xiàn)類的繼承。

Vue

1、說一下Jquery與Vue的區(qū)別

(1)、工作原理

1. Vue做到了數(shù)據(jù)和視圖完全分離開，它首先把值和js對(duì)象進(jìn)行綁定，然后修改js對(duì)象的值，Vue框架就會(huì)自動(dòng)把dom的值就行更新。對(duì)數(shù)據(jù)進(jìn)行操作不再需要引用相應(yīng)的dom對(duì)象，他們通過Vue對(duì)象實(shí)現(xiàn)數(shù)據(jù)和視圖的相互綁定。
2. jQuery則是要先使用選擇器（$）來選取dom對(duì)象，然后對(duì)dom對(duì)象進(jìn)行操作（如賦值、取值、事件綁定等）。

(2)、側(cè)重

1. vue側(cè)重?cái)?shù)據(jù)綁定，可以應(yīng)用于復(fù)雜數(shù)據(jù)操作的后臺(tái)頁面。如：表單填寫頁面
2. jquery側(cè)重樣式操作，動(dòng)畫效果等；可以應(yīng)用于一些html5的動(dòng)畫頁面，一些需要js來操作頁面樣式的頁面中。

2、說一下v-model的作用
v-model：

雙向綁定，用于表單元素綁定數(shù)據(jù)，數(shù)據(jù)的改變會(huì)響應(yīng)到頁面；
頁面表單元素value的改變，同樣也會(huì)響應(yīng)到數(shù)據(jù)

3、說一下v-on是什么，有什么用？
v-on：綁定事件

4、說一下v-bind是什么，有什么用？
v-bind：綁定屬性

5、說一下Vue中的computed是什么，有什么用？
computed：屬性計(jì)算

1、依賴其它數(shù)據(jù)計(jì)算生成一個(gè)新的數(shù)據(jù)屬性；
2、當(dāng)里邊依賴的其它數(shù)據(jù)發(fā)生改變，就會(huì)重新計(jì)算，
3、當(dāng)?shù)谝淮问褂糜?jì)算的新屬性時(shí)，會(huì)初始計(jì)算一次，
并且把值緩存，后面的每次調(diào)用都使用緩存值；除非改變了依賴的屬性數(shù)據(jù)

6、v-pre的作用

可以讓元素及元素的子元素不編譯解析，這樣可以加快vue的解析速度

7、v-cloak可以解決什么問題

v-cloak指令解決vue屏幕閃屏

這個(gè)指令保持在元素上直到關(guān)聯(lián)實(shí)例結(jié)束編譯。和 CSS 規(guī)則如 [v-cloak] { display: none } 一起用時(shí)，這個(gè)指令可以隱藏未編譯的 Mustache 標(biāo)簽直到實(shí)例準(zhǔn)備完畢。

8、v-once

只渲染元素和組件一次。

9、v-html與v-text區(qū)別

答案：

v-html :　可以轉(zhuǎn)義標(biāo)簽和渲染數(shù)據(jù)

v-text：不能轉(zhuǎn)義標(biāo)簽只能渲染數(shù)據(jù)

v-text展示效果： ?<strong>Hello</strong> Vue!
v-html展示效果： Hello Vue!

10、watch是什么，有什么用

屬性監(jiān)聽　

　作用：當(dāng)需要一個(gè)數(shù)據(jù)改變,然后去做一些邏輯處理,則可以來使用屬性監(jiān)聽

11、$el屬性是什么， 有什么用

Vue 實(shí)例使用的根 DOM 元素。

容器

12、$refs屬性是什么，有什么用

$refs屬性是什么：文檔說明該屬性是一個(gè)對(duì)象類型，而且是只讀的

作用：　通過$refs獲取的ref屬性標(biāo)識(shí)的元素對(duì)象

13、v-model中有哪些修飾符，分別作用是什么

• .lazy - 取代 input 監(jiān)聽 change 事件
• .number - 輸入字符串轉(zhuǎn)為有效的數(shù)字
• .trim - 輸入首尾空格過濾

14、舉例說明vue事件綁定中有哪些修飾符，分別作用是什么

1. stop - 調(diào)用 event.stopPropagation()。
2. prevent - 調(diào)用 event.preventDefault()。
3. capture - 添加事件偵聽器時(shí)使用 capture 模式。
4. self - 只當(dāng)事件是從偵聽器綁定的元素本身觸發(fā)時(shí)才觸發(fā)回調(diào)。
5. {keyCode | keyAlias} - 只當(dāng)事件是從特定鍵觸發(fā)時(shí)才觸發(fā)回調(diào)。
6. .native - 監(jiān)聽組件根元素的原生事件。
7. once - 只觸發(fā)一次回調(diào)。
8. left - (2.2.0) 只當(dāng)點(diǎn)擊鼠標(biāo)左鍵時(shí)觸發(fā)。
9. right - (2.2.0) 只當(dāng)點(diǎn)擊鼠標(biāo)右鍵時(shí)觸發(fā)。
10. middle - (2.2.0) 只當(dāng)點(diǎn)擊鼠標(biāo)中鍵時(shí)觸發(fā)。
11. passive - (2.3.0) 以 { passive: true } 模式添加偵聽器

16、說明你知道的vue生命周期鉤子

• 頁面初始化渲染階段（只執(zhí)行一次）

1. beforeCreate
2. created
3. beforeMount
4. mounted

• 數(shù)據(jù)更新渲染階段（多次）數(shù)據(jù)更新時(shí)執(zhí)行

1. beforeUpdate
2. updated

• vue銷毀階段（一次），銷毀時(shí)執(zhí)行

1. beforeDestroy
2. destroyed

17、描述一下vue在生命周期的beforeMount階段時(shí)，頁面是怎么樣的

beforeMount執(zhí)行時(shí),數(shù)據(jù)和虛擬DOM樹已經(jīng)都加載完成,但是這時(shí)數(shù)據(jù)沒有渲染

18、描述一下vue在生命周期的mounted階段時(shí)，頁面是怎么樣的

mounted執(zhí)行時(shí),數(shù)據(jù)和虛擬DOM樹已經(jīng)都加載完成,也渲染完成

19、props屬性有什么用？

可以用作: 子組件接收父組件傳入的數(shù)據(jù)(接收傳入的數(shù)據(jù))

20、$emit()函數(shù)有什么用？

$emit('事件名',this.需要傳給父組件的數(shù)據(jù))

觸發(fā)調(diào)用自定義事件

21、template標(biāo)簽有什么特點(diǎn)？

一個(gè)字符串模板作為 Vue 實(shí)例的標(biāo)識(shí)使用。模板將會(huì)替換掛載的元素。掛載元素的內(nèi)容都將被忽略，除非模板的內(nèi)容有分發(fā)插槽。

22、keep-alive標(biāo)簽有什么特點(diǎn)？

會(huì)緩存當(dāng)前的component,等下一次切換的時(shí)候,就直接使用緩存就行了

23、$on()函數(shù)有什么用？

監(jiān)聽當(dāng)前實(shí)例上的自定義事件。事件可以由 vm.$emit 觸發(fā)

24、說一下vm.$off()的作用

移除自定義事件監(jiān)聽器。

25、說一下vm.$once()的作用

監(jiān)聽一個(gè)自定義事件，但是只觸發(fā)一次。一旦觸發(fā)之后，監(jiān)聽器就會(huì)被移除。

26、說一下vm.$mount()的作用

手動(dòng)地掛載一個(gè)未掛載的實(shí)例

27、說一下vm.$refs的作用

一個(gè)對(duì)象，持有注冊(cè)過 ref attribute 的所有 DOM 元素和組件實(shí)例。

28、說一下v-slot的作用

提供具名插槽或需要接收 prop 的插槽。

29、說一下Vue生命周期四個(gè)初始化階段方法

1. beforeCreate() { }, 創(chuàng)建vue之前執(zhí)行（數(shù)據(jù)和虛擬DOM樹 還沒有加載完成）
2. created() { }, 創(chuàng)建vue之前執(zhí)行（數(shù)據(jù)已經(jīng)加載好，虛擬DOM樹沒有加載完成）
3. beforeMount() { }, 頁面渲染之前執(zhí)行（數(shù)據(jù)和虛擬DOM樹都已經(jīng)加載好，但數(shù)據(jù)這時(shí)并沒有填充）
4. mounted() { }, 頁面渲染之后（數(shù)據(jù)已經(jīng)填充完成）

8月8日

30、說一下你對(duì)組件的理解

1. 對(duì)頁面某一個(gè)區(qū)域進(jìn)行封裝，這個(gè)區(qū)域可以很小，也可以就是整個(gè)頁面
2. 組件本身就是一個(gè)Vue實(shí)例對(duì)象
3. 組件必須有且只有一個(gè)根元素

1、就是一個(gè)可復(fù)用的vue實(shí)例，可以作用組件對(duì)頁面進(jìn)行封裝，可以把頁面的某一個(gè)區(qū)域封裝成一個(gè)組件，然后復(fù)用
封裝的區(qū)域可以就是一個(gè)標(biāo)簽，也可以是整個(gè)頁面
2、組件就是一個(gè)可復(fù)用的vue實(shí)例，則vue中有的東西，組件中都可以使用（比如屬性計(jì)算，監(jiān)聽，生命周期）
但是組件沒有el這個(gè)選項(xiàng)，并且data是一個(gè)函數(shù)
3、組件必需要有一個(gè)根元素標(biāo)簽（不能有兩個(gè)）

31. Vue 的實(shí)例生命周期

整個(gè)什么周期包含8個(gè)函數(shù)

• 頁面初始化渲染階段（只執(zhí)行一次），在頁面初始化渲染時(shí)，就會(huì)自動(dòng)執(zhí)行

1. beforeCreate() { }, -------創(chuàng)建vue之前執(zhí)行（數(shù)據(jù)和虛擬DOM樹 還沒有加載完成）
2. created() { }, ---------創(chuàng)建vue之前執(zhí)行（數(shù)據(jù)已經(jīng)加載好，虛擬DOM樹沒有加載完成）
3. beforeMount() { }, -----頁面渲染之前執(zhí)行（數(shù)據(jù)和虛擬DOM樹都已經(jīng)加載好，但數(shù)據(jù)這時(shí)并沒有填充）
4. mounted() { }, -------頁面渲染之后（數(shù)據(jù)已經(jīng)填充完成）

• 數(shù)據(jù)更新渲染階段（多次）數(shù)據(jù)更新時(shí)執(zhí)行

1. beforeUpdate() { }, ----數(shù)據(jù)更新之前執(zhí)行（這個(gè)時(shí)候數(shù)據(jù)更新了，但頁面還沒有更新）
2. updated() { }, ------數(shù)據(jù)更新之后執(zhí)行（這個(gè)時(shí)候數(shù)據(jù)更新了，頁面也更新了）

• vue銷毀階段（一次），銷毀時(shí)執(zhí)行

1. beforeDestroy() { }, ----銷毀之前會(huì)觸發(fā)，
2. destroyed() { }, ------銷毀之后會(huì)觸發(fā)，

32. Vue 的雙向數(shù)據(jù)綁定的原理

1.通過v-model可以實(shí)現(xiàn)雙向綁定

2.采用數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式的方式

3.通過Object.defineProperty()來劫持各個(gè)的set（）設(shè)置，get（）獲取

4.觸發(fā)相應(yīng)的監(jiān)聽回調(diào)來渲染視圖

Vue3.0 將用原生 Proxy 替換 Object.defineProperty

33. 為什么要替換 Object.defineProperty？

Object.defineProperty只能遍歷對(duì)象屬性進(jìn)行劫持

Proxy直接可以劫持整個(gè)對(duì)象，并返回一個(gè)新對(duì)象，我們可以只操作新的對(duì)象達(dá)到響應(yīng)式目的

在 Vue 中，Object.defineProperty 無法監(jiān)控到數(shù)組下標(biāo)的變化，導(dǎo)致直接通過數(shù)組的下標(biāo)給數(shù)組設(shè)置值，不能實(shí)時(shí)響應(yīng)。
Object.defineProperty 只能劫持對(duì)象的屬性,因此我們需要對(duì)每個(gè)對(duì)象的每個(gè)屬性進(jìn)行遍歷。

34. 什么是 Proxy？

Proxy：代理，是ES6新增的功能，可以理解為代理器（即由它代理某些操作）。

Proxy ：對(duì)象用于定義或修改某些操作的自定義行為，可以在外界對(duì)目標(biāo)對(duì)象進(jìn)行訪問前，對(duì)外界的訪問進(jìn)行改寫。

Proxy 是 ES6 中新增的一個(gè)特性JavaScript中用來表示由它來’代理’某些操作
Proxy 是 ES6 中新增的一個(gè)特性，翻譯過來意思是"代理"，用在這里表示由它來“代理”某些操作。 Proxy 讓我們能夠以簡潔易懂的方式控制外部對(duì)對(duì)象的訪問。其功能非常類似于設(shè)計(jì)模式中的代理模式。

Proxy 可以理解成，在目標(biāo)對(duì)象之前架設(shè)一層“攔截”，外界對(duì)該對(duì)象的訪問，都必須先通過這層攔截，因此提供了一種機(jī)制，可以對(duì)外界的訪問進(jìn)行過濾和改寫。

使用 Proxy 的核心優(yōu)點(diǎn)是可以交由它來處理一些非核心邏輯（如：讀取或設(shè)置對(duì)象的某些屬性前記錄日志；設(shè)置對(duì)象的某些屬性值前，需要驗(yàn)證；某些屬性的訪問控制等）。 從而可以讓對(duì)象只需關(guān)注于核心邏輯，達(dá)到關(guān)注點(diǎn)分離，降低對(duì)象復(fù)雜度等目的。

35. 為什么避免 v-if 和 v-for 用在一起

當(dāng) Vue 處理指令時(shí)，v-for 比 v-if 具有更高的優(yōu)先級(jí)，這意味著 v-if 將分別重復(fù)運(yùn)行于每個(gè) v-for 循環(huán)中，帶來性能方面的浪費(fèi)。

我們可以把 v-if 移動(dòng)到父級(jí)（容器）元素，不會(huì)再重復(fù)遍歷列表中的每個(gè)值。取而代之的是，我們只檢查它一次，且不會(huì)在 v-if 為否的時(shí)候運(yùn)算 v-for。
或者在外層嵌套template（頁面渲染不生成dom節(jié)點(diǎn)），在這一層進(jìn)行v-if判斷，然后在內(nèi)部進(jìn)行v-for循環(huán)

36. 組件的設(shè)計(jì)原則

(1)頁面上每個(gè)獨(dú)立的可視/可交互區(qū)域視為一個(gè)組件(比如頁面的頭部，尾部，可復(fù)用的區(qū)塊)

(2)每個(gè)組件對(duì)應(yīng)一個(gè)"工程"目錄，組件所需要的各種資源在這個(gè)目錄下就近維護(hù)(組件的就近維護(hù)思想體現(xiàn)了前端的工程化思想，為前端開發(fā)提供了很好的分治策略，在vue.js中，通過.vue文件將組件依賴的模板，js，樣式寫在一個(gè)文件中)

(每個(gè)開發(fā)者清楚開發(fā)維護(hù)的功能單元，它的代碼必然存在在對(duì)應(yīng)的組件目錄中，在該目錄下，可以找到功能單元所有的內(nèi)部邏輯)

(3)頁面不過是組件的容器，組件可以嵌套自由組合成完整的頁面

第一: 容錯(cuò)處理, 這個(gè)要做好, 極端場景要考慮到,
第二: 缺省值(默認(rèn)值)要有, 一般把應(yīng)用較多的設(shè)為缺省值
第三: 顆?；? 把組件拆分出來.
第四: 一切皆可配置, 如有必要, 組件里面使用中文標(biāo)點(diǎn)符號(hào), 還是英文的標(biāo)點(diǎn)符號(hào), 都要考慮到
第五: 場景化, 如一個(gè)dialog彈出, 還需要根據(jù)不同的狀態(tài)封裝成success, waring, 等
第六: 有詳細(xì)的文檔/注釋和變更歷史, 能查到來龍去脈, 新版本加了什么功能是因?yàn)槭裁?br> 第七: 組件名稱, 參數(shù)prop, emit, 名稱設(shè)計(jì)要通俗易懂, 最好能做到代碼即注釋這種程度
第八: 可拓展性, 前期可能不需要這個(gè)功能, 但是后期可能會(huì)用上, 要預(yù)留什么, 要注意什么, 心里要有數(shù)
第九: 規(guī)范化,我這個(gè)input組件, 叫on-change, 我另外一個(gè)select組件叫change,
第十: 分階段: 不是什么都要一期開發(fā)完成看具體業(yè)務(wù), 如果一個(gè)select, 我只是個(gè)簡單的select功能

37. vue slot是做什么的?

可以插入的槽口，比如插座的插孔。

38. 對(duì)于 Vue 是一套漸進(jìn)式框架的理解

1. 主張最少，也就是弱主張，他是在vue核心庫（視圖模板引擎）的基礎(chǔ)上，去逐步添加所需要功能（如，組件系統(tǒng)、路由、狀態(tài)機(jī)等）
2. vue“漸進(jìn)式”：是指先使用vue核心庫，在vue核心庫的基礎(chǔ)上，根據(jù)自己需要再去逐漸增加功能。
3. Vue的核心的功能，是一個(gè)視圖模板引擎，但這不是說Vue就不能成為一個(gè)框架。
4. 在聲明式渲染（視圖模板引擎）的基礎(chǔ)上，我們可以通過添加組件系統(tǒng)、客戶端路由、大規(guī)模狀態(tài)管理來構(gòu)建一個(gè)完整的框架。
5. 更重要的是，這些功能相互獨(dú)立，你可以在核心功能的基礎(chǔ)上任意選用其他的部件，不一定要全部整合在一起。
6. 所說的“漸進(jìn)式”，其實(shí)就是Vue的使用方式，同時(shí)也體現(xiàn)了Vue的設(shè)計(jì)的理念。

每個(gè)框架都不可避免會(huì)有自己的一些特點(diǎn)，從而會(huì)對(duì)使用者有一定的要求，這些要求就是主張，主張有強(qiáng)有弱，它的強(qiáng)勢程度會(huì)影響在業(yè)務(wù)開發(fā)中的使用方式。

1、使用 vue，你可以在原有大系統(tǒng)的上面，把一兩個(gè)組件改用它實(shí)現(xiàn)，當(dāng) jQuery 用；
2、也可以整個(gè)用它全家桶開發(fā)，當(dāng) Angular 用；
3、還可以用它的視圖，搭配你自己設(shè)計(jì)的整個(gè)下層用。你可以在底層數(shù)據(jù)邏輯的地方用 OO(Object–Oriented )面向?qū)ο蠛驮O(shè)計(jì)模式的那套理念。
也可以函數(shù)式，都可以。

它只是個(gè)輕量視圖而已，只做了自己該做的事，沒有做不該做的事，僅此而已。

你不必一開始就用 Vue 所有的全家桶，根據(jù)場景，官方提供了方便的框架供你使用。

場景聯(lián)想
場景 1：
維護(hù)一個(gè)老項(xiàng)目管理后臺(tái)，日常就是提交各種表單了，這時(shí)候你可以把 vue 當(dāng)成一個(gè) js 庫來使用，就用來收集 form 表單，和表單驗(yàn)證。

場景 2：
得到 boss 認(rèn)可， 后面整個(gè)頁面的 dom 用 Vue 來管理，抽組件，列表用 v-for 來循環(huán)，用數(shù)據(jù)驅(qū)動(dòng) DOM 的變化

場景 3:
越來越受大家信賴，領(lǐng)導(dǎo)又找你了，讓你去做一個(gè)移動(dòng)端 webapp，直接上了 vue 全家桶！

場景 1-3 從最初的只因多看你一眼而用了前端 js 庫，一直到最后的大型項(xiàng)目解決方案。

39. vue.js 的兩個(gè)核心是什么？

答案：數(shù)據(jù)驅(qū)動(dòng)和組件化思想

8月9日

40. 請(qǐng)問 v-if 和 v-show 有什么區(qū)別

v-show 指令是通過修改元素的 display 的 CSS 屬性讓其顯示或者隱藏

v-if 指令是直接銷毀和重建 DOM 達(dá)到讓元素顯示和隱藏的效果(刪除)

42. vue 常用的修飾符

• stop ?阻止點(diǎn)擊事件冒泡。等同于JavaScript中的event.stopPropagation()
• prevent ? 防止執(zhí)行預(yù)設(shè)的行為 同于JavaScript的event.preventDefault()
• trim ? 自動(dòng)過濾用戶輸入的首尾空格
• number 將輸出字符串轉(zhuǎn)為Number類型
• enter 回車鍵

43. v-on 可以監(jiān)聽多個(gè)方法嗎？

答案：肯定可以的。

解析：

<input
  type="text"
  :value="name"
  @input="onInput"
  @focus="onFocus"
  @blur="onBlur"
/>

44. vue 中 key 值的作用

需要使用 key 來給每個(gè)節(jié)點(diǎn)做一個(gè)唯一標(biāo)識(shí)，Diff 算法就可以正確的識(shí)別此節(jié)點(diǎn)，找到正確的位置區(qū)插入新的節(jié)點(diǎn)
所以一句話，key 的作用主要是為了高效的更新虛擬 DOM

45. vue-cli 工程升級(jí) vue 版本

在項(xiàng)目目錄里運(yùn)行 npm upgrade vue vue-template-compiler，不出意外的話，可以正常運(yùn)行和 build。如果有任何問題，刪除 node_modules 文件夾然后重新運(yùn)行 npm i 即可。

（簡單的說就是升級(jí) vue 和 vue-template-compiler 兩個(gè)插件）

46、vue 與 jquery的區(qū)別？
jQuery直接操作DOM元素
Vue使用了MVVM原則，是通過Vue對(duì)象將數(shù)據(jù) 和 View 完全分離；通過數(shù)據(jù)來響應(yīng)渲染頁面;
而不需要直接操作DOM元素

47、watch 和 computed 區(qū)別

watch:

1. 監(jiān)聽動(dòng)作（只監(jiān)聽原本的屬性）
2. 沒緩存，只要數(shù)據(jù)變化就執(zhí)行
3. 可以執(zhí)行異步操作
4. 常用于一個(gè)數(shù)據(jù)影響多個(gè)數(shù)據(jù)

computed:

1. 計(jì)算屬性（會(huì)生成新的屬性）
2. 有緩存，只在屬性變化的時(shí)候才去計(jì)算。
3. 不能執(zhí)行異步操作
4. 常用于多個(gè)數(shù)據(jù)影響一個(gè)數(shù)據(jù)

48、講一下 Vue 的生命周期？
整個(gè)什么周期包含8個(gè)函數(shù)

1.頁面初始化渲染階段（只執(zhí)行一次），在頁面初始化渲染時(shí)，就會(huì)自動(dòng)執(zhí)行

• beforeCreate() { }, 創(chuàng)建vue之前執(zhí)行（數(shù)據(jù)和虛擬DOM樹 還沒有加載完成）
• created() { }, 創(chuàng)建vue之前執(zhí)行（數(shù)據(jù)已經(jīng)加載好，虛擬DOM樹沒有加載完成）
• beforeMount() { }, 頁面渲染之前執(zhí)行（數(shù)據(jù)和虛擬DOM樹都已經(jīng)加載好，但數(shù)據(jù)這時(shí)并沒有填充）
• mounted() { }, 頁面渲染之后（數(shù)據(jù)已經(jīng)填充完成）

2.數(shù)據(jù)更新渲染階段（多次）數(shù)據(jù)更新時(shí)執(zhí)行

• beforeUpdate() { }, 數(shù)據(jù)更新之前執(zhí)行（這個(gè)時(shí)候數(shù)據(jù)更新了，但頁面還沒有更新）
• updated() { }, 數(shù)據(jù)更新之后執(zhí)行（這個(gè)時(shí)候數(shù)據(jù)更新了，頁面也更新了）

3.vue銷毀階段（一次），銷毀時(shí)執(zhí)行

• beforeDestroy() { }, 銷毀之前會(huì)觸發(fā)，
• destroyed() { }, 銷毀之后會(huì)觸發(fā)，

使用情況：mounted、created方法比較常用；

因?yàn)榻?jīng)常需要在這兩個(gè)方法中發(fā)送ajax請(qǐng)求，請(qǐng)求頁面初始化數(shù)據(jù)

49、Vue 的父組件和子組件生命周期鉤子執(zhí)行順序是什么

1. 加載渲染過程
   父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted
2. 子組件更新過程
   父beforeUpdate->子beforeUpdate->子updated->父updated
3. 父組件更新過程
   父beforeUpdate->父updated
4. 銷毀過程
   父beforeDestroy->子beforeDestroy->子destroyed->父destroyed
   總結(jié)：從外到內(nèi)，再從內(nèi)到外

50、Vue 中父組件如何監(jiān)聽子組件的生命周期？

1. 可以通過自定義事件等，在子組件的生命周期鉤子中，調(diào)用$emit觸發(fā)父組件中的方法
2. 通過@ hook在父組件中監(jiān)聽子組件的生命鉤子，如果子組件是一個(gè)第三方組件，這很有用、

8月10日

51、組件間通訊方式

1、props / $emit

（1）父組件向子組件傳值（props將數(shù)據(jù)自上而下傳遞）

（2）子組件向父組件傳遞數(shù)據(jù)（$emit和v-on來向上傳遞信息）

2、eventBus事件總線（$emit / $on）

通過EventBus進(jìn)行信息的發(fā)布與訂閱

3、vuex:

是全局?jǐn)?shù)據(jù)管理庫，可以通過vuex管理全局的數(shù)據(jù)流

4、ref / $refs

ref：這個(gè)屬性用在子組件上，它的用用就指向了子組件的實(shí)例，可以通過實(shí)例來訪問組件的數(shù)據(jù)和方法

5、依賴注入（provide / inject）

provide 和 inject 是vue提供的兩個(gè)鉤子，和data、methods是同級(jí)的。并且provide的書寫形式和data一樣。

• provide 鉤子用來發(fā)送數(shù)據(jù)或方法。
• inject鉤子用來接收數(shù)據(jù)或方法

6、$parent / $children

• 使用$parent可以讓組件訪問父組件的實(shí)例（訪問的是上一級(jí)父組件的屬性和方法）。
• 使用 $children 可以讓組件訪問子組件的實(shí)例，但是， $children 并不能保證順序，并且訪問的數(shù)據(jù)也不是響應(yīng)式的。

7、$attrs / $listeners

實(shí)現(xiàn)組件之間的跨代通信。

52、v-cloak指令的作用

• 用于 防止閃屏，防止頁面出現(xiàn){{ }}

53、能講下 v-if 和 v-for 的優(yōu)先級(jí)嗎

v-for優(yōu)先于v-if執(zhí)行

const arr = [1,2,3,4,5,6,7,8,9]

<li v-for="item in [1,2,3,4,5,6,7,8,9]" v-if="">

54、v-for 你使用過程中，有遇到什么問題或者關(guān)注點(diǎn)嗎？

• ?避免將 `v-if` 和 `v-for` 放在同一個(gè)元素上，因?yàn)?`v-for` 優(yōu)先級(jí)比 `v-if` 更高。

例如：要渲染 todo 列表中未完成的任務(wù)，給 li 標(biāo)簽同時(shí)寫上 v-for 和 v-if 后會(huì)導(dǎo)致每次重新渲染都得遍歷整個(gè)列表。優(yōu)化方案是把需要遍歷的 todoList 更換為在計(jì)算屬性上遍歷過濾。（Vue文檔有詳細(xì)說明）

• 給 `v-for` 設(shè)置鍵綁定鍵值 `key`

55、在列表組件中添加 key 屬性的作用？

• key的主要作用就是在更新組件時(shí)判斷兩個(gè)節(jié)點(diǎn)是否相同。相同就復(fù)用，不相同就刪除舊的創(chuàng)建新的。這樣可以更高效的更新虛擬 DOM。
• 另外如果給列表組件設(shè)置了過渡效果，不添加key屬性會(huì)導(dǎo)致過渡效果無法觸發(fā)。因?yàn)椴惶砑觡ey會(huì)導(dǎo)致vue無法區(qū)分它們，導(dǎo)致只會(huì)替換節(jié)點(diǎn)內(nèi)部屬性而不會(huì)觸發(fā)過渡效果。

56、數(shù)據(jù)響應(yīng)式（雙向綁定）怎么做到的？

原理：Vue 采用 數(shù)據(jù)劫持 結(jié)合 發(fā)布者-訂閱者 模式的方式，通過 Object.defineProperty() 來劫持各個(gè)屬性的 setter 以及 getter，在數(shù)據(jù)變動(dòng)時(shí)發(fā)布消息給訂閱者，觸發(fā)相應(yīng)的監(jiān)聽回調(diào)，更新視圖。

追問1：那如果我要監(jiān)聽一個(gè)對(duì)象屬性的刪除或添加呢？splice受 defineProperty 限制，Vue 無法檢測對(duì)象屬性的刪除和添加。
所以我們可以利用 Vue 提供的 Vue.set 來解決此問題。

1. 避免將 v-if 和 v-for 放在同一個(gè)元素上，因?yàn)?v-for 優(yōu)先級(jí)比 v-if 更高。
   例如：要渲染 todo 列表中未完成的任務(wù)，給 li 標(biāo)簽同時(shí)寫上 v-for 和 v-if 后會(huì)導(dǎo)致每次重新渲染都得遍歷整個(gè)列表。優(yōu)化方案是把需要遍歷的 todoList 更換為在計(jì)算屬性上遍歷過濾。（Vue文檔有詳細(xì)說明）
2. 給 v-for 設(shè)置鍵綁定鍵值 key。理由見下。
3. 第一步：需要 Observe 對(duì)數(shù)據(jù)對(duì)象進(jìn)行遞歸遍歷，包括子屬性對(duì)象的屬性，都加上 setter 和 getter。這樣的話，給這個(gè)對(duì)象的某個(gè)值賦值，就會(huì)觸發(fā) setter，那么就能監(jiān)聽到了數(shù)據(jù)變化。
4. 第二步：Compile 解析模板指令，將模板中的變量替換成數(shù)據(jù)，然后初始化渲染頁面視圖，并將每個(gè)指令對(duì)應(yīng)的節(jié)點(diǎn)綁定更新函數(shù)，添加監(jiān)聽數(shù)據(jù)的訂閱者，一旦數(shù)據(jù)有變動(dòng)，收到通知，更新數(shù)據(jù)。
5. 第三步：Watcher 訂閱者是 Observer 和 Compile 之間通信的橋梁，主要做的事情有：
   1. 在自身實(shí)例化時(shí)往屬性訂閱器（dep）里面添加自己
   2. Watcher對(duì)象自身必須有一個(gè) update() 方法，用于更新視圖
   3. 待屬性變動(dòng) dep.notice() 通知時(shí)，能調(diào)用Watcher對(duì)象的 update() 方法，
      并觸發(fā) Compile 中綁定的回調(diào)。
6. 第四步：MVVM 作為數(shù)據(jù)綁定的入口，整合 Observer、Compile 和 Watcher 三者，
   通過 Observer 數(shù)據(jù)劫持 來監(jiān)聽自己的 model 數(shù)據(jù)變化，
   通過 Compile 來解析編譯模板指令，
   最終利用 Watcher 搭起 Observer 和 Compile 之間的橋梁，
   達(dá)到數(shù)據(jù)變化 -> 視圖更新；
   視圖交互變化（input） -> 數(shù)據(jù) model 變更的雙向綁定效果。

這圖是模擬雙向綁定的過程：

57、Vuex 用過嗎？簡單介紹一下？
狀態(tài)管理模式 + 庫

相當(dāng)于共享倉庫，方便任何組件直接獲取和修改。

• state - 數(shù)據(jù)【存項(xiàng)目共享狀態(tài)，是響應(yīng)式的，store的數(shù)據(jù)改變，所有依賴此狀態(tài)的組件會(huì)更新】
  • $store.state.count
• mutations - 方法【同步函數(shù)，只建議在這個(gè)地方修改數(shù)據(jù)】
  • inc(state, 參數(shù)唯一) {}
  • $store.commit('inc', 2)
• actions -【異步操作】【提交的是mutations，不直接修改狀態(tài)】
  • increment(context, num) {context.commit()}
  • this.$store.dispatch('',arg)
• getters - 包裝數(shù)據(jù) 【store的計(jì)算屬性，可緩存】
  • show: function(state) {}
  • this.$store.getters.show
  • 傳參，返回函數(shù)：show(state) {return function(參數(shù)) {return ...}}【不會(huì)緩存數(shù)據(jù)】

58、使用 Vuex 管理數(shù)據(jù)，與直接在 全局 window 下定義變量相比，有什么區(qū)別或者說優(yōu)勢？

• vuex、

1. vuex由統(tǒng)一的方法修改數(shù)據(jù)（ store 數(shù)據(jù)需要到mutation 層）
2. Vuex數(shù)據(jù)更新 具有響應(yīng)式
3. 層次劃分明確，便于管理

• window、

1. window全局作用域下定義的數(shù)據(jù)是靜態(tài)的，數(shù)據(jù)不具有響應(yīng)式
2. 全局變量多了會(huì)造成命名污染

59、Vuex 是通過什么方式提供響應(yīng)式數(shù)據(jù)的？

在 Store 構(gòu)造函數(shù)中通過 new Vue({}) 實(shí)現(xiàn)的。
利用 Vue 來監(jiān)聽 state 下的數(shù)據(jù)變化，
給狀態(tài)(數(shù)據(jù))添加 getter、setter可以監(jiān)聽數(shù)據(jù)改變。

60、Vuex 如何區(qū)分 state 是外部直接修改，還是通過 mutation 方法修改的？
總結(jié)：

在vuex底層會(huì)有一個(gè)committing變量，初始值false；當(dāng)通過mutation方法修改數(shù)據(jù)時(shí)
把committing變量變成true；如果是直接改變的變量則不改變committing變量

8月11日

61、Vuex 原理

vuex 僅僅是作為 vue 的一個(gè)插件而存在
vuex 只能使用在 vue 上，很大的程度是因?yàn)槠涓叨纫蕾嚈z測系統(tǒng)以及其插件系統(tǒng)，
它的實(shí)現(xiàn)方式完完全全的使用了vue 自身的響應(yīng)式設(shè)計(jì)，依賴監(jiān)聽、依賴收集;
都屬于vue對(duì)對(duì)象 Property set get 方法的代理劫持。
vuex中的 store 本質(zhì)就是相當(dāng)于一個(gè)沒有 template 的隱藏著的 vue 組件。

62、VueRouter 是什么？你平常是怎么用的？

• 是什么：Vue-Router 是 Vue 官方的路由管理器
• 作用：為了頁面跳轉(zhuǎn)
• 原理：可以給每一個(gè)組件分配路由路徑，
  則就可以使用rotuer-link或者編程式導(dǎo)航來根據(jù)分配的路由路徑，
  實(shí)現(xiàn)組件之間的跳轉(zhuǎn)；

監(jiān)聽錨點(diǎn)值改變，渲染指定頁面

63、vue.js 的兩個(gè)核心是什么？

答案：數(shù)據(jù)驅(qū)動(dòng) 和 組件化思想

64、請(qǐng)問 v-if 和 v-show 有什么區(qū)別

相同點(diǎn)：

v-if和v-show都可以動(dòng)態(tài)控制dom元素隱藏

不同點(diǎn)：

v-if顯示隱藏是將dom元素整個(gè)添加或刪除
v-show隱藏則是為該元素添加css--display：none；dom元素還在

65、什么時(shí)候使用v-if, 什么時(shí)候使用v-show? 為什么？
切換次數(shù)比較多時(shí)使用v-show：

因?yàn)榍袚Q次數(shù)多時(shí)，如果使用v-show可以減少DOM元素的插入或者刪除，從而提高操作性能

切換次數(shù)比較少時(shí)使用v-if：

因?yàn)関-if隱藏元素不會(huì)把元素添加到DOM樹中，DOM樹會(huì)少加載節(jié)點(diǎn)，

所以DOM樹首次加載會(huì)有所提高速度（有利于首屏加載速度）

66、vue 常用的修飾符

stop ? ? ?阻止點(diǎn)擊事件冒泡。等同于JavaScript中的event.stopPropagation()
prevent ? 防止執(zhí)行預(yù)設(shè)的行為 同于JavaScript的event.preventDefault()
trim ? ? ?自動(dòng)過濾用戶輸入的首尾空格
number ?將輸出字符串轉(zhuǎn)為Number類型
enter ? ?回車鍵

67、vue 中 key 值的作用

答案：key 的作用主要是為了高效的更新虛擬 DOM，有唯一標(biāo)識(shí)正確識(shí)別節(jié)點(diǎn)

需要使用 key 來給每個(gè)節(jié)點(diǎn)做一個(gè)唯一標(biāo)識(shí)，Diff 算法就可以正確的識(shí)別此節(jié)點(diǎn)，
找到正確的位置區(qū)插入新的節(jié)點(diǎn)，所以一句話，key 的作用主要是為了高效的更新虛擬 DOM；

因?yàn)関ue更新節(jié)點(diǎn)時(shí)，為了提高性能，所以會(huì)比較新舊DOM樹，如果新節(jié)點(diǎn)與舊節(jié)點(diǎn)的元素比較結(jié)果
為同一個(gè)元素，則不更新，還是使用原來的舊節(jié)點(diǎn)，否則才顯示新節(jié)點(diǎn)；
而判斷兩個(gè)節(jié)點(diǎn)是否為同一個(gè)元素節(jié)點(diǎn)，就是通過標(biāo)簽名與key來判斷的

68、什么是 Vue.nextTick()？
定義：在下次 DOM 更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)。（在一個(gè)異步任務(wù)完成之后執(zhí)行）

白話：等你dom加載完畢以后再去調(diào)用nextTick()里面的數(shù)據(jù)內(nèi)容它是Vue的核心方法之一；
理解：nextTick()，是將回調(diào)函數(shù)延遲在下一次 dom 更新數(shù)據(jù)后調(diào)用，簡單的理解是：
當(dāng)數(shù)據(jù)更新了，在 dom 中渲染后，自動(dòng)執(zhí)行該函數(shù)中回調(diào)函數(shù)，
Vue.nextTick(function(){ 這里在DOM更新后執(zhí)行 })

69、Vue 組件中 data 為什么必須是函數(shù)

答 : 防止組件重用的時(shí)候?qū)е聰?shù)據(jù)相互影響;
因?yàn)閐ata會(huì)掛在組件的原型上；所有實(shí)例共有
如果不是函數(shù)，則兩個(gè)實(shí)例都引用同一個(gè)對(duì)象，當(dāng)其中一個(gè)實(shí)例屬性改變時(shí)，另一個(gè)實(shí)例屬性也隨之改變

只有當(dāng)兩個(gè)實(shí)例擁有自己的作用域時(shí)(比如函數(shù))，才不會(huì)互相干擾 ?。。。?！這句是重點(diǎn)！?。。?！

70、vue 中子組件調(diào)用父組件的方法

• 第一種方法是直接在子組件中通過 this.$parent.event 來調(diào)用父組件的方法
• 第二種方法是在子組件里用$emit 向父組件觸發(fā)一個(gè)事件，父組件監(jiān)聽這個(gè)事件就行了
• 第三種是父組件把方法傳入子組件中，在子組件里直接調(diào)用這個(gè)方法

jQuery

1、jQuery庫中的$()是什么？

1. $() 函數(shù)是 jQuery() 函數(shù)的別稱，
2. $()函數(shù)用于將任何對(duì)象包裹成 jQuery對(duì)象，可以調(diào)用jquery上的方法;接著被允許調(diào)用定義在jQuery對(duì)象上的多個(gè)不同方法。甚至可以將一個(gè)選擇器字符串傳入$()函數(shù)，它會(huì)返回一個(gè)包含所有匹配的DOM元素?cái)?shù)組的jQuery對(duì)象。這個(gè)問題我已經(jīng)見過好幾次被提及，盡管它非?；A(chǔ)，它經(jīng)常被用來區(qū)分一個(gè)開發(fā)人員是否了解jQuery。

2、網(wǎng)頁上有5個(gè)div元素，如何使用 jQuery來選擇它們？

1. jQuery支持不同類型的選擇器，例如ID選擇器、class選擇器、標(biāo)簽選擇器。
2. 鑒于這個(gè)問題沒提到ID和class，可以用標(biāo)簽選擇器來選擇所有的div 元素。
3. jQuery代碼：$("div")，這樣會(huì)返回一個(gè)包含所有5個(gè)div標(biāo)簽的jQuery 對(duì)象。

3、$(this) 和 this 關(guān)鍵字在 jQuery 中有何不同？

1. 這對(duì)于很多java零基礎(chǔ)學(xué)jQuery的初學(xué)者來說是一個(gè)棘手的問題，其實(shí)是個(gè)簡單的問題。$(this) 返回一個(gè)jQuery對(duì)象，你可以對(duì)它調(diào)用多個(gè) jQuery方法，比如用text()獲取文本，用val()獲取值等等。而this代表當(dāng)前元素，它是JavaScript關(guān)鍵詞中的一個(gè)，表示上下文中的當(dāng)前DOM元素。你不能對(duì)它調(diào)用 jQuery方法，直到它被 $() 函數(shù)包裹，例如 $(this)。

4、使用CDN加載 jQuery庫的主要優(yōu)勢是什么？

1. 更快的下載速度;
2. 可以節(jié)省帶寬（服務(wù)器緩存）;
3. 從同一個(gè)CDN下載類相同的jQuery版本,它不會(huì)重復(fù)去下載一次

除了報(bào)錯(cuò)節(jié)省服務(wù)器帶寬以及更快的下載速度這許多的好處之外, 最重要的是，

如果瀏覽器已經(jīng)從同一個(gè)CDN下載類相同的jQuery版本,

那么它就不會(huì)再去下載它一次，

因此今時(shí)今日，許多公共的網(wǎng)站都將jQuery用于用戶交互和動(dòng)畫,

如果瀏覽器已經(jīng)有了下載好的jQuery庫，網(wǎng)站就能有非常好的展示機(jī)會(huì)。

5、jQuery中的方法鏈?zhǔn)鞘裁矗渴褂梅椒ㄦ溣惺裁春锰帲?/strong>