前端面试题

发表于 分类于 本文字数： 3.3k 阅读时长 ≈ 3 分钟

自己出题，用来提问前端面试者

JS

求下列表达式值

常见问题，JS 语法糖

  • +true
  • +false
  • +"2"
  • +"0X3"

答：

  • 1
  • 0
  • 2
  • 3

element-ui

在 element-ui 中，el-table 如何简单的固定表头？

常见问题，日常开发会遇到

答： 设置 el-table 高度 height 属性

在 el-dialog 内再定义 el-dialog，即 el-dialog 嵌套，这样嵌套多层有没有问题？

常见问题，日常开发会遇到

答：可以多级嵌套，但子级 el-dialog 必须要设置 append-to-body 属性为 true ，否则遮罩层显示会有问题。

如果不设置 el-form 的 rules 属性，能否根据 element-ui 的功能给某个 el-form-item 设置为必填项？

不常见问题

答：两种方式：

  1. el-form-item 也可以单独设置 rules 属性
  2. 设置 el-form-item 的 required 属性为 true

el-date-picker 的 显示格式 和 绑定值格式 是否相同？如何设置？

常见问题，与后端交互必须会

答：可以不同也可以不同，:format 设置显示格式，:value-format 设置绑定值格式

vuex

如果使用 vuex，getter 是必须的吗？他有什么作用？

常见问题

答：不是，getter 相当于 store 的计算属性，也可以在组件内使用计算属性来代替。

在 action 中，可以修改 state 变量吗？

常见问题

答： 默认不开启严格模式的情况下可以，但是不提倡。

追问：如何开启严格模式？

不常见问题，如果项目代码很规范才会用到

答：创建 store 的时候传入 strict: true

vue

作用在子组件上的 v-if 与 v-show，值分别从 false 变为 true, 是否会触发子组件的 created 函数？

常见问题，封装组件必须要知道的

答：v-if 会，因为这个过程是销毁并重建组件；v-show 不会，只改变了 CSS 的 display 值

追问：如果初始状态都为 false，父组件初始化时会不会触发子组件的 created 函数？

常见问题，封装组件必须要知道的

答：v-show 会，v-show 的渲染是非惰性的；v-if 不会，v-if 的渲染是惰性的。

如果界面已绑定数组 strs，并且数组不为空，这种写法更新界面有没有问题：strs[0] = 'str'，如果有问题，怎么修改？

常见问题，vue 必须知道的坑

答： 不可以这样写，这样写界面不会刷新，这是 vue 底层的限制。修改为：

1
strs.splic(0, 1, 'str')

以下代码，mounted 函数中的赋值语句有没有问题？如果有，如何只修改 mounted 函数内容？

常见问题，vue 必须知道的坑

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<template>
  <span>{{ user.userName }}</span>
</template>

<script>
export default {
  data() {
    return {
      user: {},
    };
  },
  mounted() {
    this.user.userName = "test";
  },
};
</script>

答： 赋值语句改为：

1
this.$set(this.user,'userName','test')

或

1
Vue.set(this.user,'userName','test')

说说 v-model 绑定和 :value 取值的联系

不常见问题，日常开发不涉及

答：v-model 本质是一种语法糖，v-model 的写法与 :value + @input 是一样的

ES6

[…[1,2,3]] 表达式结果是什么？

ES6 常见写法，数组扩展

答：[1,2,3]

追问：下面代码输出结果是什么

常见问题，考察数组扩展 和 面向对象

1
2
3
const arr1=[1,2,3]
const arr2=[...[1,2,3]]
console.log(arr1==arr2)

答：false ，虽然数组内容相同，但 arr1 和 arr2 是两个对象

下面代码打印结果是什么？

不常见问题，变量解构赋值

1
2
3
4
let [x, y, ...z] = ['a'];
console.log(x)
console.log(y)
console.log(z)

答：

  • “a”
  • undefined
  • []

在网页开发中，下面语句会打印什么？

网页开发常见坑，学过 ES6 的 let 可避免。按 JS 开发规范，应避免使用 var 声明变量，而是使用 let 或 const

1
2
3
var name = 1
name += 1
console.log(name)

答："11"，因为 name 是浏览器保留字，值始终为字符串类型

追问：如果仍然以 name 命名，如何避免上面类型问题？

常见问题

答：使用 let 声明变量

下面两段代码中，toString 函数中的 this，分别指向什么？

常见问题，考察面向对象。写公共代码会遇到

1
2
3
4
5
6
7
function Point(x, y) {
  this.x = x;
  this.y = y;
}
Point.prototype.toString = function () {
  console.log(this)
};
1
2
3
4
5
6
7
8
9
10
class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  toString() {
    console.log(this)
  }
}

答：都指向 Point 类的实例对象

Promise 函数一般有两种调用方式，一种是 then 回调，一种是 async/await，这两种分别如何捕获异常？

then 回调在旧的写法中常见，async/await 在新写法中常见。日常简单使用不涉及，但如果要保证代码安全性，或者写公共代码要会

答： then 回调的方式，使用

1
func().then(value=>{},reason=>{})

或

1
func().then(value=>{}).catch(err=>{})

async/await 方式，使用

1
2
3
4
try{
  await func()
}
catch(err){}

追问：同时使用 await 和 then 回调有没有问题？如:

1
await Promise().then(value=>{})

如果使用 async/await，才提问。考察 await 和 Promise 的关系

答：可以，因为 then 函数的返回值也是 Promise。这就是 Promise 支持链式回调的原因

在 Promise 函数内，如果 resolve/reject 后没有立即 return，后面的代码会执行吗？

常见问题，提取公共代码会遇到，容易漏掉 return 造成潜在 bug

答： 会

追问：那么 then 回调函数和后面的代码执行顺序是什么样的？

不常见问题，日常如果出现这个问题，属于 bug

答： 先执行完 Promise 函数，执行完后再执行 then 回调，顺序与何时 resolve/reject 无关。

追问：如果执行完 resolve 后执行 reject，会进入 then 第一个回调还是第二个回调？先执行 reject 后执行 resolve 呢？

常见问题，主要考察 Promise 原理，但日常开发不会有这种写法

答： resolve 和 reject 都会改变 Promise 对象状态，但不可重复修改。因此先执行 resolve 进入 then 第一个回调，先执行 reject 进入 then 第二个回调。