擴(kuò)展運(yùn)算符的作用及使用場(chǎng)景

（1）對(duì)象擴(kuò)展運(yùn)算符

對(duì)象的擴(kuò)展運(yùn)算符(...)用于取出參數(shù)對(duì)象中的所有可遍歷屬性寻咒，拷貝到當(dāng)前對(duì)象之中环疼。

let bar = { a: 1, b: 2 };
let baz = { ...bar }; // { a: 1, b: 2 }
復(fù)制代碼

上述方法實(shí)際上等價(jià)于:

let bar = { a: 1, b: 2 };
let baz = Object.assign({}, bar); // { a: 1, b: 2 }
復(fù)制代碼

Object.assign方法用于對(duì)象的合并凡桥，將源對(duì)象（source）的所有可枚舉屬性，復(fù)制到目標(biāo)對(duì)象（target）计盒。Object.assign方法的第一個(gè)參數(shù)是目標(biāo)對(duì)象嘹吨，后面的參數(shù)都是源對(duì)象遗遵。(如果目標(biāo)對(duì)象與源對(duì)象有同名屬性萍恕，或多個(gè)源對(duì)象有同名屬性，則后面的屬性會(huì)覆蓋前面的屬性)车要。

同樣允粤，如果用戶自定義的屬性，放在擴(kuò)展運(yùn)算符后面翼岁，則擴(kuò)展運(yùn)算符內(nèi)部的同名屬性會(huì)被覆蓋掉类垫。

let bar = {a: 1, b: 2};
let baz = {...bar, ...{a:2, b: 4}};  // {a: 2, b: 4}
復(fù)制代碼

利用上述特性就可以很方便的修改對(duì)象的部分屬性。在redux中的reducer函數(shù)規(guī)定必須是一個(gè)純函數(shù)琅坡，reducer中的state對(duì)象要求不能直接修改悉患，可以通過(guò)擴(kuò)展運(yùn)算符把修改路徑的對(duì)象都復(fù)制一遍，然后產(chǎn)生一個(gè)新的對(duì)象返回榆俺。

需要注意：擴(kuò)展運(yùn)算符對(duì)對(duì)象實(shí)例的拷貝屬于淺拷貝售躁。

（2）數(shù)組擴(kuò)展運(yùn)算符

數(shù)組的擴(kuò)展運(yùn)算符可以將一個(gè)數(shù)組轉(zhuǎn)為用逗號(hào)分隔的參數(shù)序列，且每次只能展開(kāi)一層數(shù)組茴晋。

console.log(...[1, 2, 3])
// 1 2 3
console.log(...[1, [2, 3, 4], 5])
// 1 [2, 3, 4] 5
復(fù)制代碼

下面是數(shù)組的擴(kuò)展運(yùn)算符的應(yīng)用：

• 將數(shù)組轉(zhuǎn)換為參數(shù)序列

function add(x, y) {
  return x + y;
}
const numbers = [1, 2];
add(...numbers) // 3
復(fù)制代碼

• 復(fù)制數(shù)組

const arr1 = [1, 2];
const arr2 = [...arr1];
復(fù)制代碼

要記着憬荨：擴(kuò)展運(yùn)算符(…)用于取出參數(shù)對(duì)象中的所有可遍歷屬性，拷貝到當(dāng)前對(duì)象之中诺擅，這里參數(shù)對(duì)象是個(gè)數(shù)組市袖，數(shù)組里面的所有對(duì)象都是基礎(chǔ)數(shù)據(jù)類(lèi)型，將所有基礎(chǔ)數(shù)據(jù)類(lèi)型重新拷貝到新的數(shù)組中烁涌。

• 合并數(shù)組

如果想在數(shù)組內(nèi)合并數(shù)組苍碟，可以這樣：

const arr1 = ['two', 'three'];const arr2 = ['one', ...arr1, 'four', 'five'];// ["one", "two", "three", "four", "five"]
復(fù)制代碼

• 擴(kuò)展運(yùn)算符與解構(gòu)賦值結(jié)合起來(lái)，用于生成數(shù)組

const [first, ...rest] = [1, 2, 3, 4, 5];first // 1rest  // [2, 3, 4, 5]
復(fù)制代碼

需要注意：如果將擴(kuò)展運(yùn)算符用于數(shù)組賦值撮执，只能放在參數(shù)的最后一位微峰，否則會(huì)報(bào)錯(cuò)。

const [...rest, last] = [1, 2, 3, 4, 5];         // 報(bào)錯(cuò)const [first, ...rest, last] = [1, 2, 3, 4, 5];  // 報(bào)錯(cuò)
復(fù)制代碼

• 將字符串轉(zhuǎn)為真正的數(shù)組

[...'hello']    // [ "h", "e", "l", "l", "o" ]
復(fù)制代碼

• 任何 Iterator 接口的對(duì)象抒钱，都可以用擴(kuò)展運(yùn)算符轉(zhuǎn)為真正的數(shù)組

比較常見(jiàn)的應(yīng)用是可以將某些數(shù)據(jù)結(jié)構(gòu)轉(zhuǎn)為數(shù)組：

// arguments對(duì)象
function foo() {
  const args = [...arguments];
}
復(fù)制代碼

用于替換es5中的Array.prototype.slice.call(arguments)寫(xiě)法县忌。

• 使用Math函數(shù)獲取數(shù)組中特定的值

const numbers = [9, 4, 7, 1];
Math.min(...numbers); // 1
Math.max(...numbers); // 9
復(fù)制代碼

陳述輸入U(xiǎn)RL回車(chē)后的過(guò)程

1.讀取緩存： 
        搜索自身的 DNS 緩存。(如果 DNS 緩存中找到IP 地址就跳過(guò)了接下來(lái)查找 IP 地址步驟继效，直接訪問(wèn)該 IP 地址症杏。)
2.DNS 解析:將域名解析成 IP 地址
3.TCP 連接：TCP 三次握手，簡(jiǎn)易描述三次握手
           客戶端：服務(wù)端你在么瑞信？ 
           服務(wù)端：客戶端我在厉颤，你要連接我么？ 
           客戶端：是的服務(wù)端凡简，我要鏈接逼友。 
           連接打通精肃，可以開(kāi)始請(qǐng)求來(lái)
4.發(fā)送 HTTP 請(qǐng)求
5.服務(wù)器處理請(qǐng)求并返回 HTTP 報(bào)文
6.瀏覽器解析渲染頁(yè)面
7.斷開(kāi)連接：TCP 四次揮手

關(guān)于第六步瀏覽器解析渲染頁(yè)面又可以聊聊如果返回的是html頁(yè)面
根據(jù) HTML 解析出 DOM 樹(shù)
根據(jù) CSS 解析生成 CSS 規(guī)則樹(shù)
結(jié)合 DOM 樹(shù)和 CSS 規(guī)則樹(shù)，生成渲染樹(shù)
根據(jù)渲染樹(shù)計(jì)算每一個(gè)節(jié)點(diǎn)的信息
根據(jù)計(jì)算好的信息繪制頁(yè)面
復(fù)制代碼

vue-router

