jQuery中json对象的复制方式介绍(数组及对象)

当我们在编写jQuery程序时，常常需要对JSON对象进行复制的操作，这个过程有时会比较麻烦，因为JSON对象类别繁多，每种类型都需要采用不同的复制方式。

接下来，我将介绍在jQuery中对各种JSON对象进行复制的方式，包括数组和对象。

数组复制

在jQuery中，数组复制有两种方式：浅复制和深复制。

浅复制

浅复制就是将一个数组中的所有元素全部复制到另一个数组中，这种方式不考虑元素的层次结构，只是将元素的值复制给新的数组，而不会复制子元素的值。

使用jQuery实现浅复制的代码如下：

var originalArray = [1, 2, 3, 4, 5];
var copiedArray = $.extend([], originalArray);
console.log(originalArray); // [1, 2, 3, 4, 5]
console.log(copiedArray); // [1, 2, 3, 4, 5]

在这里，我们使用$.extend()方法将原始数组浅复制到一个新的数组中，注意，我们需要一个空数组作为目标。

深复制

深复制则是将一个数组中的所有元素复制到另一个数组中，并且递归复制子元素的值，这种方式考虑了元素层次结构。

使用jQuery实现深复制的代码如下：

var originalArray = [[1, 2], [3, 4]];
var copiedArray = $.extend(true, [], originalArray);
console.log(originalArray); // [[1, 2], [3, 4]]
console.log(copiedArray); // [[1, 2], [3, 4]]
copiedArray[0][0] = 100;
console.log(originalArray); // [[1, 2], [3, 4]]
console.log(copiedArray); // [[100, 2], [3, 4]]

在这里，我们仍然使用$.extend()方法来进行数组的复制，不过传入true表示要进行深度复制，这样就会递归复制子元素了。

对象复制

类似于数组复制，对象复制也有浅复制和深复制两种方式。

浅复制

浅复制的方式相比数组复制稍微复杂一些，因为对象有成员变量和成员函数，这会影响复制的方式。

使用jQuery实现浅复制的代码如下：

var originalObject = {
    'name': '张三',
    'age': 20,
    'sayHello': function() {
        console.log('Hello');
    }
};

var copiedObject = $.extend({}, originalObject);

console.log(originalObject); // {'name': '张三', 'age': 20, 'sayHello': f() {...}}
console.log(copiedObject); // {'name': '张三', 'age': 20, 'sayHello': f() {...}}

在这里，我们将原始对象复制到一个新对象中，传入{}表示使用空对象作为目标，相当于创建一个新的对象。

深复制

深复制方式也类似于数组复制，使用$.extend()方法即可。

代码示例如下：

var originalObject = {
    'name': '张三',
    'age': 20,
    'friends': [{'name': '李四', 'age': 21}, {'name': '王五', 'age': 22}]
};

var copiedObject = $.extend(true, {}, originalObject);

console.log(originalObject); // {'name': '张三', 'age': 20, 'friends': [{'name': '李四', 'age': 21}, {'name': '王五', 'age': 22}]}
console.log(copiedObject); // {'name': '张三', 'age': 20, 'friends': [{'name': '李四', 'age': 21}, {'name': '王五', 'age': 22}]}

copiedObject.friends[0].name = 'Tom';
console.log(originalObject); // {'name': '张三', 'age': 20, 'friends': [{'name': 'Tom', 'age': 21}, {'name': '王五', 'age': 22}]}
console.log(copiedObject); // {'name': '张三', 'age': 20, 'friends': [{'name': 'Tom', 'age': 21}, {'name': '王五', 'age': 22}]}

在这里，我们传入true表示进行深度复制，这样就可以递归复制子元素了。

总结

通过本文的讲解，我们了解了如何在jQuery中对数组和对象进行复制。对于数组的复制，有浅复制和深复制两种方式，前者只复制值，后者递归复制子元素；对于对象的复制，也有浅复制和深复制两种方式，前者需要先创建一个新的空对象，后者同样递归复制子元素。