• javascript 数组的深度复制


    javascript 数组的深度复制

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

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

    来源于 伯乐在线

  • 相关阅读:
    for() 和$.each()的用法区别
    HTML5 UTF-8 中文乱码
    chrome,opera..通过file协议浏览html代码时,发送的ajax请求本地文件,会报跨域错误
    局部方法$("html").load()和全局方法$.get()、$.post()
    iOS开发--动画篇之layout动画深入
    iOS 开发--转场动画
    iOS开发--泛型
    Python十分钟学会
    iOS 开发--动画
    一个简单的ObjC和JavaScript交互工具
  • 原文地址:https://www.cnblogs.com/zhoupengyi/p/6048955.html
Copyright © 2020-2023  润新知