vue-router是vuex.js官方的路由管理器帜乞，它和vue.js的核心深度集成司抱，讓構(gòu)建但頁(yè)面應(yīng)用變得易如反掌

<router-link> 組件支持用戶在具有路由功能的應(yīng)用中 (點(diǎn)擊) 導(dǎo)航。 通過(guò) to 屬性指定目標(biāo)地址

<router-view> 組件是一個(gè) functional 組件黎烈，渲染路徑匹配到的視圖組件习柠。

<keep-alive> 組件是一個(gè)用來(lái)緩存組件

router.beforeEach

router.afterEach

to: Route: 即將要進(jìn)入的目標(biāo) 路由對(duì)象

from: Route: 當(dāng)前導(dǎo)航正要離開(kāi)的路由

next: Function: 一定要調(diào)用該方法來(lái) resolve 這個(gè)鉤子。執(zhí)行效果依賴(lài) next 方法的調(diào)用參數(shù)照棋。

介紹了路由守衛(wèi)及用法资溃，在項(xiàng)目中路由守衛(wèi)起到的作用等等
復(fù)制代碼

說(shuō)一下常見(jiàn)的git操作

git branch 查看本地所有分支
git status 查看當(dāng)前狀態(tài) 
git commit 提交 
git branch -a 查看所有的分支
git branch -r 查看遠(yuǎn)程所有分支
git commit -am "nit" 提交并且加注釋 
git remote add origin git@192.168.1.119:ndshow
git push origin master 將文件給推到服務(wù)器上 
git remote show origin 顯示遠(yuǎn)程庫(kù)origin里的資源 
git push origin master:develop
git push origin master:hb-dev 將本地庫(kù)與服務(wù)器上的庫(kù)進(jìn)行關(guān)聯(lián) 
git checkout --track origin/dev 切換到遠(yuǎn)程dev分支
git branch -D master develop 刪除本地庫(kù)develop
git checkout -b dev 建立一個(gè)新的本地分支dev
git merge origin/dev 將分支dev與當(dāng)前分支進(jìn)行合并
git checkout dev 切換到本地dev分支
git remote show 查看遠(yuǎn)程庫(kù)
git add .
git rm 文件名(包括路徑) 從git中刪除指定文件
git clone git://github.com/schacon/grit.git 從服務(wù)器上將代碼給拉下來(lái)
git config --list 看所有用戶
git ls-files 看已經(jīng)被提交的
git rm [file name] 刪除一個(gè)文件
git commit -a 提交當(dāng)前repos的所有的改變
git add [file name] 添加一個(gè)文件到git index
git commit -v 當(dāng)你用－v參數(shù)的時(shí)候可以看commit的差異
git commit -m "This is the message describing the commit" 添加commit信息
git commit -a -a是代表add，把所有的change加到git index里然后再commit
git commit -a -v 一般提交命令
git log 看你commit的日志
git diff 查看尚未暫存的更新
git rm a.a 移除文件(從暫存區(qū)和工作區(qū)中刪除)
git rm --cached a.a 移除文件(只從暫存區(qū)中刪除)
git commit -m "remove" 移除文件(從Git中刪除)
git rm -f a.a 強(qiáng)行移除修改后文件(從暫存區(qū)和工作區(qū)中刪除)
git diff --cached 或 $ git diff --staged 查看尚未提交的更新
git stash push 將文件給push到一個(gè)臨時(shí)空間中
git stash pop 將文件從臨時(shí)空間pop下來(lái)

JS閉包烈炭，你了解多少溶锭？

應(yīng)該有面試官問(wèn)過(guò)你：

1. 什么是閉包？
2. 閉包有哪些實(shí)際運(yùn)用場(chǎng)景符隙？
3. 閉包是如何產(chǎn)生的趴捅？
4. 閉包產(chǎn)生的變量如何被回收？

這些問(wèn)題其實(shí)都可以被看作是同一個(gè)問(wèn)題霹疫，那就是面試官在問(wèn)你：你對(duì)JS閉包了解多少拱绑？

來(lái)總結(jié)一下我聽(tīng)到過(guò)的答案，盡量完全復(fù)原候選人面試的時(shí)候說(shuō)的原話更米。

答案1: 就是一個(gè)function里面return了一個(gè)子函數(shù)欺栗，子函數(shù)訪問(wèn)了外面那個(gè)函數(shù)的變量毫痕。

答案2: for循環(huán)里面可以用閉包來(lái)解決問(wèn)題征峦。

for(var i = 0; i < 10; i++){
    setTimeout(()=>console.log(i),0)
}
// 控制臺(tái)輸出10遍10.
for(var i = 0; i < 10; i++){
    (function(a){
    setTimeout(()=>console.log(a),0)
    })(i)
}
 // 控制臺(tái)輸出0-9
復(fù)制代碼

答案3： 當(dāng)前作用域產(chǎn)產(chǎn)生了對(duì)父作用域的引用。

答案4： 不知道消请。是跟瀏覽器的垃圾回收機(jī)制有關(guān)嗎栏笆？

開(kāi)杠了。請(qǐng)問(wèn)臊泰，小伙伴的答案和以上的內(nèi)容有多少相似程度蛉加？

其實(shí)，拿著這些問(wèn)題好好想想缸逃，你就會(huì)發(fā)現(xiàn)這些問(wèn)題都只是為了最終那一個(gè)問(wèn)題针饥。

閉包的底層實(shí)現(xiàn)原理

1. JS執(zhí)行上下文

我們都知道，我們手寫(xiě)的js代碼是要經(jīng)過(guò)瀏覽器V8進(jìn)行預(yù)編譯后才能真正的被執(zhí)行需频。例如變量提升丁眼、函數(shù)提升。舉個(gè)栗子昭殉。

// 栗子：
var d = 'abc';
function a(){
    console.log("函數(shù)a");
};
console.log(a);   // ? a(){ console.log("函數(shù)a"); }
a();              // '函數(shù)a'
var a = "變量a";  
console.log(a);   // '變量a'
a();              // a is not a function
var c = 123;

// 輸出結(jié)果及順序：
// ? a(){ console.log("函數(shù)a"); }
// '函數(shù)a'
// '變量a'
// a is not a function

// 栗子預(yù)編后相當(dāng)于：
function a(){
    console.log("函數(shù)a");
};
var d;
console.log(a);  // ? a(){ console.log("函數(shù)a"); }
a();              // '函數(shù)a'

a = "變量a";     // 此時(shí)變量a賦值苞七，函數(shù)聲明被覆蓋

console.log(a); // "變量a"
a();         // a is not a function

復(fù)制代碼

那么問(wèn)題來(lái)了藐守。 請(qǐng)問(wèn)是誰(shuí)來(lái)執(zhí)行預(yù)編譯操作的？那這個(gè)誰(shuí)又是在哪里進(jìn)行預(yù)編譯的蹂风？

是的卢厂，你的疑惑沒(méi)有錯(cuò)。js代碼運(yùn)行需要一個(gè)運(yùn)行環(huán)境惠啄，那這個(gè)環(huán)境就是執(zhí)行上下文慎恒。 是的，js運(yùn)行前的預(yù)編譯也是在這個(gè)環(huán)境中進(jìn)行礁阁。

