技术题库

悠久商服 - 前端面试

面试时间：2023-03-18

公司全称：广州悠久商服科技有限公司

公司位置：广州天河区棠下悠久商服

面试题

CSS中哪些属性可继承？
查看答案

字体属性：font 系列（font-style、font-size、font-family 等）

文本属性：color、line-height、text-align、text-indent

可见性属性：visibility

列表属性：list-style 系列（list-style-type、list-style-position、list-style-image）

注：继承中特殊的 a 标签颜色不会继承，h1~h6 标签的字体大小不会继承

CSS 选择器有哪些？
查看答案

分为五大类：元素选择器、关系选择器、属性选择器、伪类选择器、伪元素选择器。

一、元素选择器：

  1. 通配符选择器：* {}

选中页面中的所有元素（会影响浏览器的性能）

  1. 标签选择器：标签名 {}

  2. id选择器：#id {}

  3. 类选择器：class {}

  4. 并集选择器：选择器1, 选择器2, 选择器3, ..., 选择器n {}

几个选择器选中的元素共用一套样式

  1. 交集选择器：选择器1.选择器2 {}

二、关系选择器：

  1. 子代选择器：父级 > 子级 {}

  2. 后代选择器（空格隔开）：祖先元素 后代元素 {}

  3. 相邻选择器：.pre + .next

选择紧接在 .pre 元素之后的 .next 元素，并且二者具有相同的父级元素。

  1. 兄弟选择器：.pre ~ .next

选择 .pre 元素后面所有的 .next 元素。

三、属性选择器：

  1. [name] 具有 name 属性的元素

  2. [attr='val'] 具有 attr 属性，且属性值完全等于 val 的元素

  3. [attr^='val'] 具有 attr 属性，且属性值以 val 开头。可以匹配 attr='val'、attr='value'

  4. [attr$='val'] 具有 attr 属性，且属性值以 val 结尾。可以匹配 attr='val'、attr='a val'、attr='a-val'

  5. [attr*='val'] 具有 attr 属性，且属性值包含 val。可以匹配 attr='val'、attr='a val'、attr='a-val'、attr='value'

  6. [attr~='val'] 具有 attr 属性，且属性值包含 val（val 必须单独存在，不能是某个词中的一部分）。可以匹配 attr='val'、attr='a val'，但不能匹配 attr='a-val'、attr='value'

  7. [attr|='val'] 具有 attr 属性，且属性值完全等于 val，或者以 val 开头用 - 连接的词。可以匹配 attr='val'、attr='val-all'，但不能匹配 attr='value'、attr='val all'

四、伪类选择器：

  1. :root 只选中 HTML 元素

  2. :focus 元素获取焦点时得样式

  3. :not(选择器) 选择不含有某个选择器得元素

  4. :first-child 选中第一个子元素

  5. :first-of-type 选中第一个指定的元素

:first-child 与 :first-of-type 的区别：p:first-child 选中 p 标签中第一个子元素，p:first-of-type 选中第一个 p 元素。

  1. :last-child 选中最后一个子元素

  2. :last-of-type 选中最后一个指定的元素

  3. :nth-child(n) 选中第 n 个子元素

  4. :nth-of-type(n) 选中第 n 个指定的元素

  • :nth-child() 和 :nth-of-type() 可以选择奇数、偶数元素
  • odd 选中奇数位置的元素
  • even 选中偶数位置的元素
  • 2n-1 选中奇数位置的元素
  • 2n 选中偶数位置的元素

  1. :only-child() 选中父元素中的子元素，且父元素中必须有且只有一个子元素

  2. :only-of-type() 选中父元素中的某个元素，且父元素中必须有且只有一个该元素

  3. :empty 选中没有任何子元素（元素内不能有任何内容）的空元素

  4. :checked 选中页面中被选中的单选框或复选框

  5. disabled 选中页面中处于禁用状态的元素

  6. :enabled 选中页面中处于可用状态的元素

  7. :target 选中被激活的锚点

五、伪元素选择器

  1. :first-letter 给元素的第一个字母添加样式

  2. :first-line 给元素第一行添加样式

  3. :before 在内容的前面插入伪元素。必须要与 content 一起使用，ontent 的值可以为空

  4. :after 在内容的后面插入伪元素。必须要与 content 一起使用，content 的值可以为空

CSS 水平居中的方式
查看答案

  1. margin: 0 auto;

  2. 子绝父相 + left 左偏移 + margin-left 回退。具体实现：子元素绝对定位 position: absolute;，父元素相对定位 position: reactive;，子元素 left: 50%; 且 margin-left: 自身宽度一半的负值

  3. 子绝父相 + left 左偏移 + transform: translateX()。具体实现： 子元素绝对定位 position: absolute;，父元素相对定位 position: reactive;，子元素 left: 50%; 且 transform: translateX(50%);

  4. text-algin: center; + display: inline-block;。具体实现：父元素 text-align: center;，子元素 display: inline-block;

  5. display: flex; + justify-content: center;

对 CSS 盒模型的理解
查看答案

所有 HTML 元素都可以看作一个盒子，它的组成包括：content、padding、border、margin。

computed 与 watch 的区别
查看答案

computed 计算属性基于 data 中声明过或 props 传递过来的数据通过计算得到一个新值，新值会根据已知值得变化而变化，且 computed 具有缓存功能，多次使用同一个 computed 计算得属性值，只会执行一次 computed 内定义的 function，直到依赖项改变才会重新计算。

watch 监听属性可以用来监听 data、props、computed 内的数据变化，然后执行某些具体的业务操作，当属性变化时，监听的的回调函数会自动执行。

对于多个监听对象要进行同一操作，watch 需要监听多次，而 computed 只需要执行一次。 在执行异步或开销比较大的操作时，watch 方式更合适。

提供数组去重的 3 种方式
查看答案

  1. 双重遍历 + splice() 去重

  2. filter() + indexOf() 去重

  3. reduce() + includes() 去重

  4. new Set() 去重

原型和原型链的理解
查看答案

原型：对象创建时，会关联另一个对象，这个对象就是原型对象，创建的对象会继承原型对象的属性和方法。

原型链：当访问对象的某个属性或者方法时，如果在对象自身上找不到，就会到对象的原型上查找，如果也找不到，就会到原型的原型上查找，一直找到顶层为止，就构成了一条链路，这就是原型链。

this 指向的几种情况
查看答案

全局环境中定义的函数，this 指向 window。

new 关键字创建的实例对象，this 指向这个实例对象。

如果使用 apply()、call()、bind() 进行借调操作，this 指向这些方法第一个参数所绑定的对象。

箭头函数由于没有 this，它内部的 this 指向外层函数的 this，如果外层函数也没有 this，逐层向上找，直到 window 对象为止。

JS 继承的理解
查看答案

JS 继承：子类从父类中获取属性和方法。

笔试题

new 的过程
查看答案

  1. 创建一个空对象；

  2. 将空对象的 __proto__ 属性指向构造函数的 prototype 属性；

  3. 调用构造函数并改变 this 指向，让它指向我们新创建的这个空对象；

  4. 返回这个空对象。

JS 判断数据类型的方法有哪些？
查看答案

  1. typeof。

  2. instanceof。

  3. Object.prototype.toString.call()。

Contributors: tanqin