前端面试题--持续更新中

js方面

防抖和节流

防抖：高频率触发的事件,在指定的单位时间内，只响应最后一次，如果在指定的时间在触发，则重新计算时间(后面触发的事件执行，替代了前面的事件)

function one(fn){
	let timeout = null
	return function(){
		cleartTimeout(timeout)
		timeout = SeTimeout(()=>{
		 	console.log(‘防抖成功’)
		},3000)
	}
}

节流：高频率触发的事件,在指定的单位时间内，只响应第一次(前面触发的执行前，忽略后面的事件)

function one(fn, wait){
	let partime = 0
	return function(){
		let data = new Data().getTime()
		if(data-partime > wait){
			fn.apply(this,argments)
			partime = data
		}
	}
}

js闭包

闭包就是一个函数，两个函数彼此嵌套，内部函数就是闭包形成闭包条件是内部函数需要通过return给返回出来。可以避免全局的污染
由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。

function one(){
	var name = 'hellow world'
	return function two(){
		return name
	}
}
var ace = one()
console.log(ace())

事件捕获和事件冒泡

事件捕获：当某个函数出发的时候，从根元素同类型的事件开始，朝着子一级触发，一直到这个事件
事件冒泡：当某个函数触发的时候，他的父级同类型的事件也会被触发，直到根元素

阻止冒泡： event.stopPropagation() vue中.stop
阻止捕获：event.stopImmediatePropagation()

js怎样动态添加事件

addEventListener

typeof返回类型有哪些

string’,‘number’,‘boolean’,‘undefined’,‘symbol’，‘object’，‘function ’

转载于：https://blog.csdn.net/Jet_Lover/article/details/116176668

js怎样判断是不是数组

Array.isArray() // 判断是否是数组

null和undefined 的区别

undefined 变量未定义 变量没有被初始化
null 对象存在 常用于函数返回一个不存在的对象

创建、添加 插入 替换 删除到某个接点的方法

obj.cerateElement()		//创建
obj.appendChidl()		//添加
obj.innersetBefore()	//插入
obj.replaceChild()		//替换
obj.removeChild()		//删除

ajax 和axios的区别

axios 是基于promise的htttp 库，拦截请求和响应 取消请求 自动转换未json数据
ajax是与服务器换数据并更新部分网页，再不重新加载整个页面的情况下
ajax=异步的javascrip 和xml

基本一致 参数有些不同
axios类型是method
type类型是get

说说你对Promise的理解?

所谓 Promise，就是一个对象，用来传递异步操作的消息。它代表了某个未来才会知道结果的事件（通常是一个异步操作），并且这个事件提供统一的 API，可供进一步处理。

Promise 对象有以下两个特点：

(1)、对象的状态不受外界影响。Promise 对象代表一个异步操作，有三种状态：Pending（进行中）、Resolved（已完成，又称 Fulfilled）和 Rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是 Promise 这个名字的由来，它的英语意思就是「承诺」，表示其他手段无法改变。

(2)、一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise 对象的状态改变，只有两种可能：从 Pending 变为 Resolved 和从 Pending 变为 Rejected。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果。就算改变已经发生了，你再对 Promise 对象添加回调函数，也会立即得到这个结果。这与事件（Event）完全不同，事件的特点是，如果你错过了它，再去监听，是得不到结果的。

有了 Promise 对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。此外，Promise 对象提供统一的接口，使得控制异步操作更加容易。
promise 也有一些缺点。首先，无法取消 Promise，一旦新建它就会立即执行，无法中途取消。其次，如果不设置回调函数，Promise 内部抛出的错误，不会反应到外部。第三，当处于 Pending 状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）。

访问一个url经历的过程

客户端获取URL - > DNS解析 - > TCP连接 - >发送HTTP请求 - >服务器处理请求 - >返回报文 - >浏览器解析渲染页面 - > TCP断开连接

浏览器之间的通讯

使用localStorage.setItem(key,value);添加内容

使用storage事件监听添加、修改、删除的动作