js執(zhí)行上下文分三種：

• 全局執(zhí)行上下文： 代碼開(kāi)始執(zhí)行時(shí)首先進(jìn)入的環(huán)境巧号。
• 函數(shù)執(zhí)行上下文：函數(shù)調(diào)用時(shí)，會(huì)開(kāi)始執(zhí)行函數(shù)中的代碼姥闭。
• eval執(zhí)行上下文：不建議使用丹鸿，可忽略。

那么棚品，執(zhí)行上下文的周期靠欢，分為兩個(gè)階段：

• 創(chuàng)建階段
  • 創(chuàng)建詞法環(huán)境
  • 生成變量對(duì)象(VO)，建立作用域鏈铜跑、作用域鏈门怪、作用域鏈（重要的事說(shuō)三遍）
  • 確認(rèn)this指向，并綁定this
• 執(zhí)行階段锅纺。這個(gè)階段進(jìn)行變量賦值掷空，函數(shù)引用及執(zhí)行代碼。

你現(xiàn)在猜猜看囤锉，預(yù)編譯是發(fā)生在什么時(shí)候坦弟？

噢，我忘記說(shuō)了官地，其實(shí)與編譯還有另一個(gè)稱(chēng)呼：執(zhí)行期上下文酿傍。

預(yù)編譯發(fā)生在函數(shù)執(zhí)行之前。預(yù)編譯四部曲為：

1. 創(chuàng)建AO對(duì)象
2. 找形參和變量聲明驱入，將變量和形參作為AO屬性名赤炒，值為undefined
3. 將實(shí)參和形參相統(tǒng)一
4. 在函數(shù)體里找到函數(shù)聲明，值賦予函數(shù)體亏较。最后程序輸出變量值的時(shí)候莺褒，就是從AO對(duì)象中拿。

所以雪情，預(yù)編譯真正的結(jié)果是：

var AO = {
    a = function a(){console.log("函數(shù)a");};
    d = 'abc'
}
復(fù)制代碼

我們重新來(lái)遵岩。

1. 什么叫變量對(duì)象？

變量對(duì)象是 js 代碼在進(jìn)入執(zhí)行上下文時(shí)旺罢，js 引擎在內(nèi)存中建立的一個(gè)對(duì)象旷余，用來(lái)存放當(dāng)前執(zhí)行環(huán)境中的變量绢记。

2. 變量對(duì)象(VO)的創(chuàng)建過(guò)程

變量對(duì)象的創(chuàng)建，是在執(zhí)行上下文創(chuàng)建階段正卧，依次經(jīng)過(guò)以下三個(gè)過(guò)程：

• 創(chuàng)建 arguments 對(duì)象蠢熄。

  對(duì)于函數(shù)執(zhí)行環(huán)境，首先查詢(xún)是否有傳入的實(shí)參炉旷，如果有签孔，則會(huì)將參數(shù)名是實(shí)參值組成的鍵值對(duì)放入arguments 對(duì)象中。否則窘行，將參數(shù)名和 undefined組成的鍵值對(duì)放入 arguments 對(duì)象中饥追。

//舉個(gè)栗子 
function bar(a, b, c) {
    console.log(arguments);  // [1, 2]
    console.log(arguments[2]); // undefined
}
bar(1,2)
復(fù)制代碼

• 當(dāng)遇到同名的函數(shù)時(shí)，后面的會(huì)覆蓋前面的罐盔。

console.log(a); // function a() {console.log('Is a ?') }
function a() {
    console.log('Is a');
}
function a() {
  console.log('Is a ?')
}

/**ps: 在執(zhí)行第一行代碼之前但绕，函數(shù)聲明已經(jīng)創(chuàng)建完成.后面的對(duì)之前的聲明進(jìn)行了覆蓋。**/
復(fù)制代碼

• 檢查當(dāng)前環(huán)境中的變量聲明并賦值為undefined惶看。當(dāng)遇到同名的函數(shù)聲明捏顺，為了避免函數(shù)被賦值為 undefined ,會(huì)忽略此聲明

console.log(a); // function a() {console.log('Is a ?') }
console.log(b); // undefined
function a() {
  console.log('Is a ');
}
function a() {
console.log('Is a ?');
}
var b = 'Is b';
var a = 10086;

/**這段代碼執(zhí)行一下，你會(huì)發(fā)現(xiàn) a 打印結(jié)果仍舊是一個(gè)函數(shù)纬黎，而 b 則是 undefined幅骄。**/
復(fù)制代碼

根據(jù)以上三個(gè)步驟，對(duì)于變量提升也就知道是怎么回事了本今。

3. 變量對(duì)象變?yōu)榛顒?dòng)對(duì)象

執(zhí)行上下文的第二個(gè)階段拆座，稱(chēng)為執(zhí)行階段，在此時(shí)冠息，會(huì)進(jìn)行變量賦值挪凑，函數(shù)引用并執(zhí)行其他代碼，此時(shí)铐达，變量對(duì)象變?yōu)榛顒?dòng)對(duì)象岖赋。

我們還是舉上面的例子：

console.log(a); // function a() {console.log('fjdsfs') }
console.log(b); // undefined
function a() {
   console.log('Is a');
}
function a() {
 console.log('Is a?');
}
var b = 'Is b';
console.log(b); // 'Is b'
var a = 10086; 
console.log(a);  // 10086
var b = 'Is b?';
console.log(b); // 'Is b?'
復(fù)制代碼

在上面的代碼中檬果，代碼真正開(kāi)始執(zhí)行是從第一行 console.log() 開(kāi)始的瓮孙，自這之前泡嘴，執(zhí)行上下文是這樣的：

// 創(chuàng)建過(guò)程
EC= {
  VO： {}; // 創(chuàng)建變量對(duì)象
  scopeChain: {}; // 作用域鏈
}
VO = {
  argument: {...}; // 當(dāng)前為全局上下文在张，所以這個(gè)屬性值是空的
  a: <a reference> // 函數(shù) a  的引用地址  b: undefiend  // 見(jiàn)上文創(chuàng)建變量對(duì)象的第三步}

復(fù)制代碼

詞法作用域（Lexical scope）

這里想說(shuō)明，我們?cè)诤瘮?shù)執(zhí)行上下文中有變量阶牍，在全局執(zhí)行上下文中有變量恳啥。JavaScript的一個(gè)復(fù)雜之處在于它如何查找變量偏灿，如果在函數(shù)執(zhí)行上下文中找不到變量，它將在調(diào)用上下文中尋找它钝的，如果在它的調(diào)用上下文中沒(méi)有找到翁垂，就一直往上一級(jí)铆遭，直到它在全局執(zhí)行上下文中查找為止。(如果最后找不到沿猜，它就是 undefined)枚荣。

再來(lái)舉個(gè)栗子：

 1: let top = 0; // 
 2: function createWarp() {
 3:   function add(a, b) {
 4:     let ret = a + b
 5:     return ret
 6:   }
 7:   return add
 8: }
 9: let sum = createWarp()
10: let result = sum(top, 8)
11: console.log('result:',result)


復(fù)制代碼

分析過(guò)程如下：

