為了使瀏覽器改變路由的同時不會向後端發出請求，支援以下兩種模式：
history 利用html5 history 中新增的pushstate()和popstate()對歷史記錄進行修改
區別：
接收函式作為引數的函式或者是返回值為函式的稱為高階函式。 js中常用的高階函式：
array.prototype.
map=
function
(callback)
return newarray;
}
array.prototype.
reduce
=function
(callback, initialvalue)
return result;
}
array.prototype.
filter
=function
(callback)
return newarr;
}
// 解構物件
var obj =
;let
= obj;
// 解構陣列
let point =[10
,25,-
34];let
[x, y, z]
= point;
var arr =
newset()
;while
(arr.size <10)
console.
log(array.
from
(arr)
);
// 實現set集合
class
sethas
(item)
add(item)
else
}remove
(item)
else
}clear()
}let
set=
newset()
;set
.add(1
).add(2)
;set
.add(3
);console.
log(
set)
;
替代方案：
// reduce + concat
// 只拉伸1層
var arr =[1
,2,3
,[4,
5,6,
[7,8
,9]]
];arr = arr.
reduce
((prev, curr)
=>,[
]);console.
log(arr)
;// [ 1, 2, 3, 4, 5, 6, [ 7, 8, 9 ] ]
// 全部拉平
function
flattendeep
(arr)
array.prototype.
flat
=function
(depth)
else
}else})
;};flatmap
(this);
return result;
}
function
addclickevent
(el, cb)
}else
}
align-content屬性是將flex子項作為乙個整體起作用，它的基本單位是子項構成的行，只在兩種情況下有效果：
子項單行，flex容器高度固定且設定了flex-wrap:wrap
proxy在目標物件的外層搭建了一層攔截，外界對目標物件的某些操作，必須通過這層攔截。
var proxy =
newproxy
(target, handler)
;// target表示所要攔截的目標物件，handler用來定製攔截行為
**操作handler所能**的範圍：
let target =
;let handler =};
let proxy =
newproxy
(target, handler)
;proxy.name // test
// handler為空時，proxy直接指向target
let proxy1 =
newproxy
(target,);
proxy1.name // zhangsan
reflect主要是為了優化object的一些操作方法以及更合理的返回object操作返回的結果。對於一些命令式的object行為，reflect物件可以將其變為函式式的行為。
混入minxin提供了一種靈活的方式，來分發vue元件中的可復用功能（更高效的實現元件內容的復用）。混入物件中可以包含任意的元件選項。
選項合併
元件和混入物件有同名選項時，會進行合併。
與vuex的區別：
extend方法：返回乙個建構函式，是vue的乙個子類。
增強型表單：有多個新的表單input輸入型別，提供了更好的輸入控制和驗證。
canvas繪圖：canvas只是乙個圖形容器，需要使用指令碼來繪製圖形。
"canvas"
width
="200"
height
="100"
style
="border
: 1px solid #000
">
// 繪製圖形
var canvas = document.
getelementbyid
('canvas');
var ctx = canvas.
getcontext
('2d');
ctx.fillstyle =
'#f00'
;ctx.
fillrect(0
,0,150,75
);// fillrect(x, y, width, height)
// 繪製路徑 moveto-lineto-stroke
ctx.
moveto(0
,0);
// 移到線條開始座標
ctx.
lineto
(200
,100);
// 線條結束座標
ctx.
stroke()
;// 繪製線條
// 繪製文字
ctx.font =
'30px arial'
;ctx.
fiitext
('hi',0
,0)// text,x,y,maxwidth
// 漸變
var grd = ctx.
createlineargradient(0
,0,200,0
);// x,y,x1,y1
grd.
addcolorstop(0
,'red');
grd.
addcolorstop(1
,'white');
ctx.fillstyle = grd;
ctx.
fillrect(0
,0,150,80
);
websocket：在單個tcp連線上進行全雙工通訊的協議。
滾動載入
// 進入可視範圍
// 距離頁面頂部的距離 < 可視區域的高度 + 頁面滾動的距離
img.offsettop < document.documentelement.clientheight + document.documentelement.scrolltop
// getboundingclientrect
img.
getboundingclientrect()
.top < document.documentelement.clientheight
intersectionratio：目標元素的可見比例，即 intersectionrect 佔 boundingclientrect 的比例，完全可見時為 1 ，完全不可見時小於等於 0。
function
gettag
(tag)
var observer =
newintersectionobserver
((changes)
=>})
;});
gettag
('img').
foreach
((item)
=>
);
秋招前端面經總結 4
相同點 都可以對css樣式進行外部引用。不同點 rel stylesheet type text css href test.css text css import url test.css style 規定了元素以何種方式展示。該屬性不支援繼承。block 該元素顯示為塊級元素 inline bl...
秋招前端面經總結 3 計算機網路相關
http 超文字傳輸協議，是建立在tcp之上的一種無狀態協議。大致工作流程為 http請求 由請求行 請求頭 空行 請求體組成。常用的請求方法 post 向指定資源提交資料進行處理，可能會導致新的資源建立或已有資源的修改 head 類似於get請求，只不過返回的響應中沒有響應體，用於獲取響應頭 pu...
2020秋招面經總結
本碩均為機電專業相關，比賽和專案也是軟硬體結合，個人軟開背景中學已經學過pascal和資料結構與演算法，大學本科除了c語言和微機原理基本沒學過cs相關課程，研究生才把作業系統 組原以及計算機網路補上，順便補了個c 抽空玩linux，秋招前3個月開始刷題 牛客300,力扣350 第一目標崗位 嵌入式軟...