資訊專(zhuān)欄INFORMATION COLUMN
摘要：類(lèi)似的情況還有，方法和方法等。今天我說(shuō)一個(gè)最簡(jiǎn)單。代碼如下和也可以實(shí)現(xiàn)，但是生成的是一個(gè)整數(shù)，如下分割線其它類(lèi)型數(shù)據(jù)轉(zhuǎn)布爾數(shù)據(jù)下面的轉(zhuǎn)換，大家一看就明白了，不多說(shuō)。緩存變量循環(huán)緩存分割線第一段就是每一次循環(huán)的時(shí)候，都要查詢(xún)一次。
1.前言
從大學(xué)到現(xiàn)在，接觸前端已經(jīng)有幾年了，感想方面，就是對(duì)于程序員而言，想要提高自己的技術(shù)水平和編寫(xiě)易于閱讀和維護(hù)的代碼，我覺(jué)得不能每天都是平庸的寫(xiě)代碼，更要去推敲，去摸索和優(yōu)化代碼，總結(jié)當(dāng)中的技巧，積極聽(tīng)取別人的建議，這樣自己的技術(shù)水平會(huì)提高的更快。那么今天，我在這里就分享一下關(guān)于javascript方面的寫(xiě)作的實(shí)用技巧和建議，這些技巧和建議是我平常在開(kāi)發(fā)項(xiàng)目上會(huì)用到的，希望能讓大家學(xué)到知識(shí)，更希望能起到一個(gè)交流意見(jiàn)的作用，也就是說(shuō)大家有什么好的技巧或者建議，歡迎分享，或者覺(jué)得我的想法存在什么問(wèn)題，歡迎指出!
2.更短的數(shù)組去重寫(xiě)法[...new Set([2,"12",2,12,1,2,1,6,12,13,6])] //[2, "12", 12, 1, 6, 13] //es6的新特性3.對(duì)象深淺拷貝
關(guān)于對(duì)象的深淺拷貝，我個(gè)人見(jiàn)解就是有一下幾點(diǎn)：
1.深拷貝和淺拷貝只針對(duì)像Object, Array這樣的引用類(lèi)型數(shù)據(jù)。
2.淺拷貝是對(duì)對(duì)象引用地址進(jìn)行拷貝，并沒(méi)有開(kāi)辟新的棧，也就是拷貝后的結(jié)果是兩個(gè)對(duì)象指向同一個(gè)引用地址，修改其中一個(gè)對(duì)象的屬性，則另一個(gè)對(duì)象的屬性也會(huì)改變。
3.深拷貝則是開(kāi)啟一個(gè)新的棧，兩個(gè)對(duì)象對(duì)應(yīng)兩個(gè)不同的引用地址，修改一個(gè)對(duì)象的屬性，不會(huì)改變另一個(gè)對(duì)象的屬性。
淺拷貝var myInfo={name:"守候",sex:"男"};
var newInfo=myInfo;
newInfo.sex="女";
console.log(myInfo) //{name: "守候", sex: "女"}
假-深拷貝
假-深拷貝這個(gè)是自己隨性命名的，大家看看就好，別當(dāng)真！
var myInfo={name:"守候",sex:"男"};
var newInfo=Object.assign({},myInfo)
newInfo.sex="女";
console.log(myInfo) //{name: "守候", sex: "男"}
console.log(newInfo) //{name: "守候", sex: "女"}
真-深拷貝
真-深拷貝這個(gè)是自己隨性命名的，大家看看就好，別當(dāng)真！
看著深淺拷貝，區(qū)別寫(xiě)法很簡(jiǎn)單，但是那個(gè)上面的深拷貝寫(xiě)法是有問(wèn)題的?？聪旅姘咐?/p>
var arr=[{a:1,b:2},{a:3,b:4}]
var newArr=Object.assign([],arr)
//截?cái)鄶?shù)組
newArr.length=1
console.log(newArr)//[{a:1,b:2}]
console.log(arr)//[{a:1,b:2},{a:3,b:4}]
//操作newArr，這里看著對(duì)arr沒(méi)影響，實(shí)際上已經(jīng)挖了一個(gè)坑，下面就跳進(jìn)去
newArr[0].a=123
//修改newArr[0]這個(gè)對(duì)象，也是影響了arr[0]這個(gè)對(duì)象
console.log(arr[0])//{a: 123, b: 2}
為什么會(huì)這樣呢，因?yàn)镺bject.assign并不是深拷貝，是披著深拷貝外衣的淺拷貝。最多也是Object.assign會(huì)課拷貝第一層的值，對(duì)于第一層的值都是深拷貝，而到第二層的時(shí)候就是 復(fù)制引用。類(lèi)似的情況還有，slice方法和concat方法等。
要解決這個(gè)問(wèn)題，就得自己封裝方法！如下
//利用遞歸來(lái)實(shí)現(xiàn)深拷貝，如果對(duì)象屬性的值是引用類(lèi)型（Array,Object），那么對(duì)該屬性進(jìn)行深拷貝，直到遍歷到屬性的值是基本類(lèi)型為止。
function deepClone(obj){
if(!obj&& typeof obj!== "object"){
return;
}
var newObj= obj.constructor === Array ? [] : {};
for(var key in obj){
if(obj[key]){
if(obj[key] && typeof obj[key] === "object"){
newObj[key] = obj[key].constructor === Array ? [] : {};
//遞歸
newObj[key] = deepClone(obj[key]);
}else{
newObj[key] = obj[key];
}
}
}
return newObj;
}
var arr=[{a:1,b:2},{a:3,b:4}]
var newArr=deepClone(arr)
console.log(arr[0])//{a:1,b:2}
newArr[0].a=123
console.log(arr[0])//{a:1,b:2}
還有一個(gè)方法就是簡(jiǎn)單粗暴法，我現(xiàn)在在用的一個(gè)方法！原理很簡(jiǎn)單，就是先把對(duì)象轉(zhuǎn)成字符串，再把字符串轉(zhuǎn)成對(duì)象！也能實(shí)現(xiàn)同樣效果
var newArr2=JSON.parse(JSON.stringify(arr));
console.log(arr[0])//{a:1,b:2}
newArr2[0].a=123
console.log(arr[0])//{a:1,b:2}
上面所說(shuō)的淺拷貝，真假深拷貝（自己隨性命名的），這幾種情況，在開(kāi)發(fā)上都有可能要用到，至于要使用哪一種方式，視情況而定！
4.使用事件委托一個(gè)簡(jiǎn)單的需求，比如想給ul下面的li加上點(diǎn)擊事件，點(diǎn)擊哪個(gè)li，就顯示那個(gè)li的innerHTML。這個(gè)貌似很簡(jiǎn)單！代碼如下！
很簡(jiǎn)單，這樣就實(shí)現(xiàn)了，實(shí)際上這里有坑，也待優(yōu)化！
1.for循環(huán)，循環(huán)的是li，10個(gè)li就循環(huán)10次，綁定10次事件，100個(gè)就循環(huán)了100次，綁定100次事件！
2.如果li不是本來(lái)就在頁(yè)面上的，是未來(lái)元素，是頁(yè)面加載了，再通過(guò)js動(dòng)態(tài)加載進(jìn)來(lái)了，上面的寫(xiě)法是無(wú)效的，點(diǎn)擊li是沒(méi)有反應(yīng)的！
所以就者需要用事件委托（即使不考慮上面的第二種情況，也是建議使用事件委托）！代碼如下
這樣寫(xiě)，即使是動(dòng)態(tài)添加進(jìn)來(lái)的li點(diǎn)擊也有反應(yīng)，還有一個(gè)就是ul只有一個(gè)，事件綁定在ul上，無(wú)論li多少個(gè)，都是添加一次事件！但是也是可能會(huì)有問(wèn)題，如果li下面還有子元素，那么點(diǎn)擊的時(shí)候，target可能不是li，而是鼠標(biāo)點(diǎn)擊那個(gè)位置的最底層元素！如下圖，如果鼠標(biāo)點(diǎn)擊白色區(qū)域，那個(gè)target就是body元素,鼠標(biāo)點(diǎn)擊綠色區(qū)域target就是div元素，鼠標(biāo)點(diǎn)擊藍(lán)色區(qū)域target就是ul，點(diǎn)擊橙色就是li。
5.使用對(duì)象作為函數(shù)參數(shù)大家試想下這樣一個(gè)函數(shù)--函數(shù)接受幾個(gè)參數(shù)，但是這幾個(gè)參數(shù)都不是必填的，函數(shù)該怎么處理？是不是下面這樣
function personInfo(name,phone,card){
...
}
//以上函數(shù)，可以任意傳參數(shù)。比如我想傳card等于1472586326。這下是不是這樣寫(xiě)
personInfo("","","1472586326")
有沒(méi)有覺(jué)得上面寫(xiě)法奇怪，不太優(yōu)雅？下面這里看著舒服一點(diǎn)！
function personInfo(opt){
...
}
personInfo({card:"1472586326"})
再想一下，如果一個(gè)函數(shù)，參數(shù)很多，怎么處理？
function test(arg1,arg2,arg3,arg4,arg5,arg6,arg7){
...
}
密集恐懼癥復(fù)發(fā)沒(méi)有復(fù)發(fā)？下面這樣看著會(huì)舒服一點(diǎn)！
function personInfo(opt){
...
}
最后再想一下，如果需求改了，操作函數(shù)也要改！函數(shù)也要增加一個(gè)參數(shù)。
//原來(lái)函數(shù)
function personInfo(name,phone,card){
...
}
//修改后
function personInfo(name,age,phone,card){
...
}
這樣就是參數(shù)修改一次，函數(shù)的參數(shù)就要修改一次！如果是用對(duì)象，就不會(huì)出現(xiàn)這樣問(wèn)題！
//修改前后都是這樣，變得是函數(shù)的操作內(nèi)容和調(diào)用時(shí)候的傳參！
function personInfo(opt){
...
}
看了上面的幾個(gè)栗子，總結(jié)來(lái)說(shuō)，就是當(dāng)函數(shù)的參數(shù)不固定的時(shí)候，參數(shù)多(三個(gè)或者三個(gè)以上)的時(shí)候，建議用一個(gè)對(duì)象記錄參數(shù)，這樣會(huì)比較方便，也為以后如果參數(shù)要改留了條后路！
6.使用push和apply合并數(shù)組合并數(shù)組這個(gè)已經(jīng)是老生常談的話題了，方法也是多種多樣！
concatvar arr1=[1,2,3,4,5],arr2=[6,7,8,9,10]; arr1=arr1.concat(arr2) console.log(arr1)//[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
concat會(huì)一個(gè)全新的數(shù)組，表示arr1和arr2兩個(gè)數(shù)組的組合，并讓arr1和arr2不變。簡(jiǎn)單吧？
但如果arr1和arr2的長(zhǎng)度都很長(zhǎng)，那就產(chǎn)生了一個(gè)很長(zhǎng)很長(zhǎng)的數(shù)組，內(nèi)存又被占用了那么多。但是數(shù)組長(zhǎng)度沒(méi)限制！