• 在全局上下文中聲明變量top 并賦值為0.
• 2 - 8行。在全局執(zhí)行上下文中聲明了一個(gè)名為 createWarp 的變量啼肩，并為其分配了一個(gè)函數(shù)定義橄妆。其中第3-7行描述了其函數(shù)定義，并將函數(shù)定義存儲(chǔ)到那個(gè)變量(createWarp)中祈坠。
• 第9行害碾。我們?cè)谌謭?zhí)行上下文中聲明了一個(gè)名為 sum 的新變量，暫時(shí)赦拘，值為 undefined慌随。
• 第9行。遇到()躺同，表明需要執(zhí)行或調(diào)用一個(gè)函數(shù)儒陨。那么查找全局執(zhí)行上下文的內(nèi)存并查找名為 createWarp 的變量。 明顯笋籽，已經(jīng)在步驟2中創(chuàng)建完畢蹦漠。接著，調(diào)用它车海。
• 調(diào)用函數(shù)時(shí)笛园，回到第2行。創(chuàng)建一個(gè)新的createWarp執(zhí)行上下文侍芝。我們可以在 createWarp 的執(zhí)行上下文中創(chuàng)建自有變量研铆。js 引擎createWarp 的上下文添加到調(diào)用堆棧（call stack）。因?yàn)檫@個(gè)函數(shù)沒(méi)有參數(shù)州叠，直接跳到它的主體部分.
• 3 - 6 行棵红。我們有一個(gè)新的函數(shù)聲明，在createWarp執(zhí)行上下文中創(chuàng)建一個(gè)變量 add咧栗。add 只存在于 createWarp 執(zhí)行上下文中, 其函數(shù)定義存儲(chǔ)在名為 add 的自有變量中逆甜。
• 第7行，我們返回變量 add 的內(nèi)容致板。js引擎查找一個(gè)名為 add 的變量并找到它. 第4行和第5行括號(hào)之間的內(nèi)容構(gòu)成該函數(shù)定義交煞。
• createWarp 調(diào)用完畢，createWarp 執(zhí)行上下文將被銷(xiāo)毀斟或。add 變量也跟著被銷(xiāo)毀素征。 但 add 函數(shù)定義仍然存在，因?yàn)樗祷夭①x值給了 sum 變量。 （ps: 這才是閉包產(chǎn)生的變量存于內(nèi)存當(dāng)中的真相）
• 接下來(lái)就是簡(jiǎn)單的執(zhí)行過(guò)程御毅，不再贅述根欧。。
• ……
• 代碼執(zhí)行完畢端蛆，全局執(zhí)行上下文被銷(xiāo)毀咽块。sum 和 result 也跟著被銷(xiāo)毀。

小結(jié)一下

現(xiàn)在欺税，如果再讓你回答什么是閉包侈沪，你能答出多少？

其實(shí)晚凿，大家說(shuō)的都對(duì)亭罪。不管是函數(shù)返回一個(gè)函數(shù)，還是產(chǎn)生了外部作用域的引用歼秽，都是有道理的应役。

所以，什么是閉包燥筷？

• 解釋一下作用域鏈?zhǔn)侨绾萎a(chǎn)生的箩祥。
• 解釋一下js執(zhí)行上下文的創(chuàng)建、執(zhí)行過(guò)程肆氓。
• 解釋一下閉包所產(chǎn)生的變量放在哪了袍祖。
• 最后請(qǐng)把以上3點(diǎn)結(jié)合起來(lái)說(shuō)給面試官聽(tīng)。

說(shuō)一下怎么把類(lèi)數(shù)組轉(zhuǎn)換為數(shù)組?

//通過(guò)call調(diào)用數(shù)組的slice方法來(lái)實(shí)現(xiàn)轉(zhuǎn)換
Array.prototype.slice.call(arrayLike)

//通過(guò)call調(diào)用數(shù)組的splice方法來(lái)實(shí)現(xiàn)轉(zhuǎn)換
Array.prototype.splice.call(arrayLike,0)

//通過(guò)apply調(diào)用數(shù)組的concat方法來(lái)實(shí)現(xiàn)轉(zhuǎn)換
Array.prototype.concat.apply([],arrayLike)

//通過(guò)Array.from方法來(lái)實(shí)現(xiàn)轉(zhuǎn)換
Array.from(arrayLike)
復(fù)制代碼

ES6新特性

1.ES6引入來(lái)嚴(yán)格模式
    變量必須聲明后在使用
    函數(shù)的參數(shù)不能有同名屬性, 否則報(bào)錯(cuò)
    不能使用with語(yǔ)句 (說(shuō)實(shí)話我基本沒(méi)用過(guò))
    不能對(duì)只讀屬性賦值, 否則報(bào)錯(cuò)
    不能使用前綴0表示八進(jìn)制數(shù),否則報(bào)錯(cuò) (說(shuō)實(shí)話我基本沒(méi)用過(guò))
    不能刪除不可刪除的數(shù)據(jù), 否則報(bào)錯(cuò)
    不能刪除變量delete prop, 會(huì)報(bào)錯(cuò), 只能刪除屬性delete global[prop]
    eval不會(huì)在它的外層作用域引入變量
    eval和arguments不能被重新賦值
    arguments不會(huì)自動(dòng)反映函數(shù)參數(shù)的變化
    不能使用arguments.caller (說(shuō)實(shí)話我基本沒(méi)用過(guò))
    不能使用arguments.callee (說(shuō)實(shí)話我基本沒(méi)用過(guò))
    禁止this指向全局對(duì)象
    不能使用fn.caller和fn.arguments獲取函數(shù)調(diào)用的堆棧 (說(shuō)實(shí)話我基本沒(méi)用過(guò))
    增加了保留字（比如protected谢揪、static和interface）

2.關(guān)于let和const新增的變量聲明

3.變量的解構(gòu)賦值

4.字符串的擴(kuò)展
    includes()：返回布爾值蕉陋，表示是否找到了參數(shù)字符串。
    startsWith()：返回布爾值拨扶，表示參數(shù)字符串是否在原字符串的頭部凳鬓。
    endsWith()：返回布爾值，表示參數(shù)字符串是否在原字符串的尾部患民。
5.數(shù)值的擴(kuò)展
    Number.isFinite()用來(lái)檢查一個(gè)數(shù)值是否為有限的（finite）缩举。
    Number.isNaN()用來(lái)檢查一個(gè)值是否為NaN。
6.函數(shù)的擴(kuò)展
    函數(shù)參數(shù)指定默認(rèn)值
7.數(shù)組的擴(kuò)展
    擴(kuò)展運(yùn)算符
8.對(duì)象的擴(kuò)展
    對(duì)象的解構(gòu)
9.新增symbol數(shù)據(jù)類(lèi)型

10.Set 和 Map 數(shù)據(jù)結(jié)構(gòu) 
    ES6 提供了新的數(shù)據(jù)結(jié)構(gòu) Set匹颤。它類(lèi)似于數(shù)組仅孩，但是成員的值都是唯一的，沒(méi)有重復(fù)的值惋嚎。 Set 本身是一個(gè)構(gòu)造函數(shù)杠氢，用來(lái)生成 Set 數(shù)據(jù)結(jié)構(gòu)站刑。

    Map它類(lèi)似于對(duì)象另伍，也是鍵值對(duì)的集合，但是“鍵”的范圍不限于字符串，各種類(lèi)型的值（包括對(duì)象）都可以當(dāng)作鍵摆尝。
