H5前端面试题汇总

目前只有这些，之后还会补充。。。

奈子米

8452人浏览 · 2022-01-27 11:02:55

奈子米 · 2022-01-27 11:02:55 发布

1.关于利用数组去重的方法,除了用最简单的set去重以外, 还有reduce,先来看一下reduce的基本使用吧

那么问题来了, 如何用reduce来给类数组对象去重呢?

2.promise是用来做什么的?

promise是用来解决异步编程问题(简单说是就是解决回调地狱的),

promise有三种状态: padding(等待状态) , resolve(成功状态) . reject(失败状态)

如何用promise来实现同步操作?

这里大家记住promise 有一个语法糖, async await 在promise中添加async, await就能实现同步操作

3.什么是原型链?

当访问一个对象的某个属性时,会先在这个对象本身属性上查找, 如果没有找到,则会去它的__proto__隐式原型上查找, 即它的构造函数的prototype,如果还没有找到就会再再构造函数的prototype的__proto__中查找,这样一层一层向上查找就会形成一个链式结构,这就是原型链

4.闭包?

闭包，通俗的来说，就是在当前作用域能访问到外部作用域中的对象。实际上，闭包的存在是为了保护私有变量不被污染,形成不销毁的栈内存，里面的私有变量等信息保存下来。

5.watch和computed的区别?

computed是计算属性, 它是基于响应式依赖进行缓存的,如果依赖不变的话, 就会变成缓存, computed就不会重新计算

watch 是监听数据状态,只有在状态发生改变时才会触发(当有一些数据需要随着其他数据变动而变动时, 或者当需要在数据变化时执行异步或开销较大的操作时)

6.scoped的原理?(解决了组件之间样式的覆盖问题,当别的组件中需要用到这个组件里的样式的时候, 可以用/deep/穿透来)

会在当前组件的模板上添加一个data-v -xxx

后续配合属性选择器查找添加样式, 不会让样式污染,

让每个组件的样式不会互相冲突

lang="scss" 改变css样式的编译方式换成scss语法 (可以进行嵌套使用)

/deep/ >>> 穿透, 可以让样式在别的vue文件中使用,

scoped看起来很美，但是，在很多项目中，会出现这么一种情况，即：引用了第三方组件，需要在组件中局部修改第三方组件的样式，而又不想去除scoped属性造成组件之间的样式污染。此时只能通过特殊的方式，穿透scoped。

7.SPA单页应用?与多页应用的区别?

SPA单页应用是由一个页面和多个组件片段组成的, 采用路由懒加载, 当需要的时候再加载页面,

优点: 1.用户体验好, 2, 前后端分离 3. 后期维护方便4.专场动画容易实现5.页面局部刷新

缺点: 1.开发成本高2.不利于SEO搜索

8.vuex和localstorage . cookie的区别?

vuex是为了解决多组件之间的共享状态的一种状态管理模式, 强调集中式管理, 将所有的共享状态放在内存中, 读取速度快, 但是页面一刷新就恢复默认值了,

vuex的五大核心: state(存放数据的地方) , actions(发送异步请求) getters(类似于computed计算属性), mutations(更改状态的地方), modules(组件模块化)

其中, 更改状态只能在mutations中,是同步请求, 通过commit来更改, 发送异步请求要在actions里面,组件通过dispath来触发

vuex有四个辅助函数: mapGetters. mapActions . mapMutations. mapState

localstorage是永久性存储, 存在本地中,只要不主动删除就会一直存在

cookie储存的信息比较少, 只有4KB 它有有效时间, 过期会自动删除

9.元素隐藏的区别?

visibility:hidden;隐藏占位 display:none;隐藏不占位

10.axios的交互?

axios是一个基于Promise的HTTP库, 支持promise所有的API,支持请求/响应拦截器,

11.H5新增的特性?

1,标签: header. footer. active,nav, aside,

2,画布: canvas

3.audio, video

4. localstorage, sessionstorage

5. 新的表单元素(tel.date,time,email,url)

12.CSS3新特性?

1.border-radius

2.box-shadow . text-shadow

3.transform: translate() . scale(), skew() rotate()

4.动画: @keyframs animation()

5.媒体查询 @media

13.gulp和webpack的理解?

相同点: 都是自动化构建工具

不同点: gulp 是基于流的自动化构建工具, 通常以管道的方式,通过.pipe给下一个流程,强调工作流程

webpack是模块化打包工具, 可以借助它将模块化的资源转为一个或多个js文件, 强调模块化 all in module

14.谷歌和IE的兼容问题

1.表单的归类

