2021年前端热门面试题

Posted syf976561581

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了2021年前端热门面试题相关的知识,希望对你有一定的参考价值。

  1. 什么是MVVM?

他是一种模式,用来简化用户界面的 本质是model 数据 view 视图viewmodel 视图和数据的桥梁 的简写

  1. 请详细说下你对vue生命周期的理解?

beforeCreate() 创建前 created()创建完成
beforeMount() 挂载前 mounted()挂载完成
beforeUpdate() 更新前 updated()更新完成
beforeDestroy() 销毁前 destroyed()销毁完成

  1. 说明原生Ajax的实现步骤?并解释步骤的含义?
创建对象
Var ajax=new XMLHttpRequest()
监听状态
ajax.onreadystatechange=function(){
if(ajax.readyState=4&& ajax.Status==200){
console.log(conspones)
}
}
设置请求方式和请求地址
ajax.open(get,1.php)
发送请求
ajax.send()
  1. vuex是什么?怎么使用?哪种功能场景使用它?

vuex是一种集中式状态管理模式

应用场景: 单页面应用中,组件之间的状态,音乐播放器,加入购物车,注册登录

  1. 组件中 data computed 和 watch的区别?
  • data:Vue 实例的数据对象。Vue 将会递归将 data 的 property 转换为 getter/setter,从而让 data 的 property 能够响应数据变化。对象必须是纯粹的对象 (含有零个或多个的 key/value 对)
  • Computed:是一个计算属性具有依赖性只执行一次就拿出来调用下一次获取computed的值时才会重新计算
  • Watch: 是调用一次执行一次 如果监听数据变化都会执行回调
  1. vue 中遍历数据为什么要绑定key值?绑定key值能否使用数组索引?说明其原因
    因为虚拟dom有一个diff算法,key是唯一的,不会让数据产生混乱,可以高效更新的虚拟dom
    不能使用数组索引 因为当删除一条数据时,他的索引也会发生变化,会让数据产生混乱
  2. 怎么定义vue-router的动态路由?怎么获取传过来的动态参数?

在path路径后加:id或者:name 属性
在模板中接收{{$route.params.name}}

  1. vue-router有哪几种导航钩子?
    全局导航钩子
    单独路由独享钩子
    组件内钩子

  2. vuex中有哪些属性(5个)?请说明各属性的特性和作用?

  • state:vuex的基本数据,用来存储变量
  • getter:从基本数据(state)派生的数据,相当于state的计算属性
  • mutation:提交更新数据的方法,必须是同步的(如果需要异步使用action)。每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。
       回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数,提交载荷作为第二个参数。
  • action:和mutation的功能大致相同,不同之处在于 ==》1. Action 提交的是 mutation,而不是直接变更状态。 2. Action 可以包含任意异步操作。
  • modules:模块化vuex,可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰,方便管理。
  1. 说说你对 SPA 单页面的理解,它的优缺点分别是什么?

整个项目中只有一个页面
优点:用户体验好,单页面对服务器压力小
缺点:刚开始运行消耗时间长,页面内容繁琐,代码不清晰不易维护

  1. 解释webpack4个核心概念?为什么要使用webpack?

入口(entry) 输出(output) loader 插件(plugins)
他有模块化,大大提高了开发效率,简化代码,优化性能

  1. 组件中 data 为什么是一个函数?

组件是可以复用的,如果data是对象的话,引用这个组件都会引用一遍数据会产生数据污染,函数会产生独立的区域,互不影响

  1. 谈谈你This对象的理解?

This是一个对象,在不同的场合下this的指向不同
一般情况下,this指向全局
在函数中,谁调用this指向谁
在构造函数中,this指向实例化对象
在严格模式下,this指向undefined

  1. 什么是闭包,谈谈你对的闭包的理解。

函数嵌套函数
里面的变量会引用外面的变量
被使用的变量不会被垃圾回收机制回收,会导致内存泄漏

  1. 前端请求数据的过程中为什么出现跨域?如何解决跨域问题?ES6有哪些新增的属性和方法。

