h5面试题总结

导航的解析流程

1.导航被触发。

2.在失活的组件里调用beforeRouteLeave守卫

3.调用全局的 beforeEach 守卫

4.在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)

5.在路由配置里调用 beforeEnter

6.解析异步路由组件

7.在被激活的组件里调用 beforeRouteEnter

8.调用全局的 beforeResolve 守卫 (2.5+)

9.导航被确认

10.调用全局的 afterEach 钩子

11.触发 DOM 更新

12.调用beforeRouteenter守卫中传给next的回调函数,创建好的组件实例会作为回调函数的参数传入

引用数据类型有哪11个

number 数值
string 字符串
Boolean 布尔
array 数组
error 错误
math 数字
date 日期
RegExp 正则
function 函数
object 对象
global 全局

json与jsonp的区别

json是浏览器与服务期间传输数据的方法，是一种轻量级的数据交互格式，与js对象格式相似。

jsonp是自创的模拟json格式，是为了解决跨域问题，jsonp最大的特点就是不支持同步处理，只能用get方式来请求数据

jsonp原理

1.首先是利用script标签的src属性来实现跨域。

2.通过将前端方法作为参数传递到服务器端,然后由服务器端注入参数之后再返回,实现服务器端向客户端通信

3.由于使用script标签的src属性，因此只支持get方法

如何动态修改this指向

es5中是重定向
es6中是call apply bind

call、apply、bind区别

call，apply，bind的第一个参数都是this要指向的对象，
bind是返回对应函数，便于稍后调用，call与apply是立即调用
call传递参数是按顺序传入，apply是把参数放入数组中
例:
call(this指向的对象,参数1,参数2,参数3…);
apply(this指向的对象，[参数1,参数2,参数3…]);

什么是ajax

ajax是一种数据请求技术，可以实现页面无刷新，可以请求到不同的数据，他是一种编程技术而非与语言

原生ajax的实现步骤

创建ajax对象
绑定事件
初始化请求参数（get/post）
发送请求

vue 组件通信如何实现

vuex 就是一个仓库，仓库里放了很多对象。在state中存放数据源，
当组件要更改state中的数据时,必须通过mutation进行,mutation储存的是改变state中数据的操作方法，
之后通过actions储存的操作去触发mutation中的方法,
由组件中的$store.dispatch(‘action 名称’, data1)来触发。然后由commit()来触发mutation的调用 ,
间接更新 state

父传子：在父组件自定义属性名传递数据，在父组件在引入和挂载子组件，在父组件使用它，
在标签上绑定你想传入的数据，在子组件上用props接受数据，并且使用它

子传父： 父组件向子组件传递事件方法，子组件通过$emit触发事件，回调给父组件

兄弟通信（需要有共同的父组件）：
设定事件中心vue实例 中央通信 let bus = new vue()
A：methods：{函数{bus.KaTeX parse error: Expected 'EOF', got '}' at position 18: …it("自定义事件名"，数据)}̲} 发送 B：cre…on(“A发送过来的自定义事件名”，函数)} 进行数据接受

$refs 在input上绑定input1，然后在javascript里面这样调用：this. $refs.input1

什么情况下会导致跨域

不满足同源策略就会发生跨域，
同源策略：协议 端口号 域名相同
如果协议 端口号 域名不相同就会发生跨域

什么叫回调地狱

函数作为参数层层嵌套 ,一个异步请求套着一个异步请求，一个异步请求依赖于另一个的执行结果，使用回调的方式相互嵌套

什么是同步什么是异步

同步:等到浏览器响应后才继续向下执行
异步:不等浏览器响应就继续向下执行

写出flex布局中对父级元素以及子级元素的属性分别有哪些

flex-direction    设置主轴的方向（即项目的排列方向）
		内有四个值:
			row（默认值）：主轴为水平方向，起点在左端。
			row-reverse：主轴为水平方向，起点在右端。
			column：主轴为垂直方向，起点在上沿。
			column-reverse：主轴为垂直方向，起点在下沿
justify-content   设置主轴上的子元素排列方式

	内有五个值:
		flex-start（默认值）：左对齐
		flex-end：右对齐
		center： 居中
		space-between：两端对齐，项目之间的间隔都相等。
		space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍

flex-wrap  设置子元素是否换行
	内有三个值:
		nowrap（默认）：不换行
		wrap：换行，第一行在上方
		wrap-reverse：换行，第一行在下方

align-content 设置侧轴上的子元素排列方式（多行）
align-items： 设置侧轴上的子元素排列方式（单行）
flex-flow： 复合属性，相当于同时设置了flex-direction和flex-wrap

通过Flex布局设置水平垂直居中

通过给父元素设置CSS样式：

display:flex;
align-items:center;
justify-content:center;

箭头函数和普通函数的区别

