JavaScript中數組和對象復制的示例分析

這篇文章給大家分享的是有關JavaScript中數組和對象復制的示例分析的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

一、數據類型

從狹義上來說，JS把所有的數據分成兩大類型：基本類型和引用類型，其中基本類型包括Undefined、Null、Boolean、Number和String，引用類型為Object，常用的Array、Date、RegExp、Function等都屬于Object類型。

基本型數據和引用型數據的區別之一就是，在復制變量時，基本型數據復制獨立的一份新的拷貝，而引用型數據復制的是原變量的引用。下面是一個例子：

// 基本類型數據的復制
var a = 10;
var b = a; // b = 10
a = 20; // a = 20, b = 10
// 引用類型數據的復制
var m = [1, 2];
var n = m;
m[0] = 10;
console.log(n[0]); // 10

如果我想復制引用類型本身的值而非引用，顯然不能采用上面的方式。

二、數組的淺復制

淺復制是指對象（數組）被復制時，其引用字段的值不會被復制，而是復制了對應字段的引用。如：

var src = [
 'alpha',
 ['bravo', 'chalie']
];
var dest = [];
for (var i = 0; i < src.length; i++) {
 dest[i] = src[i];
}
//此時，如果改變src中的引用字段，dest中相應的字段也會被改變
src[1].push('delta');
console.log(dest[1]); // ['bravo', 'chalie', 'delta']

淺復制一般用于一維數組，即數組中不存在引用類型的情況。常用的淺復制方法有：

concat方法

 var src = ['alpha', 'bravo'],
  dest = [];
 dest = dest.concat(src);

concat方法更多地被用在數組合并中，比如：

 var a = ['alpha', 'bravo'],
  b = ['chalie', 'delta'],
  combine;
 combine = a.concat(b);

特別要指出，concat用于數組合并時，是將兩個（或多個）數組中的所有元素復制到新的對象，對于大型數組來說，開銷比較大。更好的辦法是把后一個數組的元素復制到前一個數組中：

 var src = ['alpha', 'bravo'],
  dest = ['chalie', 'delta'];
 Array.prototype.push.apply(src, dest);

slice方法

slice方法可以從已有數組中返回選定的元素，返回的是一個新數組。

 var src = ['alpha', 'bravo'],
 var dest = src.slice(0);

三、對象的淺復制

對象的淺復制可以用for-in遍歷來實現，在es6中提供了更為方便的Object.assign()方法。

 var src = {name: 'fox', age: 20},
  dest = null;
 dest = Object.assign({}, src);

也可以使用jQuery中的$.extend，underscore中的_.extend等方法來實現對象的復制。

四、深度復制

淺復制的應用場景有限，更多情況下，我們希望能夠將對象復制出一個完整的副本，這就需要用到typeof或instanof操作符來對各個字段的類型進行判斷。如果某字段是基本類型的，可以直接復制。如果某字段是引用類型的，還需要對該字段的所有字段進行上述判斷，這就很容易讓我們考慮使用遞歸來實現這個功能。

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];
  }
 }
}

在上述代碼中，由于數組是特殊的對象，因此可以用for-in來遍歷。

另外，還可以使用json大法：

 function deep_copy_in_json(src) {
  return JSON.parse(JSON.stringify(src));
 }

這樣做雖然比較簡便，但原對象的很多屬性在操作后會丟失，比如construtor屬性以及對象原型中的一些方法。

感謝各位的閱讀！關于“JavaScript中數組和對象復制的示例分析”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！