11.Proxy
    Proxy 可以理解成温艇，在目標(biāo)對(duì)象之前架設(shè)一層“攔截”，外界對(duì)該對(duì)象的訪問(wèn)
    都必須先通過(guò)這層攔截堕汞，因此提供了一種機(jī)制勺爱，可以對(duì)外界的訪問(wèn)進(jìn)行過(guò)濾和改寫(xiě)。
    Proxy 這個(gè)詞的原意是代理讯检，用在這里表示由它來(lái)“代理”某些操作琐鲁，可以譯為“代理器”。
    Vue3.0使用了proxy
12.Promise
    Promise 是異步編程的一種解決方案人灼，比傳統(tǒng)的解決方案——回調(diào)函數(shù)和事件——更合理和更強(qiáng)大围段。
    特點(diǎn)是：
        對(duì)象的狀態(tài)不受外界影響。
        一旦狀態(tài)改變投放，就不會(huì)再變奈泪，任何時(shí)候都可以得到這個(gè)結(jié)果。
13.async 函數(shù) 
    async函數(shù)對(duì) Generator 函數(shù)的區(qū)別：
    （1）內(nèi)置執(zhí)行器灸芳。
    Generator 函數(shù)的執(zhí)行必須靠執(zhí)行器涝桅，而async函數(shù)自帶執(zhí)行器。也就是說(shuō)烙样，async函數(shù)的執(zhí)行冯遂，與普通函數(shù)一模一樣，只要一行谒获。
    （2）更好的語(yǔ)義债蜜。
    async和await，比起星號(hào)和yield究反，語(yǔ)義更清楚了寻定。async表示函數(shù)里有異步操作，await表示緊跟在后面的表達(dá)式需要等待結(jié)果精耐。
    （3）正常情況下狼速，await命令后面是一個(gè) Promise 對(duì)象。如果不是卦停，會(huì)被轉(zhuǎn)成一個(gè)立即resolve的 Promise 對(duì)象向胡。
    （4）返回值是 Promise。
    async函數(shù)的返回值是 Promise 對(duì)象惊完，這比 Generator 函數(shù)的返回值是 Iterator 對(duì)象方便多了僵芹。你可以用then方法指定下一步的操作。
14.Class 
    class跟let小槐、const一樣：不存在變量提升拇派、不能重復(fù)聲明...
    ES6 的class可以看作只是一個(gè)語(yǔ)法糖荷辕，它的絕大部分功能
    ES5 都可以做到，新的class寫(xiě)法只是讓對(duì)象原型的寫(xiě)法更加清晰件豌、更像面向?qū)ο缶幊痰恼Z(yǔ)法而已疮方。
15.Module
    ES6 的模塊自動(dòng)采用嚴(yán)格模式，不管你有沒(méi)有在模塊頭部加上"use strict";茧彤。
    import和export命令以及export和export default的區(qū)別
復(fù)制代碼

HTML5有哪些更新

1. 語(yǔ)義化標(biāo)簽

• header：定義文檔的頁(yè)眉（頭部）骡显；
• nav：定義導(dǎo)航鏈接的部分；
• footer：定義文檔或節(jié)的頁(yè)腳（底部）曾掂；
• article：定義文章內(nèi)容惫谤；
• section：定義文檔中的節(jié)（section、區(qū)段）珠洗；
• aside：定義其所處內(nèi)容之外的內(nèi)容（側(cè)邊）石挂；

2. 媒體標(biāo)簽

（1） audio：音頻

<audio src='' controls autoplay loop='true'></audio>
復(fù)制代碼

屬性：

• controls 控制面板
• autoplay 自動(dòng)播放
• loop=‘true’ 循環(huán)播放

（2）video視頻

<video src='' poster='imgs/aa.jpg' controls></video>
復(fù)制代碼

屬性：

• poster：指定視頻還沒(méi)有完全下載完畢，或者用戶還沒(méi)有點(diǎn)擊播放前顯示的封面险污。默認(rèn)顯示當(dāng)前視頻文件的第一針畫(huà)面痹愚，當(dāng)然通過(guò)poster也可以自己指定。
• controls 控制面板
• width
• height

（3）source標(biāo)簽
因?yàn)闉g覽器對(duì)視頻格式支持程度不一樣蛔糯，為了能夠兼容不同的瀏覽器拯腮，可以通過(guò)source來(lái)指定視頻源。

<video>
     <source src='aa.flv' type='video/flv'></source>
     <source src='aa.mp4' type='video/mp4'></source>
</video>
復(fù)制代碼

3. 表單

表單類(lèi)型：

• email ：能夠驗(yàn)證當(dāng)前輸入的郵箱地址是否合法
• url ： 驗(yàn)證URL
• number ： 只能輸入數(shù)字蚁飒，其他輸入不了动壤，而且自帶上下增大減小箭頭，max屬性可以設(shè)置為最大值淮逻，min可以設(shè)置為最小值琼懊，value為默認(rèn)值。
• search ： 輸入框后面會(huì)給提供一個(gè)小叉爬早，可以刪除輸入的內(nèi)容哼丈，更加人性化。
• range ： 可以提供給一個(gè)范圍筛严，其中可以設(shè)置max和min以及value醉旦，其中value屬性可以設(shè)置為默認(rèn)值
• color ： 提供了一個(gè)顏色拾取器
• time ： 時(shí)分秒
• data ： 日期選擇年月日
• datatime ： 時(shí)間和日期(目前只有Safari支持)
• datatime-local ：日期時(shí)間控件
• week ：周控件
• month：月控件

表單屬性：

• placeholder ：提示信息
• autofocus ：自動(dòng)獲取焦點(diǎn)
• autocomplete=“on” 或者 autocomplete=“off” 使用這個(gè)屬性需要有兩個(gè)前提：
  • 表單必須提交過(guò)
  • 必須有name屬性。
• required：要求輸入框不能為空桨啃，必須有值才能夠提交车胡。
• pattern=" " 里面寫(xiě)入想要的正則模式，例如手機(jī)號(hào)patte="^(+86)?\d{10}$"
• multiple：可以選擇多個(gè)文件或者多個(gè)郵箱
• form=" form表單的ID"

表單事件：

• oninput 每當(dāng)input里的輸入框內(nèi)容發(fā)生變化都會(huì)觸發(fā)此事件照瘾。
• oninvalid 當(dāng)驗(yàn)證不通過(guò)時(shí)觸發(fā)此事件匈棘。

4. 進(jìn)度條、度量器

• progress標(biāo)簽：用來(lái)表示任務(wù)的進(jìn)度（IE析命、Safari不支持）主卫，max用來(lái)表示任務(wù)的進(jìn)度逃默，value表示已完成多少
• meter屬性：用來(lái)顯示剩余容量或剩余庫(kù)存（IE、Safari不支持）
  • high/low：規(guī)定被視作高/低的范圍
  • max/min：規(guī)定最大/小值
  • value：規(guī)定當(dāng)前度量值

