赋值、浅拷贝、深拷贝的区别?
(1).赋值:当数据改变时原数组也会改变包括子对象的属性
(2).浅拷贝:当数据改变时原数组不会改变但子对象的属性会改变
(3).深拷贝:当数据改变时原数组包括子对象的属性都不会改变(包括引用数据类型)
一、赋值
直接用等号“=”
<script>
let obj = {
name: 'zhangsan',
info: {
hobby: '打球'
}
}
let obj1 = obj
obj1.name = 'lisi'
obj1.info.hobby = '踢球'
console.log(obj);
console.log(obj1);
</script>
二、浅拷贝
1.通过object.assign实现浅拷贝。(对象)
- 参数1:一个空对象,用来存放新增属性与原对象混合之后的对象
- 参数2:原来的对象
- 参数3:需要给对象新增的属性
this.item = Object.assign({},this.item,{newProperty:'新值'})
<script>
let obj = {
name: 'zhangsan',
info: {
hobby: '打球'
}
}
let obj1 = Object.assign({}, obj)
obj1.name = 'lisi'
console.log(obj);
console.log(obj1);
</script>
2.数组的concat方法
<script>
let arr = [1, 2, 3, 4, 5, 6, {
num: 7
}]
// let arr1 = [1, 2, 3]
let arr2 = [].concat(arr)
arr2[0] = 2
arr2[6] = 1
console.log(arr);
console.log(arr2);
</script>
3.通过...展开符来展开
<script>
let arr = [1, 2, 3, 4, 5, 6, {
num: 7
}]
// let arr1 = [1, 2, 3]
let arr2 = [...arr]
arr2[0] = 2
arr2[6] = 1
console.log(arr);
console.log(arr2);
</script>
三、深拷贝
1.使用递归的方式实现
//使用递归的方式实现数组、对象的深拷贝
function deepClone1(obj) {
//判断拷贝的要进行深拷贝的是数组还是对象,是数组的话进行数组拷贝,对象的话进行对象拷贝
var objClone = Array.isArray(obj) ? [] : {};
//进行深拷贝的不能为空,并且是对象或者是
if (obj && typeof obj === "object") {
for (key in obj) {
if (obj.hasOwnProperty(key)) {
if (obj[key] && typeof obj[key] === "object") {
objClone[key] = deepClone1(obj[key]);
} else {
objClone[key] = obj[key];
}
}
}
}
return objClone;
}
2.使用JSON.parse与JSON.stringify来实现。
<script>
let obj = [{
'name': 'zhangsan',
}, {
'name': 'lisi',
}]
//转为json对象在转为js对象
let objDB = JSON.parse(JSON.stringify(obj))
console.log(objDB); //(2) [{…}, {…}]
// 0: {
// name: 'zhangsan'
// }
// 1: {
// name: 'lisi'
// }
// length: 2[[Prototype]]: Array(0)
</script>
3.使用node.js库中的一个js库Lodash.js来实现.
import _ from "lodash";
addForm: [{name:zhangsan},{name:lisi}],
const form = _.cloneDeep(this.addForm);
console.log(form)//(2) [{…}, {…}]0: {name: 'zhangsan'}1: {name: 'lisi'}length: 2[[Prototype]]: Array(0)
4.通过jQuery的extend方法实现深拷贝
var array = [1,2,3,4];
var newArray = $.extend(true,[],array);