2024年前端最新202404问题总结，前端开发岗还不会这些问题

最后

喜欢的话别忘了关注、点赞哦~

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

get(a) {

return this.regionRadio

},

set(newValue) {

this.regionRadio1 = newValue

}

}

},

问题2：在接口处赋值时不起作用

分析：

给地区默认值时，地区RegionArr是从RegionList中取出来的，因为RegionList是从接口取出，所以在data中为regionArr = regionList[0]赋值会提示regionList为空，刚开始想要计算属性，后来想到在接口取得数据后赋值，即this.regionArr = this.regionList[0].name

因为this.regionArr为一个所选地区的数组，所以里边的元素均为</el-radio :label=“item.name”>中的:label处绑定的值，此处为“华东，华南”等地名的Name值，当然也有可能是id为"01 02"等的值，所以要将regionList中的name值赋值给regionArr,达到赋初始值的目的

验证表单

---

项目：《华智数联官网-拟定方案模块》

时间： 2018年4月3日

场景：页面中有一个单选按钮是选择地区，要不就选择不限地区，要不就选择地区+城市，最后和表单中别的选项（日期、金额）等一起验证有无空项

问题1：验证地区处表单项是否完全

// 如果不限地区，则rFlag为0

if (this.regionRadio === 0) {

var rFlag = 0

} else {

// 如果选择地区，将region和city作为属性存入rFlag对象中

rFlag = {}

rFlag.region = this.regionArr

rFlag.city = this.cityArr || []

}

// console.log(typeof(rFlag.region));

if (rFlag !== 0 ||if ( rFlag.region === ‘’ && rFlag.city.length === 0 ) {

console.log(‘no’);

return false

} else {

console.log(‘yes’);

}

分析：选择地区后虽然 rFlag.region === ‘’ && rFlag.city.length === 0两条件都为false，但rFlag !== 0 也是成立的，所以还是会执行if语句，不会执行else语句，但并不能把rFlag !== 0 || rFlag.region === ‘’ && rFlag.city.length === 0改成rFlag !== 0 && rFlag.region === ‘’ && rFlag.city.length === 0，因为不选择地区的话rFlag 就为0

所以此处选择用if嵌套语句，

if{rFlag !== 0} {

if ( rFlag.region === ‘’ || rFlag.city.length === 0 ) {

// 只要地区和城市有一个没选都返回false

return false

} else {

// 或的反是与，此处意为两者都选后返回true

return

}

} else {

// rFlag = 0 即为地区不限

return true

}

问题2：与其他项一起验证时规则不正确

表单验证时一开始先判断单个未知选项（地区不限或选择地区)，再判断已知选项集(金额，终端等)，这时就会出现4种情况：

let regionFlag = this.handleRegion()//此函数检验地区选择是否正确

if (regionFlag) {// 如果选择了地区

// 判断已知选项集，只要有一个没填就显示错误

if (this.startDate == ‘’ || this.endDate == ‘’) {

console.log(‘请完善信息’)

} else {

// 都填了正确

todoSomething()

}

} else {//如果没有选择地区

if (this.startDate == ‘’ || this.endDate == ‘’) {

// 选项集也不完善就提示错误信息

console.log(‘请完善信息’)

} else {//选项集完全也提示错误信息

console.log(‘请完善信息’)

}

}

这样代码繁琐还不易懂，所以改为先判断已知选项集，再判断地区

if (this.startDate == ‘’ || this.endDate == ‘’) {//只要有一个没选就提示错误

console.log(‘请完善信息’)

} else {//如果都选了去判断地区

if (regionFlag) {

todoSomething()

} else {

console.log(‘请完善信息’)

}

}

遍历用户选中信息

---

项目：《华智数联官网-拟定方案模块》

时间： 2018年4月3日

场景： 把age:1,sex:male等用户选择的不确定信息显示在页面中，所以需要把用户选中的信息单独存起来再遍历

问题1：json格式为[age: 1, sex: male],需要分别把key与value显示在页面中，vue中可直接遍历key,value值，不需要把key遍历出来放到一个数组中循环，单独放到数组中导致了页面中先把key循环完再显示循环value，不是一对一的key与value

问题2: 页面使用v-for显示key与value时不成功，打印要循环的json发现此处是一个数组，并不是对象，所以不存在obj.key与obj.value

分析：给json赋的初始值是[]，所以json就是一个数组，应赋值为json:{}

问题3：给json存值,直接使用json[key]=val就可以，放在循环中依次把key:value存入json

问题4:遍历key值

for (keys in obj){

}

使用date方法时，看是否需要转换成对象

---

项目：《华智数联官网-拟定方案模块》

时间： 2018年4月3日

场景：把datePicker选择后的日期格式“Wed Apr 04 2018 17:35:07 GMT+0800 (中国标准时间)”转换成"2018/4/17"

问题：封装函数，用date参数接收，使用date.getFullYear等函数提示"date.getFullYear is not a function"

分析：不是一个函数，证明date不能使用这个函数，用typeof(date)发现结果是"string"，所以传过来的date并不是一个对象，一开始，datePicker中的日期是使用"startDate: new Date(),endDate: new Date(),"来赋的初始值，所以并没有什么问题，但当datePicker中的值发生变化后，返回的值类型也是一个string，所以需要转换成date对象

解决办法：

let myDate = new Date(date)

v-for的key属性

---

项目：《华智数联官网-拟定方案模块》

时间： 2018年4月4日

问题： 在使用v-for时给出警告"component lists rendered with v-for should have explicit keys. See https://vuejs.org/guide/list.html#key for more info."

分析：为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有的且唯一的 id。建议尽可能在使用 v-for 时提供 key，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。因为它是 Vue 识别节点的一个通用机制。

解决办法：

在jquery事件里调用event对象

---

项目：《云乐道运营后台-新建媒资-调取百度地图api返回关键字结果》

时间：2018年4月16日

问题：在事件里调用event对象，直接调用函数传递event参数，不起作用

问题代码：

$(“#model-input”).click(stop(e))

function stop(ev) {

console.log(111111111)

ev.stopPropagation()

}

分析：应该将函数调用语句写在回调函数里

$(“#model-input”).click(function(ev) {

stop(ev)

})

function stop(ev) {

console.log(111111111)

ev.stopPropagation()

}

相当于

$(“#model-input”).click(function(ev) {

ev.stopPropagation()

})

vuePress需要注意的问题

---

项目：《使用vuePress搭建个人博客》

时间： 2018年4月24-25日

问题1：侧边栏sidebar写成了slidebar

问题2： sidebar配置也是主题配置，应该写到themeConfig里边

问题3：.vuepress写到docs下，所有关于vuePress的配置

jquery的attr prop

---

最后

喜欢的话别忘了关注、点赞哦~

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】