設(shè)置規(guī)則：min < low < high < max

5.DOM查詢(xún)操作

• document.querySelector()
• document.querySelectorAll()

它們選擇的對(duì)象可以是標(biāo)簽队秩，可以是類(lèi)(需要加點(diǎn))笑旺，可以是ID(需要加#)

6. Web存儲(chǔ)

HTML5 提供了兩種在客戶端存儲(chǔ)數(shù)據(jù)的新方法：

• localStorage - 沒(méi)有時(shí)間限制的數(shù)據(jù)存儲(chǔ)
• sessionStorage - 針對(duì)一個(gè) session 的數(shù)據(jù)存儲(chǔ)

7. 其他

• 拖放：拖放是一種常見(jiàn)的特性昼浦，即抓取對(duì)象以后拖到另一個(gè)位置馍资。設(shè)置元素可拖放：

<img draggable="true" />
復(fù)制代碼

• 畫(huà)布（canvas ）： canvas 元素使用 JavaScript 在網(wǎng)頁(yè)上繪制圖像。畫(huà)布是一個(gè)矩形區(qū)域关噪，可以控制其每一像素鸟蟹。canvas 擁有多種繪制路徑、矩形使兔、圓形建钥、字符以及添加圖像的方法。

<canvas id="myCanvas" width="200" height="100"></canvas>
復(fù)制代碼

• SVG：SVG 指可伸縮矢量圖形虐沥，用于定義用于網(wǎng)絡(luò)的基于矢量的圖形熊经，使用 XML 格式定義圖形，圖像在放大或改變尺寸的情況下其圖形質(zhì)量不會(huì)有損失欲险，它是萬(wàn)維網(wǎng)聯(lián)盟的標(biāo)準(zhǔn)
• 地理定位：Geolocation（地理定位）用于定位用戶的位置镐依。‘

總結(jié)： （1）新增語(yǔ)義化標(biāo)簽：nav天试、header槐壳、footer、aside喜每、section务唐、article
（2）音頻、視頻標(biāo)簽：audio带兜、video
（3）數(shù)據(jù)存儲(chǔ)：localStorage枫笛、sessionStorage
（4）canvas（畫(huà)布）、Geolocation（地理定位）刚照、websocket（通信協(xié)議）
（5）input標(biāo)簽新增屬性：placeholder崇堰、autocomplete、autofocus涩咖、required
（6）history API：go海诲、forward、back檩互、pushstate

移除的元素有：

• 純表現(xiàn)的元素：basefont特幔，big，center闸昨，font, s蚯斯，strike薄风，tt，u;
• 對(duì)可用性產(chǎn)生負(fù)面影響的元素：frame拍嵌，frameset遭赂，noframes；

position的屬性有哪些横辆，區(qū)別是什么

position有以下屬性值：

前面三者的定位方式如下：

• relative： 元素的定位永遠(yuǎn)是相對(duì)于元素自身位置的，和其他元素沒(méi)關(guān)系路呜，也不會(huì)影響其他元素迷捧。

• fixed： 元素的定位是相對(duì)于 window （或者 iframe）邊界的，和其他元素沒(méi)有關(guān)系胀葱。但是它具有破壞性漠秋，會(huì)導(dǎo)致其他元素位置的變化。

• absolute： 元素的定位相對(duì)于前兩者要復(fù)雜許多抵屿。如果為 absolute 設(shè)置了 top庆锦、left，瀏覽器會(huì)根據(jù)什么去確定它的縱向和橫向的偏移量呢轧葛？答案是瀏覽器會(huì)遞歸查找該元素的所有父元素搂抒，如果找到一個(gè)設(shè)置了position:relative/absolute/fixed的元素艇搀，就以該元素為基準(zhǔn)定位，如果沒(méi)找到求晶，就以瀏覽器邊界定位焰雕。如下兩個(gè)圖所示：

HTML5的離線儲(chǔ)存怎么使用，它的工作原理是什么

離線存儲(chǔ)指的是：在用戶沒(méi)有與因特網(wǎng)連接時(shí)芳杏，可以正常訪問(wèn)站點(diǎn)或應(yīng)用矩屁，在用戶與因特網(wǎng)連接時(shí)，更新用戶機(jī)器上的緩存文件蚜锨。

原理：HTML5的離線存儲(chǔ)是基于一個(gè)新建的 .appcache 文件的緩存機(jī)制(不是存儲(chǔ)技術(shù))档插，通過(guò)這個(gè)文件上的解析清單離線存儲(chǔ)資源慢蜓，這些資源就會(huì)像cookie一樣被存儲(chǔ)了下來(lái)亚再。之后當(dāng)網(wǎng)絡(luò)在處于離線狀態(tài)下時(shí)，瀏覽器會(huì)通過(guò)被離線存儲(chǔ)的數(shù)據(jù)進(jìn)行頁(yè)面展示

使用方法： （1）創(chuàng)建一個(gè)和 html 同名的 manifest 文件晨抡，然后在頁(yè)面頭部加入 manifest 屬性：

<html lang="en" manifest="index.manifest">
復(fù)制代碼

（2）在 cache.manifest 文件中編寫(xiě)需要離線存儲(chǔ)的資源：

CACHE MANIFEST
    #v0.11
    CACHE:
    js/app.js
    css/style.css
    NETWORK:
    resourse/logo.png
    FALLBACK:
    / /offline.html
復(fù)制代碼

• CACHE: 表示需要離線存儲(chǔ)的資源列表氛悬，由于包含 manifest 文件的頁(yè)面將被自動(dòng)離線存儲(chǔ)，所以不需要把頁(yè)面自身也列出來(lái)耘柱。
• NETWORK: 表示在它下面列出來(lái)的資源只有在在線的情況下才能訪問(wèn)如捅，他們不會(huì)被離線存儲(chǔ)，所以在離線情況下無(wú)法使用這些資源调煎。不過(guò)镜遣，如果在 CACHE 和 NETWORK 中有一個(gè)相同的資源，那么這個(gè)資源還是會(huì)被離線存儲(chǔ)士袄，也就是說(shuō) CACHE 的優(yōu)先級(jí)更高悲关。
• FALLBACK: 表示如果訪問(wèn)第一個(gè)資源失敗，那么就使用第二個(gè)資源來(lái)替換他娄柳，比如上面這個(gè)文件表示的就是如果訪問(wèn)根目錄下任何一個(gè)資源失敗了寓辱，那么就去訪問(wèn) offline.html 。

（3）在離線狀態(tài)時(shí)赤拒，操作 window.applicationCache 進(jìn)行離線緩存的操作秫筏。

如何更新緩存：

（1）更新 manifest 文件

（2）通過(guò) javascript 操作

（3）清除瀏覽器緩存

注意事項(xiàng)：

（1）瀏覽器對(duì)緩存數(shù)據(jù)的容量限制可能不太一樣（某些瀏覽器設(shè)置的限制是每個(gè)站點(diǎn) 5MB）。

（2）如果 manifest 文件挎挖，或者內(nèi)部列舉的某一個(gè)文件不能正常下載这敬，整個(gè)更新過(guò)程都將失敗，瀏覽器繼續(xù)全部使用老的緩存蕉朵。

（3）引用 manifest 的 html 必須與 manifest 文件同源崔涂，在同一個(gè)域下。

（4）FALLBACK 中的資源必須和 manifest 文件同源墓造。

（5）當(dāng)一個(gè)資源被緩存后堪伍，該瀏覽器直接請(qǐng)求這個(gè)絕對(duì)路徑也會(huì)訪問(wèn)緩存中的資源锚烦。

（6）站點(diǎn)中的其他頁(yè)面即使沒(méi)有設(shè)置 manifest 屬性，請(qǐng)求的資源如果在緩存中也從緩存中訪問(wèn)帝雇。

（7）當(dāng) manifest 文件發(fā)生改變時(shí)涮俄，資源請(qǐng)求本身也會(huì)觸發(fā)更新。

v-model語(yǔ)法糖是怎么實(shí)現(xiàn)的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- v-model 只是語(yǔ)法糖而已 -->
    <!-- v-model 在內(nèi)部為不同的輸入元素使用不同的property并拋出不同的事件 -->
    <!-- text和textarea 元素使用value property 和 input事件 -->
    <!-- checkbox 和radio使用checked  property 和 change事件-->
    <!-- select 字段將value 作為prop 并將change 作為事件 -->
    <!-- 注意：對(duì)于需要使用輸入法(如中文尸闸、日文彻亲、韓文等)的語(yǔ)言，你將會(huì)發(fā)現(xiàn)v-model不會(huì)再輸入法    組合文字過(guò)程中得到更新 -->
    <!-- 再普通標(biāo)簽上 -->
    <input v-model="sth" />  //這一行等于下一行
    <input v-bind:value="sth" v-on:input="sth = $event.target.value" />
    <!-- 再組件上 -->
    <currency-input v-model="price"></currentcy-input>
        <!--上行代碼是下行的語(yǔ)法糖         <currency-input :value="price" @input="price = arguments[0]"></currency-input>        --> 
        <!-- 子組件定義 -->
        Vue.component('currency-input', {
         template: `
          <span>
           <input
            ref="input"
            :value="value"
            @input="$emit('input', $event.target.value)"
           >
          </span>
         `,
         props: ['value'],
        })   
</body>
</html>
復(fù)制代碼

瀏覽器是如何對(duì) HTML5 的離線儲(chǔ)存資源進(jìn)行管理和加載吮廉？

• 在線的情況下苞尝，瀏覽器發(fā)現(xiàn) html 頭部有 manifest 屬性，它會(huì)請(qǐng)求 manifest 文件宦芦，如果是第一次訪問(wèn)頁(yè)面 宙址，那么瀏覽器就會(huì)根據(jù) manifest 文件的內(nèi)容下載相應(yīng)的資源并且進(jìn)行離線存儲(chǔ)。如果已經(jīng)訪問(wèn)過(guò)頁(yè)面并且資源已經(jīng)進(jìn)行離線存儲(chǔ)了调卑，那么瀏覽器就會(huì)使用離線的資源加載頁(yè)面抡砂，然后瀏覽器會(huì)對(duì)比新的 manifest 文件與舊的 manifest 文件，如果文件沒(méi)有發(fā)生改變恬涧，就不做任何操作注益，如果文件改變了，就會(huì)重新下載文件中的資源并進(jìn)行離線存儲(chǔ)溯捆。
• 離線的情況下丑搔，瀏覽器會(huì)直接使用離線存儲(chǔ)的資源。

CSS 優(yōu)化和提高性能的方法有哪些提揍？

加載性能：

（1）css壓縮：將寫(xiě)好的css進(jìn)行打包壓縮啤月，可以減小文件體積。

（2）css單一樣式：當(dāng)需要下邊距和左邊距的時(shí)候碳锈，很多時(shí)候會(huì)選擇使用 margin:top 0 bottom 0顽冶；但margin-bottom:bottom;margin-left:left;執(zhí)行效率會(huì)更高。

（3）減少使用@import售碳，建議使用link强重，因?yàn)楹笳咴陧?yè)面加載時(shí)一起加載，前者是等待頁(yè)面加載完成之后再進(jìn)行加載贸人。

