前端路由 hash 与 history 差异:https://juejin.cn/post/7096034733649297421
赋值和深/浅拷贝的区别
这三者的区别如下,不过比较的前提都是针对引用类型:
当我们把一个对象赋值给一个新的变量时,赋的其实是该对象的在栈中的地址,而不是堆中的数据。也就是两个对象指向的是同一个存储空间,无论哪个对象发生改变,其实都是改变的存储空间的内容,因此,两个对象是联动的。
浅拷贝:浅拷贝是指复制对象的时候,只对第一层键值对进行独立的复制,如果对象内还有对象,则只能复制嵌套对象的地址
深拷贝:深拷贝是指复制对象的时候完全的拷贝一份对象,即使嵌套了对象,两者也相互分离,修改一个对象的属性,也不会影响另一个。其实只要递归下去,把那些属性的值仍然是对象的再次进入对象内部一 一进行复制即可。
浅拷贝的实现方式
对象的浅拷贝
1.设置一个新的对象obj2,通过遍历的方式将obj1对象的值
2.Object.assign()
3.Object.assign()
let obj1 = {
person: { name: "kobe", age: 41, d: [1, 1] },
sports: 'basketball',
d: [1, 2, 3]
};
// 1.设置一个新的对象obj2,通过遍历的方式将obj1对象的值
let obj2 = {}
for (let i in obj1) {
obj2[i] = obj1[i]
}
// // 2.Object.assign()
// let obj2 = Object.assign({}, obj1);
// // 3.展开运算符...
// let obj2 = { ...obj1 };
obj2.person.name = "wade";
obj2.person.d = [0, 1];
obj2.sports = 'football'
obj2.d = [4, 5, 6]
console.log(obj1); // { person: { name: 'wade', age: 41,d: [0,1] }, sports: 'basketball', d: [1, 2, 3] }
console.log(obj2);// { person: { name: 'wade', age: 41 ,d: [0,1] }, sports: 'football' ,d: [ 4, 5, 6 ]}
数组的浅拷贝
1.设置一个新的对象数组,通过遍历的方式将arr1对象的值
2.Array.concat()
3.Array.slice()
// 数组的浅拷贝
let arr1 = ['1', '2', '3', { '4': 'value' }, { d: [1, 2, 3] }]
let arr2 = []
// 1.设置一个新的对象数组,通过遍历的方式将arr1对象的值
// for (let i in arr1) {
// arr2[i] = arr1[i]
// }
// // 2.Array.concat()
// arr2 = arr1.concat();
// 3.Array.slice()
arr2 = arr1.slice();
arr2[3]['4'] = '1111111111'
arr2[4]['d'] = [4, 5, 6]
arr2.push('6')
console.log(arr1) // ['1', '2', '3',{ '4': '1111111111' },{d: [4,5,6]}]
console.log(arr2) // ['1', '2', '3',{ '4': '1111111111' },{d: [4,5,6]},'6']
深拷贝的实现方式
深拷贝--------JSON.parse(JSON.stringify(obj))
不仅适用于数组还适用于对象!不过存在一个问题,就是不能拷贝函数
//
// 不仅适用于数组还适用于对象!不过存在一个问题,就是不能拷贝函数
let obj1 = {
a: 'one',
b: 'two',
c: {
name: 'Demi'
},
d: [1, 2, 3],
};
let obj2 = JSON.parse(JSON.stringify(obj1));
obj2.b = 'three'
obj2.c.name = 'dingFY'
obj2.d = [4, 5, 6]
console.log(obj1); // {a: "one", b: "two", c: {name: 'Demi'},d:{[ 1,2,3]}}
console.log(obj2); // {a: "one", b: "three", c: {name: 'dingFY'},d:{[ 4, 5, 6 ]}}
let arr1 = ['1', '2', '3', { '4': 'value' }
]
let arr2 = JSON.parse(JSON.stringify(arr1))
arr2[3]['4'] = '1111111'
arr2.push('5')
console.log(arr1); // ['1', '2', '3',{ '4': 'value' }
console.log(arr2); // ['1', '2', '3',{ '4': '1111111' ,'5'}
浅拷贝封装方法----原理:遍历对象,然后把属性和属性值都放在一个新的对象
let shallowCopy = function (obj) {
// 只拷贝对象
if (typeof obj !== 'object') return;
// 根据obj的类型判断是新建一个数组还是对象
let newObj = obj instanceof Array ? [] : {};
// 遍历obj,并且判断是obj的属性才拷贝
for (let key in obj) {
if (obj.hasOwnProperty(key)) {
newObj[key] = obj[key];
}
}
return newObj;
}
深拷贝封装方法----我们在拷贝的时候判断一下属性值的类型,如果是对象,我们递归调用深拷贝函数就好了
let deepCopy = function (obj) {
// 只拷贝对象
if (typeof obj !== 'object') return;
// 根据obj的类型判断是新建一个数组还是对象
let newObj = obj instanceof Array ? [] : {};
// 遍历obj,并且判断是obj的属性才拷贝
for (let key in obj) {
if (obj.hasOwnProperty(key)) {
// 如果obj的子属性是对象,则进行递归操作,否则直接赋值
newObj[key] = typeof obj[key] === 'object' ? deepCopy(obj[key]) : obj[key];
}
}
return newObj;
}