2020-09-17

前端面试（电话一面）

1、html5新标签有哪些？

<header>、<nav>、<article>、<section>、<aside>、<footer>、<vedio>、<audio>

2、CSS3新特性有哪些？

• 属性选择器：根据元素特定属性的来选择元素。 这样就可以不用借助于类或者id选择器，E[attr]。
• 结构伪类选择器：主要根据文档结构来选择器元素， 常用于根据父级选择器里面的子元素，E:first-child
• 伪元素选择器：可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构。::before，::after
• 盒子模型
• 过渡(transition)：从一种样式变换为另一种样式时为元素添加效果
• 2D转换：实现元素的位移、旋转、缩放
• 动画(animation)：通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果

• 3D 转换：3D移动在2D移动的基础上多加了一个可以移动的方向，就是z轴方向。透视 perspective

3、CSS3动画transition和animation的区别。

transition动画和animation动画的主要区别有两点：

• transition动画需要事件来触发，animation不需要
• transition只要开始结束两种状态，而animation可以实现多种状态，并且animation是可以做循环次数甚至是无限运动

4、jQuery常用API

• 显示与隐藏show()，hide()，toggle()
• 滑动slidedown()，slideup()，slidetoggle()
• 淡入淡出fadeIn()，fadeOut()，fadetoggle()

• 自定义动画animate(想要改变的样式属性，速度，切换效果，回调函数)

• 获取元素固有属性值props()，设置元素自定义属性值attr()

• 获取文本内容：普通元素html()、文本内容text()，表单值val()

• 元素操作：遍历each()、添加append()、删除remove()、

• 位置：offset() 方法设置或返回被选元素相对于文档的偏移坐标，跟父级没有关系；position() 方法用于返回被选元素相对于带有定位的父级偏移坐标，如果父级都没有定位，则以文档为准；scrollTop() 方法设置或返回被选元素被卷去的头部

5、如何把 Callback 接口包装成 Promise 接口？

通过 promisify这个函数，就可以把接口进行转换

6、Ajax是什么？

Ajax 相当于浏览器发送请求与接收响应的代理人，以实现在不影响用户浏览页面的情况下，局部更新页面数据，从而提高用户体验。

7、ajax和axios区别？

      传统 Ajax 指的是 XMLHttpRequest（XHR）， 最早出现的发送后端请求技术，隶属于原始js中，核心使用XMLHttpRequest对象，多个请求之间如果有先后关系的话，就会出现回调地狱。

      axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，本质上是通过promise实现对ajax技术的一种封装。

8、promise和async区别？

• Promise的出现解决了传统callback函数导致的“地域回调”问题，但它的语法导致了它向纵向发展行成了一个回调链，遇到复杂的业务场景，这样的语法显然也是不美观的。而async await代码看起来会简洁些，使得异步代码看起来像同步代码，await的本质是可以提供等同于”同步效果“的等待异步返回能力的语法糖，只有这一句代码执行完，才会执行下一句。

• async await与Promise一样，是非阻塞的。

• async await是基于Promise实现的，可以说是改良版的Promise，它不能用于普通的回调函数。

9、vue项目初始化过程，如何利用vue-cli创建一个vue项目？

前端：

① 安装 Vue 脚手架
② 通过 Vue 脚手架创建项目
③ 配置 Vue 路由
④ 配置 Element-UI 组件库
⑤ 配置 axios 库

后端：
① 安装 MySQL 数据库
② 安装 Node.js 环境
③ 配置项目相关信息
④ 启动项目

10、JS循环机制

    所有的任务可以分为同步任务和异步任务，同步任务，顾名思义，就是立即执行的任务，同步任务一般会直接进入到主线程中执行；而异步任务，就是异步执行的任务，比如ajax网络请求，setTimeout 定时函数等都属于异步任务，异步任务会通过任务队列( Event Queue )的机制来进行协调。

      同步和异步任务分别进入不同的执行环境，同步的进入主线程，即主执行栈，异步的进入 Event Queue 。主线程内的任务执行完毕为空，会去 Event Queue 读取对应的任务，推入主线程执行。 上述过程的不断重复就是我们说的 Event Loop (事件循环)。

因为异步任务之间并不相同，因此他们的执行优先级也有区别。不同的异步任务被分为两类：微任务（micro task）和宏任务（macro task）。

以下事件属于宏任务：

• setInterval()
• setTimeout()

以下事件属于微任务

• new Promise()
• new MutaionObserver()

11、vue-router有哪些内容？

• 路由嵌套：点击父级路由链接显示模板内容；模板内容中又有子级路由链接；点击子级路由链接显示子级模板内容；

  父级路由通过children属性配置子级路由

• 动态路由匹配：需要把某种模式匹配到的所有路由，全都映射到同个组件。例如，我们有一个 User 组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染。那么，我们可以在 vue-router 的路由路径中使用“动态路径参数”来达到这个效果。

const User = {
  template: '<div>User</div>'
}

const router = new VueRouter({
  routes: [
    // 动态路径参数 以冒号开头
    { path: '/user/:id', component: User }
  ]
})

• 编程式导航：除了使用 <router-link> 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现。

this.$router.push('hash地址')
this.$router.go(n)

 

router.push() 方法的参数规则
// 字符串(路径名称)
router.push('/home')
// 对象
router.push({ path: '/home' })
// 命名的路由(传递参数)
router.push({ name: '/user', params: { userId: 123 }})
// 带查询参数，变成 /register?uname=lisi
router.push({ path: '/register', query: { uname: 'lisi' }})

• vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航

  const router = new VueRouter({ ... })
  
  router.beforeEach((to, from, next) => {
    // ...
  })

  12. Boolean类型转换：

      1.对于String:只有非空字符串为真

      2.对于Number:除了0和NaN之外都为真

      3.对于Boolean:true为真

      4.对于Object:除了null之外都为真

      5.undefined为false;