前端面试题总结

H5 新增

• 选择器

• 拖拽释放：drag、drop

• 媒体播放：video、audio

  play()	加载并播放音频、视频文件或重新播放暂停的的音频、视频
  pause()	暂停出于播放状态的音频、视频文件

• 本地存储：localStorage、sessionStorage

• 语义化标签：header、nav、main、aside、article、section、footer

• 增强表单控件

• canvas

• websocket

h5移除

basefont、big、center、font、s、tt、u、frame、frameset、noframes

CSS3 新增

背景大小 background-size

边框阴影 box-shadow 文字阴影 text-shadow

文字方向 text-wrap

transform：translate()

box-sizing:border-box;

CSS 权重

! import > 行内样式 > ID 选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

CSS 继承

font-family、font-weight、font-size
color、line-height、letter-spacing

盒模型

• box-sizing: border-box;：包含 padding 和 border 的值

行内元素 与 块级元素

• 行内元素：a、span、img、input、select、section

• 块级元素：div、p、h1-h6、br、table、ul、li

• 区别：

  1. 块级元素会独占一行，默认的宽度占满父级元素

  2. 行内元素不会换行， width height 无效

  3. 修改 display 属性切换

水平垂直居中

• 绝对定位 + 左、上50% + transform:translate(-50%，-50%)

• 弹性布局：给父元素设置

  1. display:flex;
  2. align-item:center;
  3. justify-content:center

position 属性

• relative：相对定位 （父）

• absolute：绝对定位，相对于第一个父元素

• fixed：固定定位，相对于浏览器窗口

• static：默认值，没有定位

• inherit：继承父元素 position 属性的值

img 中 title 和 alt

• alt作为图片的无法显示时出现，title图片的解释文字

em、rem

• em：相对于父元素

• rem：相对于根元素（考虑兼容问题）

移动端适配方案

• viewport：设置initial-scale，将所有设备布局视口的宽度调整为设计图的宽度

• VW：相对单位，根据视口宽度

• rem：媒体查询设置根元素字体大小，实现 rem 适配

• 弹性盒子：display:flex

页面元素隐藏方式

1. display:none 不占位
2. visibility:hidden 占位
3. opcity:0 占位

position 的值

static 静态定位
relative 相对定位（根据自身偏移前的位置）
absolute 绝对定位（根据上一父级带有定位的元素，没有则根据浏览器窗口）
fixed 固定定位（根据浏览器窗口）
sticky 粘性定位 （当目标区域在屏幕中可见时，类似 relative；当页面滚动超出目标区域时，类似 fixed）

JS

数据类型

基本数据类型：Number、String、Boolean、undefined、null

引用数据类型：Function、Object、Array

null 和 undefined 的区别

• undefined：定义未赋值

1. 声明一个变量，但没赋值
2. 访问对象上不存在的属性
3. 函数定义了形参，但没有传递实参

• null：空值

null==undefined true
null===undefined false

js 中内存泄漏的情况

1. 意外的全局变量
2. 闭包
3. 未被清空的定时器
4. 未被销毁的事件监听
5. DOM 引用

判断

• typeof：判断变量的类型（无法判断 null）无论是什么类型的对象，都返回Object

• instanceof：判断对象具体类型（无法判断原始类型数据）

• ===：判断 undefined、null

• Array.isArray(value)：判断 value 是否为数组（返回 true / false）

• Object.is(obj1, obj2)：判断两个对象是否相等（引用地址是否一样）

区分数组或对象

• Array.isArray({}) false
• {} instanceof Array false

伪数组

1. 具有 length 属性
2. 不具有数组操作方法
3. 转真实数组：Array.from()

遍历对象属性

Object.keys(obj)

如何获取 Dom 元素

原生 JS

• ID getElementById
• name getElementsByName
• 标签名 getElementsByTagName
• 类名 getElementsByClassName

​ h5新增：

• 选择器获取一个元素 querySelector
• 选择器获取一组元素 querySelectorAll

Vue：设置 ref

回调：我定义的，没有调，但最终执行了

递归：自己调用自己

深拷贝与浅拷贝

• 浅拷贝：引用数据类型 a赋值给b，b的改变会影响a

