数组的浅拷贝

利用 slice、concat 函数。

// concat 
const arr = ["old", 1, true, null, undefined];
const new_arr = arr.concat();
console.log(arr); // ["old", 1, true, null, undefined]
console.log(new_arr); //  ["old", 1, true, null, undefined]
// slice
const arr = ["old", 1, true, null, undefined];
const new_arr = arr.concat();
console.log(arr); // ["old", 1, true, null, undefined]
console.log(new_arr); //  ["old", 1, true, null, undefined]

这两种方法只能对基本类型起作用，但对于引用类型就只是复制引用的地址。

JSON 序列化

var arr = ['old', 1, true, ['old1', 'old2'], {old: 1}];
var new_arr = JSON.parse( JSON.stringify(arr) );
console.log(new_arr); // ['old', 1, true, ['old1', 'old2'], {old: 1}]

这是个好方法但是不能拷贝函数，不信你看。

const arr = [
    function() {
        console.log(a);
    },
    {
        b: function() {
            console.log(b);
        }
    }
];
const new_arr = JSON.parse(JSON.stringify(arr));
console.log(new_arr);

函数直接就变成 null 了，对于嵌套在对象里面的函数直接就不拷贝了。

以上三种方法都非常的 hack，那有没有正常一点的方法了？有的看下面。

遍历实现浅拷贝

const shallowCopy = function(obj) {
    // 只拷贝对象
    if (typeof obj !== "object") return;
    // 根据obj的类型判断是新建一个数组还是对象
    var newObj = obj instanceof Array ? [] : {};
    // 遍历obj，并且判断是obj的属性才拷贝
    for (var key in obj) {
        if (obj.hasOwnProperty(key)) {
            newObj[key] = obj[key];
        }
    }
    return newObj;
};

那怎样实现深拷贝了？很简单判断拷贝的属性值是对象就递归遍历。看下面。

递归遍历实现深拷贝


const deepCopy = function(obj) {
    if (typeof obj !== "object") return;
    var newObj = obj instanceof Array ? [] : {};
    for (var key in obj) {
        if (obj.hasOwnProperty(key)) {
            newObj[key] = typeof obj[key] === "object" ? deepCopy(obj[key]) : obj[key];
        }
    }
    return newObj;
};

实现 extend 函数

jq 有一个 extend 函数用于拷贝。看看 jq 是怎么描述这个函数的。

Description: Merge the contents of two or more objects together into the first object.

_
意思是：合并第二个参数以上的对象到第一个参数对象上（讲得怪怪的）。

基本用法

const obj1 = {
    a: 1,
    b: { b1: 1, b2: 2 }
};
const obj2 = {
    b: { b1: 3, b3: 4 },
    c: 3
};
const obj3 = {
    d: 4
}
console.log($.extend(obj1, obj2, obj3));

可以看到第二个参数以上的对象的属性会覆盖第一个参数对象的属性。

那我们来实现一下吧。

function extend() {
    var name, options, copy;
    var length = arguments.length;
    var i = 1;
    // 目标对象
    var target = arguments[0];
    for (; i < length; i++) {
        // 需要遍历的对象
        options = arguments[i];
      // 要求不能为空 避免 extend(a,,b) 这种情况
        if (options != null) {
            for (name in options) {
                copy = options[name];
                // 排除用属性名却没有值的情况
                if (copy !== undefined) {
                    target[name] = copy;
                }
            }
        }
    }
    return target;
}

以上是浅拷贝那怎样实现深拷贝了？

在 jq 的 1.1.4 版里，在 extend 函数添加了一个 deep 参数用于表示是否深拷贝。

jQuery.extend( [deep], target, object1 [, objectN ] )

还是举个例子

const obj1 = {
    a: 1,
    b: { b1: 1, b2: 2 }
};
const obj2 = {
    b: { b1: 3, b3: 4 },
    c: 3
};
const obj3 = {
    d: 4
}
console.log($.extend(true, obj1, obj2, obj3));

可以看到因为 deep 参数为 true，所以用更深层次的遍历和覆盖。

那我们实现一下这个用 deep 参数的版本吧。

function extend() {
    // 默认不进行深拷贝
    var deep = false;
    var name, options, src, copy;
    var length = arguments.length;
    // 记录要复制的对象的下标
    var i = 1;
    var target = arguments[0];
    // 根据 target 的类型不同分别处理。
    if (typeof target === "boolean") {
        deep = target;
        // 如果 target 不是对象类型，就赋值一个空对象。
        if (typeof arguments[i] !== "object") {
            target = {};
        } else {
            target = arguments[i];
        }
        i++;
    } else {
        // 如果 target 不是对象类型，就赋值一个空对象。
        if (typeof arguments[0] !== "object") {
            target = {};
        } else {
            target = arguments[0];
        }
    }
    // 循环遍历要复制的对象们
    for (; i < length; i++) {
        // 获取当前对象
        options = arguments[i];
        // 要求不能为空 避免extend(a,,b)这种情况
        if (options != null) {
            for (name in options) {
                // 目标属性值
                src = target[name];
                // 要复制的对象的属性值
                copy = options[name];
                if (deep && copy && typeof copy == "object") {
                    // 递归调用
                    target[name] = extend(deep, src, copy);
                } else if (copy !== undefined) {
                    target[name] = copy;
                }
            }
        }
    }
    return target;
}