违反了同源策略(同端口,同域名,同协议)
修改请求头协议, 用php访问 ,用jsonp解决
模板字符串,symbol ,数组方法 ,class promise let const

  1. var、let、const之间的区别。

    • Var :定义变量 ,没有块的概念,可以跨函数访问,有全局变量和局部变量,可以将变量提升
  • Let : 定义变量有块级作用域,里面的变量不能在外面使用,不能将变量提升,以{}生成块级作用域
  • Const: 定义是必须有初始值,一旦定义就不能修改,数组可以用函数,对象用下标修改
  1. ES6里面解决异步回调地狱的方案有哪些,简单描述下?
Async   promiase
Async function aa(){
await11,
return  ‘hahha’
}
var bb=new aa();
Bb.then(function(d){
console.log(d)
})
  1. ECMAScript 6 怎么写 class ,为何会出现 class?

ES6的class可以看作是一个语法糖,它的绝大部分功能ES5都可以做到,新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法

class aa{
constructor(name,age){
this.name=name;
this.age=age;
}
var cc=new aa(‘zhangsan’,18)
 class  bb extends aa(){
constructor(name,age){
super(name,age)

}}
}
  1. 页面元素隐藏方式 和各自特点?
  • display属性为none,效果:元素不显示,不占位
  • 设置css visibility属性为hidden,效果:元素不显示,但占位
  • z-index:-1 元素隐藏,但它是将自身置于其他元素下面
  1. 用过哪些盒模型?
  • 标准盒模型(W3C盒子模型),设置的width或height是对 实际内容(content)的width或height进行设置,内容周围的border和padding另外设置,即盒子模型的width(height)=设置的content的宽高+padding+border+margin
  • 怪异盒模型(IE盒子模型),设置的width或height是对 实际内容(content)+内边距(padding)+边框(border)之和的width和height进行设置的,其盒模型的width(height)=设置的width(height)+外边距margin
    box-sizing: content-box 是W3C盒子模型
    box-sizing: border-box 是IE盒子模型
  1. 边界重叠是什么?CSS中margin外边距会出现那些重叠情况?如何处理?

边界重叠: 是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容、补白、边框)重合在一起而形成一个单一边界。

  • 底边界与顶边界重叠
  • 元素的底边界与前面元素的顶边界重叠
  • 元素的顶边界与父元素的顶边界重叠
    解决办法:
  • 外层元素用padding代替
  • 外层元素 用overflow:hidden;
  • 内层元素加float:left或者 display:inline-block
  • 内层元素 border:1px solid transparent;
  • 内层元素:position:absolute;
  1. 什么是Sass,使用sass目的是什么?

Sass 是一种 CSS 的预编译语言。它提供了 变量(variables)、嵌套(nested rules)、 混合(mixins)、 函数(functions)等功能,并且完全兼容 CSS 语法。
Sass 能够帮助复杂的样式表更有条理, 并且易于在项目内部或跨项目共享设计。
sass预处理可以更好地组织管理越来越复杂而庞大css样式表。
sass的易维护,更方便的定制,以及更高效的开发项目

  1. js基本数据类型是什么?如何判断该类型数据? 数据类型强制转化和隐式转化的区别?

Number、String、 boolean、 Undefined、Null

使用1、typeof、2、instanceof、3、constructor、4、Object.prototype.toString.call()、5、jquery.type()查看该类型

隐式转换都是以强制转换为基础的。强制转换主要指使用一些特定函数,手动将各种类型的值,转换为其对应的类型

  1. 如何判断一个对象是否具备某个属性?如何判断对象为空对象?

使用“!==”进行判断
使用in操作符,如果返回ture则存在
hasOwnProperty()
propertyIsEnumerable() 是hasOwnProperty() 的增强版

使用JSON.stringify把对象转为字符串,再判断字符串是否等于"{}"

  1. 在CSS中当自身设置绝对定位父级元素没有相对定位时,自身依据什么元素来定位?
    父元素为绝对定位,子元素还是按照父元素定位.
    父元素无定位,则以浏览器为准定位

  2. 如何判断JS数据的类型? 说明基本数据类型和引用数据类型的区别?

