李钟意讲前端

外观

咨询/接单/付费bug修复/学习交流群

2023-06-22 前端面试题 ​

1. 自我介绍一下 ​

（我是谁） （我工作多久了） （我的工作经历） （我的技术栈是什么） （我觉得做得最好的项目是哪一个） 你好我是李xxx，5 年的前端开发经验，我的技术栈是 vue 和 react， 主要使用的是 vue。

2. css 盒子模型 ​

盒模型是由content，padding，margin，border组成的：分别有标准盒模型和怪异盒模型
标准盒模型：
标准盒模型的宽高是取决于content的宽高和padding跟border

怪异盒模型：
这个模型的宽高包含了content，padding，border，比如有一个元素的宽度是200px，那么这个200px的容器就包含了content的宽度和设置padding和border

3. 给定下面代码，如何实现 child 水平居中、垂直居中 ​

html
<div class="parent">
  <div class="child"></div>
</div>
<style>
  1、使用 flex 的方法 .parent {
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    height: 100%; /* 父容器需要有高度 */
  }
  2、使用定位拉回的方法 .parent {
    position: relative; /* 父元素需要相对定位 */
    height: 100%; /* 父容器需要有高度 */
  }

  .child {
    position: absolute; /* 子元素需要绝对定位 */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 使用 transform 对元素进行偏移 */
  }
  3、使用 CSS Grid 的方法 .parent {
    display: grid;
    place-items: center; /* place-items 是 align-items 和 justify-items 的简写 */
    height: 100%;
  }
  4、使用 CSS 表格布局的方法 .parent {
    display: table;
    width: 100%;
    height: 100%;
    text-align: center;
  }

  .child {
    display: table-cell;
    vertical-align: middle;
  }
  5、使用行内块和文本居中的方法 .parent {
    text-align: center; /* 文本水平居中 */
    line-height: 100px; /* 这个值需要等于.parent的高度 */
  }

  .child {
    display: inline-block; /* 设置为行内块 */
    vertical-align: middle; /* 让元素垂直居中 */
  }
</style>

4. js 数据类型都有哪些 ​

基本数据类型： 1、Number： 用于表示整数和浮点数，如：123, 3.14。 2、String： 用于表示文本数据，如："Hello World"。 3、Boolean： 有两个值，true 或 false。 4、Null： 只有一个值，null。 5、Undefined： 只有一个值，undefined。 6、Symbol（ES6 新增）： 产生一个唯一的值，主要用于对象的属性名，防止命名冲突。 7、BigInt（ES2020 新增）： 可以安全地存储和操作大整数，甚至超过 Number 能够表示的安全整数范围

复杂数据类型： 1、Array 数组 ：数组是一个可以存储多个值的数据类型。这些值可以是基本数据类型，也可以是复杂数据类型。在数组中，每个值都有一个索引，我们可以通过索引来访问或修改数组中的值。

2、Object 对象：对象是一种可以包含多个键值对的数据类型。每个键值对由一个键和一个值组成，键通常是字符串，值可以是任何数据类型。我们可以通过键来访问或修改对象中的值。

3、Function 函数：函数是一段可执行的代码，它可以接受输入参数，并返回一个结果。在 JavaScript 中，函数本身也是一种数据类型，我们可以将函数赋值给变量，也可以作为参数传递给其他函数。

4、Set 集合：集合是一种可以存储多个唯一值的数据类型。在集合中，每个值只能出现一次，重复的值会被忽略。

5、Map 映射：映射是一种可以存储键值对的数据类型，与对象类似，但键可以是任何数据类型。

5. vue2 生命周期描述一下都有哪些钩子 ​

1、beforeCreate：这个钩子在实例初始化之后被调用，创建实例之前执行的钩子事件

2、created：创建实例完成后执行的钩子事件

3、beforeMount：将编译完成的 html 挂载到对应的虚拟 dom 时触发的钩子 此时页面还没有内容

4、mounted：实例被挂载后调用，创建 vm.$el 并替换 el

5、beforeUpdate：更新之前执行的钩子，发生在虚拟 DOM 重新渲染和打补丁之前。你可以在此钩子中进一步地更改状态，这不会触发附加的重新渲染过程。

6、updated：更新之后执行的钩子，组件 DOM 已经更新，现在可以执行依赖于 DOM 的操作。

7、beforeDestroy：实例销毁之前执行的钩子

8、destroyed：实例销毁完成执行的钩子

6. vue2 v-if 和 v-show 的区别 ​

v-if：当条件为假时，该元素不会被渲染并且从 DOM 中删除，而当条件为真时，该元素会被渲染并插入到 DOM 中。

v-show：是在元素上应用 CSS 样式 display: none，当条件为假时，该元素会被隐藏但仍然存在于 DOM 中，而当条件为真时，该元素会显示出来。