記錄前端路上每天的成長。（持續更新）

陣列去重，在網上可以找到好多方法，最少得有11種方法，而面試的時候，主考官最想看見的回答還是關於使用hasownproperty的去重方法。

具體的去重**如下：

function
unique
(arr)
;return arr.
filter
(function
(item, index, arr))}
var arr =[1
,1,'true'
,'true'
,true
,true,15
,15,false
,false
, undefined, undefined,
null
,null
,nan
,nan
,'nan',0
,0,'a'
,'a',,
];console.
log(
unique
(arr)
);

其中，有乙個讓人比較困惑的點，就是關於(typeof item + item)，經過自己測試之後發現，它會先進行typeof item這個運算，然後typeof item的值再加上item。

就好比如下**：

var item =1;
console.
log(
typeof item + item)
;//number1
var item =
false
;    console.
log(
typeof item + item)
;//booleanfalse
var item =
'false'
;    console.
log(
typeof item + item)
;//stringfalse
var item =
null
;    console.
log(
typeof item + item)
;//objectnull
var item =
;    console.
log(
typeof item + item)
;//object[object object]
var item =
;    console.
log(
typeof item + item)
;//object

這前幾個例子不難理解，難理解的是後面兩個，為什麼當item是空陣列或者空物件的時候，返回的結果好像不太一樣。

其實這個也比較好解釋，這兩個例子還是遵循之前的規則，先進行typeof item所以返回的是object。然後在進行+ item這個操作。

而這個+號，會進行隱式轉換，它會向字串這個方向轉換，而 - *這個符號會向數字這個方向轉換。所以空陣列轉化成字串是』 ',空物件轉換成字串是[object object]。

就先從最簡單的ajax開始吧

//open中的第三個引數決定是否非同步傳送請求。true表示非同步。

xhr.

send

(null);

//如果傳送的是post請求，則在send裡面傳送資料，還要再加一行**

這裡面還有乙個要注意的點就是xhr的readystate屬性它有五個狀態，分別是：

0：未初始化。尚未呼叫open（）方法。

1：啟動。已經呼叫open（）方法，但尚未呼叫send（）方法。

2：傳送。已經呼叫send（）方法，但尚未收到響應。

3：接收。已經接收到部分響應資料。

4：完成。已經接收到全部的響應資料，而且已經可以在客戶端使用。

實現防抖和節流

防抖防抖的定義：防抖是指在一定的時間內再次觸發此事件,會清空上次的事件重新開始,如果制定的時間內沒有再次觸發,那麼這個事件才會執行。

例如: input輸入資訊,不可能每次按下都發起乙個ajax請求,可以等一段時間內不輸入了之後在發起請求。

**如下：

function
debounce
(fn, delay)
timer =
settimeout
(fn, delay);}
}

然後我們在給事件繫結函式的時候就可以使用這個函式，當然這裡只是核心思想，沒有考慮作用域等問題。

節流定義：節流是指在一定的時間同一事件只會觸發一次,只有超過了這個時間才會再次出發

例如: 驗證碼60秒內不可以再次觸發(實際開發肯定是使用禁止,但是原理和驗證碼一樣)

**如下：

function
(fn, delay)
,delay);}
}

淺拷貝

淺拷貝與深拷貝的主要區別在於淺拷貝在拷貝引用型別的值的時候，只會複製它的位址，也就是說拷貝之後兩者共用乙個位址，只要其中乙個引用型別的值傳送變化的時候，另乙個也會受到影響，而這往往不是我們希望看到的。具體**如下（此處只展示一種拷貝方法）：

let obj =
,            d:
/^\d+$/};
let obj2 =
;for
(let key in obj)
console.
log(obj, obj2)
;

控制台輸出的結果如下：

如果當我們改變obj2裡面的引用值的資料時，obj也會跟著變化，如下圖：

我們改變了obj2.c.x的值，結果obj裡面對應的值也發生了改變。

當然了，要想避免這個情況發生，那我們可以使用深拷貝。

深拷貝深拷貝相對於淺拷貝來說要複雜一些，但是也有一種比較簡單的方法，就是使用json。**如下:

let obj =
,            d:
/^\d+$/};
let obj2 =
json
.parse
(json
.stringify
(obj)
);

哈哈哈，是的，這種方法只需要一行**，但是它也有自己的限制，那就是對函式，symbol， undefined，正則， data物件等這些不能準確拷貝，但是平時開發中很少出現這種情況，所以開發中我們可以使用這種方法，但是這種方法不是面試官想聽到的，所以我們還有一種比較好的方法：

function
deepclone
(obj)
if(obj instanceof
date
)//不直接建立空物件目的，轉殖的結果和之前保持相同的所屬類
let newobj =
newobj.constructor
;for
(let key in obj)
}return newobj;
}let obj2 =
deepclone
(obj)
;        console.
log(obj, obj2)
;

這個**只是深拷貝的部分**，因為它還沒有考慮function這個特殊情況，這個大家可以自己下去實現，也就是乙個if判斷語句，最後總結一下，js的深拷貝需要考慮一下四個點：

1、json 轉殖不支援函式、引用、undefined、date、regexp 等

2、遞迴轉殖要考慮環、爆棧

3、要考慮 date、regexp、function 等特殊物件的轉殖方式

4、要不要轉殖proto，如果要轉殖，就非常浪費記憶體；如果不轉殖，就不是深轉殖。

真正意義上的深轉殖實現起來弊大於利。

之前學期末了，在複習考試，完了又再學vue寫專案，一直沒有更新，今天突然想起來了，就更新乙個小知識，但是大多數人不知道東西。

我們都知道，js中null是基本型別，可是為什麼typeof null的時候返回的結果是object吶？這其實跟js的底層邏輯有關，在js底層，會把每種型別用二進位制數表示，而二進位制數前三位為0的話就是object，但是null的二進位制數全為0，所以typeof null也為object，這算是乙個小bug吧。哈哈哈

記錄前端路上每天的成長。（持續更新）

記錄一枚蒟蒻的成長（持續更新）

前端實用的東西持續更新

CSS相關的複習記錄持續更新

記錄前端路上每天的成長。（持續更新）

記錄一枚蒟蒻的成長（持續更新）

前端實用的東西 持續更新

CSS相關的複習記錄 持續更新

相關推薦

前端實用的東西持續更新

CSS相關的複習記錄持續更新