H5前端面试题

1.src和href的区别 ？

Src是img标签中用来引入图片的方法
Href是a标签中要跳转的地址
Src用来替代这个元，而href用来建立这个标签与外部资源的关系

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

Display:none;	不占用页面空间
Opacity:0;	透明度为0，仍然会占用页面空间
Overflow:hidden;	超出不显示
Visibility:hidden; 仍然会占用页面空间

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

主要区别：宽高的定义不同
标准盒模型：设置的宽就等于内容的宽		box-sizing:content-box;
怪异盒模型：内容的宽 = 设置的宽 - padding的宽 - border的宽	box-sizing:border-box;

4.谈谈你的移动端适配方案有哪些？

百分比布局
响应式布局
Vw/vh布局
Rem布局
弹性盒子布局

5.js 数据类型有几种？它们之间的区别是什么？

基本数据类型，引用（复杂）数据类型
区别：
基本类型在栈内存储，引用类型在堆内存储
不同的neicun分配机制也带来了不同的访问机制
赋值时变量的不同
传递参数的过程不同（把实参赋值给形参的过程）

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

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

7.let const 和 var 的区别 ？

Var声明变量存在变量提升，即变量可以在声明之前调用，值为：undefined
Let const 不存在变量提升，一定要在声明后调用，否则会报错
Var不存在块级作用域
Let const存在块级作用域
Var允许重复声明
Let const在同一作用域不允许重复声明
Var let 可以修改声明的变量
Const声明一个只读的常量，一旦声明常量的值就不能修改

8.箭头函数和普通函数的区别 ？

外形不同：箭头函数使用箭头（=>）定义，普通函数没有
箭头函数都是匿名函数：普通函数可以有匿名函数和具名函数，但是箭头函数都是匿名函数
箭头函数不能用于构造函数，不能使用new。普通函数可以用于构造函数，以此创建对象实例
箭头函数的this指向不同，箭头函数没有自己的this，他的this是声明时所在的上下文的this，在普通函数中this总是指向调用他的对象

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

回调地狱的意思通俗点讲就是回调函数在调用回调函数，从而使之进入一个死循环，这就形成了所谓的回调地狱，而想	要解决这一方法就只有使用ES6新增的promise方法

10.说明原生ajax的实现步骤？

Var xhr = new XMLHttpRequest()
Xhr.open(‘get’,请求的网址，async（同步异步）)
Xhr.send()
Xhr.onreadystatechange=()=>{
	If(this.readystate == 4 && this.status == 200){
		成功
	}else{
		失败
	}
}

11.什么情况下会导致跨域？

跨域，指的是浏览器不能执行其他网站的脚本。 它是由浏览器的同源策略造成的，是浏览器	施加的安全限制。 同源策略：所谓同源是指：协议，域名，端口均相同。 即便两个不同的	域名指向同一个ip地址，也非同源。

12.Vue生命周期有哪些方法，分别有什么作用，简单说明

创建前：Beforecreate	实例已经初始化，但不能获取DOM节点。(没有data，没有el)
创建后：Created			实例已经创建，仍然不能获取DOM节点。(有data，没有el)
挂载前：beforemount		模板编译完成，但还没挂载到界面上。(有data，有el)
挂载后：Mounted			编译好的模板已挂载到页面中(数据和DOM都已经渲染出来)。
更新前：beforeupdate	数据发生变化立即调用，此时data中数据是最新的，但页面上数据仍然是旧的(检测到数据更新时，但DOM更新前执行)。
更新后：Updated			更新结束后执行，此时data中的值和页面上的值都是最新的。
销毁前：beforedestroy	当要销毁vue实例时，在销毁之前执行。
销毁后：Destroyed		在销毁vue实例时执行。

13.使用vue中的v-for时,为什么要绑定 :key? 如果不绑定会有什么效果？

v-for默认使用就地复用策略，列表数据修改的时候，他会根据key值去判断某个值是否修改，如果修改，则重新渲染这一项，否则复用之前的元素,如果不绑定key的话,每次修改某一条数据,都会重新渲染所有数据,会导致大量内存的浪费。如果绑定了key，每次修改某一条数据的时候，就只会重新渲染改条数据的变化，节省了大量的内存。

14.v-show 和 v-if 的作用和区别, v-bind 和 v-model的作用和区别？

v-show和v-if的作用：控制元素的显示与隐藏
v-show切换元素的didplay属性none隐藏block显示
用来控制元素显示隐藏初始化会渲染
适用于频繁切换显示隐藏元素不能在template上使用
简单基于css的切换
v-if通过DOM是否存在来控制组件显示隐藏
  	初始化不会渲染
  	不适用于频繁切换显示隐藏的组件，能在template上使用
  	切换过程中合适地销毁和重建
使用场景不同：
  	if 多用于需要判断数据 从而整体删除一个标签时
  	(不频繁切换显示状态)
  	show 多用于通过判断数据来处理标签的显示时
(频繁切换显示状态)