Typeof construcuor instanceof

  • 基本数据类型存放在栈中的简单数据段,引用数据存放在堆内存的对象
  • 基本数据类型大小确定,内存大小可以分配,引用数据类型每个空间大小不一样,要根据情- 况进行特定的配置
  • 传递的参数不同,基本数据类型是把变量里的值传递给参数,参数变量互不影响,引用数据类型:对象变量里面的值是这个对象在堆内存的内存地址(内外相互影响)
  • 基本数据类型按值访问,引用数据类型通过指针访问
  1. 11.请代码示意解构赋值和运算符展开?并说明其优势
Var  [a,b,] =[10,20];
[b,a]=[a,b]
Var  aa={name:”张三”}
Var bb=aa;
Var bb.name=李四;
Console.log(...bb)

解构赋值作用: 可以同时给多个变量赋值 在不使用第三方变量的前提下,可以交换两个变量 函数中可以用解构赋值的方式return 返回值,同时可以给多个变量赋值

运算符: …相当于深拷贝,存在不同的地址,互相不影响

  1. Vue 如何获取到 dom 节点 ?

    1. 使用DOM API直接找元素 原生dom操作(getElementById)
    2. ref属性 this.$refs.属性
    3. 特殊的this. r o o t 、 t h i s . root、this. rootthis.parent、this.$children
  2. Vue 中遍历数据为什么要绑定key值?绑定key值能否使用数组索引?说明其原因

因为虚拟dom有一个diff算法,key是唯一的,不会让数据产生混乱,可以高效更新的虚拟dom

不建议使用索引作为key,可以使用唯一id作为key

原因:如果在一个数组中插入某一个值,vue识别后会从新分配后续索引,速度变慢, 当删除一条数据时,他的索引也会发生变化,会让数据产生混乱

  1. 解释什么叫回调地狱 ,以及怎么解决回调地狱 ?

就是函数作为参数层层嵌套

怎么解决:

通过promise链式调用的方式

function buildCatList(list, returnVal) {
    return new Promise(function (resolve, reject) {
        setTimeout(function (name) {
            var catList = list === '' ? name : list + ',' + name
            resolve(catList)
        }, 200, returnVal)
    })
}

buildCatList('', 'Panther').then(function (res) {
	return buildCatList(res, 'Janguar')
}).then(function (res) {
	return buildCatList(res, 'Lion')
}).then(function (res) {
	console.log(res)
})本质上还是函数套函数
  1. keep-alive的是什么? 使用它的目的是什么?

是一个内置组件

可以使被包含的组件保留状态 避免重新渲染

  1. 懒加载 和 热更新 怎么配置
  • 懒加载其实就是延时加载,即当对象需要用到的时候再去加载。
  • 懒加载:先在页面中把所有的图片统一使用一张占位图进行占位,地址存放到其它属性(data-original)中,把正真的路径存在元素的“data-url”属性里,根据scrollTop判断图片是否在用户的视野内,如果在,则将data-original属性中的值取出存放到src属性中。

热更新:

修改代码时不用刷新直接可以看到修改后的内容
在项目使用webpack,只需要webpack-dev-server插件就可以实现项目的热更新
安装:npm i webpack-dev-server -D
配置webpack.config.js
在package.json的script添加webpack-dev-server
启动npm run server查看

  1. v-show 和 v-if 的作用和区别 ?
    v-show切换元素的display属性,来控制元素显示隐藏初始化会渲染,适用于频繁切换显示隐藏元素,不能在上使用
    v-if通过销毁并且重建组件来控制组件显示隐藏,初始化不会渲染,不适用于频繁切换显示隐藏的组件,能在上使用

以上是关于2021年前端热门面试题的主要内容,如果未能解决你的问题,请参考以下文章

2021年前端热门面试题

2021年前端岗位面试题 “二”(本人亲测)

2021年前端各大公司都考了那些手写题(附带代码)

2021年前端各大公司都考了那些手写题(附带代码)

2018 – 2019 年前端 JavaScript 面试题

2021年前端最新笔试百题