箭头函数的 this 永远指向其上下文的 this ，任何方法都改变不了其指向;箭头函数全部都是匿名函数, 书写方式: =>

普通函数的this指向调用它的那个对象;普通函数大多为具名,少部分会用匿名函数

let 、const 和 var 的区别

var 属于函数作用域,有变量提升,可以重复声明
let 属于块级作用域,没有变量提升,不能重复声明
const 属于块级作用域,没有变量提升,变量不能被修改,不可以重复声明,存在暂时性死区

数据类型强制转化和隐式转化的分别怎么使用

隐式转化 :
计算机程序自动完成的转化，但是不会在任何时候都发生，只会在特定的情况下执行
强制转化 :
强制转化就是手动把数据转成想要的数据类型，但不会改变原变量中存储的数据及数据类型

js 数据类型有几种？基本数据类型和引用数据类型是什么，有什么区别

基本数据类型和引用数据类型
Number、String、Boolean、undefined、object、Null、symbol、function
区别 :
1)基本类型在栈内存,引用类型在堆内存分配地址;
2)不同的内存分配机制也带来了不同的访问机制;
3)赋值变量时的不同;
4)参数传递的不同（把实参赋值给形参的过程);

用过哪些盒模型，以及他们各自的区别

IE盒子模型box-sizing:border-box;（怪异模式）
W3C标准盒子模型 box-sizing:content-box;（标准模式）默认模式

区别:
设置css宽高时 IE盒模型宽高会包括内边距 而 w3c盒子模型不会

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

1. 设置display:none; 不显示,不占位
2. Visibility:hidden; 不显示,占位
3. opcity:0 不显示，占位

src和href的区别

href用于建立当前页面和引用资源的关系(链接) 而src会替换当前标签
遇到href 页面会继续向下加载后续内容 而遇到src不同 浏览器会加载完src 后才会向下执行

谈一下你对 使用原生js开发和 使用vue开发的看法

原生js
面向浏览器编程，需要写很多兼容性代码
操作dom更繁琐，复杂交互需要频繁操作dom，且代码不够友好
可扩展性和可维护性没有保证
团队协作困难
开发效率低下
vue
数据驱动视图
组件化开发

移动端适配方案有哪些

viewport适配
通过设置 initial-scale , 将所有设备布局视口的宽度调整为设计图的宽度
vw适配
vw是相对单位，1vw表示屏幕宽度的1%
rem适配
借助media实现rem适配
弹性盒子(flex)适配
flex入口，加在容器上
display:flex;

解构赋值是什么，以及解构赋值的常用写法

es6允许按照一定的模式，从数组或对象中提取值，给变量进行赋值，称为解构赋值

let [a,b,c] = [1,2,3]; console.log(a,b,c)

解构赋值的作用

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

插槽,有哪些类型

指令为v-slot vue实例一套内容分发的api，将slot元素作为承载分发内容的出口

使用场景：复用公共组件

默认（匿名）插槽，自定义插槽，具名插槽

谈谈你对vue3的了解

Vue 3.0 的目标是让 Vue 核心 体积变得更小、运行速度更快、更强大
更加兼容了typescript

flex布局和传统布局有什么区别

传统布局
(1)兼容性好
(2)布局繁琐
(3)局限性，不能再移动端有很好的布局
flex弹性布局
(1)操作方便，布局极为简单，移动端应用很广泛
(2)PC端浏览器支持情况较差
(3)IE 11或更低版本，不支持或仅部分支持

什么是addRoute，有什么作用

添加路由

BOM对象有几种，分别是什么？

1.window 窗口对象 顶级对象
2.navigator 浏览器信息
3.location 地址栏信息
4.history 历史记录
5.screen 可视化对象

本地储存cookie

认识cookie

cookie类型为小型文本文件，是某些网站为了辨别用于身份，由用户端计算机暂时或用永久保存的信息

cookie的特点

1.cookie可以实先跨页面全局变量
2.cookie可以跨同域名下的多个网页，但是不能跨多个域名使用
3.同一个网站中所有页面共享一套cookie
4.可以设置有效期限
5.储存空间只有4kb左右

cookie的优点:

cookie机制将信息储存于用户硬盘，因此可以作为跨页面全局变量，这是他的最大一个优点

cookie的缺点:

1.cookie可能被禁用
2.cookie与浏览器相关，不能互相访问
3.cookie可能被删除
4.cookie安全性不够高
5.cookie储存空间很小 只有4kb左右

cookie的常用场合:

1.保存用户登录状态
2.跟踪用户行为 等等

cookie能用来干什么

1.用于记录用户的登录信息
2.用于限制一些网站进入前的状态

本地储存：把数据储存在本地的浏览器上
1.cookie/session
2.storge 大容量
3.indexedDB 数据库
4.web sql 带sql命令的储存模式

