問(wèn)題類型匯總
- ES6：全看
- CSS3：新特性虏缸、div盒子居中鲫懒、清除浮動(dòng)、動(dòng)畫刽辙、canvas窥岩、畫三角形、定位的種類和區(qū)別
- Html：html5新特性宰缤、彈性盒子（怪異盒子）颂翼、
- Js：各種數(shù)據(jù)類型的處理方法、原型鏈慨灭、閉包朦乏、淺拷貝、深拷貝
- react：hooks氧骤、生命周期呻疹、組件之間的通信、高階組件
- 打包工具：webpack
- 其他：https協(xié)議筹陵、webStorage（localStorage和SessionStorage）和Cookie刽锤、跨域
具體問(wèn)題：
ES6
var、let惶翻、const區(qū)別姑蓝？
var定義的變量，沒(méi)有塊的概念吕粗，可以跨塊訪問(wèn)纺荧，不能跨函數(shù)訪問(wèn)；let和const都只能猜塊級(jí)作用域訪問(wèn)颅筋，不能跨塊或者函數(shù)訪問(wèn)宙暇。const聲明時(shí)必需賦值，且不能修改（不賦值议泵，你后面又不能修改占贫，那不是廢了）
var存在變量提升
const保證的是變量名指向的地址不變，而不是內(nèi)容不變先口，所以const聲明的數(shù)組型奥，也是可能會(huì)被篡改的
使用箭頭函數(shù)應(yīng)該注意什么瞳收？
- this指向會(huì)變成指向父級(jí)
- 不能使用
arguments對(duì)象，不能用作構(gòu)造函數(shù)厢汹，不能使用yield命令=>不能作為generator
函數(shù)
forEach螟深、for in、for of三者的區(qū)別烫葬？
for in 遍歷出來(lái)的是key(對(duì)象和數(shù)組都能遍歷)界弧，
for of 便利出來(lái)的是value（for of只能遍歷數(shù)組，不能遍歷對(duì)象）
（Symbol作為屬性名搭综，循環(huán)時(shí)是拿不到的）
rest參數(shù)需要注意的地方
- 只能作為函數(shù)的最后一個(gè)參數(shù)
- 函數(shù)的length屬性垢箕，不包括rest參數(shù)
Object.is()、==兑巾、===的區(qū)別
| == | === | Object.is() | |
|---|---|---|---|
| +0条获、-0 | true | true | false |
| NaN，Nan | false | false | true |
| undefined闪朱，undefined | true | true | true |
| null月匣，null | true | true | true |
| null，undefined | true | false | false |
| null奋姿，NaN | false | false | false |
| undefined锄开，NaN | false | false | false |
===在==的基礎(chǔ)上，認(rèn)為null和undefined是不相等的称诗，Object.is()在===的基礎(chǔ)上萍悴，認(rèn)為+0和-0不相等，但是Nan和Nan想等
JS處理異步函數(shù)的方法
回調(diào)寓免、事件發(fā)布與訂閱癣诱、Promise、Generator函數(shù)袜香、async/await
如何監(jiān)聽(tīng)數(shù)組被寫入或者讀人河琛？
使用Proxy
ES6新增的特性
- let蜈首、const实抡。
var有變量提升、可以跨塊訪問(wèn)欢策，不能跨函數(shù)訪問(wèn)吆寨。let、const沒(méi)有變量提升踩寇，必須先聲明再使用啄清，不能跨塊訪問(wèn)，也不能跨函數(shù)訪問(wèn) - 箭頭函數(shù)
箭頭函數(shù)無(wú)需關(guān)鍵字function創(chuàng)建俺孙，更簡(jiǎn)潔辣卒；箭頭函數(shù)沒(méi)有自己的this掷贾、arguments、不能用作構(gòu)造函數(shù)添寺、不能用作generator函數(shù) - 模板字符串
用反引號(hào)包裹胯盯，再基礎(chǔ)字符串的基礎(chǔ)上，可以定義多行字符串计露，可以使用${}進(jìn)行字符串的拼接 - 解構(gòu)賦值
按照一定的語(yǔ)法可以從數(shù)組、字符串和對(duì)象中取值憎乙，然后賦值給變量票罐。對(duì)于數(shù)組來(lái)說(shuō)，相同位置的值會(huì)賦給相同位置的變量泞边。對(duì)于對(duì)象來(lái)說(shuō)相同鍵名的值會(huì)賦給同名變量该押。都支持賦默認(rèn)值
https://www.runoob.com/w3cnote/deconstruction-assignment.html - for of與for in
可以循環(huán)數(shù)組、set阵谚、map蚕礼、對(duì)象、字符串梢什。for of循環(huán)出來(lái)的是key奠蹬，for in循環(huán)出來(lái)的是value - export和import
只是將代碼模塊化，分成不同文件嗡午。然后通過(guò)export和import的方式在其他地方使用 - Set數(shù)據(jù)結(jié)構(gòu)
Set是集合囤躁，一如它的數(shù)學(xué)定義，它內(nèi)部是沒(méi)有重復(fù)值的荔睹。我們可以利用這個(gè)屬性對(duì)數(shù)組進(jìn)行去重狸演，以含有重復(fù)值的數(shù)組為參數(shù)實(shí)例化一個(gè)Set，得到的結(jié)果中將不會(huì)包括重復(fù)值 - 展開(kāi)運(yùn)算符
...
數(shù)組可以展開(kāi)為數(shù)組和對(duì)象僻他；
對(duì)象可以展開(kāi)為對(duì)象宵距；不能展開(kāi)為數(shù)組
Set可以展開(kāi)為數(shù)組，但是如果展開(kāi)為對(duì)象的話吨拗，會(huì)得到一個(gè)空對(duì)象满哪。 - Map數(shù)據(jù)類型
最直觀的感受是，從Object的string——值對(duì)丢胚，變成了值——值對(duì) - 修飾器@decorator
修飾器可以在編譯階段執(zhí)行代碼翩瓜。用于修改類甚至于方法的行為
//修飾器函數(shù)1：為類加上靜態(tài)屬性isTestable
//修飾器函數(shù)的第一個(gè)參數(shù)，就是所要修飾的目標(biāo)類
function testable(target) {
target.isTestable = true;
}
//修飾類的行為携龟。寫在類上方兔跌，表示修飾器的目標(biāo)是這整個(gè)類
@testable
class MyTestableClass {}
console.log(MyTestableClass.isTestable) // true
解釋：
@decorator
class A {}
// 等同于
class A {}
A = decorator(A) || A;
core-decorators.js core-decorators.js是一個(gè)第三方模塊，提供了幾個(gè)常見(jiàn)的修飾器峡蟋，通過(guò)它可以更好地理解修飾器
@autobind：使得方法中的this對(duì)象坟桅，綁定原始對(duì)象
@readonly：使得屬性或方法不可寫
@override：檢查子類的方法是否正確覆蓋了父類的同名方法华望，如果不正確會(huì)報(bào)錯(cuò)
@deprecate (別名@deprecated)：在控制臺(tái)顯示一條警告，表示該方法將廢除.
https://blog.csdn.net/aaaaapipi/article/details/108040002
class
class就是es5中原型鏈實(shí)現(xiàn)的一個(gè)語(yǔ)法糖Promise
三種狀態(tài)：pending（進(jìn)行中仅乓，初始化）赖舟、fulfilled（已成功）和rejected（已失敗）
https://blog.csdn.net/qq_34645412/article/details/81170576
function asyncFun3(a){
let p=new Promise(function(resolve,reject){
setTimeout(function(){
console.log("內(nèi)3")
console.log(a)
resolve("異步夸楣，333333333333秒")
},3000)
})
return p
}
asyncFun1().then(function(a){
return asyncFun2(a)
}).then(function(a){
return asyncFun3(a)
})
Symbol
http://www.reibang.com/p/cad25435f5a4
Symbol 作為屬性名宾抓，遍歷對(duì)象的時(shí)候，該屬性不會(huì)出現(xiàn)在for...in豫喧、for...of循環(huán)中石洗，也不會(huì)被Object.keys()、Object.getOwnPropertyNames()紧显、JSON.stringify()返回讲衫。
但是，它也不是私有屬性孵班，有一個(gè)Object.getOwnPropertySymbols()方法涉兽，可以獲取指定對(duì)象的所有 Symbol 屬性名。該方法返回一個(gè)數(shù)組篙程，成員是當(dāng)前對(duì)象的所有用作屬性名的 Symbol 值枷畏。Proxy監(jiān)聽(tīng)對(duì)象操作
區(qū)分變量類型的方法
對(duì)于原型鏈的理解
深拷貝的方法：
共有：展開(kāi)運(yùn)算符、JSON轉(zhuǎn)字符串
Object：
Object.assign(obj1,obj2,obj3......)注意這里克隆的是引用房午，而該引用指向的內(nèi)存空間是沒(méi)有被拷貝的矿辽，
Array：[ ].concat(arr1,arr2,arr3......)
各種拷貝方法詳解
對(duì)象拷貝方法：
let obj={...a}是深拷貝，但是只拷貝指向郭厌。對(duì)于屬性指向的數(shù)組袋倔、對(duì)象，只拷貝指針折柠，其內(nèi)容不重新開(kāi)辟空間
let obj=Object.assign({},a)跟上面這種方式是一樣的
let obj=JSON.parse(JSON.stringify(a))這個(gè)倒是深拷貝了宾娜，缺點(diǎn)在于它在轉(zhuǎn)換時(shí)會(huì)丟失函數(shù)類型的屬性
自己寫工具方法，多層迭代扇售。這個(gè)應(yīng)該是最靠譜的了
import { cloneDeep } from 'loadsh'loadsh是一個(gè)使用工具庫(kù)前塔，deepClone僅僅是其中的一個(gè)方法，還有很多其他方法可用數(shù)組深拷貝
JSON承冰，[].concat华弓，slice等
數(shù)據(jù)類型
String（字符串類型）、Number（數(shù)字類型）困乒、Boolean（布爾類型）寂屏、Array(數(shù)組類型)、Date(日期類型)。
ES6新增的數(shù)據(jù)類型有：
基本類型：Symbol
復(fù)雜類型：Set迁霎、Map吱抚、WeakSet、WeakMap考廉、TypedArray
ES6中module能否使模塊按需加載
不能秘豹，因?yàn)閑s6中的module是靜態(tài)加載的，所以不能用于按需加載昌粤。靜態(tài)加載又叫編譯時(shí)加載既绕，與運(yùn)行時(shí)加載相反，那么react中import無(wú)法使用變量婚苹、import之前不能存在語(yǔ)句岸更，也就可以解釋為：因?yàn)閕mport是在編譯的時(shí)候加載的，這個(gè)時(shí)候 程序還沒(méi)運(yùn)行膊升，語(yǔ)句也就不會(huì)執(zhí)行，變量也不會(huì)被運(yùn)算和賦值谭企。
https://www.aisoutu.com/a/581405
async\await函數(shù)和generator函數(shù)相比廓译，有哪些優(yōu)點(diǎn)
http://www.reibang.com/p/a0e6b9755129
- generator函數(shù)需要調(diào)用next()指令來(lái)向下執(zhí)行，async不需要债查，async有內(nèi)置的執(zhí)行器非区，可以向運(yùn)行正常函數(shù)一樣運(yùn)行就可以了
- 像將于generator的*和yield，async/await的語(yǔ)義化更加明確盹廷。async是“異步的簡(jiǎn)寫征绸，await可以視為async wait。
- 適應(yīng)性更廣俄占，yield 命令后面只能是 Thunk 函數(shù)或 Promise 對(duì)象管怠，而 async 函數(shù)的 await 命令后面，可以跟 Promise 對(duì)象和原始類型的值（數(shù)值缸榄、字符串和布爾值渤弛，但這時(shí)等同于同步操作）。await是一個(gè)表達(dá)式甚带，它有返回值
- async返回一個(gè)promise對(duì)象她肯，可以調(diào)用catch和then
字符串模板、DOM模板鹰贵、模板字符串
es6交換兩個(gè)變量的值
let a=1
let b=2; //這個(gè)分號(hào)必須要有晴氨，雖然還不太明白原因，但是沒(méi)有就會(huì)報(bào)錯(cuò)
[a, b] = [b, a]
console.log(a,b)
模板字符串的好處
- 可以多行碉输，無(wú)需使用反斜杠
- 使用${}就能進(jìn)行拼接籽前，更加簡(jiǎn)潔優(yōu)美
arguments和rest參數(shù)的區(qū)別
- arguments對(duì)應(yīng)的是全部的參數(shù)，而rest只對(duì)應(yīng)那些沒(méi)有形參的參數(shù)。
- arguments不是真正的數(shù)組聚假，而rest卻是數(shù)組的實(shí)例块蚌，所以可以使用數(shù)組所有的方法。arguments如果想用數(shù)組的地方法膘格，還需要經(jīng)過(guò)一次轉(zhuǎn)換
- auguments有自己特有的屬性峭范，如callee
es5與es6繼承的區(qū)別是什么？
1.ES5的繼承實(shí)質(zhì)上是先創(chuàng)建子類的實(shí)例對(duì)象瘪贱，然后再將父類的方法添加到this上（Parent.apply(this)）.
2.ES6的繼承機(jī)制完全不同纱控，實(shí)質(zhì)上是先創(chuàng)建父類的實(shí)例對(duì)象this（所以必須先調(diào)用父類的super()方法），然后再用子類的構(gòu)造函數(shù)修改this菜秦。
3.ES5的繼承時(shí)通過(guò)原型或構(gòu)造函數(shù)機(jī)制來(lái)實(shí)現(xiàn)甜害。
4.ES6通過(guò)class關(guān)鍵字定義類，里面有構(gòu)造方法球昨，類之間通過(guò)extends關(guān)鍵字實(shí)現(xiàn)繼承尔店。
手寫4種繼承
- 原型繼承
Son.prototype=father;
function Father(){
this.firstName="李";
}
var father=new Father();
Father.prototype.lastName="名";
function Son(){
this.firstName="張";
this.sex="男";
}
// 子類原型繼承父類的實(shí)例
Son.prototype=father;
var son=new Son();
console.log(son.firstName,son.lastName,son.sex); //張 名 男
核心是子類原型繼承父類實(shí)例
firstName子類有，直接輸出張主慰。lastName自己沒(méi)有嚣州，去原型鏈上找到并輸出名
1.實(shí)例既是父類的實(shí)例也是子類的實(shí)例
2.父類新增原型方法或是原型屬性子類都可以訪問(wèn)到。
3.簡(jiǎn)單易實(shí)現(xiàn)共螺。
缺點(diǎn)：
1.無(wú)法實(shí)現(xiàn)多繼承（多繼承就是將多個(gè)對(duì)象和成員交給當(dāng)前對(duì)象）该肴；
2.創(chuàng)建子類實(shí)例時(shí)，無(wú)法向父類傳參.
- 構(gòu)造繼承
Father.call(this,name,age,sex)
function Father(name,age,sex){
this.name=name;
this.age=age;
this.sex=sex;
}
function Son(name,age,sex,gf){
// call方法第一個(gè)值寫this指向
Father.call(this,name,age,sex)
this.gf=gf;
}
var son=new Son("李飛",20,"男","張曉麗");
console.log(`${son.name}今年${son.age}歲藐不，性別${son.sex}匀哄，女朋友叫${son.gf}`);//李飛今年20歲，性別男雏蛮，女朋友叫張曉麗
核心是把子類用父類的構(gòu)造函數(shù)作為自己的構(gòu)造函數(shù)
Father.call(this,name,age,sex)是調(diào)用父類的構(gòu)造函數(shù)涎嚼，但是使用的是子類的this。通過(guò)父類構(gòu)造函數(shù)構(gòu)造完畢后底扳，子類的name铸抑、age、sex等屬性已經(jīng)具備衷模。再在此基礎(chǔ)上添加this.gf=gf;去修改父類沒(méi)有處理的屬性即可
特點(diǎn)：
1.只繼承了父類的構(gòu)造函數(shù)的屬性鹊汛，沒(méi)有繼承父類原型的屬性
2.可以實(shí)現(xiàn)多繼承（多次使用call）
3.可以向父類傳參
4.無(wú)法實(shí)現(xiàn)構(gòu)造函數(shù)的復(fù)用（每次都要從新調(diào)用）
5.每個(gè)新實(shí)例都有父類構(gòu)造函數(shù)的副本。
- 組合繼承
//就是構(gòu)造繼承加一句
Son.prototype=new Father();
特點(diǎn)：
1.可以繼承父類原型的屬性阱冶，可以傳參刁憋，可以復(fù)用。
2.每個(gè)新實(shí)例引入的構(gòu)造函數(shù)是私有的
3.調(diào)用了兩次父類構(gòu)造函數(shù)（耗內(nèi)存）
寄生繼承
寄生組合繼承
es6 class extend繼承
CSS3
新特性木蹬、div盒子居中至耻、清除浮動(dòng)、動(dòng)畫、canvas尘颓、畫三角形走触、定位的種類和區(qū)別、彈性布局
transform 變換：分為2d轉(zhuǎn)換和3d轉(zhuǎn)換
transition 過(guò)渡：控制變換的速度
translate 變換的一種：簡(jiǎn)單位移變化
keyframe{ from to} 也可以是百分比
漸變：線性漸變與徑向漸變
用純css3實(shí)現(xiàn)等邊三角形
等邊三角形
#triangle{
border-style: solid;
width: 0px;
border-width: 173px 100px 0px 100px;
border-color: aqua transparent transparent transparent;
}
30-60°直角三角形
#triangle{
border-style: solid;
width: 0px;
border-width: 173px 100px 0px 0px;
border-color: aqua transparent transparent transparent;
}
div盒子居中的方法
垂直水平都能居中：
-
方法一：margin:auto
關(guān)鍵就在于疤苹，子元素設(shè)置絕對(duì)定位互广，上下左右一定都要設(shè)置為0，然后把margin設(shè)置auto就好了
上下都取0卧土，可以實(shí)現(xiàn)垂直居中
左右都取0惫皱，實(shí)現(xiàn)水平居中
.chl_box {
width: 100px;
height: 100px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
background: #00FFFF;
}
+方法二：知道子元素寬高的情況下
子元素top:50%,margin:-50px(假設(shè)子元素高度為100)
- 方法三：父子元素寬高都知道的情況下
子元素margin:50px(假設(shè)父元素高-子元素高=100px) -
方法四：彈性布局居中：需要被操作的是父容器
1、flex-direction 用于定義彈性布局的主軸尤莺，默認(rèn)值就是橫向從左向右
2旅敷、 justify-content 定義主軸上面的對(duì)其方式，設(shè)為center颤霎。（此時(shí)默認(rèn)水平居中）
3媳谁、align-items 定義交叉軸上的對(duì)齊方式，設(shè)為center友酱。（此時(shí)默認(rèn)垂直居中）
.box {
width: 200px;
height: 200px;
border: 1px solid #000000;
display: flex;
justify-content: center;
align-items: center;
}
.chl_box {
width: 100px;
height: 100px;
background: #00FFFF;
}
-
方法五：translate居中 ie9一下瀏覽器不支持
首先我們讓子元素左側(cè)距離父元素左邊為父元素的50%韩脑，再用translate倒退子元素的50%
translate的作用是轉(zhuǎn)換。轉(zhuǎn)換的錨點(diǎn)是整個(gè)div的中心
.box {
width: 200px;
height: 200px;
border: 1px solid #000000;
position: relative;
}
.chl_box {
width: 100px;
height: 100px;
background: #00FFFF;
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
+方法六： table-cell居中
這種的話就是將父元素轉(zhuǎn)換成表格單元格顯示粹污，然后使用垂直居中實(shí)現(xiàn)
.box {
width: 200px;
height: 200px;
border: 1px solid #000000;
display: table-cell;
vertical-align: middle;
}
.chl_box {
width: 100px;
height: 100px;
background: #00FFFF;
margin: 0 auto;
}
-
方法七：不確定寬高居中
這種的原理其實(shí)相當(dāng)于在子元素周圍加了一圈邊框，致使子元素只能有這么寬和這么高首量，是沒(méi)有辦法去改變子元素寬高的壮吩。例如這里left的值一改變成5%，整個(gè)子元素的寬也會(huì)改變
子元素要設(shè)置為絕對(duì)定位
.box {
width: 200px;
height: 200px;
border: 1px solid #000000;
position: relative;
}
.chl_box {
background: #00FFFF;
position: absolute;
left: 25%;
right: 25%;
top: 25%;
bottom: 25%;
}
僅能水平居中
+方法一：子元素relative定位是加缘，margin:auto