• 深拷贝：基本数据类型 a赋值给b，b的改变不会影响a

• 实现深拷贝：JSON.parse(JSON.stringfiy(obj))

操作数组

1. 属性：

   • .length：返回设置数组中元素个数

2. 方法：

   • join：分隔符，数组转字符串（不改变原数组）

   • push：末尾新增元素

   • pop：删除最后一个元素

   • shift：删除第一个元素

   • unshift：前面追加元素

   • splice(开始插入/删除元素的下标,删除个数,设置的新值)：删除替换添加元素

   • sort：排序

   • reverse：翻转数组

   • forEach：

   • vm.$set()：添加属性，但不能给 vm 或 vm.data(根数据对象) 添加！！！

3. （非变更方法）：原始数组不变，返回一个新数组，可用新数组替换旧数组

   • filter：过滤

   • concat：拼接数组【返回新数组】

   • slice：

   • map：处理数组每个元素调用指定函数

   • includes：判断是否包含指定的子字符串。有则返回 true ，无则返回 false

   • indexOf：有则返回查询到的第一个结果在数组中的索引，无则返回 -1

   • find：

Math

Math.abs()：绝对值
Math.ceil()：向上取整（整数+1，小数去掉）
Math.floor()：向下取整（直接去掉小数）
Math.round()：四舍五入
Math.pow(x, y)：求 x 的 y 次方

数组去重

1. filter + indexOf

var arr = [2, 8, 5, 2, 5]
function newArrFn (arr) {
    return arr.filter((item, index) => {
        return arr.indexOf(item) === index
    })
}
console.log(newArrFn(arr)) // [2,8,5]

3. includes ：检查新数组是否包含原数组的每一项，如果不包含，就 push 进去

var arr = [2, 8, 5, 2, 5]
function newArrFn (arr) {
    // 
    let newArr = []
    for(let i = 0;i<arr.length;i++){
        newArr.includes(arr[i]) ? newArr:  newArr.push(arr[i]) 
    }
    return newArr
}
console.log(newArrFn(arr)) // [2,8,5]

4. ES6 中 set 方法：Array.from 转换成数组类型

var arr = [2, 8, 5, 2, 5]
var arrSet = Array.from(new Set(arr))  // [2,8,5]

5. hasOwnProperty

prototype 原型

每新建一个函数，解析器都会向函数中添加一个 prototype 属性，对应着一个原型对象

函数作为构造函数被调用时，它所创建的对象中都会有一个隐性原型，可以通过_proto_访问

当使用一个对象的属性或方法时，会先在自身寻找，如果没找到，就去原型对象中寻找，有则直接使用，

没有，则去原型的原型中寻找，一直找到 object 对象的原型，没则返回 undefined

.hasOwnProperty()：检查对象自身是否含有该属性，有返回 true

currentTarget 和 target 的区别

• e.currentTarget：绑定事件的对象
• e.target：被点击的对象
• dataset属性：由data-开头的自定义属性组成的集合

ES6

箭头函数和普通函数

• 箭头函数：this永远指向其上下文的this

• 普通函数：this指向调用它的那个对象

let、const、var 区别

• var 函数作用域，有变量提升，可以重复声明

• let 块级作用域，没有变量提升，不能重复声明

• const 块级作用域，没有变量提升，变量不能被修改，必须初始化值，不能重复声明，存在暂时性死区

解构赋值

• ES6允许按照一定模式，从数组或对象中提取值，给变量进行赋值

  let [a,b,c]=[1,2,3]

1. 快速交换两个变量的值
2. 可以接收函数返回的多个值

什么情况下导致跨域

• 不满足同源策略(端口、协议、域名要相同)

回调地狱

• 函数作为参数层层嵌套

• 一个异步请求套着一个异步请求，一个异步请求依赖于另一个的执行结果，使用回调的方式相互嵌套

同步和异步

• 同步：等浏览器响应后才向下执行

• 异步：不等浏览器响应就向下执行

cookies、sessionStorage 、 localStorage 的区别

• cookie 在所有同源窗口中共享的

• sessionStorage 只在当前会话中共享

• localStorage 在所有同源窗口中共享的，需要手动清除

前端性能优化手段