window.addEventListener("storage",function(event){
    $("#name").val(event.key+”=”+event.newValue);

h5和c3的新特性

h5的新特性：
1、语义化标签：header、footer、nav\section、article、aside
2、表单输入类型：email、tel 、number、url
3、视频标签：audio、video
4、拖拽属性：draggable
5、类型：classlist
cookie的大小不超过4kb，且每次请求都会发送回服务器，在设置的过期时间前有效，即使关闭浏览器

h5提供：

localStorage：数据始终有效，直到手动去删除。跨浏览器无效，浏览器提供的本地数据库，至少250kb，甚至没有上限
localStorage.setItem(key,value)
locatStorage.getItem(key)
localStorage.removeItem(key)
sessionStorage：基于会话，关闭浏览器之后数据消失，5M大小，跨浏览器无效

c3:
1、选择器：nth-child()、nth-of-type（）
2、盒模型
3、背景：background-image\background-size\background-origin
4、渐变：linear-gradient radial-gradient
5、边框：border-radius、border-image
6、阴影：box-shadow\text-shadow
7、2d/3d转换：transform:translate rotate scale
8、过度：transtion
9、弹性盒子：flex
10、动画：keyframes、animation
11、媒体查询：@media

转载于：https://blog.csdn.net/weixin_48549175/article/details/112250454

数组去重

使用es6数组去重
[...new Set(array)]

js普通去重
for(var i =0; i<arr.length;i++){
		var b1 = true
		for(var j= 0; j <newArr.length; j++){
			if(arr[i] === newArr[j]){
			b1 = false
			break
			}
		}
		if (b1){
			newArr.push(arr[i])
		}
	}

深拷贝和浅拷贝

直接等于号就是浅拷贝或者Object.assign()
深拷贝：json.parse(json.stringify())

普通函数和箭头函数的this指向

普通函数：谁调用this指向谁
箭头函数：this指向父级元素

es6的新特性有哪些

1)let声明变量和const 声明变量，两个都是块作用域
es5种没有块作用域，并且var有变量声明提前,在let种，使用的变量一定要进行声明
2)箭头函数
es6种函数名定义不在使用关键字function(),利用()=>来定义
3）模板字符串
模板字符串是增强版的字符串，用反引号（`）标识，可以当作普通字符串使用，也可以用来定义多行字符串
4）解构赋值
ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值
5）for of循环
for…of循环可以遍历数组、Set和Map结构、某些类似数组的对象、对象，以及字符串
6）import、export导入导出
ES6标准中，Js原生支持模块(module)。将JS代码分割成不同功能的小块进行模块化，将不同功能的代码分别写在不同文件中，各模块只需导出公共接口部分，然后通过模块的导入的方式可以在其他地方使用
7）set数据结构
Set数据结构，类似数组。所有的数据都是唯一的，没有重复的值。它本身是一个构造函数
8）… 展开运算符
可以将数组或对象里面的值展开；还可以将多个值收集为一个变量
9）修饰器 @
decorator是一个函数，用来修改类甚至于是方法的行为。修饰器本质就是编译时执行的函数
10）class 类的继承
ES6中不再像ES5一样使用原型链实现继承，而是引入Class这个概念
11）async、await
使用 async/await, 搭配promise,可以通过编写形似同步的代码来处理异步流程, 提高代码的简洁性和可读性
async 用于申明一个 function 是异步的，而 await 用于等待一个异步方法执行完成
12）promise
Promise是异步编程的一种解决方案，比传统的解决方案（回调函数和事件）更合理、强大
13）Symbol
Symbol是一种基本类型。Symbol 通过调用symbol函数产生，它接收一个可选的名字参数，该函数返回的symbol是唯一的
14）Proxy代理
使用代理（Proxy）监听对象的操作，然后可以做一些相应事情

var、let、const之间的区别

var声明变量可以重复声明，而let不可以重复声明
var是不受限域块级元素，而let是受限于块级元素
var可以声明的上面访问变量，let有暂存死区，声明上面访问变量会报错
const声明必须赋值，否则报错
const定义不可变的两，改变了就会报错

setTimeout、Promise、Async/Await 的区别

事件循环中分为宏任务队列和微任务队列

其中setTimeout的回调函数放到宏任务队列里，等到执行栈清空以后执行

promise.then里的回调函数会放到相应宏任务的微任务队列里，等宏任务里面的同步代码执行完再执行

async函数表示函数里面可能会有异步方法，await后面跟一个表达式

async方法执行时，遇到await会立即执行表达式，然后把表达式后面的代码放到微任务队列里，让出执行栈让同步代码先执行

for of 和for in的区别

for in 获取的是对象的键名
for of 获取的是对象的键值
for of运行更快

跨域是什么引起的

造成跨域的原因是浏览器的同源策略
1、不同域名
2、同域名下不同文件
3、同域名下不同的端口
4、同域名不同协议
5、主域名相同子域名不同
6、同域名不同二级域名
解决方案
1、jsonp 跨域 需要目标服务器配置callback函数
2、修改document.domain 来跨域
将子域和主域的document.domain设为同一个主域.前提条件：这两个域名必 须属于同一个基础域名!而且所用的协议，端口都要一致，否则无法利document.domain进行跨域主域相同的使用document.domain
3、使用window.name来跨域
window.name+iframe 需要目标服务器响应window.name,window对象有个name属性，该属性有个特征：即在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的，每个页面对window.name都有读写的权限，window.name是持久存在一个窗口载入过的所有页面中的!
4、通过CORS解决AJAX跨域
5、通过设置Access-Control-Allow-Origin
6、通过Nginx反向代理

前端页面分为那三层

一、网页的结构层(structural layer) 由HTML或XHTML之类的标记语言负责创建。
标记语言也就是指网页的标签，标签只对网页内容的语义和含义做出描述，不包含任何关于如何显示内容的信息。
二、网页的**表示层(resentation layer)由CSS负责创建。
作用是对内容如何显示做一定的控制。
三、网页的行为层(behavior layer)**由JavaScript语言和DOM创建。
作用是控制用户做出一个事件该如何显示。例如：用户悬浮在某个元素上，弹出一个显示元素标题内容的提示框。

和=有什么区别？

===比较类型和值，==只比较值。

css方面

CSS实现三角形

width: 0;
height: 0;
border-top: 50px solid black;
border-right: 50px solid red;
border-bottom: 50px solid green;
border-left: 50px solid blue;

盒模型

constnet padding margin border

清除浮动的方式

写个div 加上 clear:both
给父盒子设置高度

设置局中的方式

第一种
	position:absolute
	top：50%；
	left: 50%;
	transform:translate(-50%,-50%)

第二种
	postion:avsolute
	top:0
	left:0
	right:0
	bottom:0
	margin:auto
第三种
	display:flex
	align-item:center
	justify-content:center

如何解决上层div元素将下层div元素盖住，但是下层div里的点击事件仍可以进行的问题?

对上层元素使用：pointer-events: none;这样点击事件就能穿透上层元素，找到下层的点击事件。
如果想让上层元素也能得到点击事件，只需要在你需要获得点击的上层元素子元素中加入：pointer-events: auto;

css html元素隐藏

display:none 不占位
visibility: hidden 占位隐藏
opacity: 0; 调整图透明度隐藏

怎样让谷歌浏览器支持小于12px文字

1、zoom可以改变页面上元素的尺寸，属于真实尺寸 zoom: 0.8;
2、-webkit-transform:scale()只对可以定义宽高的元素生效，如果是行内元素的话，应该先转为行内块元素。
3、用于设定文字大小是否根据设备来自动调整显示大小：

vue相关的面试题

生命周期函数

初始化

beforecreate():
只有一些默认的生命周期钩子和默认事件，无法访问数据和dom

create（创建后）
dom和methods 已经初始画完成，可以修改数据，在这个阶段做数据的初始画和页面的初始化

挂载

beformout()
data初始画完成，该阶段服务器依然不可以调用

mouted
函数挂在完成

更新

beforeupdate
数据更改前调用 可以在钩子函数改变状态 不重复调用

update
数据改变时候调用

销毁
beforedestory
清除挂在的dom事件，清除定时器

destoryed
清除所有的式列dom事件

vue高阶函数

filter(过滤器)

循环
map()

const num = [1,2]
let newnums = num.map((item)=>{
return item*2
})

封装组件步骤

1、准备组件模板，搭架子，写css样式
2、准备号组件的数据输入，分析好逻辑，定义好props里面的数据
3、准备好组件的输出，更具逻辑做好暴露方法
4、封装完毕后，直接调用

组件之间传值

父传子：props
子传父：$emit
子组件之间传递数据:eventbus
vuex

vuex

state 数据生命，暂放状态
getters 数据的计算方法
mutations 更改状态的逻辑 同步的
active 提交mutation异步的
mudules将state模块化

watch 和computed的区别

watch 监听某个响应数据的变化，知道改变后执行的逻辑
computed自动监听依赖值的变化，只需要动态值，可以缓存

vue-router 有哪些钩子

	berforeEach  导航首位
	beforReslve 解析钩子
	afterEach 后置钩子
	beforeEnter 路由独享

初次加载响应那些生命周期的钩子函数

beforcreate 
create 
beforemout 
mouted

data为什么是一个函数

数据以函数的形式返回这样的化我们每次复用组件的时候返回新的data相当与组件时控件，他们负责各自维护数据，不会混乱，而携程对象的形式组件修改所有的都会被修改

lochasd.href 跳转和 router.push跳转有什么区别

lochasd.href :刷新页面
router.push 不刷新页面

v-if 和 v-show 的区别

能够共同控制元素的显示和隐藏
v-if是通过删除和创建dom节点
v-show 是通过display:none来隐藏
平凡切换使用v-show

vue 双向数据绑定原理

组要采用数据劫持结合发布者-订阅者模式通过object.defineproperty()来劫持各个属性的setter、getter 在数据变化是发布消息给订阅者，触发相应监听回调

vue中自定义过滤器

可以用全局方法 Vue.filter() 注册一个自定义过滤器，它接收两个参数：过滤器 ID 和过滤器函数。过滤器函数以值为参数，返回转换后的值。

Vue.filter('reverse', function (value) {
 return 	value.split('').reverse().join('')
})

vue-router两种模式

两种模式是 hash和history
hash 的url带有#号 history 不带
1、hash模式的实现原理
url中的hash 值直是客户端的一种状态，也就是说当向服务器发送请求的时候，hash部分不会被发送
hash值的变化，都会在浏览器访问历史中增加一个记录，应为我们能通过浏览器回退快进按钮控制hash的切换
可以通过a标签，并设置href属性当用户点击这个标签后，url的hash值会发生改
我们可以使用hashchange事件监听hash值的变化，从而对页面进行跳转
2、history模式的实现原理
pushstae 和replacestate 两个api来操作实现url的辩护
我们可以使用propstate 事件监听url变化，从而来对页面进行跳转
history.pushState()或history.relaceState()不会触发prostat事件，这是我们需要手动触发页面跳转
3、history的问题
history 路由需要后台配合支持，应为我们应用是单页面客户端，如果后台没有正确的配置，当用户在浏览器直接访问的时候就会出现404，所以要在服务器增加一个覆盖所有情况的候选资源：如果url匹配不要任何竟在资源，则应该返回同一个index.html页面，这个页面就是你的app依赖的页面

转载于https://blog.csdn.net/snsHL9db69ccu1aIKl9r/article/details/119192981

v-for循环中key的作用是什么？

在vue中for循环其实本质是代表一组DOM的渲染，当这组DOM发生变化时就会体现key的价值，就比如说我们有一个list，里面有三个元素分别是a、b、c,我们通过v-for这三个数据渲染到页面中，再将list中的三个元素中的某一个发生改变，改为a、d、c,在这里由于a\c未发生变化就不需要重新渲染a和c的数据，只需要重新将b数据渲染为d数据，程序判断a和c是否发生变化就需要通过key了，vue渲染的方式是将vnode虚拟节点渲染成为真实节点，但是vnode是通过复杂类型进行表示的，复杂数据类型不存在全等的概念，所以就需要使用到vue中issamevNodeType方法通过vnode的type和key来判断两个vnode是否是同一个，type是渲染的标签类型，key是在循环中我们绑定的key,通过判断就可以之渲染改变后的数据，从而提高渲染的性能

项目相关

怎样优化项目

1、优化图片的大小和懒加载
2、v-for 必须加key值加快diff算法的速度
3、组件库按需导入
4、v-if和v-show减少初次渲染切换
复用方法和组件