1.JavaScript深拷貝
function clone(obj) {
var copy;
// 處理3個簡單的類型, null 或者 undefined
if (obj === null || typeof obj !== 'object') {
return obj;
}
if (obj instanceof Date) {
copy = new Date();
copy.setTime(obj.getTime());
return copy;
}
if (obj instanceof Array) {
var copy = [];
for (var i = 0, len = obj.length; i < len; i++) {
copy[i] = clone(obj[i]);
}
return copy;
}
if (obj instanceof Object) {
var copy = {};
for (var attr in obj) {
if (obj.hasOwnProperty(attr)) {
copy[attr] = clone(obj[attr]);
}
}
return copy;
}
throw new Error("Unable to copy obj! Its type isn't supported.");
}
2.數(shù)組去重
Array.prototype.unique1 = function()
{
var n = []; //一個新的臨時數(shù)組
for(var i = 0; i < this.length; i++) //遍歷當前數(shù)組
{
//如果當前數(shù)組的第i已經(jīng)保存進了臨時數(shù)組认臊，那么跳過愧膀，
//否則把當前項push到臨時數(shù)組里面
if (n.indexOf(this[i]) == -1) n.push(this[i]);
}
return n;
}
Array.prototype.unique2 = function()
{
var n = {},r=[]; //n為hash表馆类，r為臨時數(shù)組
for(var i = 0; i < this.length; i++) //遍歷當前數(shù)組
{
if (!n[this[i]]) //如果hash表中沒有當前項
{
n[this[i]] = true; //存入hash表
r.push(this[i]); //把當前數(shù)組的當前項push到臨時數(shù)組里面
}
}
return r;
}
Array.prototype.unique3 = function()
{
var n = [this[0]]; //結(jié)果數(shù)組
for(var i = 1; i < this.length; i++) //從第二項開始遍歷
{
//如果當前數(shù)組的第i項在當前數(shù)組中第一次出現(xiàn)的位置不是i歼培，
//那么表示第i項是重復(fù)的亩码，忽略掉季率。否則存入結(jié)果數(shù)組
if (this.indexOf(this[i]) == i) n.push(this[i]);
}
return n;
}
其中第1種和第3種方法都用到了數(shù)組的indexOf方法。
- 此方法的目的是尋找存入?yún)?shù)在數(shù)組中第一次出現(xiàn)的位置描沟。很顯 然飒泻，js引擎在實現(xiàn)這個方法的時候會遍歷數(shù)組直到找到目標為止。所 以此函數(shù)會浪費掉很多時間吏廉。
而第2中方法用的是hash表泞遗。把已經(jīng)出現(xiàn)過的通過下標的形式存入一個object內(nèi)。下標的引用要比用indexOf搜索數(shù)組快的多席覆。
Array.prototype.unique4 = function()
{
this.sort();
var re=[this[0]];
for(var i = 1; i < this.length; i++)
{
if( this[i] !== re[re.length-1])
{
re.push(this[i]);
}
}
return re;
}
* 這個方法的思路是先把數(shù)組排序史辙，然后比較相鄰的兩個值。
* 排序的時候用的JS原生的sort方法佩伤，JS引擎內(nèi)部應(yīng)該是用的快速排序吧聊倔。
* 最終測試的結(jié)果是此方法運行時間平均是第二種方法的三倍左右，不過比第一種和第三種方法快了不少生巡。
3.Vue/React組件聲明周期
beforecreate : 舉個栗子：可以在這加個loading事件
created ：在這結(jié)束loading耙蔑，還做一些初始化，實現(xiàn)函數(shù)自執(zhí)行
mounted： 在這發(fā)起后端請求孤荣，拿回數(shù)據(jù)纵潦，配合路由鉤子做一些事情
beforeDestory： 你確認刪除XX嗎？ destoryed ：當前組件已被刪除垃环，清空相關(guān)內(nèi)容
當然邀层，還有更多，繼續(xù)探索中……
4.CSS垂直居中
水平垂直居中一
如果確定容器的寬高 寬500 高 300
利用 負margin
設(shè)置層的外邊距
div {
position: relative; /* 相對定位或絕對定位均可 */
width:500px;
height:300px;
top: 50%;
left: 50%;
margin: -150px 0 0 -250px; /* 外邊距為自身寬高的一半 */
}
水平垂直居中二
未知容器的寬高遂庄，利用 `transform` 屬性
div {
position: absolute; /* 相對定位或絕對定位均可 */
width:500px;
height:300px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: pink; /* 方便看效果 */
}
水平垂直居中三
利用 flex 布局
實際使用時應(yīng)考慮兼容性
.container {
display: flex;
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
}
.container div {
width: 100px;
height: 100px;
background-color: pink; /* 方便看效果 */
}
5.JavaScript 排序算法
冒泡排序
//自己寫
var bubble = function(array) {
for (var j = 0; j < array.length; j++) {
for (var i = 0; i < array.length; i++) {
if (array[i] > array[i + 1]) {
var temp = array[i];
array[i] = array[i + 1];
array[i + 1] = temp;
}
}
}
return array;
}
//網(wǎng)上示例
var bubbleSort=function(arr){
for(var i=0;i<arr.length-1;i++){
for(var j=i+1;j<arr.length;j++){
if(arr[i]>arr[j]){//如果前面的數(shù)據(jù)比后面的大就交換
var temp=arr[i];
arr[i]=arr[j];
arr[j]=temp;
}
}
}
return arr;
}
// console.log("The result is:"+bubbleSort(arr));
插入排序
var quickSort=function(arr){
//如果數(shù)組長度小于等于1無需判斷直接返回即可
if(arr.length<=1){
return arr;
}
var midIndex=Math.floor(arr.length/2);//取基準點
var midIndexVal=arr.splice(midIndex,1);//取基準點的值,splice(index,1)函數(shù)可以返回數(shù)組中被刪除的那個數(shù)arr[index+1]
var left=[];//存放比基準點小的數(shù)組
var right=[];//存放比基準點大的數(shù)組
//遍歷數(shù)組寥院，進行判斷分配
for(var i=0;i<arr.length;i++){
if(arr[i]<midIndexVal){
left.push(arr[i]);//比基準點小的放在左邊數(shù)組
}
else{
right.push(arr[i]);//比基準點大的放在右邊數(shù)組
}
}
//遞歸執(zhí)行以上操作,對左右兩個數(shù)組進行操作，直到數(shù)組長度為<=1涛目；
return quickSort(left).concat(midIndexVal,quickSort(right));
};
- v-if和v-show
關(guān)于條件渲染
- 所謂條件渲染秸谢，就是根據(jù)不同的條件凛澎，使用不同的模板來生成 html。 在 Vue.js 中估蹄，使用 v-if 和 v-show 指令來控制條件渲染塑煎。
區(qū)別
v-show 會在app初始化的時候編譯并且渲染，并且在之后一直存在臭蚁。
當切換v-show模塊時最铁，只是簡單的更改css。
v-if 當切換v-if模塊時垮兑，Vue.js 有一個局部編譯/卸載過程冷尉，因為 v-if 之中的模板也可能包括
數(shù)據(jù)綁定或子組件。v-if 是真實的條件渲染系枪，因為它會確保條件塊在切換當中合適地銷毀與重建條件
塊內(nèi)的事件監(jiān)聽器和子組件雀哨。 v-if 是惰性的，如果為false私爷，則什么也不錯-不編譯雾棺，不渲染。
當?shù)谝淮螚l件為真時衬浑，才開始編譯捌浩。
建議
v-show的切換消耗比較低，但是不會重新渲染子組件嚎卫，所以最好用于靜態(tài)的內(nèi)容或者不需要重新構(gòu)建結(jié)構(gòu)的組件嘉栓。
而 v-if 比較適合不太頻繁的切換狀態(tài)的組件宏榕。所以項目設(shè)計的時候拓诸，不要對復(fù)雜的業(yè)務(wù)設(shè)計模塊太頻繁的視圖切換。盡量將靜態(tài)內(nèi)容和動態(tài)內(nèi)容分離到不同的模塊中麻昼。
在切換 v-if 塊時奠支，Vue.js 有一個局部編譯/卸載過程，因為 v-if 之中的模板也可能包括數(shù)據(jù)綁定或子組件抚芦。
v-if 是真實的條件渲染倍谜，因為它會確保條件塊在切換當中合適地銷毀與重建條件塊內(nèi)的事件監(jiān)聽器和子組件。
v-if 也是惰性的：如果在初始渲染時條件為假叉抡，則什么也不做——在條件第一次變?yōu)檎鏁r才開始局部編譯（編譯會被緩存起來）尔崔。
相比之下，v-show 簡單得多——元素始終被編譯并保留褥民，只是簡單地基于 CSS 切換季春。
一般來說，v-if 有更高的切換消耗而 v-show 有更高的初始渲染消耗消返。因此载弄，如果需要頻繁切換 v-show 較好耘拇，如果在運行時條件不大可能改變 v-if 較好
閉包
閉包就是函數(shù)能夠記住并訪問它的詞法作用域，即使當這個函數(shù)在它的詞法作用域之外執(zhí)行時宇攻。
一個頁面從輸入 URL 到頁面加載顯示完成惫叛，這個過程中都發(fā)生了什么？
1.瀏覽器會開啟一個新的線程來處理這個請求逞刷，對 URL 分析判斷如果是 http 協(xié)議就按照 Web 方式來處理;
2.通過 DNS 解析獲取網(wǎng)址的IP地址嘉涌，設(shè)置 UA 等信息發(fā)出第二個GET請求;
3.進行 HTTP 協(xié)議會話，客戶端發(fā)送報頭(請求報頭);
4.進入到 web 服務(wù)器上的 Web Server亲桥，如 Apache洛心、Tomcat、Node.JS 等服務(wù)器;
5.進入部署好的后端應(yīng)用题篷，如 PHP词身、Java、JavaScript番枚、Python 等法严，找到對應(yīng)的請求處理;
6.處理結(jié)束回饋報頭，和資源葫笼，如果是瀏覽器訪問過的資源深啤，瀏覽器緩存上有對應(yīng)的，會與服務(wù)器最后修改時間對比路星，一致則返回304;
7.如果 html 沒緩存溯街，則瀏覽器開始下載 html 文檔(響應(yīng)報頭，狀態(tài)碼200)洋丐，同時使用緩存;
8.html 一邊下載一邊解析 html呈昔，根據(jù)標簽建立文檔樹 DOM
9.其中根據(jù)標記下載所需css、js友绝、圖片文件堤尾，其中 css 是異步下載，同步執(zhí)行(By default CSS is treated as a render blocking resource, html 也是)并會阻塞式的建立 CSSOM, 然后這倆一起會 render 成完整的 render 樹（最后我們看到的樣子）迁客，然后再因為假如把 css 放到底部,可能頁面會出現(xiàn)白屏(阻塞 render)郭宝，或者布局混亂樣式很丑直到CSS加載完成閃跳(rerender)的感覺。所以寫到頂部確保用戶至少能早一點看到界面掷漱。
10.js 在現(xiàn)代瀏覽器里面是異步下載粘室，同步執(zhí)行的，最好放到底部卜范。因為對于在 js 后面的內(nèi)容（html）衔统，html 的逐步呈現(xiàn)會被阻塞。
11.當 js 運行完成，頁面加載完成缰冤。