ie下的表单元素在设置了disabled禁用属性之后，在ie下点击，仍然会有焦点。谷歌这是正常的没有焦点

解决方法：给表单元素设置增加属性 unselectable='on' 即可。

2.阻止冒泡事件

IE: e.cancelBubble = true

W3c: e.stopPropagation()

3.阻止默认行为

以a链接为例点击会有默认跳转行为

W3c: e.preventDefault()

IE: returnValue = false

15.ES6新特性？

1. let const

let 表示申明变量。const 表示申明常量。

常量定义了就不能改了。对象除外，因为对象指向的地址没变。
const在申明是必须被赋值。
两者都为块级作用域。

块级作用域与函数作用域。任何一对花括号（｛和｝）中的语句集都属于一个块，在这之中定义的所有变量在代码块外都是不可见的，我们称之为块级作用域。函数作用域就好理解了，定义在函数中的参数和变量在函数外部是不可见的。

const a = 1
a = 0 //报错

2. 模块字符串``

可以使用反引号``来进行字符拼接。${}

3. 解构

可以使用{}来对数组和对象进行解构。

4. 函数的参数默认值

函数传参可以有默认值

// ES6；
function printText(text = 'default') {
    console.log(text);
}

5. Spread / Rest 操作符...

Spread / Rest 操作符指的是 ...，具体是 Spread 还是 Rest 需要看上下文语境。

当被用于迭代器中时，它是一个 Spread 操作符：迭代器 (Iterator)是按照一定的顺序对一个或多个容器中的元素行进遍历的一种机制

function foo(x,y,z) {
  console.log(x,y,z);
}
 
let arr = [1,2,3];
foo(...arr); // 1 2 3

当被用于函数传参时，是一个 Rest 操作符：当被用于函数传参时，是一个 Rest 操作符：

function foo(...args) {
  console.log(args);
}
foo( 1, 2, 3, 4, 5); // [1, 2, 3, 4, 5]

6. 箭头函数

不需要 function 关键字来创建函数
省略 return 关键字
this始终指向函数申明时所在作用域下的this值

//es5
var fun = function() {

}
//es6
var fn = () => {

}

7. for of

for of遍历的是键值对中的值
for in遍历的是键值对中的键

8. class类

ES6 中支持 class 语法，不过，ES6的class不是新的对象继承模型，它只是原型链的语法糖表现形式。

class Student {
  constructor() {
    console.log("I'm a student.");
  }
 
  study() {
    console.log('study!');
  }
 
  static read() {
    console.log("Reading Now.");
  }
}
 
console.log(typeof Student); // function
let stu = new Student(); // "I'm a student."
stu.study(); // "study!"
stu.read(); // "Reading Now."

9. 导入导出

导入improt
导出export default

10. promise

Promise 用于更优雅地处理异步请求。

  <script>
    new Promise((resolve,reject) => {
      setTimeout(function() {
        resolve('成功了！')
      },1000)
      // reject("失败了，wuwu")
    }).then(data => {
      console.log(data)
    }).catch(err => {
      console.log(err)
    })
  </script>

11. async/await

比promise更好的解决了回调地狱。

async function() {
  awiat fn()
}

12. Symbol

新的符号基本类型

13. Set集合

存储任何类型的唯一值，即集合中所保存的元素是不重复的。类数组结构。

arr = [1,2,3,1]
let arrNew = new Set(arr)
arrNew = [1,2,3]

类数组不是数组，要转化为数组Array.form(arrNew)这样arrNew才是数组了

16.数组常用的方法，以及Es6新增的数组方法？

数组方法(会不会改变原数组)_zhanggei的博客-CSDN博客_会改变原数组的数组方法可以访问这个链接地址，里面有详细的讲解。

17.vue获取token的登录过程?

vue获取token登录的过程：
1，访问需要登录的页面的时候，利用路由守卫跳转，输入正确的用户名密码向后台的认证接口发送数据
2，获取token 用vuex存储，且存储到localstorage中，关闭页面，下次重新访问可不用登陆，直接从localstorage取值，token过期时间由后台控制
3，axios 拦截设置接下来的接口访问带着token；当token过期返回401跳转登陆重新获取token进行登录，

18.vue 生命周期
链接地址：vue的生命周期_zhanggei的博客-CSDN博客

19.v-for 和v-if的优先级问题？能不能一块用？

不能一块用， v-for的优先级要比v-if的高，一般真要用的话也不再一块写，可以父子结构上写，避免因为一块用引起的消耗高内存。

20.基本数据类型？

String .Number. Boolean.Undefined.Null.Object .

Object里面有Array。Function

Es6新增的Symbol(符号类型)唯一性。