1. 减少HTTP请求、按需加载、预加载、压缩代码图形、缓存资源、避免重定向、异步加载第三方资源
2. css写在头部，js写在尾部并异步
3. 减少DOM节点、优化动画、高频事件
4. 避免html中写style，避免CSS表达式
5. 减少重绘和回流，尽量使用事件代理、id选择器

闭包

1. 函数嵌套
2. 内部函数可以访问外部函数的变量
3. 构造函数的闭包函数中this指向window

HTTP 和 HTTPS 的区别

• HTTP：超文本传输协议，信息是明文传输
• HTTPS：具有安全性的 SSL 加密传输协议，更安全

HTTP 请求方式

• GET

• POST

• PUT

• DELETE

json 与 jsonp 的区别

• json：浏览器与服务器间传输数据的方法，轻量级的数据交互格式

• jsonp：模拟json格式，为了解决跨域问题，不支持同步处理，只能用 get 请求方式

GET 和 POST 的区别

get：使用 URL 传参，限制大小
post：请求体传参，不限制大小，更安全

Ajax

• 实现页面不刷新，请求数据
• get 通过 url 传递参数
• post 设置请求头，规定请求数据类型（更安全，参数在请求体中）

1. 创建 ajax 对象

2. 绑定事件

3. 初始化参数

4. 发送请求

   • url：请求地址

   • type：请求类型

   • data：传递参数

   • dataType返回的数据格式

   • success

   • error

   JSON.stringify() 转化为 JSON 字符串

三种浏览器存储的区别

• localStorage：

• sessionStorage：

• cookie:

websocket

• 网络通信协议，允许客户端和服务器之间进行通信，只需要一次连接，就可以一直保存连接状态

Promise

• 三种状态：pending 等待 —> fulfilled 成功 / reject 失败

• Promise.all()：接收一个数组参数，其元素都是 Promise 对象的实例，若都成功，则返回一个所有实例结果的数组，当某个实例失败，则立即返回第一个失败的值

