一、基本类型和引用类型
基本类型：string,number,boolean,null,undefiend,symbol
引用类型：Function,Array,Object
1、基本数据类型的特点：直接存储在栈(stack)中的数据
2、引用数据类型的特点：存储的是该对象在栈中引用，真实的数据存放在堆内存里
二、浅拷贝和深拷贝
浅拷贝、深拷贝的概念
浅拷贝就是创建一个新对象，这个对象对原始对象进行了精确拷贝。
- 若属性是
基本类型，拷贝的就是属性的值； - 若属性是
引用类型，拷贝的就是内存地址， - 若其中一个对象改变了这个地址，就会
影响到另一个对象。
深拷贝就是将一个对象完整的拷贝一份出来，从堆内存中开辟一个新的区域存放新对象，修改新对象不会影响到原对象。
三、浅拷贝实现方式
1、Object.assign()
Object.assign() 方法可以把任意多个的源对象自身的可枚举属性拷贝给目标对象，然后返回目标对象。但是Object.assign()进行的是浅拷贝，拷贝的是对象的属性的引用，而不是对象本身。
var obj = { a: {a: "kobe", b: 39} };
var initalObj = Object.assign({}, obj);
initalObj.a.a = "wade";
console.log(obj.a.a); // wade
// 注意：当object只有一层的时候，是深拷贝
let obj = {
username: 'kobe'
};
let obj2 = Object.assign({},obj);
obj2.username = 'wade';
console.log(obj);//{username: "kobe"}
2、Array.prototype.concat() 修改新对象会改到原对象
3、Array.prototype.slice()
let a = ["1", "2", {
age: 18,
sex: "man",
sports: ["football", "running", "swimming"]
}];
let b = a.slice(2);
console.log(b);
// [{
// age: 18,
// sex: "man",
// sports:["football","running","swimming"]
// }];
b[0].age = "19"
console.log(a);
// ["1","20",{
// age: 19,
// sex: "man",
// sports:["football","running","swimming"]
// }];
console.log(b);
// [{
// age: 19,
// sex: "man",
// sports:["football","running","swimming"]
// }];
四、深拷贝实现方式
1、JSON.parse(JSON.stringify())
let a = {
age: 18,
sex: "man",
sports: ["football", "running", "swimming"]
};
let b = JSON.parse(JSON.stringify(a));
console.log(a);
// {
// age: 18,
// sex: "man",
// sports:["football","running","swimming"]
// };
console.log(b);
// {
// age: 18,
// sex: "man",
// sports:["football","running","swimming"]
// };
a.sports.push("basketball")
console.log(a);
// {
// age: 18,
// sex: "man",
// sports:["football","running","swimming","basketball"]
// };
console.log(b);
// {
// age: 18,
// sex: "man",
// sports:["football","running","swimming"]
// };
对数组深拷贝之后，改变原数组不会影响到拷贝之后的数组。
但是该方法有以下几个问题。
(1)、会忽略 undefined
(2)、会忽略 symbol
(3)、不能序列化函数
(4)、不能解决循环引用的对象
(5)、不能正确处理new Date()
(6)、不能处理正则
2、手写递归方法
3、函数库lodash
const _ = require('lodash');
let originalObject = {
name: 'John',
age: 30,
address: {
city: 'Beijing',
zipCode: '10001'
}
};
let clonedObject = _.cloneDeep(originalObject);
console.log(clonedObject); // 输出: { name: 'John', age: 30, address: { city: 'Beijing', zipCode: '10001' } }
console.log(clonedObject === originalObject); // 输出: false，表明两个对象不是同一个
console.log(clonedObject.address === originalObject.address); // 输出: false，表明地址对象也是深拷贝的
手写深拷贝
面试简版：
function deepClone(obj) {
// 如果是 值类型 或 null，则直接return
if(typeof obj !== 'object' || obj === null) {
return obj
}
// 定义结果对象
let copy = {}
// 如果对象是数组，则定义结果数组
if(obj instanceof Array) {
copy = []
}
// 遍历对象的key
for(let key in obj) {
// 如果key是对象的自有属性
if(obj.hasOwnProperty(key)) {
// 递归调用深拷贝方法
copy[key] = deepClone(obj[key])
}
}
return copy
}
调用深拷贝方法，若属性为
值类型，则直接返回；若属性为引用类型，则递归遍历。这就是我们在解这一类题时的核心的方法。
进阶版:
- 解决拷贝循环引用问题
- 解决拷贝对应原型问题
// 递归拷贝 (类型判断)
function deepClone(value,hash = new WeakMap){ // 弱引用，不用map，weakMap更合适一点
// null 和 undefiend 是不需要拷贝的
if(value == null){ return value;}
if(value instanceof RegExp) { return new RegExp(value) }
if(value instanceof Date) { return new Date(value) }
// 函数是不需要拷贝
if(typeof value != 'object') return value;
let obj = new value.constructor(); // [] {}
// 说明是一个对象类型
if(hash.get(value)){
return hash.get(value)
}
hash.set(value,obj);
for(let key in value){ // in 会遍历当前对象上的属性 和 __proto__指代的属性
// 补拷贝 对象的__proto__上的属性
if(value.hasOwnProperty(key)){
// 如果值还有可能是对象 就继续拷贝
obj[key] = deepClone(value[key],hash);
}
}
return obj
// 区分对象和数组 Object.prototype.toString.call
}
// test
var o = {};
o.x = o;
var o1 = deepClone(o); // 如果这个对象拷贝过了 就返回那个拷贝的结果就可以了
console.log(o1);
完整版：
const getType = obj => Object.prototype.toString.call(obj);
const isObject = (target) => (typeof target === 'object' || typeof target === 'function') && target !== null;
const canTraverse = {
'[object Map]': true,
'[object Set]': true,
'[object Array]': true,
'[object Object]': true,
'[object Arguments]': true,
};
const mapTag = '[object Map]';
const setTag = '[object Set]';
const boolTag = '[object Boolean]';
const numberTag = '[object Number]';
const stringTag = '[object String]';
const symbolTag = '[object Symbol]';
const dateTag = '[object Date]';
const errorTag = '[object Error]';
const regexpTag = '[object RegExp]';
const funcTag = '[object Function]';
const handleRegExp = (target) => {
const { source, flags } = target;
return new target.constructor(source, flags);
}
const handleFunc = (func) => {
// 箭头函数直接返回自身
if(!func.prototype) return func;
const bodyReg = /(?<={)(.|\n)+(?=})/m;
const paramReg = /(?<=\().+(?=\)\s+{)/;
const funcString = func.toString();
// 分别匹配 函数参数 和 函数体
const param = paramReg.exec(funcString);
const body = bodyReg.exec(funcString);
if(!body) return null;
if (param) {
const paramArr = param[0].split(',');
return new Function(...paramArr, body[0]);
} else {
return new Function(body[0]);
}
}
const handleNotTraverse = (target, tag) => {
const Ctor = target.constructor;
switch(tag) {
case boolTag:
return new Object(Boolean.prototype.valueOf.call(target));
case numberTag:
return new Object(Number.prototype.valueOf.call(target));
case stringTag:
return new Object(String.prototype.valueOf.call(target));
case symbolTag:
return new Object(Symbol.prototype.valueOf.call(target));
case errorTag:
case dateTag:
return new Ctor(target);
case regexpTag:
return handleRegExp(target);
case funcTag:
return handleFunc(target);
default:
return new Ctor(target);
}
}
const deepClone = (target, map = new WeakMap()) => {
if(!isObject(target))
return target;
let type = getType(target);
let cloneTarget;
if(!canTraverse[type]) {
// 处理不能遍历的对象
return handleNotTraverse(target, type);
}else {
// 这波操作相当关键，可以保证对象的原型不丢失！
let ctor = target.constructor;
cloneTarget = new ctor();
}
if(map.get(target))
return target;
map.set(target, true);
if(type === mapTag) {
//处理Map
target.forEach((item, key) => {
cloneTarget.set(deepClone(key, map), deepClone(item, map));
})
}
if(type === setTag) {
//处理Set
target.forEach(item => {
cloneTarget.add(deepClone(item, map));
})
}
// 处理数组和对象
for (let prop in target) {
if (target.hasOwnProperty(prop)) {
cloneTarget[prop] = deepClone(target[prop], map);
}
}
return cloneTarget;
}
5892
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
