手机版自适应网站怎么做佛山网站优化
目录
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 obj2=JSON.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、浅拷贝和深拷贝的区别
前提为拷⻉类型为引⽤类型的情况下：
• 浅拷⻉是拷⻉⼀层，属性为对象时，浅拷⻉是复制，两个对象指向同⼀个地址
• 深拷⻉是递归拷⻉深层次，属性为对象时，深拷⻉是新开栈，两个对象指向不同的地址
声明变量时：
◦ 简单类型的值存放在栈中，在栈中存放的是对应的值
◦ 引⽤类型对应的值存储在堆中，在栈中存放的是指向堆内存的地址
赋值变量时：
◦ 简单类型赋值，是⽣成相同的值，两个对象对应不同的地址
◦ 复杂类型赋值，是将保存对象的内存地址赋值给另⼀个变量。也就是两个变量指向堆内存中同⼀个对象