let promise = new Promise((resolve, reject) => {
	if(操作成功）{
		resolve(value);
	} else {
		reject(err);
	}
}

async / await

• 解决异步任务

• 使用 async 表示 函数是一个异步任务

• 当函数执行时， 等 await 后面异步操作完成时，再执行后面的语句。

Vue

MVVM

• M：model 数据模型

• V：view 视图

• VM：监听数据模型的改变，控制视图行为

vue 组件中 data 为什么是一个函数

Vue 组件其实就是一个 Vue实例

Vue 为了保证每个实例上的 data 数据的独立性，规定了必须使用函数，而不是对象。

单页面

Vue 是单页面应用

优点：用户体验好，前后端分离，能减轻服务器压力。

缺点：初次加载速度慢，不利于SEO优化，对客户机性能要求高

src 目录每个文件夹和文件的用法

assets：放静态资源

components：放组件

router：定义路由相关的配置

view：视图

app.vue：管理所有组件

main.js：入口文件

Vue 的生命周期

• Vue 实例从创建到销毁的过程

1. 创建前：beforeCreate
2. 创建后：created
3. 挂载前：beforeMount
4. 挂载后：mounted：（发送ajax请求、启动定时器、绑定自定义事件、订阅消息等）DOM渲染完成
5. 更新前：beforeUpdate
6. 更新后：updated
7. 销毁前：beforeDestroy：做收尾工作（清除定时器、解绑自定义事件、取消订阅消息等）
8. 销毁后：destroyed(){}

Vue

• {{xxx}}：插值语法，可直接读取data中所有属性

• v-text：更新元素的 textContent，会替换掉节点中所有内容

• v-html：更新元素的 innerHTML，会替换掉节点中所有内容

• v-model：双向数据绑定原理：发布订阅模式结合数据劫持实现

• v-bind 或 :：单向数据绑定，动态绑定元素的属性，类型可以是：字符串、对象、数组

• v-if：在 DOM 中的添加移除元素，更消耗性能

• v-show：通过样式显示隐藏元素(需要频繁切换)

• v-for：列表渲染，需要给每个节点做一个唯一标识 :key='唯一标识'，index 作为 key 在对数据做破坏顺序的操作时会引发问题。v-for 优先于 v-if

• v-once：只渲染一次

• 绑定事件监听 v-on: 或 @事件名

• 绑定样式 :class=""

• 键盘事件：@keyup.键名

• 事件修饰符

  1. .prevent：阻止默认事件
  2. .stop：阻止事件冒泡
  3. .once：事件只触发一次
  4. .trim：自动过滤输入的首尾空格

Vue 组件通信

1. 父传子：props

   父组件通过 props 向下传递数据给子组件

2. 子传父：$emit()

   子组件通过 $emit() 给父组件发送消息，父组件通过 v-on 绑定事件接收数据

3. 任意中间件通信：在入口文件中安装全局事件总线 $bus

method、computed 和 watch 区别

• method：在重新渲染时被调用

• computed：当被计算的属性发生改变时触发，计算属性最终会出现在vm上，直接读取使用即可

• watch：

  • 被监视属性，发生变化时调用（请求后台接口、启动定时器等异步任务）
  • 听对象内部属性的改变，需要加 deep 属性进行深度监听
  • immediate 表示在 watch 中首次绑定的时候，是否执行 handler

插槽

父组件向子组件指定位置插入html结构

<slot></slot>标签

1. 默认插槽：任何没有被包裹在带有 v-slot 的 组件标签中的内容都会被视为默认插槽的内容
2. 命名插槽
3. 作用域插槽

Vuex

vue 的状态管理器，实现任意组件间通信（需要构建中大型单页应用时使用）

核心属性：

1. state：保存具体的数据
2. mutations：修改 state 中的数据
3. actions：异步操作数据
4. getters：类似 vue 的计算属性，用来过滤一些数据
5. modules：模块，状态过多可以拆分成模块

路由

router 路由实例对象，包括路由属性和子对象

route 当前路由信息对象，包括路由信息参数

1. 定义路由组件
2. 注册路由
3. 使用路由

• 指定展示位置：<router-view></router-view>

• 路由跳转：更新视图但不重新请求页面

  • 声明式：<router-link></router-link>
  • 编程式：this.$router.push()、this.$router.replace()

• 路由传参：:to

  • params 用 name 属性，刷新页面会丢失参数
  • query 用 path 属性，url 路径会显示传递的参数

导航守卫

• 拦截导航，让它完成跳转或取消
• 在路由中配置路由导航守卫

router.beforeEach((to, from, next) => {
 // to 将要访问的路径
 // from 从哪个路径跳转而来
 // next 是一个函数，表示放行：next() 放行  next('/login') 强制跳转到登录页
 // 如果用户访问登录页，直接放行
 if (to.path === '/login') return next()
 	// 获取 token
	const tokenStr = window.sessionStorage.getItem('token')
 	// 没有 token 强制跳转到登录页
 	if (!tokenStr) return next('/login')
	next()
})

vue-router 实现路由懒加载（动态加载路由）

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(router)

export default new Router ({
  routes: [
    {
      path: '/Login',
      name: 'Login',
      component: resolve => require(['@/components/Login'], resolve)
    },
    {
      path: '/',
      name: 'Home',
      component: resolve => require(['@/components/Home'], resolve),
      children: [{
        path: '/',
        name: 'Skill',
        component: resolve => require(['@/components/Skill'], resolve)
      }, {
        path: '/Skill',
        name: 'Skill',
        component: resolve => require(['@/components/Skill'], resolve)
      }]
    }
  ]
})

keep-alive

< keep-alive > 缓存组件，可以使被包含的组件保留状态，避免重复渲染DOM

vue3 的了解

让vue核心体积变得更小、运行速度更快、更强大、更加兼容typescript

Webpack

• 打包工具，一切文件皆模块，专注于处理模块化项目，能做到开箱即用，一步到位

1. 功能：压缩图片、代码，解析 es6、sass 语法
2. 构成：入口，出口，插件，装载机，本地服务
3. 执行过程：webpack 默认执行 webpack.config.js 文件，读取入口文件开始解析各种资源

前端为什么要进行打包和构建？

代码层面：

• 体积更小，加载更快
• 编译高级语言和语法
• 兼容性和错误检查

研发流程层面：

• 统一、高效的开发环境
• 统一的构建流程和产出标准
• 集成公司构建规范