核心还是递归遍历，但 target 也可能是函数啊。那怎样兼容这种情况了。看下面。

我们可以利用在《javascript 类型判断（基本类型）》讲的 isFunction 函数来判断 target 是函数的情况的。

修改一下代码

if (typeof target === "boolean") {
    // ...
    if (typeof arguments[i] !== "object" && !isFunction(arguments[i])) {
        // ...
    } else {
        // ...
    }
    i++;
} else {
    if (typeof arguments[0] !== "object" && !isFunction(arguments[i])) {
        // ...
    } else {
        // ...
    }
}

还用 bug，写个例子复现一下。

var obj1 = {
    a: 1,
    b: {
        c: 2
    }
};
var obj2 = {
    b: {
        c: [5]
    }
};
var d = extend(true, obj1, obj2);
console.log(d);

预期

{
    a: 1,
    b: {
        c: [5]
    }
}

结果

{
    a: 1,
    b: {
        c: {
            0: 5
        }
    }
}

为什么会这样的了？我们在 extend 函数开头写一个 console.log(1) 函数，看看 extend 执行了几次。

打出 3 个 1，说明执行了 3 次。我们来仔细地分析一下每次的传入参数：

第一次

var src = { c: 2 };
var copy = { c: [5] };
target[name] = extend(true, src, copy);

第二次

var src = 2;
var copy = [5];
target[name] = extend(true, src, copy);

第三次执行，由于 src 是一个基本类型，我们默认会赋值一个空对象作为 target 值，所以最终的结果就变成了对象的属性。

为了解决这个问题，我们需要对目标属性值和待复制对象的属性值进行判断：

如果待复制对象属性值类型为数组，目标属性值类型不为数组的话，目标属性值就设为 []。
如果待复制对象属性值类型为对象，目标属性值类型不为对象的话，目标属性值就设为 {}。

我们利用在《javascript 类型判断（plainObject…）》讲到的 isPlainObject 函数来判断。

let clone, copyIsArray;
if (deep && copy && (isPlainObject(copy) || !!(copyIsArray = Array.isArray(copy)))) {
    if (copyIsArray) {
        copyIsArray = false;
        clone = src && Array.isArray(src) ? src : [];
    } else {
        clone = src && isPlainObject(src) ? src : {};
    }
    target[name] = extend(deep, clone, copy);
} else if (copy !== undefined) {
    target[name] = copy;
}

还用一个问题没有解决，那就是循环引用。看例子。

var a = {name : b};
var b = {name : a}
var c = extend(a, b);
console.log(c);

可以看到

解决办法也很简单啊。加入以下代码。

...
src = target[name];
copy = options[name];
if (target === copy) {
    continue;
}
...

最终代码

function extend() {
    // 默认不进行深拷贝
    let deep = false;
    let name, options, src, copy;
    let length = arguments.length;
    let clone, copyIsArray;
    // 记录要复制的对象的下标
    let i = 1;
    let target = arguments[0];
    // 根据 target 的类型不同分别处理。
    if (typeof target === "boolean") {
        deep = target;
        // 如果 target 不是对象类型，而且也不是函数类型，就赋值一个空对象。
        if (typeof arguments[i] !== "object" && !isFunction(arguments[i])) {
            target = {};
        } else {
            target = arguments[i];
        }
        i++;
    } else {
        // 如果 target 不是对象类型，而且也不是函数类型，就赋值一个空对象。
        if (typeof arguments[0] !== "object" && !isFunction(arguments[0])) {
            target = {};
        } else {
            target = arguments[0];
        }
    }
    // 循环遍历要复制的对象们
    for (; i < length; i++) {
        // 获取当前对象
        options = arguments[i];
        // 要求不能为空 避免 extend(a,,b) 这种情况
        if (options !== null) {
            for (name in options) {
                // 目标属性值
                src = target[name];
                // 要复制的对象的属性值
                copy = options[name];
                if (target === copy) {
                    continue;
                }
                // !! 将赋值表达式的副作用转化为 boolean
                if (deep && copy && (isPlainObject(copy) || !!(copyIsArray = Array.isArray(copy)))) {
                    if (copyIsArray) {
                        copyIsArray = false;
                        clone = src && Array.isArray(src) ? src : [];
                    } else {
                        clone = src && isPlainObject(src) ? src : {};
                    }
                    // 递归调用
                    target[name] = extend(deep, clone, copy);
                } else if (copy !== undefined) {
                    target[name] = copy;
                }
            }
        }
    }
    return target;
}

参考：

[1] JavaScript专题之深浅拷贝
[2] JavaScript专题之从零实现jQuery的extend

Programing learning note

javascript 深浅拷贝

数组的浅拷贝

遍历实现浅拷贝

递归遍历实现深拷贝

实现 extend 函数