建站
咨詢
售后
建站咨詢
新聞中心
這篇文章給大家分享的是有關(guān)如何使用JS基于對象實現(xiàn)合并功能的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。
創(chuàng)新互聯(lián)建站專注于企業(yè)全網(wǎng)整合營銷推廣、網(wǎng)站重做改版、黃埔網(wǎng)站定制設(shè)計、自適應(yīng)品牌網(wǎng)站建設(shè)、H5場景定制、商城網(wǎng)站建設(shè)、集團(tuán)公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計等建站業(yè)務(wù)，價格優(yōu)惠性價比高，為黃埔等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。
淺拷貝的方式實現(xiàn)對象合并
之前的一篇博文 有專門介紹對象和數(shù)組的深淺拷貝，不了解的童鞋請移步。先看實現(xiàn)再解釋
function extend() { //extend 淺拷貝實現(xiàn)
var name,options,copy,
length = arguments.length,
i = 1,
target = arguments[0] || {}; //取目標(biāo)對象
if(['object','function'].indexOf(typeof target) < 0){
target = {};
}
for(;i思路如下：
1、默認(rèn)取第一個參數(shù)為目標(biāo)對象，若第一個參數(shù)非對象數(shù)據(jù)類型，則賦值為空對象
2、遍歷剩下的參數(shù)（源對象），將源對象的屬性復(fù)制到目標(biāo)對象上 。
3、返回目標(biāo)對象為合并的結(jié)果
在第二步中沒有對源對象的屬性值進(jìn)行判斷，所有的全部使用 ‘=' 賦值，所以當(dāng)源對象的屬性值為對象屬性時，復(fù)制的只是引用值，即為淺拷貝的方式，在測試結(jié)果中可以看出 test 和 test2 的 b 屬性的屬性值，使用的是同一個對象，會互相影響。知道了這些之后，如何實現(xiàn)合并時的深拷貝也應(yīng)該有思路了。
深度拷貝的方式實現(xiàn)對象合并
需要在復(fù)制源對象屬性值時，判斷值的類型，如果是對象數(shù)據(jù)類型，則遞歸調(diào)用extend函數(shù)。則可以實習(xí)深拷貝方式的對象合并，實現(xiàn)如下：
function extend() { //extend 深拷貝實現(xiàn)
var name,options,src,copy,
deep = false, //是否深拷貝 默認(rèn)為false
length = arguments.length,
i = 1,
target = arguments[0] || {};
//如果第一個參數(shù)為boolean類型,賦值給deep
if(typeof target == 'boolean'){
deep = arguments[0];
target = arguments[i] || {}; //目標(biāo)對象順延
i++;
}
//如果target不是對象數(shù)據(jù)類型的話 target賦值為 {}
if(['object','function'].indexOf(typeof target) < 0){
target = {};
}
for(;i1、參數(shù)判斷，若第一個參數(shù)為布爾類型，則取為控制是否深度拷貝的參數(shù)deep , deep 默認(rèn)為false；同時 目標(biāo)元素會是第二個參數(shù)
2、復(fù)制屬性值時，要判斷deep參數(shù)和 屬性值的類型 ； 若 deep為true 且 屬性值為對象類型 則遞歸調(diào)用 extend函數(shù) ， 否則直接賦值
3、需要區(qū)分 數(shù)組 和 ‘對象' ，來給 目標(biāo)對象的屬性賦值不同的初始值。如果都是 {} 的話，數(shù)組類型的屬性值復(fù)制到目標(biāo)元素上會變?yōu)?{'0':xx , '1' : xx ...}
感謝各位的閱讀！關(guān)于“如何使用JS基于對象實現(xiàn)合并功能”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
網(wǎng)站題目：如何使用JS基于對象實現(xiàn)合并功能
鏈接分享：http://fisionsoft.com.cn/article/pccspd.html
