学习前端面试知识（8）

  2024-8-7  打卡第八天  学习视频链接

浅拷贝和深拷贝有什么区别

• 数据类型：
  •  基本类型 栈内存中
  • 引用类型 堆内存中，变量，指向堆内存中实际对象的引用地址
• 浅拷贝
  •  复制数值，只拷贝一层，基本属性拷贝基本属性，引用类型拷贝内存地址
  • Object.assign
  • Array.prototype.slice
  • Array.prototype.concat
  • 扩展运算符
• 深拷贝
  •  开辟新的栈，两个对象的属性完全相同，对应不同的地址，修改一个对象属性不会改变
  • _.cloneDeep() loadsh深拷贝函数
  • jQuery.extend()
  • JSON.stringify() 存在弊端，会忽略一些undefined symbol 函数
  • 手写循环递归，层层拷贝
• 区别
  •  浅拷贝只复制属性指向某个对象的指针，不复制对象本身，新旧对象共用内存，修改对象属性会影响原对象。深拷贝创建一摸一样的对象，新对象不共享内存，修改新对象不影响原对象。

虚拟DOM

• 什么是虚拟dom
  •  用对象的属性描述节点，映射到真实DOM上
  •  表现为object对象，包含标签名，属性，children
  • 虚 拟dom与真实节点一一对应
• 为什么需要虚拟dom
  • dom操作容易引起性能问题，操作dom可能造成页面卡顿，影响用户体验。
    • 比如现在需要更新10个dom节点，浏览器没有计算数量，接收到一个就会开始更新，最终会执行10次流程。
    • 虚拟dom中，通过vnode，同样是10个节点，会通过diff算法保存到js对象中，最终将这个js对象一次性的attach到dom中，避免无意义的计算，提升性能。
    • 虚拟dom抽象了原本的渲染过程，实现跨平台能力，这种跨平台能力不仅仅局限于浏览器，还包含安卓，ios，小程序等GUI

PWA

渐进式网页应用

• 渐进式，可响应式，可离线，实现类似app的交互，及时更新，安全性，可被搜索引擎检索，可安装，可链接等
• PWA并不特指某项技术，而是应用了多项技术的webapp
• 包含的核心技术包括app manifest和service worker和webpush

Promise的值穿透是什么？

• .then和.catch希望传入的都是函数，传入非函数就会发生值穿透
• 当传入的不是函数的时候，其中的Promise data保存的是上一次的数据