JS中的数据类型
基础数据类型
number,string,boolean,undefined,null,symbol这种，基本数据类型都是直接存储在内存中的内存栈上的，数据本身的值就是存储在栈空间里面
引用数据类型
object。存储在内存栈上的是指针，指向内存堆中的对象本身。
基本数据类型和引用类型的区别主要在于基本数据类型是分配在栈上的，而引用类型是分配在堆上的
实现方法
序列反序列
JSON.parse(JSON.stringify())的原理就是将源数据序列化称JSON字符串，然后再解析JSON字符串，构造由字符串描述的JavaScript值或对象。当拷贝JSON字符串的时候会开辟一个新的内存地址，从而完全切断和源数据的联系。
优势：在开发中只考虑JSON对象(string, number, 对象, 数组, boolean或 null)的话用这个就可以了。
存在的问题：
- undefined、Symbol和function字段会丢失;
- RegExp和Error会变成空对象{};
- Date对象会变成字符串;
- NaN、Infinite和-Infinite都会变转成null;
- 如果是由构造函数实例化出来的函数，原型上的constructor也会消失
- 如果对包含循环引用的对象（对象之间相互引用，形成无限循环）执行此方法，会抛出错误
lodash的cloneDeep
- 优势：
- 可以拷贝循环引用（闭环）的对象;
- 可以拷贝ES6 引入的大量新的标准对象
/** `Object#toString` result references. */
var argsTag = '[object Arguments]',
arrayTag = '[object Array]',
boolTag = '[object Boolean]',
dateTag = '[object Date]',
errorTag = '[object Error]',
funcTag = '[object Function]',
mapTag = '[object Map]',
numberTag = '[object Number]',
objectTag = '[object Object]',
regexpTag = '[object RegExp]',
setTag = '[object Set]',
stringTag = '[object String]',
weakMapTag = '[object WeakMap]';
var arrayBufferTag = '[object ArrayBuffer]',
float32Tag = '[object Float32Array]',
float64Tag = '[object Float64Array]',
int8Tag = '[object Int8Array]',
int16Tag = '[object Int16Array]',
int32Tag = '[object Int32Array]',
uint8Tag = '[object Uint8Array]',
uint8ClampedTag = '[object Uint8ClampedArray]',
uint16Tag = '[object Uint16Array]',
uint32Tag = '[object Uint32Array]';
- 不足：
- 不能拷贝自身不可枚举类型的属性（enumerable）;
- 不能拷贝普通数组的属性，除了RegExp.exec()返回的数组(只能复制出input和index属性，groups也不能复制);
- 不能拷贝BOM对象以及DOM对象（用cloneDeepWith）
迭代递归
for...in循环是 遍历对象的每一个可枚举属性,包括原型链上面的可枚举属性,
Object.keys()只是遍历自身的可枚举属性,不可以遍历原型链上的可枚举属性.
而Object.getOwnPropertyNames()则是遍历自身所有属性（不论是否是可枚举的）,不包括原型链上面的。
- 拷贝原型：Object.create(proto, [propertiesObject])
- 拷贝不可枚举属性：Object.getOwnPropertyDescriptors(obj)
- 拷贝symbol属性：Object.getOwnPropertySymbols(obj)
- 拷贝循环引用属性： 借助hash表
function isObject(obj) {
if ((typeof (obj) == 'object' || typeof (obj) == 'function') && obj !== null) {
return true;
}
}
function deepClone(obj, hash = new WeakMap()) {
if (!isObject(obj)) {
return obj
}
let tempObj;
switch (obj.constructor) {
case RegExp:
tempObj = new RegExp(obj);
break;
case Date:
tempObj = new Date(obj);
break;
case Function:
case Error:
tempObj = obj;
break;
default:
// 查询哈希表，防止循环属性（环）
if (hash.has(obj)) {
return hash.get(obj);
}
// 初始化拷贝对象
tempObj = Array.isArray(obj) ? [] : {};
// 获取源对象所有属性描述符,获取到的value属于浅拷贝来的
let allDesc = Object.getOwnPropertyDescriptors(obj);
// 创建对象，拷贝原型，拷贝不可枚举属性
tempObj = Object.create(Object.getPrototypeOf(obj), allDesc);
// 获取原对象全部symbol属性
let symKeys = Object.getOwnPropertySymbols(obj);
// 拷贝symbol属性
if (symKeys.length > 0) {
symKeys.forEach(symKey => {
if (isObject(obj[symKey])) {
hash.set(obj, tempObj);
tempObj[symKey] = deepClone(obj[symKey], hash);
} else {
tempObj[symKey] = obj[symKey];
}
})
}
// 拷贝可枚举属性
Object.getOwnPropertyNames(obj).map(key => {
if (isObject(obj[key])) {
hash.set(obj, tempObj);
tempObj[key] = deepClone(obj[key], hash);
} else {
tempObj[key] = obj[key];
}
})
}
return tempObj;
}
let person2 = deepClone(person1);
console.log("person1:", person1);
console.log("person2:", person2);
function Person(name, age) {
this.name = name;
}
let sym = Symbol('我是一个Symbol');
Person.prototype = {
constructor: Person,
shape: 'circle', //设置原型上可枚举
[sym]: 'symbol' //设置原型上的 Symol 类型键
}
//设置原型上不可枚举
Object.defineProperty(Person.prototype, 'year', {
value: 55,
enumerable: false
});
var person1 = new Person("Lily");
// 设置自身子对象
person1.obj = {
name: '我是一个对象',
id: 1,
object: {
name: '子对象',
id: '20181215',
subObject: {
name: '子对象的子对象',
id: '18:37'
}
}
};
//设置自身不可枚举
Object.defineProperty(person1, 'year2', {
value: {
name: 'year2',
id: '2117'
},
enumerable: false,
writable: true,
configurable: true,
});
//设置自身 Symol 类型键
let sym2 = Symbol('我是一个Symbol');
let sym3 = Symbol('我是一个Symbol');
person1[sym2] = {
name: 'symbol2',
id: 'id123',
[sym3]: '内嵌symbol'
};
// 设置自身循环引用
person1.loopObj = person1;
let person2 = deepClone(person1);
// 修改person1的symbole属性
Object.getOwnPropertySymbols(person1).forEach(symKey => {
person1[symKey] = '新的symbol值'
})
// ----------------------------------------------
// 修改person1的不可枚举属性
Object.defineProperty(person1, 'year2', {
value: '新的不可枚举值',
});
// 或者
// person1.year2 = '新的不可枚举值'
console.log("person1.year2:", person1.year2);
// ----------------------------------------------
console.log("person1:", person1);
console.log("person2:", person2);
console.log("Person.prototype.isPrototypeOf(person2):", Person.prototype.isPrototypeOf(person2));
console.log("person1.year2===person2.year2:", person1.year2 === person2.year2)
console.log("person1[sym2]===person2[sym2]:", person1[sym2] === person2[sym2])
console.log("person1.obj.object.subObject===person2.obj.object.subObject:", person1.obj.object.subObject ===
person2.obj.object.subObject)
效率比较：
var x = {};
for (var i = 0; i < 1000; i++) {
x[i] = {};
for (var j = 0; j < 1000; j++) {
x[i][j] = Math.random();
}
}
var start = Date.now();
var y = clone(x);
console.log(Date.now() - start);
| 深复制方法 | JSON.parse | _.cloneDeep | deepClone |
|---|---|---|---|
| 耗时 | 654 | 213 | 893 |
总结：总的来说没有一个方法是放诸四海而皆准的，建议使用 lodash的cloneDeep，但是对于小程序来说还是大了点，所以我平常开发小程序就是用JSON.parse(JSON.stringify())。
