js深拷贝,对象深拷贝、数组深拷贝

数组深拷贝

1、最简单的方法：使用ES6扩展运算符
var arr = [1,2,3,4,5]
var copy = […arr]

测试：

var arr = [1,2,3,4,5]
var copy = [...arr]
arr[2] = 5
console.log(arr)
console.log(copy)

2、js数组concat/slice方法

var arr = [1,2,3,4,5]
var copy = arr.concat()
arr[2] = 5
console.log(arr)
console.log(copy)

同样，还有slice()也是返回一个新的数组。
var arr = [1,2,3,4,5] var copy= arr.slice(0) arr[2] = 5 console.log(arr) console.log(copy)
3.使用for循环

var arr = [1,2,3,4,5]
var copy = copyArr(arr)
function copyArr(arr) {
    let res = []
    for (let i = 0; i < arr.length; i++) {
     res.push(arr[i])
    }
    return res
}

对象深拷贝

1、序列化反序列化法
现将对象序列化成数据，再反序列化成对象
缺点：只能深拷贝对象和数组,当值为undefined、function、symbol 会在转换过程中被忽略。

// 序列化反序列化法
function deepClone(obj) {
    return JSON.parse(JSON.stringify(obj))
}

2、递归方法
对Object对象进行迭代操作，对它的每个值进行递归深拷贝

function deepCopy(obj) {
  var newobj = obj.constructor === Array ? [] : {};
  if (typeof obj !== 'object') {
    return obj;
  } else {
  for (var i in obj) {
    if (typeof obj[i] === 'object'){ //判断对象的这条属性是否为对象
      newobj[i] = deepCopy(obj[i]);  //若是对象进行嵌套调用
    }else{
        newobj[i] = obj[i];
        }
    }
    }
    return newobj; //返回深度克隆后的对象
}

var obj1 = {
    name: 'shen',
    show: function (argument) {
        console.log(1)
    }
}
var obj2 = deepCopy(obj1)
console.log('obj1:', obj1)  // obj1: {name: "shen", show: ƒ}
console.log('obj2:', obj2)  // obj2: {name: "shen"}

3、使用lodash工具库
日常使用进行对象深拷贝可以用这种方法，遇到更复杂的建议下载lodash工具库，使用_.cloneDeep。

let deepCopy= _.cloneDeep(obj)