玩法介绍当前位置:万彩娱乐平台 > 玩法介绍 > >

JavaScript 数组的深度复制解析

  

[js数组深度复制]JavaScript 数组的深度复制解析

  

对于javascript而言,数组是引用类型,如果要想复制一个数组就要动脑袋想想了,因为包括concat、slice在内的函数,都是浅层复制。也就是说,对于一个二维数组来说,用concat来做复制,第二维的数组还是引用,修改了新数组同样会使旧数组发生改变。

  

  

于是乎,想要写一个深度复制的函数,来帮助做组数的深度复制。

  

  

一般情况下,使用 “=” 可以实现赋值。但对于数组、对象、函数等这些引用类型的数据,这个符号就不好使了。

  

  

1. 数组的简单复制  

  

1.1 简单遍历  

  

最简单也最基础的方式,自然是循环处理。示例:  

  

JavaScript  

 万彩娱乐平台 
  
  function array_copy(arr) {  var out = [], i, len;  if (out[i] instanceof Array === false){  return arr;  }  for (i = 0, len = arr.length; i < len; i++) {  if (out[i] instanceof Array){  out[i] = deepcopy(arr[i]);  } else {  out[i] = arr[i];  }  };  return a;  }  //测试  var arr1 = [1, 2, 3, 4],  arr2 = array_copy(arr1);  console.log(arr1, arr2);  arr2[2] = 10;  console.log(arr1[2], arr2[2]);  function array_copy(arr) {  var out = [], i, len;  if (out[i] instanceof Array === false){  return arr;  }  for (i = 0, len = arr.length; i < len; i++) {  if (out[i] instanceof Array){  out[i] = deepcopy(arr[i]);  } else {  out[i] = arr[i];  }  };  return a;  }  //测试  var arr1 = [1, 2, 3, 4],  arr2 = array_copy(arr1);  console.log(arr1, arr2);  arr2[2] = 10;  console.log(arr1[2], arr2[2]);
  
  

1.2 变通的复制实现  

  

经常出现在面试题中的取巧方法,是使用 slice 或 contcat 方法实现。示例:  

  

JavaScript  

  
  
  var arr1 = [1, 2, 3, 4],  arr2 = arr1.slice(0),  arr3 = arr1.concat();  console.log(arr1, arr2, arr3);  arr2[2] = 10;  arr3[2] = 11;  console.log(arr1[2], arr2[2], arr3[2]);  var arr1 = [1, 2, 3, 4],  arr2 = arr1.slice(0),  arr3 = arr1.concat();  console.log(arr1, arr2, arr3);  arr2[2] = 10;  arr3[2] = 11;  console.log(arr1[2], arr2[2], arr3[2]);
  
  

2. 数组的深度复制  

  

普通的一维数组且值为非引用类型,使用上述方法是没有问题的,否则就比较麻烦了。深度复制需要考虑数组值为各种引用类型的情况。

  

  

2.1 使用 JSON 方法  

  

JSON.stringify(array) 然后再 JSON.parse()。示例:  

  

JavaScript  

  
  
  var arr1 = [1, 2, [3, 4], {a: 5, b: 6}, 7],  arr2 = JSON.parse(JSON.stringify(arr1));  console.log(arr1, arr2);  arr2[1] = 10;  arr2[3].a = 20;  console.log(arr1[1], arr2[1]);  console.log(arr1[3], arr2[3]);  var arr1 = [1, 2, [3, 4], {a: 5, b: 6}, 7],  arr2 = JSON.parse(JSON.stringify(arr1));  console.log(arr1, arr2);  arr2[1] = 10;  arr2[3].a = 20;  console.log(arr1[1], arr2[1]);  console.log(arr1[3], arr2[3]);
  
  

此方法存在对古老浏览器的兼容性问题。如确需要作兼容,可引入如下兼容文件解决:  

  

  

  

注意:如果数组值为函数,上述方法还是不行的。

  

  

2.2 深度复制的完全实现  

  

考虑到多维数组的嵌套,以及数组值为对象的情况,可以作如下原型扩展(当然写为普通函数实现也是可以的,原型扩展是不建议的方式):  

  

JavaScript  

  
  
  Object.prototype.clone = function () {  var o = {};  for (var i in this) {  o[i] = this[i];  }  return o;  };  Array.prototype.clone = function () {  var arr = [];  for (var i = 0; i < this.length; i++)  if (typeof this[i] !== 'object') {  arr.push(this[i]);  } else {  arr.push(this[i].clone());  }  return arr;  };  //测试1 Object  var obj1 = {  name: 'Rattz',  age: 20,  hello: function () {  return "I'm " + name;  }  };  var obj2 = obj1.clone();  obj2.age++;  console.log(obj1.age);  //测试2 Array  var fun = function(log) {console.log},  arr1 = [1, 2, [3, 4], {a: 5, b: 6}, fun],  arr2 = arr1.clone();  console.log(arr1, arr2);  arr2[2][1]= 'Mike';  arr2[3].a = 50;  arr2[4] = 10;  console.log(arr1, arr2);  Object.prototype.clone = function () {  var o = {};  for (var i in this) {  o[i] = this[i];  }  return o;  Array.prototype.clone = function () {  var arr = [];  for (var i = 0; i < this.length; i++)  if (typeof this[i] !== 'object') {  arr.push(this[i]);  } else {  arr.push(this[i].clone());  }  return arr;  //测试1 Object  var obj1 = {  name: 'Rattz',  age: 20,  hello: function () {  return "I'm " + name;  }  var obj2 = obj1.clone();  console.log(obj1.age);  //测试2 Array  var fun = function(log) {console.log},  arr1 = [1, 2, [3, 4], {a: 5, b: 6}, fun],  arr2 = arr1.clone();  console.log(arr1, arr2);  arr2[2][1]= 'Mike';  arr2[3].a = 50;  arr2[4] = 10;  console.log(arr1, arr2);
  
  

2.3 使用 jQuery 的 extend 方法  

  

如果你在使用 jQuery,那么最简单的方法是使用 extend 插件方法。示例:  

  

JavaScript  

  
  
  var arr1 = [1, 2, [3, 4], {a: 5, b: 6}, 7],  arr2 = $.extend(true, [], arr1);  console.log(arr1, arr2);  arr2[1] = 10;  console.log(arr1, arr2);  var arr1 = [1, 2, [3, 4], {a: 5, b: 6}, 7],  arr2 = $.extend(true, [], arr1);  console.log(arr1, arr2);  arr2[1] = 10;  console.log(arr1, arr2);
  
  

  

(责任编辑:admin)

上一篇:Javascript解析URL方法详解

下一篇:微信小程序 触控事件详细介绍

推荐内容

客户服务热线

010-400-12345

在线客服