建站
咨詢
售后
建站咨詢
新聞中心
這篇文章給大家分享的是有關(guān)JavaScript中數(shù)組和對(duì)象復(fù)制的示例分析的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。
超過10多年行業(yè)經(jīng)驗(yàn)，技術(shù)領(lǐng)先，服務(wù)至上的經(jīng)營(yíng)模式，全靠網(wǎng)絡(luò)和口碑獲得客戶，為自己降低成本，也就是為客戶降低成本。到目前業(yè)務(wù)范圍包括了：成都做網(wǎng)站、網(wǎng)站建設(shè)，成都網(wǎng)站推廣，成都網(wǎng)站優(yōu)化，整體網(wǎng)絡(luò)托管，成都小程序開發(fā)，微信開發(fā)，手機(jī)APP定制開發(fā)，同時(shí)也可以讓客戶的網(wǎng)站和網(wǎng)絡(luò)營(yíng)銷和我們一樣獲得訂單和生意！
一、數(shù)據(jù)類型
從狹義上來說，JS把所有的數(shù)據(jù)分成兩大類型：基本類型和引用類型，其中基本類型包括Undefined、Null、Boolean、Number和String，引用類型為Object，常用的Array、Date、RegExp、Function等都屬于Object類型。
基本型數(shù)據(jù)和引用型數(shù)據(jù)的區(qū)別之一就是，在復(fù)制變量時(shí)，基本型數(shù)據(jù)復(fù)制獨(dú)立的一份新的拷貝，而引用型數(shù)據(jù)復(fù)制的是原變量的引用。下面是一個(gè)例子：
// 基本類型數(shù)據(jù)的復(fù)制 var a = 10; var b = a; // b = 10 a = 20; // a = 20, b = 10 // 引用類型數(shù)據(jù)的復(fù)制 var m = [1, 2]; var n = m; m[0] = 10; console.log(n[0]); // 10
如果我想復(fù)制引用類型本身的值而非引用，顯然不能采用上面的方式。
二、數(shù)組的淺復(fù)制
淺復(fù)制是指對(duì)象（數(shù)組）被復(fù)制時(shí)，其引用字段的值不會(huì)被復(fù)制，而是復(fù)制了對(duì)應(yīng)字段的引用。如：
var src = [
'alpha',
['bravo', 'chalie']
];
var dest = [];
for (var i = 0; i < src.length; i++) {
dest[i] = src[i];
}
//此時(shí)，如果改變src中的引用字段，dest中相應(yīng)的字段也會(huì)被改變
src[1].push('delta');
console.log(dest[1]); // ['bravo', 'chalie', 'delta']淺復(fù)制一般用于一維數(shù)組，即數(shù)組中不存在引用類型的情況。常用的淺復(fù)制方法有：
concat方法
var src = ['alpha', 'bravo'], dest = []; dest = dest.concat(src);
concat方法更多地被用在數(shù)組合并中，比如：
var a = ['alpha', 'bravo'], b = ['chalie', 'delta'], combine; combine = a.concat(b);
特別要指出，concat用于數(shù)組合并時(shí)，是將兩個(gè)（或多個(gè)）數(shù)組中的所有元素復(fù)制到新的對(duì)象，對(duì)于大型數(shù)組來說，開銷比較大。更好的辦法是把后一個(gè)數(shù)組的元素復(fù)制到前一個(gè)數(shù)組中：
var src = ['alpha', 'bravo'], dest = ['chalie', 'delta']; Array.prototype.push.apply(src, dest);
slice方法
slice方法可以從已有數(shù)組中返回選定的元素，返回的是一個(gè)新數(shù)組。
var src = ['alpha', 'bravo'], var dest = src.slice(0);
三、對(duì)象的淺復(fù)制
對(duì)象的淺復(fù)制可以用for-in遍歷來實(shí)現(xiàn)，在es6中提供了更為方便的Object.assign()方法。
var src = {name: 'fox', age: 20},
dest = null;
dest = Object.assign({}, src);也可以使用jQuery中的$.extend，underscore中的_.extend等方法來實(shí)現(xiàn)對(duì)象的復(fù)制。
四、深度復(fù)制
淺復(fù)制的應(yīng)用場(chǎng)景有限，更多情況下，我們希望能夠?qū)?duì)象復(fù)制出一個(gè)完整的副本，這就需要用到typeof或instanof操作符來對(duì)各個(gè)字段的類型進(jìn)行判斷。如果某字段是基本類型的，可以直接復(fù)制。如果某字段是引用類型的，還需要對(duì)該字段的所有字段進(jìn)行上述判斷，這就很容易讓我們考慮使用遞歸來實(shí)現(xiàn)這個(gè)功能。
function deep_copy(src, dest) {
for (var p in src) {
if (Array.isArray(src[p]) || src[p] instanceof Object) {
dest[p] = Array.isArray(src[p]) ? [] : {};
arguments.callee(dest[p], src[p]);
}else {
dest[p] = src[p];
}
}
}在上述代碼中，由于數(shù)組是特殊的對(duì)象，因此可以用for-in來遍歷。
另外，還可以使用json大法：
function deep_copy_in_json(src) {
return JSON.parse(JSON.stringify(src));
}這樣做雖然比較簡(jiǎn)便，但原對(duì)象的很多屬性在操作后會(huì)丟失，比如construtor屬性以及對(duì)象原型中的一些方法。
感謝各位的閱讀！關(guān)于“JavaScript中數(shù)組和對(duì)象復(fù)制的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！
名稱欄目：JavaScript中數(shù)組和對(duì)象復(fù)制的示例分析
網(wǎng)站路徑：http://www.dlmjj.cn/article/ihjshi.html