v-bind 和 v-model相同点： 用来绑定数据到标签中，符合数据驱动视图
v-bind:单向绑定，绑定数据，属性和表达试，缩写为"：" 只负责数据显示的标签
v-model双向绑定，主要用于表单中 同时负责数据显示和收集的标签

15.vue 组件通信如何实现，至少列举3种方式并说明各自的局限性？

父组件通过v-bind绑定一个自定义的属性，子组件通过props接收父组件传来的数据；
子组件通过$emit触发事件，父组件用on()或者在子组件的自定义标签上使用v-on来监听子组件触发的自定义事件，从而接收子组件传来的数据。
ref如果在普通Dom元素上使用，引用指向的就是 DOM 元素；如果在子组件上使用，引用	就指向组件实例，可以通过实例直接调用组件的方法和数据

16.详细说明vue组件中 data ，computed 和 watch的区别？

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

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

keep-alive是vue内置的一个组件，而这个组件的作用就是能够缓存不活动的组件，我们能够知道，一般情况下，组件进行切换的时候，默认会进行销毁，如果有需求，某个组件切换后	不进行销毁，而是保存之前的状态，那么就可以利用keep-alive来实现 字符串或正则表达式。

18.vue-router的作用是什么？ 为什么不使用a标签？

vue-router：动态路由，用于跳转页面，另外vue-router还可以实现页面间传参等其他功能
这是因为用Vue做的都是单页应用（当你的项目准备打包时，运行 npm run build 时，就会	生成dist文件夹，这里面只有静态资源和一个index.html页面），所以你写的<a></a>标签是不起作用的，你必须使用vue-router来进行管理

19.vuex 是什么？ 怎么使用？为什么用使用它？

为处理复杂的组件通信，所以使用的一种状态管理模式
它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化
state 数据源，载体
getters 用于改变state的值，派生出多个数据源
mutation 唯一可以提交可以改变state的状态，也就是数据的属性值
actions 提交的是mutation,用commit提交 而不是直接变更状态，可以包含任意异步出操作
modules 拆分成多个模块
vuex就是将数据共享给多个组件共同使用，同时也将这个数据的状态进行了共享（一个组件改变这个数据的状态其它组件也跟着改变）

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

原生js
	面向浏览器编程，需要写很多兼容性代码
	操作dom更繁琐，复杂交互需要频繁操作dom，且代码不够友好
	可扩展性和可维护性没有保证
	团队协作困难
	开发效率低下
vue
	1)优点 :
   		基于MVVM 实现的数据驱动视图，解放了DOM操作
    	View 与 Model 分离处理， 降低代码的耦合度
	2)缺点:
    	当双向绑定时，Bug调试难度增大
    	大型项目中，View和Model过多，维护成本过高

21.Vue修饰符有哪些？

.prevent：阻止默认行为
.stop：阻止事件冒泡
.self：当事件发生在该元素本身而不是子元素的时候会触发
.once：只执行一次
.capure：事件侦听，事件发生的时候会调用

22.Vue-router导航守卫钩子有哪些类型，执行顺序是什么？

全局守卫		路由独享守卫		组件内守卫

导航被触发。
在失活的组件里调用 beforeRouteLeave 守卫。
调用全局的 beforeEach 守卫。
在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
在路由配置里调用 beforeEnter。
解析异步路由组件。
在被激活的组件里调用 beforeRouteEnter。
调用全局的 beforeResolve 守卫 (2.5+)。
导航被确认。
调用全局的 afterEach 钩子。
触发 DOM 更新。
调用 beforeRouteEnter 守卫中传给 next 的回调函数，创建好的组件实例会作为回调函数的参数传入。

23.Vue中data为什么是一个函数？

如果data是对象的话，由于对象是引用类型，组件被复用的话，就会创建多个实例。本质上这些实例，都是同一个构造函数，为了避免组件之间的data冲突，data必须是一个函数。

24.ES6有哪些新特性？

Let、const、箭头函数、点点点运算符、变量的解构赋值简化对象写法、导入导出（import，export）、
形参的默认值、模板字符串、Promise、symbol、class类、for in、for of、Set、map、generator（接呢瑞特）

25.html5有哪些新特性、新标签？

语义化标签：header（头部标签）nav（导航栏标签）main（主体标签）section（划分区块）aside（侧栏标签）footer（页脚标签）
本地存储：localstorage	（永久存储）	sessionstorage（临时存储）
音频标签：audio	视频标签：video
表单标签：form
画布：canvas

26.简单介绍原型链？

所有对象都有自己的原型对象（prototype）。一方面，任何一个对象，都可以充当其他对象的原型；另一方面，由于原型对象也是对象，所以它也有自己的原型。因此，就会形成一个“原型链”（prototype chain）最终都可以上溯到Object.prototype Object.prototype对象有没有它的原型呢？回答Object.prototype的原型是null。null没有任何属性和方法，也没有自己的原型。因此，原型链的尽头就是null。

27.说一下你对Promise的了解？说说你对Promise的原理的理解？

Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。
所谓promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。

