OPTIONS請(qǐng)求方法及使用場(chǎng)景
OPTIONS是除了GET和POST之外的其中一種 HTTP請(qǐng)求方法钻弄。
OPTIONS方法是用于請(qǐng)求獲得由Request-URI標(biāo)識(shí)的資源在請(qǐng)求/響應(yīng)的通信過(guò)程中可以使用的功能選項(xiàng)据沈。通過(guò)這個(gè)方法歌焦，客戶(hù)端可以在采取具體資源請(qǐng)求之前，決定對(duì)該資源采取何種必要措施先较，或者了解服務(wù)器的性能。該請(qǐng)求方法的響應(yīng)不能緩存。
OPTIONS請(qǐng)求方法的主要用途有兩個(gè)：
- 獲取服務(wù)器支持的所有HTTP請(qǐng)求方法惯吕；
- 用來(lái)檢查訪問(wèn)權(quán)限。例如：在進(jìn)行 CORS 跨域資源共享時(shí)怕午，對(duì)于復(fù)雜請(qǐng)求废登，就是使用 OPTIONS 方法發(fā)送嗅探請(qǐng)求，以判斷是否有對(duì)指定資源的訪問(wèn)權(quán)限郁惜。
說(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 看所有用戶(hù)
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)
z-index屬性在什么情況下會(huì)失效
通常 z-index 的使用是在有兩個(gè)重疊的標(biāo)簽，在一定的情況下控制其中一個(gè)在另一個(gè)的上方或者下方出現(xiàn)兆蕉。z-index值越大就越是在上層羽戒。z-index元素的position屬性需要是relative，absolute或是fixed虎韵。
z-index屬性在下列情況下會(huì)失效：
- 父元素position為relative時(shí)易稠，子元素的z-index失效。解決：父元素position改為absolute或static包蓝；
- 元素沒(méi)有設(shè)置position屬性為非static屬性驶社。解決：設(shè)置該元素的position屬性為relative企量，absolute或是fixed中的一種；
- 元素在設(shè)置z-index的同時(shí)還設(shè)置了float浮動(dòng)亡电。解決：float去除届巩，改為display：inline-block；
vue實(shí)現(xiàn)雙向數(shù)據(jù)綁定原理是什么份乒？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
<!-- 引入vue文件 -->
<div id="box">
<new-input v-bind:name.sync="name"></new-input>
{{name}}
<!-- 小胡子語(yǔ)法 -->
<input type="text" v-model="name" />
</div>
<script>
Vue.component("new-input", { props: ["name"], data: function () { return { newName: this.name, }; }, template: `<label><input type="text" @keyup="changgeName" v-model="newName" /> 你的名字：</label>`, // 模板字符串
methods: { changgeName: function () { this.$emit("update:name", this.newName); }, }, watch: { name: function (v) { this.newName = v; }, }, // 監(jiān)聽(tīng)
}); new Vue({ el: "#box", //掛載實(shí)例
data: { name: "nick", }, //賦初始值
}); </script>
</body>
</html>
復(fù)制代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<input type="text" v-mode="msg" />
<p v-mode="msg"></p>
<script>
const data = { msg: "你好", }; const input = document.querySelector("input"); const p = document.querySelector("p"); input.value = data.msg; p.innerHTML = data.msg; //視圖變數(shù)據(jù)跟著變
input.addEventListener("input", function () { data.msg = input.value; }); //數(shù)據(jù)變視圖變
let temp = data.msg; Object.defineProperty(data, "msg", { get() { return temp; }, set(value) { temp = value; //視圖修改
input.value = temp; p.innerHTML = temp; }, }); data.msg = "小李"; </script>
</body>
</html>
復(fù)制代碼
八股文我不想寫(xiě)了自己百度去
復(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ù)制代碼
Canvas和SVG的區(qū)別
（1）SVG： SVG可縮放矢量圖形（Scalable Vector Graphics）是基于可擴(kuò)展標(biāo)記語(yǔ)言XML描述的2D圖形的語(yǔ)言瘾英，SVG基于XML就意味著SVG DOM中的每個(gè)元素都是可用的，可以為某個(gè)元素附加Javascript事件處理器孝凌。在 SVG 中方咆，每個(gè)被繪制的圖形均被視為對(duì)象。如果 SVG 對(duì)象的屬性發(fā)生變化蟀架，那么瀏覽器能夠自動(dòng)重現(xiàn)圖形瓣赂。
其特點(diǎn)如下：
- 不依賴(lài)分辨率
- 支持事件處理器
- 最適合帶有大型渲染區(qū)域的應(yīng)用程序（比如谷歌地圖）
- 復(fù)雜度高會(huì)減慢渲染速度（任何過(guò)度使用 DOM 的應(yīng)用都不快）
- 不適合游戲應(yīng)用
（2）Canvas： Canvas是畫(huà)布，通過(guò)Javascript來(lái)繪制2D圖形片拍，是逐像素進(jìn)行渲染的煌集。其位置發(fā)生改變，就會(huì)重新進(jìn)行繪制捌省。
其特點(diǎn)如下：
- 依賴(lài)分辨率
- 不支持事件處理器
- 弱的文本渲染能力
- 能夠以 .png 或 .jpg 格式保存結(jié)果圖像
- 最適合圖像密集型的游戲苫纤，其中的許多對(duì)象會(huì)被頻繁重繪
注：矢量圖，也稱(chēng)為面向?qū)ο蟮膱D像或繪圖圖像纲缓，在數(shù)學(xué)上定義為一系列由線連接的點(diǎn)卷拘。矢量文件中的圖形元素稱(chēng)為對(duì)象。每個(gè)對(duì)象都是一個(gè)自成一體的實(shí)體祝高，它具有顏色栗弟、形狀、輪廓工闺、大小和屏幕位置等屬性乍赫。
map和foreach有什么區(qū)別
foreach()方法會(huì)針對(duì)每一個(gè)元素執(zhí)行提供得函數(shù),該方法沒(méi)有返回值,是否會(huì)改變?cè)瓟?shù)組取決與數(shù)組元素的類(lèi)型是基本類(lèi)型還是引用類(lèi)型
map()方法不會(huì)改變?cè)瓟?shù)組的值,返回一個(gè)新數(shù)組,新數(shù)組中的值為原數(shù)組調(diào)用函數(shù)處理之后的值：
復(fù)制代碼
DOCTYPE(?檔類(lèi)型) 的作?
DOCTYPE是HTML5中一種標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的文檔類(lèi)型聲明，它的目的是告訴瀏覽器（解析器）應(yīng)該以什么樣（html或xhtml）的文檔類(lèi)型定義來(lái)解析文檔陆蟆，不同的渲染模式會(huì)影響瀏覽器對(duì) CSS 代碼甚? JavaScript 腳本的解析雷厂。它必須聲明在HTML?檔的第??。
瀏覽器渲染頁(yè)面的兩種模式（可通過(guò)document.compatMode獲取叠殷，比如改鲫，語(yǔ)雀官網(wǎng)的文檔類(lèi)型是CSS1Compat）：
- CSS1Compat：標(biāo)準(zhǔn)模式（Strick mode），默認(rèn)模式，瀏覽器使用W3C的標(biāo)準(zhǔn)解析渲染頁(yè)面钩杰。在標(biāo)準(zhǔn)模式中纫塌，瀏覽器以其支持的最高標(biāo)準(zhǔn)呈現(xiàn)頁(yè)面。
- BackCompat：怪異模式(混雜模式)(Quick mode)讲弄，瀏覽器使用自己的怪異模式解析渲染頁(yè)面。在怪異模式中依痊，頁(yè)面以一種比較寬松的向后兼容的方式顯示避除。
說(shuō)一下slice splice split 的區(qū)別?
// slice(start,[end])
// slice(start,[end])方法：該方法是對(duì)數(shù)組進(jìn)行部分截取，該方法返回一個(gè)新數(shù)組
// 參數(shù)start是截取的開(kāi)始數(shù)組索引胸嘁，end參數(shù)等于你要取的最后一個(gè)字符的位置值加上1（可選）瓶摆。
// 包含了源函數(shù)從start到 end 所指定的元素，但是不包括end元素性宏，比如a.slice(0,3)群井；
// 如果出現(xiàn)負(fù)數(shù)就把負(fù)數(shù)與長(zhǎng)度相加后再劃分。
// slice中的負(fù)數(shù)的絕對(duì)值若大于數(shù)組長(zhǎng)度就會(huì)顯示所有數(shù)組
// 若參數(shù)只有一個(gè)毫胜，并且參數(shù)大于length书斜，則為空。
// 如果結(jié)束位置小于起始位置酵使，則返回空數(shù)組
// 返回的個(gè)數(shù)是end-start的個(gè)數(shù)
// 不會(huì)改變?cè)瓟?shù)組
var arr = [1,2,3,4,5,6]
/*console.log(arr.slice(3))//[4,5,6] 從下標(biāo)為0的到3荐吉，截取3之后的數(shù)console.log(arr.slice(0,3))//[1,2,3] 從下標(biāo)為0的地方截取到下標(biāo)為3之前的數(shù)console.log(arr.slice(0,-2))//[1,2,3,4]console.log(arr.slice(-4,4))//[3,4]console.log(arr.slice(-7))//[1,2,3,4,5,6]console.log(arr.slice(-3,-3))// []console.log(arr.slice(8))//[]*/
// 個(gè)人總結(jié)：slice的參數(shù)如果是正數(shù)就從左往右數(shù)，如果是負(fù)數(shù)的話(huà)就從右往左邊數(shù)口渔，
// 截取的數(shù)組與數(shù)的方向一致样屠，如果是2個(gè)參數(shù)則截取的是數(shù)的交集，沒(méi)有交集則返回空數(shù)組
// ps：slice也可以切割字符串缺脉，用法和數(shù)組一樣痪欲，但要注意空格也算字符
// splice(start,deletecount,item)
// start：起始位置
// deletecount：刪除位數(shù)
// item：替換的item
// 返回值為被刪除的字符串
// 如果有額外的參數(shù)，那么item會(huì)插入到被移除元素的位置上攻礼。
// splice:移除业踢，splice方法從array中移除一個(gè)或多個(gè)數(shù)組，并用新的item替換它們秘蛔。
//舉一個(gè)簡(jiǎn)單的例子
var a=['a','b','c'];
var b=a.splice(1,1,'e','f');
console.log(a) //['a', 'e', 'f', 'c']
console.log(b) //['b']
var a = [1, 2, 3, 4, 5, 6];
//console.log("被刪除的為：",a.splice(1, 1, 8, 9)); //被刪除的為：2
// console.log("a數(shù)組元素：",a); //1,8,9,3,4,5,6
// console.log("被刪除的為：", a.splice(0, 2)); //被刪除的為：1,2
// console.log("a數(shù)組元素：", a) //3,4,5,6
console.log("被刪除的為：", a.splice(1, 0, 2, 2)) //插入 第二個(gè)數(shù)為0陨亡，表示刪除0個(gè)
console.log("a數(shù)組元素：", a) //1,2,2,2,3,4,5,6
// split(字符串)
// string.split(separator,limit)：split方法把這個(gè)string分割成片段來(lái)創(chuàng)建一個(gè)字符串?dāng)?shù)組。
// 可選參數(shù)limit可以限制被分割的片段數(shù)量深员。
// separator參數(shù)可以是一個(gè)字符串或一個(gè)正則表達(dá)式负蠕。
// 如果separator是一個(gè)空字符，會(huì)返回一個(gè)單字符的數(shù)組倦畅，不會(huì)改變?cè)瓟?shù)組遮糖。
var a="0123456";
var b=a.split("",3);
console.log(b);//b=["0","1","2"]
// 注意：String.split() 執(zhí)行的操作與 Array.join 執(zhí)行的操作是相反的。
復(fù)制代碼
script標(biāo)簽中defer和async的區(qū)別
如果沒(méi)有defer或async屬性叠赐，瀏覽器會(huì)立即加載并執(zhí)行相應(yīng)的腳本欲账。它不會(huì)等待后續(xù)加載的文檔元素屡江，讀取到就會(huì)開(kāi)始加載和執(zhí)行，這樣就阻塞了后續(xù)文檔的加載赛不。
defer 和 async屬性都是去異步加載外部的JS腳本文件惩嘉，它們都不會(huì)阻塞頁(yè)面的解析，其區(qū)別如下：
- 執(zhí)行順序： 多個(gè)帶async屬性的標(biāo)簽踢故，不能保證加載的順序文黎；多個(gè)帶defer屬性的標(biāo)簽，按照加載順序執(zhí)行殿较；
- 腳本是否并行執(zhí)行：async屬性耸峭，表示后續(xù)文檔的加載和執(zhí)行與js腳本的加載和執(zhí)行是并行進(jìn)行的，即異步執(zhí)行淋纲；defer屬性劳闹，加載后續(xù)文檔的過(guò)程和js腳本的加載(此時(shí)僅加載不執(zhí)行)是并行進(jìn)行的(異步)，js腳本需要等到文檔所有元素解析完成之后才執(zhí)行洽瞬，DOMContentLoaded事件觸發(fā)執(zhí)行之前本涕。
哪些情況會(huì)導(dǎo)致內(nèi)存泄漏
1、意外的全局變量：由于使用未聲明的變量,而意外的創(chuàng)建了一個(gè)全局變量,而使這個(gè)變量一直留在內(nèi)存中無(wú)法被回收
2片任、被遺忘的計(jì)時(shí)器或回調(diào)函數(shù)：設(shè)置了 setInterval 定時(shí)器偏友，而忘記取消它，如果循環(huán)函數(shù)有對(duì)外部變量的引用的話(huà)对供，那么這個(gè)變量會(huì)被一直留在內(nèi)存中位他，而無(wú)法被回收。
3产场、脫離 DOM 的引用：獲取一個(gè) DOM 元素的引用鹅髓，而后面這個(gè)元素被刪除，由于一直保留了對(duì)這個(gè)元素的引用京景，所以它也無(wú)法被回收窿冯。
4、閉包：不合理的使用閉包确徙，從而導(dǎo)致某些變量一直被留在內(nèi)存當(dāng)中醒串。
復(fù)制代碼
說(shuō)一下JSON.stringify有什么缺點(diǎn)？
1.如果obj里面有時(shí)間對(duì)象鄙皇，則JSON.stringify后再JSON.parse的結(jié)果芜赌，時(shí)間將只是字符串的形式，而不是對(duì)象的形式
2.如果obj里有RegExp(正則表達(dá)式的縮寫(xiě))伴逸、Error對(duì)象缠沈，則序列化的結(jié)果將只得到空對(duì)象；
3、如果obj里有函數(shù)洲愤，undefined颓芭，則序列化的結(jié)果會(huì)把函數(shù)或 undefined丟失；
4柬赐、如果obj里有NaN亡问、Infinity和-Infinity，則序列化的結(jié)果會(huì)變成null
5肛宋、JSON.stringify()只能序列化對(duì)象的可枚舉的自有屬性玛界，例如 如果obj中的對(duì)象是有構(gòu)造函數(shù)生成的， 則使用JSON.parse(JSON.stringify(obj))深拷貝后悼吱，會(huì)丟棄對(duì)象的constructor；
6良狈、如果對(duì)象中存在循環(huán)引用的情況也無(wú)法正確實(shí)現(xiàn)深拷貝后添；
復(fù)制代碼
三欄布局的實(shí)現(xiàn)
三欄布局一般指的是頁(yè)面中一共有三欄，左右兩欄寬度固定薪丁，中間自適應(yīng)的布局遇西，三欄布局的具體實(shí)現(xiàn)：
- 利用絕對(duì)定位，左右兩欄設(shè)置為絕對(duì)定位严嗜，中間設(shè)置對(duì)應(yīng)方向大小的margin的值粱檀。
.outer {
position: relative;
height: 100px;
}
.left {
position: absolute;
width: 100px;
height: 100px;
background: tomato;
}
.right {
position: absolute;
top: 0;
right: 0;
width: 200px;
height: 100px;
background: gold;
}
.center {
margin-left: 100px;
margin-right: 200px;
height: 100px;
background: lightgreen;
}
復(fù)制代碼
- 利用flex布局，左右兩欄設(shè)置固定大小漫玄，中間一欄設(shè)置為flex:1茄蚯。
.outer {
display: flex;
height: 100px;
}
.left {
width: 100px;
background: tomato;
}
.right {
width: 100px;
background: gold;
}
.center {
flex: 1;
background: lightgreen;
}
復(fù)制代碼
- 利用浮動(dòng)，左右兩欄設(shè)置固定大小睦优，并設(shè)置對(duì)應(yīng)方向的浮動(dòng)渗常。中間一欄設(shè)置左右兩個(gè)方向的margin值，注意這種方式汗盘，中間一欄必須放到最后：
.outer {
height: 100px;
}
.left {
float: left;
width: 100px;
height: 100px;
background: tomato;
}
.right {
float: right;
width: 200px;
height: 100px;
background: gold;
}
.center {
height: 100px;
margin-left: 100px;
margin-right: 200px;
background: lightgreen;
}
復(fù)制代碼
- 圣杯布局皱碘，利用浮動(dòng)和負(fù)邊距來(lái)實(shí)現(xiàn)。父級(jí)元素設(shè)置左右的 padding隐孽，三列均設(shè)置向左浮動(dòng)癌椿，中間一列放在最前面，寬度設(shè)置為父級(jí)元素的寬度菱阵，因此后面兩列都被擠到了下一行踢俄，通過(guò)設(shè)置 margin 負(fù)值將其移動(dòng)到上一行，再利用相對(duì)定位送粱，定位到兩邊褪贵。
.outer {
height: 100px;
padding-left: 100px;
padding-right: 200px;
}
.left {
position: relative;
left: -100px;
float: left;
margin-left: -100%;
width: 100px;
height: 100px;
background: tomato;
}
.right {
position: relative;
left: 200px;
float: right;
margin-left: -200px;
width: 200px;
height: 100px;
background: gold;
}
.center {
float: left;
width: 100%;
height: 100px;
background: lightgreen;
}
復(fù)制代碼
- 雙飛翼布局，雙飛翼布局相對(duì)于圣杯布局來(lái)說(shuō)，左右位置的保留是通過(guò)中間列的 margin 值來(lái)實(shí)現(xiàn)的脆丁，而不是通過(guò)父元素的 padding 來(lái)實(shí)現(xiàn)的世舰。本質(zhì)上來(lái)說(shuō)，也是通過(guò)浮動(dòng)和外邊距負(fù)值來(lái)實(shí)現(xiàn)的槽卫。
.outer {
height: 100px;
}
.left {
float: left;
margin-left: -100%;
width: 100px;
height: 100px;
background: tomato;
}
.right {
float: left;
margin-left: -200px;
width: 200px;
height: 100px;
background: gold;
}
.wrapper {
float: left;
width: 100%;
height: 100px;
background: lightgreen;
}
.center {
margin-left: 100px;
margin-right: 200px;
height: 100px;
}
復(fù)制代碼
常見(jiàn)的CSS布局單位
常用的布局單位包括像素（px）跟压，百分比（%），em歼培，rem震蒋，vw/vh。
（1）像素（px）是頁(yè)面布局的基礎(chǔ)躲庄，一個(gè)像素表示終端（電腦查剖、手機(jī)、平板等）屏幕所能顯示的最小的區(qū)域噪窘，像素分為兩種類(lèi)型：CSS像素和物理像素：
- CSS像素：為web開(kāi)發(fā)者提供笋庄，在CSS中使用的一個(gè)抽象單位；
- 物理像素：只與設(shè)備的硬件密度有關(guān)倔监，任何設(shè)備的物理像素都是固定的直砂。
（2）百分比（%），當(dāng)瀏覽器的寬度或者高度發(fā)生變化時(shí)浩习，通過(guò)百分比單位可以使得瀏覽器中的組件的寬和高隨著瀏覽器的變化而變化静暂，從而實(shí)現(xiàn)響應(yīng)式的效果。一般認(rèn)為子元素的百分比相對(duì)于直接父元素谱秽。
（3）em和rem相對(duì)于px更具靈活性洽蛀，它們都是相對(duì)長(zhǎng)度單位，它們之間的區(qū)別：em相對(duì)于父元素弯院，rem相對(duì)于根元素辱士。
- em： 文本相對(duì)長(zhǎng)度單位。相對(duì)于當(dāng)前對(duì)象內(nèi)文本的字體尺寸听绳。如果當(dāng)前行內(nèi)文本的字體尺寸未被人為設(shè)置颂碘，則相對(duì)于瀏覽器的默認(rèn)字體尺寸(默認(rèn)16px)。(相對(duì)父元素的字體大小倍數(shù))椅挣。
- rem： rem是CSS3新增的一個(gè)相對(duì)單位头岔，相對(duì)于根元素（html元素）的font-size的倍數(shù)。作用：利用rem可以實(shí)現(xiàn)簡(jiǎn)單的響應(yīng)式布局鼠证，可以利用html元素中字體的大小與屏幕間的比值來(lái)設(shè)置font-size的值峡竣，以此實(shí)現(xiàn)當(dāng)屏幕分辨率變化時(shí)讓元素也隨之變化。
（4）vw/vh是與視圖窗口有關(guān)的單位量九，vw表示相對(duì)于視圖窗口的寬度适掰，vh表示相對(duì)于視圖窗口高度颂碧，除了vw和vh外，還有vmin和vmax兩個(gè)相關(guān)的單位类浪。
- vw：相對(duì)于視窗的寬度载城，視窗寬度是100vw；
- vh：相對(duì)于視窗的高度费就，視窗高度是100vh诉瓦；
- vmin：vw和vh中的較小值；
- vmax：vw和vh中的較大值力细；
vw/vh 和百分比很類(lèi)似睬澡，兩者的區(qū)別：
- 百分比（
%）：大部分相對(duì)于祖先元素，也有相對(duì)于自身的情況比如（border-radius眠蚂、translate等) - vw/vm：相對(duì)于視窗的尺寸
Vue通信
1.props和$emit
2.中央事件總線 EventBus(基本不用)
3.vuex(官方推薦狀態(tài)管理器)
4.$parent和$children
當(dāng)然還有一些其他辦法煞聪，但基本不常用，或者用起來(lái)太復(fù)雜來(lái)逝慧。 介紹來(lái)通信的方式米绕，還可以擴(kuò)展說(shuō)一下使用
場(chǎng)景，如何使用馋艺，注意事項(xiàng)之類(lèi)的。
復(fù)制代碼
Set 和 Map有什么區(qū)別迈套？
1捐祠、Map是鍵值對(duì)，Set是值得集合桑李，當(dāng)然鍵和值可以是任何得值
2踱蛀、Map可以通過(guò)get方法獲取值，而set不能因?yàn)樗挥兄?3贵白、都能通過(guò)迭代器進(jìn)行for...of 遍歷
4率拒、Set的值是唯一的可以做數(shù)組去重，而Map由于沒(méi)有格式限制禁荒，可以做數(shù)據(jù)存儲(chǔ)
復(fù)制代碼
說(shuō)一下數(shù)組如何去重,你有幾種方法?
let arr = [1,1,"1","1",true,true,"true",{},{},"{}",null,null,undefined,undefined]
// 方法1
let uniqueOne = Array.from(new Set(arr)) console.log(uniqueOne)
// 方法2
let uniqueTwo = arr => {
let map = new Map(); //或者用空對(duì)象 let obj = {} 利用對(duì)象屬性不能重復(fù)得特性
let brr = []
arr.forEach( item => {
if(!map.has(item)) { //如果是對(duì)象得話(huà)就判斷 !obj[item]
map.set(item,true) //如果是對(duì)象得話(huà)就obj[item] =true 其他一樣
brr.push(item)
}
})
return brr
}
console.log(uniqueTwo(arr))
//方法3
let uniqueThree = arr => {
let brr = []
arr.forEach(item => {
// 使用indexOf 返回?cái)?shù)組是否包含某個(gè)值 沒(méi)有就返回-1 有就返回下標(biāo)
if(brr.indexOf(item) === -1) brr.push(item)
// 或者使用includes 返回?cái)?shù)組是否包含某個(gè)值 沒(méi)有就返回false 有就返回true
if(!brr.includes(item)) brr.push(item)
})
return brr
}
console.log(uniqueThree(arr))
//方法4
let uniqueFour = arr => {
// 使用 filter 返回符合條件的集合
let brr = arr.filter((item,index) => {
return arr.indexOf(item) === index
})
return brr
}
console.log(uniqueFour(arr))
復(fù)制代碼
對(duì)line-height 的理解及其賦值方式
（1）line-height的概念：
- line-height 指一行文本的高度猬膨，包含了字間距，實(shí)際上是下一行基線到上一行基線距離呛伴；
- 如果一個(gè)標(biāo)簽沒(méi)有定義 height 屬性勃痴，那么其最終表現(xiàn)的高度由 line-height 決定；
- 一個(gè)容器沒(méi)有設(shè)置高度热康，那么撐開(kāi)容器高度的是 line-height沛申，而不是容器內(nèi)的文本內(nèi)容；
- 把 line-height 值設(shè)置為 height 一樣大小的值可以實(shí)現(xiàn)單行文字的垂直居中姐军；
- line-height 和 height 都能撐開(kāi)一個(gè)高度铁材；
（2）line-height 的賦值方式：
- 帶單位：px 是固定值尖淘，而 em 會(huì)參考父元素 font-size 值計(jì)算自身的行高
- 純數(shù)字：會(huì)把比例傳遞給后代。例如著觉，父級(jí)行高為 1.5村生，子元素字體為 18px，則子元素行高為 1.5 * 18 = 27px
- 百分比：將計(jì)算后的值傳遞給后代
說(shuō)一下for...in 和 for...of的區(qū)別?
for...of遍歷獲取的是對(duì)象的鍵值, for...in獲取的是對(duì)象的鍵名;
for...in會(huì)遍歷對(duì)象的整個(gè)原型鏈, 性能非常差不推薦使用,而for...of只遍歷當(dāng)前對(duì)象不會(huì)遍歷原型鏈;
對(duì)于數(shù)組的遍歷,for...in會(huì)返回?cái)?shù)組中所有可枚舉的屬性(包括原型鏈上可枚舉的屬性),for...of只返回?cái)?shù)組的下標(biāo)對(duì)應(yīng)的屬性值;
總結(jié)：for...in循環(huán)主要是為了遍歷對(duì)象而生,不適用遍歷數(shù)組; for....of循環(huán)可以用來(lái)遍歷數(shù)組固惯、類(lèi)數(shù)組對(duì)象梆造、字符串、Set葬毫、Map以及Generator對(duì)象
復(fù)制代碼
