打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
javascript 数组的深度复制


作者:伯乐在线专栏作者 - 任侠

链接:http://web.jobbole.com/88602/

点击 → 了解如何加入专栏作者


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


1. 数组的简单复制


1.1 简单遍历


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


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 方法实现。示例:


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()。示例:


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


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


https://github.com/douglascrockford/JSON-js/blob/master/json2.js


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


2.2 深度复制的完全实现


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


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);


2.3 使用 jQuery 的 extend 方法


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


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);



关注「前端大全」

看更多精选前端技术文章

↓↓↓

本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
遍历数组,对象和JSON
JavaScript的二维数组
深拷贝学习笔记
JavaScript中的所有循环类型
ES6,ES7,ES8,ES9,ES10新特性一览
数组去重
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服