初级前端的面经
2021-03-13 本文已影响0人
二荣xxx
初级前端的面经
一、函数节流
通俗来说：用户频繁多次点击只触发一次
let cd = false
function fn(){}
Button.onclick=function(){
if(cd){
//
}else{
fn()
cd = true
let timerId=setTimeout(()=>{
cd = false
},3000)
}
}
二、函数防抖
通俗来说：将多次请求合并一起触发
let timerId = null
Button.onclick=function fn(){
if(timerId){
window.clearTimeout(timerId)
}else{
timerId = setTimeout(()=>{
fn(){}
timerId=null
},5000)
}
}
三、手写AJAX
复杂版
const request = XMLHttpRequest()
request.open = ('GET','/xxx')
const request.onreadystatechange=()=>{
if(request.readyState === 4 && request.statue >= 200 && request.state <300){
console.log('请求成功')
}else{
console.log('请求失败')
}
request.send()
}
简化版
const request = XMLHttpRequest()
request.open('GET','/XXX')
request.onload =()=>{console.log('请求成功')}
rrequest.send()
四、ES6语法
-
问：你所知道的ES6新特性有哪些
答：我所知道的有let、const、析构赋值，箭头函数、promise -
问：let和var的区别
答：var 存在变量提升，let没有
var a=1
let b=2
console.log(a) //1
console.log(b) //2
将变量声明和打印交换位置
console.log(a) //undefined
console.log(b) //报错
var a=1
let b=2
-
问：const和let的区别
答：let声明的变量可以改变，const声明的值不能改变 -
问：说一下你对Promise的理解
答：promise是解决异步问题避免回调地狱的统一解决方案
promise对象接受两个参数，一个resolve和一个reject，成功调用resolve，失败调用reject
function fn(){
return new promise =(resolve,reject)=>{
成功调用resolve(数据)
失败调用reject(error)
}
}
- 问：.then的使用方法
答：promise实例有一个then方法，也就是说then方法是定义在promise原型对象上的，then方法可以接受两个函数作为参数，then方法返回的是一个新的promise，可以链式使用the方法
fn().then(success,fail).then(success2,fail2)
-
问：promise.catch和try catch的区别
答：promise.catch是在promise失败之后捕获失败原因，js规定在promise里不能使用try catch来捕获异常 -
问：promise.property.all的用法
答：promise.all接受一组promise，全部执行成功之后，返回一个新的promise，否则判定为失败
let p = promise.all[
promise.resolve(),
promise2.resolve()
]
- 问：promise.property.race的用法
答：promise.race接受一组promise，任意一个执行成功，都会返回一个新的promise，否则判定为失败
let p = promise.race[
promise.resolve()
promise.resolve()
]
五、单位
- 问：em和rem的区别
答：
em：根据父元素继承大小
rem：支持IE9及以上，相对于根元素html的字体大小，不容易造成字体大小混乱，较安全
六、vuex
- 问：对Vuex的理解
答：VueX是Vue项目的全局状态管理工具，
它的几个核心概念是：store（存储数据的容器）、state（状态--类似于vue2的data）、mutation（同步改变状态的方法）、getter（store的计算属性）、action（异步改变状态的方法）、module（将store分割成模块，每个模块都有自己的核心属性）
const moduleA = {
states : ()=>({ ... }),
mutations : { ... },
actions : { ... },
getters : { ... }
}
const moduleB = {
states : ()=({ ... }),
mutations : { ... },
actions : { ... },
getter : { ... }
}
const store = new Vuex.store({
modules:{
a : moduleA ,
b : moduleB
}
})
store.state.a // moduleA的状态
store.state.b // moduleB的状态
-
问：action和mutation的区别
Action 类似于 mutation，不同在于：
Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作
mutation 必须同步执行 -
问：什么Vue修改数据会直接更新到视图上
答：Vue会对data里声明的属性通过defineProperty方法属性修改为getter和setter类型，Vue通过getter和setter类型监听数据的读写，每当数据变动时，Vue就会重新渲染组件
八：vue-router
- 问：你是怎么用的Vue-router
答：Vue-router有三个核心概念，分别是：路由懒加载、导航守卫、history模式
比较常用的API有：
router-link
router-view
$route.params //用来获取导航的变化
router.replace // 替换掉当前的 history 记录
router.push //当用户点击浏览器后退按钮时，则回到之前的 URL
八、HTML
- 问：怎么理解HTML语义化
答：HTML语义化就是用合适的标签来表示相应的内容，比如：我有一个页面，我会用header标签来写抬头，footer标签来写页脚，边部导航用aside标签，文章用artical，段落用section，这样写的好处是增强代码的可读性，和搜索引擎优化
