前端面试题

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

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-formrules 属性,能否根据 element-ui 的功能给某个 el-form-item 设置为必填项?

不常见问题

答:两种方式:

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

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

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

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

vuex

如果使用 vuexgetter 是必须的吗?他有什么作用?

常见问题

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

在 action 中,可以修改 state 变量吗?

常见问题

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

追问:如何开启严格模式?

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

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

vue

作用在子组件上的 v-ifv-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 声明变量,而是使用 letconst

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 第二个回调。