1. Implement deep copy through recursion.
A relatively comprehensive deep copy has the disadvantage of being more cumbersome.
function deepClone(obj) {
var target = {
};
for (var key in obj) {
if (Object.prototype.hasOwnProperty.call(obj, key)) {
if (typeof obj[key] === 'object') {
target[key] = deepClone(obj[key]);
} else {
target[key] = obj[key];
}
}
}
return target;
}
2. JSON.parse(JSON.stringify(obj))
meets general usage scenarios, but cannot achieve deep copying of methods (functions) in objects.
let obj = {
id: 1,
name: '张三',
age: 10,
}
let newObj = JSON.parse(JSON.stringify(obj))
3. jQuery’s extend method implements deep copying
var array = [1,2,3,4];
var newArray = $.extend(true,[],array); // true为深拷贝，false为浅拷贝
4. In Object.assign(obj1, obj2),
only the first-level attributes are deep copies, and the second-level attributes are shallow copies.
let obj = {
id: 1,
name: '张三',
age: 10,
}
let newObj = Object.assign({
}, obj)
5. Extension operator
Only the first-level attributes are deep copies, and the second-level attributes are shallow copies.
var obj = {
a: 1,
b: 2
}
var obj1 = {
…obj}
6. Arrays use array methods for deep copying (concat, slice).
Only the first-level attributes are deep copies, and the second-level attributes are shallow copies, such as [1,2,3,[1,2,3]]
var arr1 = [1, 2, 3, 4]
var arr2 = arr1.concat()
var arr3 = arr1.slice(1)
7. Use the observer mode provided by Vue to implement array deep copy
//Array that needs to be copied
let arr1 = [{
name: "小明", age: 18}, {
name: "小芳", age: 20}];
let arr2 = Vue.util.extend([], arr1);
8. Use the spread operator provided by ES6 to implement array deep copy
//需要复制的数组
let arr1 = [{
name: "小明", age: 18}, {
name: "小芳", age: 20}];
//使用ES6的扩展运算符实现数组深度复制
let arr2 = [...arr1];