28.什么是事件委托？为什么这样做？

它还有一个名字叫事件代理，事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。
为什么这样做呢？通过事件委托可以减少事件处理程序数量，这样就能大大的减少与dom的交互次数，提高性能；

29.简述一下对闭包理解？

闭包：在一个外函数中定义了一个内函数，内函数里运用了外函数的临时变量，并且外函数的返回值是内函数的引用。这样就构成了一个闭包。一般情况下，在我们认知当中，如果一个函数结束，函数的内部所有东西都会释放掉，还给内存，局部变量都会消失。但是闭包是一种特殊情况，如果外函数在结束的时候发现有自己的临时变量将来会在内部函数中用到，就把这个临时变量绑定给了内部函数，然后自己再结束。经常用闭包来实现面向对象编程
一个函数和它的周围状态的引用捆绑在一起的组合
是一个可以读取其他函数内部变量的函数，在js中只有函数内部的函数才可以读取该函数内部的变量，因此，闭包可以是一个函数中返回的函数。
闭包的好处：可以读取其他函数你内部的变量，并将其一直保存在内存中。
坏处： 可能会造成内存泄露或者内存溢出

30.axios的原理，基于什么实现的？

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。
axios还是属于 XMLHttpRequest， 因此需要实现一个ajax；还需要一个promise对象来对结果进行处理。

31.js中new操作符做了哪些事情？

new操作符新建了一个空对象，这个对象原型指向构造函数的prototype，执行构造函数后返回这个对象

1、创建一个空对象
2、这个对象的原型指向构造函数的prototype
3、绑定this指向，执行构造函数
4、确保返回的是对象

32.本地存储和cookie的区别？

存储大小，本地存储官方说法是 5M 的大小，然而 Cookies 的存储大小更小并且和浏览器本身有关（大概在 4000个字节左右）
Cookie 存储的内容会保留在 HTTP 请求的 Header 中，并且会随每次请求发送到浏览器；然而本地存储只会保留在客户端，浏览器请求过程不会发送到服务端。

33.说一下对proxy的理解？

Proxy可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。
Proxy 这个词的原意是代理，用在这里表示由它来“代理”某些操作，可以译为“代理器”

34.vuex中如何实现数据持久化（数据刷新不掉）？

为了防止刷新数据丢失，可以将一些数据保存在localstorage、sessionstorage或cookie中，可以保证页面刷新数据不丢失且易于读取。

35.vue是如何实现数据双向绑定的？

vue.js是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图。

36.什么是插槽，插槽的分类，分别在什么情况下使用？

Vue 为 组件的封装者 提供的能力

1.匿名插槽：没有名字的插槽
2.具名插槽：有名字(name属性)的插槽
3.作用域插槽：子组件中的数据只能子组件访问到，但是我们的插槽往往定义在父组件中，这个时候就需要作用域插槽来打通他们之间的关系，然后就能在父组件中愉快的使用子组件的数据了。

当子组件被复用时，需要在特定的区域展示不同的定制化的内容。

37.什么是jsx，使用jsx语法有什么好处？

JSX 是 JavaScript 的一种扩展，为函数调用和对象构造提供了语法糖，特别是 React.createElement()。
JSX和模板引擎或 HTML相似，但它不是。JSX 生成 React 元素，同时允许充分利用 JavaScript 的全部功能。

JSX优点：
	开发人员体验代码：更易读，更形象，类 XML 语法可更好地表示嵌套的声明式结构。
	非正式开发人员：可更容易修改代码，因 JSX 类似HTML。
	减少语法错误，开发人员代码量变少。

38.说一说react的生命周期（class组件或者react hooks中的都行）？

组件将要挂载时触发的函数：componentWillMount
组件挂载完成时触发的函数：componentDidMount
是否要更新数据时触发的函数：shouldComponentUpdate
将要更新数据时触发的函数：componentWillUpdate
数据更新完成时触发的函数：componentDidUpdate
组件将要销毁时触发的函数：componentWillUnmount
父组件中改变了props传值时触发的函数：componentWillReceiveProps

39.Vue-router路由模式有几种，分别是什么？

1.hash路由
	hash路由是依据‘#’后的地址进行监听跳转的，通过location.hash来获取当前的hash值，通过hashchange事件进行监听，相同的hash地址不会触发该事件。
2.history
	该模式是利用h5新增的pushstate和replacestate将地址直接压入历史记录栈中，通过popstate进行监听实现页面跳转的。
	该模式如果访问的相同的地址会导致404报错，需要后端进行相应的配置
3.abstract
	该种模式支持js运行环境，比如在nodejs中。当识别不到window的api的时候就会强制进入该种模式。

40.判断js对象是否具备某一属性（至少写出三种）？

hasOwnProperty  查看对象中是否包含某一属性
返回一个布尔值 true / false
语法：obj.hasOwnProperty('name')

in 运算符  
语法：'name' in obj

（.）与 undefined 相较
语法：obj.age == undefined

以上就是H5前端面试题，后续会持续更新，敬请关注。