選擇器性能：

（1）關(guān)鍵選擇器（key selector）间景。選擇器的最后面的部分為關(guān)鍵選擇器（即用來(lái)匹配目標(biāo)元素的部分）。CSS選擇符是從右到左進(jìn)行匹配的艺智。當(dāng)使用后代選擇器的時(shí)候倘要，瀏覽器會(huì)遍歷所有子元素來(lái)確定是否是指定的元素等等；

（2）如果規(guī)則擁有ID選擇器作為其關(guān)鍵選擇器，則不要為規(guī)則增加標(biāo)簽封拧。過(guò)濾掉無(wú)關(guān)的規(guī)則（這樣樣式系統(tǒng)就不會(huì)浪費(fèi)時(shí)間去匹配它們了）志鹃。

（3）避免使用通配規(guī)則，如*{}計(jì)算次數(shù)驚人泽西，只對(duì)需要用到的元素進(jìn)行選擇曹铃。

（4）盡量少的去對(duì)標(biāo)簽進(jìn)行選擇，而是用class捧杉。

（5）盡量少的去使用后代選擇器陕见，降低選擇器的權(quán)重值。后代選擇器的開(kāi)銷(xiāo)是最高的味抖，盡量將選擇器的深度降到最低评甜，最高不要超過(guò)三層，更多的使用類(lèi)來(lái)關(guān)聯(lián)每一個(gè)標(biāo)簽元素仔涩。

（6）了解哪些屬性是可以通過(guò)繼承而來(lái)的忍坷，然后避免對(duì)這些屬性重復(fù)指定規(guī)則。

渲染性能：

（1）慎重使用高性能屬性：浮動(dòng)红柱、定位承匣。

（2）盡量減少頁(yè)面重排蓖乘、重繪锤悄。

（3）去除空規(guī)則：｛｝〖问悖空規(guī)則的產(chǎn)生原因一般來(lái)說(shuō)是為了預(yù)留樣式零聚。去除這些空規(guī)則無(wú)疑能減少css文檔體積。

（4）屬性值為0時(shí)些侍，不加單位隶症。

（5）屬性值為浮動(dòng)小數(shù)0.**，可以省略小數(shù)點(diǎn)之前的0岗宣。

（6）標(biāo)準(zhǔn)化各種瀏覽器前綴：帶瀏覽器前綴的在前蚂会。標(biāo)準(zhǔn)屬性在后。

（7）不使用@import前綴耗式，它會(huì)影響css的加載速度胁住。

（8）選擇器優(yōu)化嵌套，盡量避免層級(jí)過(guò)深刊咳。

（9）css雪碧圖彪见，同一頁(yè)面相近部分的小圖標(biāo)，方便使用娱挨，減少頁(yè)面的請(qǐng)求次數(shù)余指，但是同時(shí)圖片本身會(huì)變大，使用時(shí)跷坝，優(yōu)劣考慮清楚酵镜，再使用碉碉。