本地存储 Storage

特点：
1.不会随着http请求发送给服务器
2.容易操作
3.移动端普及较高

localStorage为永久性保存数据，不会随着浏览器的关闭而消失，可以在同域名下使用。
设置：localStorage.setItem(‘下标’,‘值’)
读取：localStorage.getItem(‘下标’,‘值’)
查看长度：.length()
查看建：key
删除：removeItem
清空：clear()

谈谈你对单页面的理解以及它的优缺点

单页面应用是指只有一个主页面的应用，浏览器一开始要加载所有必须的 html, js, css。
所有的页面内容都包含在这个所谓的主页面中，内容较多时首页加载速度比较慢

优点：数据驱动、组件化、轻量、简洁

缺点：

不支持低版本的浏览器，最低只支持到IE9；
第一次加载首页耗时相对长一些；
不可以使用浏览器的导航按钮需要自行实现前进、后退。
不利于seo

如何获取dom元素

通过ID获取（getElementById）
通过name属性（getElementsByName）
通过标签名（getElementsByTagName）
通过类名（getElementsByClassName）
通过选择器获取一个元素（querySelector）
通过选择器获取一组元素（querySelectorAll）

回调函数：

自己调用别的函数

递归函数：

自己调用自己

基本数据类型都是深拷贝，引用数据类型都是浅拷贝

深拷贝：A赋值给B，B的改变不会影响A
浅拷贝：A赋值给B，B的改变会影响A

解决深浅拷贝问题：

设置空数组或对象

set

set是不重复数组,用于数组去重

1.初始化 new Set

2.添加 add()

3.删除 delete()

4.获取长度 size

5.遍历 for of

6.转换为数组 Array.from()[…]

promise的语法糖

async await

定义一个promise对象
let p1= new Promise((resolve,reject)=>{
$.ajax({
url:" ",
(成功函数)success(res){
resolve(res)
},
(失败函数)err(res){
reject(res)
}
})
})
p1.then(res=>{
console.log(res)
})

使用promise.all 可以解决异步不能一步一步执行的问题
例: promise.all([ p1,p2,p3,p4 ])

1.闭包：

闭包是指：能够访问另一个函数作用域变量的函数

闭包的特点:

1.函数嵌套函数
2.内部函数可以访问外部函数的变量
3.参数和变量不会被回收
4.构造函数的闭包函数中this指向为window
没有计划的闭包就是浪费资源

数组去重除了set外，还可以怎么做？

答：

• filter()和indexOf()实现去重

• reduce()和includes()实现去重

• 双重for循环 + splice() 或 双重for循环 + push() (ES5的方法）

框架

• https://www.iviewui/
  iview 个人

• https://ant.design/index-cn
  支付宝（蚂蚁金服）

• https://element.eleme/#/zh-CN
  饿了么

• http://vant-contrib.gitee.io/vant/#/zh-CN/calendar
  vant (移动端)

• https://didi.github.io/cube-ui/#/zh-CN/docs/introduction
  cube ui

• https://mint-ui.github.io/#!/zh-cn

• https://nutui.jd/#/intro
  京东

map

map与对象类似,
map的键名可以是任何对象,而对象的键名是字符串或者symbol字符串
map是有序的,按照默认排序

什么是脚手架

vue脚手架指的是vue-cli,它是一个专门为单页面应用快速搭建繁杂的脚手架,
它可以轻松的创建新的应用程序而且可用于自动生成vue和webpack的项目模板

什么是npm

简单来说，NPM（Node Package Manager）是包含在Node.js里面的一个包管理工具，
NPM会随着Node.js一起安装。NPM为开发者提供了一个代码模块共享的大平台，
当我们项目中需要使用某个模块（JavaScript包）时，
可以直接使用NPM包管理工具来下载对应的包并安装，
我们也可以把自己用Node.js写的代码发布到平台上供他人使用。

什么是生产环境什么是开发环境

简单来说，就是在项目的开发阶段就是开发环境；
项目上线了，开始正式提供对外服务，上线后的阶段就是生产环境。
在生产环境下，一般会关掉错误报告，打开错误日志等操作

devDependencies配置的是开发环境，安装项目开发时所依赖的模块。
比如像webpack工具，只是用来构建项目和打包，这些都是在开发阶段才使用的，
等项目上线后就用不到webpack工具了，那么我们就可以把webpack安装到开发环境中，
使用 --save-dev命令安装到devdependencies下

dependencies配置的是生产环境，安装项目运行时所依赖的模块。
比如jQuery库，等项目上线以后依然是要继续使用的，我们就要安装在生产环境中，
如果没有把需要的依赖安装到生产环境中，
项目上线运行时就有可能会报错。使用 --save 命令安装到 dependencies 下