龙空技术网

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

带风的前端少年 143

前言:

如今大家对“js对象拷贝”大约比较着重,姐妹们都需要了解一些“js对象拷贝”的相关资讯。那么小编也在网络上收集了一些关于“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] = 5console.log(arr)console.log(copy)在这里插入图片描述2、js数组concat/slice方法在这里插入图片描述

2、js数组concat/slice方法

var arr = [1,2,3,4,5]var copy = arr.concat()arr[2] = 5console.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)

标签: #js对象拷贝