（10）正確使用display的屬性，由于display的作用淮韭，某些樣式組合會(huì)無(wú)效誉裆，徒增樣式體積的同時(shí)也影響解析性能。

（11）不濫用web字體缸濒。對(duì)于中文網(wǎng)站來(lái)說(shuō)WebFonts可能很陌生足丢，國(guó)外卻很流行。web fonts通常體積龐大庇配，而且一些瀏覽器在下載web fonts時(shí)會(huì)阻塞頁(yè)面渲染損傷性能斩跌。

可維護(hù)性、健壯性：

（1）將具有相同屬性的樣式抽離出來(lái)捞慌，整合并通過(guò)class在頁(yè)面中進(jìn)行使用耀鸦，提高css的可維護(hù)性。

（2）樣式與內(nèi)容分離：將css代碼定義到外部css中啸澡。

說(shuō)一下vue3.0你了解多少?

 <!-- 響應(yīng)式原理的改變 Vue3.x 使用Proxy取代 Vue2.x 版本的Object.defineProperty -->
 <!-- 組件選項(xiàng)聲明方式Vue3.x 使用Composition API setup 是Vue3.x新增的一個(gè)選項(xiàng)袖订，他
    是組件內(nèi)使用Composition API 的入口 -->
 <!-- 模板語(yǔ)法變化slot具名插槽語(yǔ)法 自定義指令 v-model 升級(jí) -->
 <!-- 其它方面的更改Suspense支持Fragment(多個(gè)根節(jié)點(diǎn)) 和Protal (在dom其他部分渲染組建內(nèi)容)組件
     針對(duì)一些特殊的場(chǎng)景做了處理⌒崧玻基于treeshaking優(yōu)化洛姑，提供了更多的內(nèi)置功能。 -->
復(fù)制代碼

Promise是什么皮服，解決了什么楞艾，之前怎么實(shí)現(xiàn)的

    Promise 是異步編程的一種解決方案，比傳統(tǒng)的解決方案——回調(diào)函數(shù)和事件——更合理和更強(qiáng)大龄广。
    解決來(lái)之前在請(qǐng)求中回調(diào)請(qǐng)求產(chǎn)生的回調(diào)地獄硫眯，使得現(xiàn)在的代碼更加合理更加優(yōu)雅，也更加容易定位查找問(wèn)題择同。
復(fù)制代碼

為什么需要清除浮動(dòng)两入？清除浮動(dòng)的方式

浮動(dòng)的定義： 非IE瀏覽器下，容器不設(shè)高度且子元素浮動(dòng)時(shí)敲才，容器高度不能被內(nèi)容撐開(kāi)裹纳。 此時(shí)，內(nèi)容會(huì)溢出到容器外面而影響布局归斤。這種現(xiàn)象被稱(chēng)為浮動(dòng)（溢出）痊夭。

浮動(dòng)的工作原理：

• 浮動(dòng)元素脫離文檔流，不占據(jù)空間（引起“高度塌陷”現(xiàn)象）
• 浮動(dòng)元素碰到包含它的邊框或者其他浮動(dòng)元素的邊框停留

浮動(dòng)元素可以左右移動(dòng)脏里，直到遇到另一個(gè)浮動(dòng)元素或者遇到它外邊緣的包含框她我。浮動(dòng)框不屬于文檔流中的普通流，當(dāng)元素浮動(dòng)之后，不會(huì)影響塊級(jí)元素的布局番舆，只會(huì)影響內(nèi)聯(lián)元素布局酝碳。此時(shí)文檔流中的普通流就會(huì)表現(xiàn)得該浮動(dòng)框不存在一樣的布局模式。當(dāng)包含框的高度小于浮動(dòng)框的時(shí)候恨狈，此時(shí)就會(huì)出現(xiàn)“高度塌陷”疏哗。

浮動(dòng)元素引起的問(wèn)題？

• 父元素的高度無(wú)法被撐開(kāi)禾怠，影響與父元素同級(jí)的元素
• 與浮動(dòng)元素同級(jí)的非浮動(dòng)元素會(huì)跟隨其后
• 若浮動(dòng)的元素不是第一個(gè)元素返奉，則該元素之前的元素也要浮動(dòng)，否則會(huì)影響頁(yè)面的顯示結(jié)構(gòu)

清除浮動(dòng)的方式如下：

• 給父級(jí)div定義height屬性
• 最后一個(gè)浮動(dòng)元素之后添加一個(gè)空的div標(biāo)簽吗氏，并添加clear:both樣式
• 包含浮動(dòng)元素的父級(jí)標(biāo)簽添加overflow:hidden或者overflow:auto
• 使用 :after 偽元素芽偏。由于IE6-7不支持 :after，使用 zoom:1 觸發(fā) hasLayout**

.clearfix:after{
    content: "\200B";
    display: table; 
    height: 0;
    clear: both;
  }
  .clearfix{
    *zoom: 1;
  }
復(fù)制代碼

對(duì)HTML語(yǔ)義化的理解

語(yǔ)義化是指根據(jù)內(nèi)容的結(jié)構(gòu)化（內(nèi)容語(yǔ)義化）弦讽，選擇合適的標(biāo)簽（代碼語(yǔ)義化）污尉。通俗來(lái)講就是用正確的標(biāo)簽做正確的事情。

語(yǔ)義化的優(yōu)點(diǎn)如下：

• 對(duì)機(jī)器友好往产，帶有語(yǔ)義的文字表現(xiàn)力豐富被碗，更適合搜索引擎的爬蟲(chóng)爬取有效信息，有利于SEO仿村。除此之外锐朴，語(yǔ)義類(lèi)還支持讀屏軟件，根據(jù)文章可以自動(dòng)生成目錄奠宜；
• 對(duì)開(kāi)發(fā)者友好包颁，使用語(yǔ)義類(lèi)標(biāo)簽增強(qiáng)了可讀性，結(jié)構(gòu)更加清晰压真，開(kāi)發(fā)者能清晰的看出網(wǎng)頁(yè)的結(jié)構(gòu)，便于團(tuán)隊(duì)的開(kāi)發(fā)與維護(hù)蘑险。

常見(jiàn)的語(yǔ)義化標(biāo)簽：

<header></header>  頭部

<nav></nav>  導(dǎo)航欄

<section></section>  區(qū)塊（有語(yǔ)義化的div）

<main></main>  主要區(qū)域

<article></article>  主要內(nèi)容

<aside></aside>  側(cè)邊欄

<footer></footer>  底部
復(fù)制代碼

absolute與fixed共同點(diǎn)與不同點(diǎn)

共同點(diǎn)：

• 改變行內(nèi)元素的呈現(xiàn)方式滴肿，將display置為inline-block
• 使元素脫離普通文檔流，不再占據(jù)文檔物理空間
• 覆蓋非定位文檔元素

不同點(diǎn)：

• abuselute與fixed的根元素不同佃迄，abuselute的根元素可以設(shè)置泼差，fixed根元素是瀏覽器。
• 在有滾動(dòng)條的頁(yè)面中呵俏，absolute會(huì)跟著父元素進(jìn)行移動(dòng)堆缘，fixed固定在頁(yè)面的具體位置。