手机建立网站软件,设计网站的管理系统,网页设计作品分析案例,中装建设网站目录
1、JavaScript 中存在两⼤数据类型#xff1a;
2、 浅拷贝方法#xff1a;
2.1 Object.assign 2.2 slice()
2.3 concat() 2.4 拓展运算符 3、深拷贝方法 3.1 _.cloneDeep() 3.2 jQuery.extend() 3.3 JSON.stringify() 3.4 循环递归
4、浅拷贝和深拷贝的…
目录
1、JavaScript 中存在两⼤数据类型
2、 浅拷贝方法
2.1 Object.assign 2.2 slice()
2.3 concat() 2.4 拓展运算符 3、深拷贝方法 3.1 _.cloneDeep() 3.2 jQuery.extend() 3.3 JSON.stringify() 3.4 循环递归
4、浅拷贝和深拷贝的区别 1、JavaScript 中存在两⼤数据类型 • 基本类型 • 引⽤类型 基本类型数据保存在在栈内存中 引⽤类型数据保存在堆内存中引⽤数据类型的变量是⼀个指向堆内存中实际对象的引⽤存在栈中 2、 浅拷贝方法 在 JavaScript 中存在浅拷⻉的现象有 • Object.assign • Array.prototype.slice() , Array.prototype.concat() • 使⽤拓展运算符实现的复制 function shallowClone(obj) { const newObj {}; for(let prop in obj) { if(obj.hasOwnProperty(prop)){ // 仅检查对象自身是否包含指定属性不追溯原型链newObj[prop] obj[prop]; } } return newObj;
}
2.1 Object.assign var obj { age: 18, nature: [smart, good], names: { name1: fx, name2: xka }, love: function () { console.log(fx is a great girl) }
}
var newObj Object.assign({}, fxObj); 2.2 slice() const fxArr [One, Two, Three]
const fxArrs fxArr.slice(0)
fxArrs[1] love;
console.log(fxArr) // [One, Two, Three]
console.log(fxArrs) // [One, love, Three] 2.3 concat() const fxArr [One, Two, Three]
const fxArrs fxArr.concat()
fxArrs[1] love;
console.log(fxArr) // [One, Two, Three]
console.log(fxArrs) // [One, love, Three] 2.4 拓展运算符 const fxArr [One, Two, Three]
const fxArrs [...fxArr]
fxArrs[1] love;
console.log(fxArr) // [One, Two, Three]
console.log(fxArrs) // [One, love, Three] 3、深拷贝方法 深拷⻉开辟⼀个新的栈两个对象属完成相同但是对应两个不同的地址修改⼀个对象的属性不 会改变另⼀个对象的属性 常⻅的深拷⻉⽅式有 • _.cloneDeep() • jQuery.extend() • JSON.stringify() • ⼿写循环递归 3.1 _.cloneDeep() const _ require(lodash);
const obj1 { a: 1, b: { f: { g: 1 } }, c: [1, 2, 3]
};
const obj2 _.cloneDeep(obj1);
console.log(obj1.b.f obj2.b.f);// false 3.2 jQuery.extend() const
$ require(jquery);
const obj1 { a: 1, b: { f: { g: 1 } }, c: [1, 2, 3]
};
const obj2 $
.extend(true, {}, obj1);
console.log(obj1.b.f obj2.b.f); // false 3.3 JSON.stringify() const obj2JSON.parse(JSON.stringify(obj1));// 但是这种⽅式存在弊端会忽略 undefined 、 symbol 和 函数const obj { name: A, name1: undefined, name3: function() {}, name4: Symbol(A)
}
const obj2 JSON.parse(JSON.stringify(obj));
console.log(obj2); // {name: A} 但有局限无法实现对象中方法的深拷贝、值为undefined的key等。 // 无法对 对象中的方法 进行深拷贝
const obj { fn: () console.log(test) };
const copy JSON.parse(JSON.stringify(obj)); // { }// undefined 和 Symbol 类型属性会消失
// NaN 和 Infinity 会被转为 null
const obj { a: undefined, b: Symbol(), c: NaN };
const copy JSON.parse(JSON.stringify(obj)); // { c: null } 3.4 循环递归 思路步骤 处理基本值当传入值为null或非object类型时直接返回原值。不拷贝对基本类型直接返回引用类型才进行拷贝操作检查循环引用用WeakMap缓存已拷贝对象遇到直接返回特殊对象处理单独拷贝日期和正则对象初始化容器区分数组和普通对象创建空结构递归拷贝属性遍历每个属性并递归调用自身 // 使用 WeakMap 存储已拷贝对象遇到重复引用直接返回 // hash.has(obj) 是哈希表结构中用于检测键是否存在的核心方法 // hash.get(obj) 是哈希表结构中通过键获取对应值的核心操作 // hash.set(obj, clone) 是哈希表存储键值对的核心操作 // 仅检查对象自身是否包含指定属性不追溯原型链 function deepClone(obj, hash new WeakMap()) {// 基础类型直接返回if (obj null || typeof obj ! object) return obj; // 当传入值为null或非object类型时直接返回原值// 用WeakMap缓存已拷贝对象遇到直接返回if (hash.has(obj)) return hash.get(obj); // 处理循环引用// 特殊对象处理if (obj instanceof Date) return new Date(obj);if (obj instanceof RegExp) return new RegExp(obj);// 初始化容器const clone Array.isArray(obj) ? [] : {};hash.set(obj, clone);// 递归拷贝for (let key in obj) {if (obj.hasOwnProperty(key)) {clone[key] deepClone(obj[key], hash);}}return clone;
} 4、浅拷贝和深拷贝的区别 前提为拷⻉类型为引⽤类型的情况下 • 浅拷⻉是拷⻉⼀层属性为对象时浅拷⻉是复制两个对象指向同⼀个地址 • 深拷⻉是递归拷⻉深层次属性为对象时深拷⻉是新开栈两个对象指向不同的地址 声明变量时 ◦ 简单类型的值存放在栈中在栈中存放的是对应的值 ◦ 引⽤类型对应的值存储在堆中在栈中存放的是指向堆内存的地址 赋值变量时 ◦ 简单类型赋值是⽣成相同的值两个对象对应不同的地址 ◦ 复杂类型赋值是将保存对象的内存地址赋值给另⼀个变量。也就是两个变量指向堆内存中同⼀个对象
