今天公司的实习生有问我代码怎么深拷贝
下面我就给大家整理四种前端代码深拷贝的四种方式
前端数据分为基本数据类型和引用数据类型,当我们拷贝引用数据类型的时候,我们希望改变新数组(对象)不改变原本的数组(对象),我们往往会深拷贝数据。下面是四种深拷贝数据的方法
深拷贝方式一
首先给大家说一种最简单也最常用一种深拷贝
JSON.parse(JSON.stringify(引用数据类型))
<script>
let obj={name:'尚雷砺',age:23,sex:'男'}
let newObj=JSON.parse(JSON.stringify(obj))
console.log(obj===newObj);//false
</script>
深拷贝方式二
在我们的jquery中也可以深拷贝
注意:使用jquery中的深拷贝已经要引入jquery
我这里就使用远程的jquery连接了
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script>
let obj={name:'尚雷砺',age:23,sex:'男'}
let newObj=$.extend(true, {}, obj);
console.log(obj===newObj);//false
</script>
深拷贝方式三
除了这两种方式,你也可以手写深拷贝
<script>
const deepCopy = obj => {
if (obj) {
var result = Array.isArray(obj) ? [] : {};
for (var key in obj) {
if (obj.hasOwnProperty(key)) {
if (typeof obj[key] === 'object') {
result[key] = deepCopy(obj[key]);
} else {
result[key] = obj[key];
}
}
}
return result;
}
}
let obj = { name: '尚雷砺', age: 23, sex: '男' }
let newObj = deepCopy(obj)
console.log(obj === newObj);//false
</script>
浅拷贝方式四
Object.assign()对象的拷贝
Object.assign(target, ...sources) 【target:目标对象】,【souce:源对象(可多个)】
<script>
let obj = { name: '尚雷砺', age: 23, sex: '男' }
let newObj = Object.assign({}, obj);
console.log(obj === newObj);//false
</script>