网站开发设计师岗位职责,做网站哪家公司,筑方装饰口碑怎么样,wap建站系统具体可见https://github.com/febobo/web-interview 4.浅拷贝与深拷贝
①栈内存与堆内存
栈内存#xff08;Stack Memory#xff09;
栈内存用于存储基本类型的变量和引用类型的变量引用#xff08;即指向堆内存中实际数据的指针#xff09;。当一个函数被调用时#xf… 具体可见https://github.com/febobo/web-interview 4.浅拷贝与深拷贝
①栈内存与堆内存
栈内存Stack Memory
栈内存用于存储基本类型的变量和引用类型的变量引用即指向堆内存中实际数据的指针。当一个函数被调用时会创建一个称为“执行上下文”的栈帧其中包含函数的参数、局部变量和返回地址。栈内存是一个后进先出LIFO的数据结构它在程序执行期间动态地增加和减少内存空间。变量在栈内存中的分配是自动的当变量超出作用域时会被自动销毁。
//1.基本数据
整数例如let num 10;)
浮点数例如let floatNum 3.14;)
布尔值例如let isTrue true;)
字符串例如let str Hello;)
//2.函数调用
function add(a, b) {return a b;
}let result add(5, 3); // 函数调用会在栈内存中创建执行上下文
基本数据类型和函数调用的数据存储在栈内存中。 【具体例子】
let a 10;
let b a; // 赋值操作
b 20;
console.log(a); // 10值堆内存Heap Memory
堆内存用于存储引用类型的数据如对象和数组。在堆内存中数据的大小不固定可以动态地分配和释放内存。当在栈内存中创建一个引用类型的变量时实际的数据存储在堆内存中而栈内存存储的是对数据的引用。堆内存的数据需要手动的分配和释放js引擎通过垃圾回收机制来自动管理堆内存中不在使用的数据以防止内存泄露。
//1.对象
let person {name: Alice,age: 30
};
//2.数组
let numbers [1, 2, 3, 4, 5];
//3.动态分配的对象
let user null; // 声明一个变量
user {name: Bob,age: 25
};
//4.使用构造函数创建对象
function Person(name, age) {this.name name;this.age age;
}let person1 new Person(Charlie, 35);对象、数组和动态分配的对象存储在堆内存中。 【具体例子】
var obj1 {}
var obj2 obj1;
obj2.name wow;
console.log(obj1.name); // wow【总结】
栈内存用于存储基本类型的变量和引用类型的变量的引用具有自动分配和释放内存的特性。堆内存用于存储引用类型的数据具有动态分配和手动释放内存的特性。
②浅拷贝
浅拷贝指的是创建新的数据这个数据是对原数据属性值的精准拷贝。当属性是基本类型则拷贝的是基本类型的值如果是引用类型则拷贝的是内存地址。即浅拷贝是拷贝一层深层次的引用类型则是共享地址。
//例1
let obj1 { name: Alice, age: [30,21] };
let shallowCopy Object.assign({}, obj1);shallowCopy.age[0] 40;
console.log(obj1.age); // 输出 40原始对象改变shallowCopy.name Bob;
console.log(obj1.name); // 输出 Alice原始对象不会受到影响在例1中由于属性name是基本类型所以shallowCopy直接拷贝的数据对基本数据值修改不会影响原始数据而age是数组则拷贝的是数组的地址所以对age进行修改则会影响到原始数据。
在JavaScript中存在浅拷贝的现象有 Object.assign Array.prototype.slice(), Array.prototype.concat() 使用拓展运算符实现的复制
Object.assign
Object.assign()静态方法将一个或者多个源对象中所有可枚举的自有属性复制到目标对象并返回修改后的目标对象。 //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({}, obj); //浅拷贝
Array.prototype.concat()
concat() 方法用于合并两个或多个数组。此方法不会更改现有数组而是返回一个新数组。 //Array.concat
const Arr [One, Two, Three]
const fxArrs1 Arr.concat()
fxArrs1[1] hello;
console.log(Arr) // [One, Two, Three]
console.log(fxArrs1) // [One, hello, Three]拓展运算符
扩展运算符spread 是三个点…,它如同 rest 运算将一个数组转为用逗号分割的参数序列。 const fxArr [One, Two, Three]
const fxArrs [...fxArr]
fxArrs[1] love;
console.log(fxArr) // [One, Two, Three]
console.log(fxArrs) // [One, love, Three]③深拷贝
深拷贝开辟一个新的栈两个对象属性完全相同但是对应两个不同的地址对一个对象进行修改不会影响到另一个对象。
// 使用 Lodash 库中的深拷贝方法
//例1
const _ require(lodash);let obj1 { name: Alice, nestedObj: { key: value } };
let deepCopy _.cloneDeep(obj1);deepCopy.nestedObj.key new value;
console.log(obj1.nestedObj.key); // 输出 value原始对象不受影响JS中常见的深拷贝方式有 _.cloneDeep() jQuery.extend() JSON.stringify() 手写循环递归
_.cloneDeep()
_.cloneDeep是lodash库中一个用于实现深拷贝方法它会递归地赋值一个对象或数组及其所有嵌套对象和数组从而创建一个完全独立的副本。 //见例1jQuery.extend()
在 jQuery 中可以使用 jQuery.extend() 方法来实现对象的深拷贝。这个方法可以用于将一个或多个对象的内容合并到目标对象中如果目标对象中已经存在相同的属性则会被覆盖在某种程度上也可以实现深拷贝。当你将一个空对象作为目标对象并将需要复制的对象作为参数传递给 jQuery.extend() 方法时它会创建目标对象的一个深层副本。 let obj1 { name: Alice, nestedObj: { key: value }
};let deepCopy $.extend(true, {}, obj1);deepCopy.nestedObj.key new value;
console.log(obj1.nestedObj.key); // 输出 value原始对象不受影响JSON.stringify()
JSON.stringify() 方法将一个 JavaScript 对象或值转换为 JSON 字符串如果指定了一个 replacer 函数则可以选择性地替换值或者指定的 replacer 是数组则可选择性地仅包含数组指定的属性。 const obj {name:{key : a},name1: undefined,name3: function () { },name4: Symbol(A)}const obj2 JSON.parse(JSON.stringify(obj));obj.name.key bconsole.log(obj2); // 输出a但是这种方式存在弊端会忽略undefined、symbol和函数
循环递归 function deepClone(obj, hash new WeakMap()) {if (obj null) return obj; // 如果是null或者undefined我就不进行拷贝操作if (obj instanceof Date) return new Date(obj);if (obj instanceof RegExp) return new RegExp(obj);// 可能是对象或者普通的值 如果是函数的话是不需要深拷贝if (typeof obj ! object) return obj;// 是对象的话就要进行深拷贝if (hash.get(obj)) return hash.get(obj);let cloneObj new obj.constructor();// 找到的是所属类原型上的constructor,而原型上的 constructor指向的是当前类本身hash.set(obj, cloneObj);for (let key in obj) {if (obj.hasOwnProperty(key)) {// 实现一个递归拷贝cloneObj[key] deepClone(obj[key], hash);}}return cloneObj;}const obj {name: {key: a},name1: undefined,name3: function () { },name4: Symbol(A)}const obj2 deepClone(obj)obj2.name.key helloconsole.log(obj); //输出a总结 前提为拷贝类型为引用类型的情况下
浅拷贝是拷贝一层属性为对象时浅拷贝是复制两个对象指向同一个地址深拷贝是递归拷贝深层次属性为对象时深拷贝是新开栈两个对象指向不同的地址
