2021年前端热门面试题

Posted 2021-07-20 syf976561581

1. 什么是MVVM？

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

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

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

3. 说明原生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()

4. vuex是什么？怎么使用？哪种功能场景使用它？

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

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

38. 组件中 data computed 和 watch的区别？

• data:Vue 实例的数据对象。Vue 将会递归将 data 的 property 转换为 getter/setter，从而让 data 的 property 能够响应数据变化。对象必须是纯粹的对象 (含有零个或多个的 key/value 对)
• Computed：是一个计算属性具有依赖性只执行一次就拿出来调用下一次获取computed的值时才会重新计算
• Watch： 是调用一次执行一次 如果监听数据变化都会执行回调

7. vue 中遍历数据为什么要绑定key值？绑定key值能否使用数组索引？说明其原因
   因为虚拟dom有一个diff算法,key是唯一的,不会让数据产生混乱,可以高效更新的虚拟dom
   不能使用数组索引 因为当删除一条数据时,他的索引也会发生变化,会让数据产生混乱
8. 怎么定义vue-router的动态路由？怎么获取传过来的动态参数？

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

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

10. 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,使得结构非常清晰，方便管理。

11. 说说你对 SPA 单页面的理解，它的优缺点分别是什么？

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

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

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

13. 组件中 data 为什么是一个函数？

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

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

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

16. 什么是闭包，谈谈你对的闭包的理解。

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

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

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

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

    • Var :定义变量 ,没有块的概念,可以跨函数访问,有全局变量和局部变量,可以将变量提升

• Let : 定义变量有块级作用域,里面的变量不能在外面使用,不能将变量提升,以{}生成块级作用域
• Const: 定义是必须有初始值,一旦定义就不能修改,数组可以用函数,对象用下标修改

18. ES6里面解决异步回调地狱的方案有哪些，简单描述下？

Async   promiase
Async function aa(){
await ‘11’,
return  ‘hahha’
}
var bb=new aa();
Bb.then(function(d){
console.log(d)
})

19. 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)

}}
}

20. 页面元素隐藏方式 和各自特点？

• display属性为none，效果：元素不显示，不占位
• 设置css visibility属性为hidden，效果：元素不显示，但占位
• z-index:-1 元素隐藏，但它是将自身置于其他元素下面

21. 用过哪些盒模型？

• 标准盒模型（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盒子模型

22. 边界重叠是什么?CSS中margin外边距会出现那些重叠情况？如何处理？

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

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

23. 什么是Sass,使用sass目的是什么？

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

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

Number、String、 boolean、 Undefined、Null

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

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

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

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

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

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

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

Typeof construcuor instanceof

• 基本数据类型存放在栈中的简单数据段,引用数据存放在堆内存的对象
• 基本数据类型大小确定,内存大小可以分配,引用数据类型每个空间大小不一样,要根据情- 况进行特定的配置
• 传递的参数不同,基本数据类型是把变量里的值传递给参数,参数变量互不影响,引用数据类型:对象变量里面的值是这个对象在堆内存的内存地址(内外相互影响)
• 基本数据类型按值访问,引用数据类型通过指针访问

28. 11.请代码示意解构赋值和运算符展开？并说明其优势

Var  [a,b,] =[10,20];
[b,a]=[a,b]
Var  aa={name:”张三”}
Var bb=aa;
Var bb.name=李四;
Console.log(...bb)

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

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

29. Vue 如何获取到 dom 节点 ？

    1. 使用DOM API直接找元素 原生dom操作(getElementById)
    2. ref属性 this.$refs.属性
    3. 特殊的this.$root、this.$parent、this.$children

30. Vue 中遍历数据为什么要绑定key值？绑定key值能否使用数组索引？说明其原因

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

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

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

31. 解释什么叫回调地狱 ，以及怎么解决回调地狱 ？

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

怎么解决:

通过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)
})本质上还是函数套函数

32. keep-alive的是什么？ 使用它的目的是什么？

是一个内置组件

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

33. 懒加载 和 热更新 怎么配置？

• 懒加载其实就是延时加载，即当对象需要用到的时候再去加载。
• 懒加载：先在页面中把所有的图片统一使用一张占位图进行占位，地址存放到其它属性(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查看

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