写给女朋友的中级前端面试秘籍（拿15k+Offer不难）

前端

2024-01-11 16:54:35

Flex布局

Flex布局是一种现代布局方式，可以轻松创建复杂、响应式的布局。它使用容器和项目的概念，容器定义了布局的整体结构，而项目则是容器中的元素。Flex布局的优势在于，它可以自动换行、对齐和分布项目，从而实现灵活的布局。

常用属性

flex-direction：定义主轴的方向，可以是row、column、row-reverse或column-reverse。
flex-wrap：定义是否换行，可以是nowrap、wrap或wrap-reverse。
justify-content：定义项目在主轴上的对齐方式，可以是flex-start、flex-end、center、space-between或space-around。
align-items：定义项目在交叉轴上的对齐方式，可以是flex-start、flex-end、center或stretch。
align-content：定义多行项目在交叉轴上的对齐方式，可以是flex-start、flex-end、center、space-between或space-around。

WeakMap

WeakMap是一种特殊的Map对象，它只能以复杂数据类型作为键，并且键值是弱引用。这意味着，当键值不再被任何其他变量引用时，它就会被垃圾回收。WeakMap的优势在于，它可以防止内存泄漏，因为键值不会阻止对象被垃圾回收。

常用方法

set(key, value)：设置键值对。
get(key)：获取键对应的值。
has(key)：检查键是否存在。
delete(key)：删除键值对。

深拷贝

深拷贝是指将一个对象的所有属性和嵌套对象都复制一份，这样修改副本不会影响原始对象。深拷贝通常需要借助递归实现，如果对象的值还是个对象，要进一步的深入拷贝，完全替换掉每一个复杂类型的引用。

实现方法

function deepCopy(obj) {
  if (typeof obj !== 'object' || obj === null) {
    return obj;
  }

  if (Array.isArray(obj)) {
    return obj.map(item => deepCopy(item));
  }

  const newObj = {};
  for (const key in obj) {
    newObj[key] = deepCopy(obj[key]);
  }

  return newObj;
}