前端面试题进阶

冒泡排序

let arr=[9,2,5,3,7,0]
function arrSort(arr){
	for(var i=0;i<arr.length-1;i++){
		for(var j=0;j<arr.length-i-1;j++){
			if(arr[j]>arr[j+1]){
				var tmp = arr[j];
				arr[j] = arr[j+1];
				arr[j+1] = tmp;
			}
		}
	}
	return arr;
}
console.log(arrSort(arr))

事件冒泡

function StopProgation(e){
	if(e.stopPropagation){
		e.stopProgation()
	}else{
		e.cancelBubble=true;
	}
}

取消事件默认行为

function PreventDefault(e){
	if(e.preventDefault){
		e.PreventDefault();
	}else{
		e.returnValue =false;
	}
}

sort排序

var arr = new Array(9,2,5,3,7,0);
function arrSort(a,b){
return b-a;
}
arr = arr.sort(arrSort);
console.log(arr)

数组去重

function unique(arr){
var array=[];
for(var i=0;i<arr.length;i++){
if(array.indexOf(arr[i])===-1){
array.push(arr[i]);
}
}
return array
}
var arr = [4,4,5,6,6,5,1,2,1,3]
console.log(unique(arr))

说一下你对Vue组件复用机制的认识,Vuex的认识 ?
组件需要注册后才可以使用,注册有全局注册和局部注册两种方式。
Vuex是一个专为了vue.js 应用程序开发的状态管理模式


什么是深拷贝,什么是浅拷贝,如何实现引用数据类型的深拷贝?
浅拷贝就是两个对象引用的是同一个的内存空间,一个改变全部改变。
深拷贝就是两个对象,旧对象还是用原来的储存空间。但是新对象就不同了,新对象
自己开辟了 一个新的空间,自己对自己控制,不再受原来空间的限制。


什么是内存泄漏,常见的自动内存管理机制有哪些(至少两个)他们的原理是什么?
内存泄漏是指无法摄放已经占用的内存空间
标记清除和引用计数
标记清除是通过标记的对象来确定是否清除
引用计数是踪记录每个值被引用的次数。当声明了一个变量并将一个引用类型赋给该变量时,则这个值的引用次数就是1。如果同一个变量又被赋给另外一个变量,则该值的引用次数加1。相反,如果包含对着值引用的变量又取得了另一个值,则这个值的引用次数减1。


Vue数据双向绑定的原理及其实现
a.vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的
实现过程:

1.实现一个监听器Observer,用来劫持并监听所有属性,如果有变动的,就通知订阅者。

2.实现一个订阅者Watcher,可以收到属性的变化通知并执行相应的函数,从而更新视图。

3.实现一个解析器Compile,可以扫描和解析每个节点的相关指令,并根据初始化模板数据以及初始化相应的订阅器。

MVC与MVVM的理解?
a.MVC
MVC模式:指Model、View、Controller三层。

	视图层(View):主要是用户界面的展示
	控制层(Controller):主要是处理Model层和View层的交互,对业务逻
	模型层(Model):主要是对数据的CRUD操作辑的处理。

b.MVVM
MVVM模式:指Model、View、ViewModel三层。

	视图层(View):调用ViewModel的方法并响应变化。
	视图模型层(ViewModel):主要做业务的调度者,分割了View层和Model层。
	模型(Model):数据模型

GET、POST的区别?
a.get是从服务器上获取数据,post是向服务器传送数据。
b.get传送的数据量较小,不能大于2KB。post传送的数据量较大,一般被默认为不受限制
c.get安全性非常低,post安全性较高。


怎样避免全局变量污染?
a.尽量少使用全局变量
b.使用闭包
ES5严格模式的作用和规定?
作用: a.消除javascript语法的一些不合理、不严谨之处,减少一些怪异行为
b.消除代码运行的一些不安全性,促进代码运行的安全
c.提高编译器效率,增加运行速度;
d.为未来新版本的javascript做好铺垫
规定: a、全局变量显示声明

	b、禁止对象属性重名、禁止函数参数重名

	c、禁止使用with语句

	d、函数预编译中this默认为undefined

ajax跨域有哪些方法?
方法一:XHR2
方法二:服务器跨域
方法三:CORS
方法四:jsonp
jsonp原理:用了script标签不受同源策略的限制,在页面中动态插入了script,script标签的src属性就是后端api接口的地址,并且以get的方式将前端回调处理函数名称告诉后端,后端在响应请求时会将回调返还,并且将数据以参数的形式传递回去。


Vue相对于jQuery在开发上有什么优点
a.Vue比JQuery减少了 DOM 操作
b.组件化模式,开发效率高,方便维护
什么是虚拟DOM:使用js对象模拟DOM,在操作过程中不会直接操作DOM,等待虚拟DOM操作完成,仅仅比较开始和结束状态虚拟DOM有哪些变换,最终根据结束状态虚拟DOM去操作DOM。


string的方法有哪些?

concat()连接两个或多个字符串,并返回新的字符串
split()把字符串分割为字符串数组
substr()从起始索引号提取字符串中指定数目的字符
indexOf(’ ‘)返回字符串指定字符最开始出现的位置
LastindexOf(’ ')返回字符串指定字符最后出现的位置
replace()替换匹配的字符串
slice()提取字符串的片段,并在新的字符串中返回被提取的部分
toLocaleLowerCase()把字符串转换成小写
toLocaleUpperCase()把字符串准换成大写
toLowerCase()把字符串转换成小写


array的方法有哪些?

slice[start,end]:返回从原数组中指定开始下表到结束下表之间的项组成的新数组(原数组不变)
splice():删除,2个参数,起始位置,删除的项数
pop():删除数组的最后一个元素,减少数组的长度,返回被删除的值
push():将参数添加到数组的最后,返回新数组的长度
shift():删除数组的第一个参数,数组的长度减1,无参
unshift():像数组的开头添加一个或更多的元素,并返回新的长度。(参数不限)
sort():按指定的参数对数组进行排序,返回的值是经过排序后的数组(无参,函数)
concat():把两个字符串连接起来,返回的值是一个副本(参数不限)
join():将数组的元素组成一个字符串,以separator(分割器)
indexOf():从数组的开头向后查找,接受两个参数,要查找的项和查找起点的位置索引
foeEach():对数组的每个元素执行一次提供的函数。
filter()创建一个新的数组,符合条加的元素并生成新的数组
findIndex()返回元素的位置


什么是闭包?
1.闭包就是能够读取其他函数内部变量的函数
2.闭包简单理解成"定义在一个函数内部的函数"
3.闭包就是将函数内部和函数外部连接起来的一座桥梁
作用:读取函数内部的变量,让这些变量的值始终保持在内存中。
缺点:容易造成内存泄露


什么是promise函数?

  1. promise是实现异步操作的方式,有三个状态,pending(进行中).fulfilled(已成功),rejected(已失败) 优点:解决回调地狱 缺点:一旦执行无法停止,报错不明显

什么是async/await?

  1. async/await是写异步代码的新方式,promise的语法糖
    作用:async能够将函数变成异步,await是等待异步操作执行完
    优点:语法简洁代码直观,报错明显

this的指向问题?
1.普通函数的this是由动态作用域决定,它总指向于它的直接调用者
2.在默认情况(非严格模式,未使用 ‘use strict’),如果函数没有直接调用者,this为window
在严格模式下,如果函数没有直接调者,this为undefined
3.call,apply,bind绑定的,this指的是绑定的对象


Vue 路由有哪些?
全局守卫:
1.router.beforeEach
2.vue router.afterEach
3.router.beforeResolve
组件内守卫:
1.beforeRouteEnter、
2.beforeRouteUpdate、.
3.beforeRouteLeave
路由独享的守卫
beforeEnter


vue computed和watch的区别是什么?
计算属性computed :
1、支持缓存,只有依赖数据发生改变,才会重新进行计算
2、不支持异步,当computed内有异步操作时无效,无法监听数据的变
3、computed 属性值会默认走缓存,计算属性是基于它们的响应式依赖进行缓存的,也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值
4、如果一个属性是由其他属性计算而来的,这个属性依赖其他属性,是多对一或者一对一,一般用computed
5、如果computed属性属性值是函数,那么默认会走get方法;函数的返回值就是属性的属性值;在computed中的,属性都有一个get和一个set方法,当数据变化时,调用set方法。

侦听属性watch:
1、不支持缓存,数据变,直接会触发相应的操作;
2、watch支持异步;
3、监听的函数接收两个参数,第一个参数是最新的值;第二个参数是输入之前的值;
4、当一个属性发生变化时,需要执行对应的操作;一对多;
5、监听数据必须是data中声明过或者父组件传递过来的props中的数据,当数据变化时,触发其他操作,函数有两个参数,
immediate:组件加载立即触发回调函数执行,
deep: 深度监听,为了发现对象内部值的变化,复杂类型的数据时使用,例如数组中的对象内容的改变,注意监听数组的变动不需要这么做。注意:deep无法监听到数组的变动和对象的新增,参考vue数组变异,只有以响应式的方式触发才会被监听到。


HTTP请求的五个步骤?
1.创建XML httprequest 异步对象
2.创建HTTP请求方式
3.响应请求
4.发送请求
5.获取异步调用返回的数据


HTTP请求的事务过程?
1.域名解析
2.发起TCP三次握手
3.建立TCP链接后发起http请求
4.服务器响应http后发起请求,浏览器得到html的代码
5.浏览器解析HTML代码,并得到HTML代码中的资源
6.浏览器对页面进行渲染呈现给用户
7.连接结束


es6中map和foreach的区别?
相同点:
1.都是循环遍历数组中的每一项
2.有三个参数,参数分别为item,index,arr
3.匿名函数中的this都指向window
4.只能遍历数组
不同点:
1.map()会分配内存空间存储新数组并返回,foreach()不会返回新数组
2.forEach()允许callback更改原始数组的元素。map()返回新的数组。


什么是事件循环机制?
js是一门单线程语言,任务进入执行栈会分为同步任务或异步任务,同步任务会优先在主线程中执行,异步任务会进入到事件队列等待主线程执行完再推到主线程执行,异步队列又分为宏任务和微任务,微任务的执行优先于宏任务,这整个过程称为一个事件循环
宏任务:setTimeout, setInterval, setImmediate, I/O, UI rendering
微任务:process.nextTick, promise.then, MutationObserver
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述


浏览器中400,401,403,404分别代表什么意思?
400:请求参数错误
401:未登录,请授权
403:跨域拒绝访问
404:请求地址错误


vue2 和 vue3 数据绑定的区别?

vue2主要利用es5的object.defineProperty()对数据进行劫持结合发布订阅模式来实现的
vue3只要利用es6 Proxy api对数据进行代理

相比于vue2.x,使用proxy的优势如下

defineProperty只能监听某个属性,不能对全对象监听
可以省去for in、闭包等内容来提升效率(直接绑定整个对象即可)
可以监听数组,不用再去单独的对数组做特异性操作 vue3.x可以检测到数组内部数据的变化

什么是原型?

①所有引用类型都有一个__proto__(隐式原型)属性,属性值是一个普通的对象
②所有函数都有一个prototype(原型)属性,属性值是一个普通的对象
③所有引用类型的__proto__属性指向它构造函数的prototype


什么是原型链?

当访问一个对象的某个属性时,会先在这个对象本身属性上查找,如果没有找到,则会去它的__proto__隐式原型上查找,即它的构造函数的prototype,如果还没有找到就会再在构造函数的prototype的__proto__中查找,这样一层一层向上查找就会形成一个链式结构,我们称为原型链。


箭头函数与普通函数区别?
1.箭头函数是匿名函数,不能作为构造函数,不能使用new
2.箭头函数不绑定this,会捕获其所在的上下文的this值,作为自己的this值
3.箭头函数通过 call() 或 apply() 方法调用一个函数时,只传入了一个参数,对 this 并没有影响。
4.箭头函数没有原型属性


如何提高webpack打包速度?
1.利用happyPack并行编译loder
2.利用dllPlugin先将基本不会改动的代码打包成静态资源
3.利用缓存,将cache.Directory设置为true


如何利用webpack提高前端性能
1.压缩代码,将多余或者注释的代码删除
2.利用CDN加速,将静态路径修改为对应cdn 的路径
3.利用treeshaking,将永远不会运行到的代码片段删除掉


vue双向绑定的原理?
vue.js采用数据劫持结合订阅和发布的方式,通过object.defineproperty劫持各个属性的set方法和get方法,在数据变动时发布消息给订阅者。触发响应的监听回调
注意:object.defineproperty的缺点主要是不能直接修改对象或者数组,不能触发组件的重新渲染,而vue3使用proxy代理完美监听任何形式的数据,缺点是兼容性问题


说说对keep-alive的理解?
作用在组件切换的时候,保存组件状态防止多次渲染,keep-alive的实现主要通过cache数组缓存所有vnode的实例


$nextTick的原理和作用
原理:当执行一个任务时,将任务放到异步队列中,模拟宏任务和微任务,清除异步队列中的方法
作用:当数据变化后执行某个操作,这个操作需要数据随着dom结构变化而变化的时候


v-show和v-if的区别

1.v-show是通过设置DOM元素的display样式属性控制显隐;v-if是动态的向DOM树内添加或者删除DOM元素;
2.v-show只是简单的基于css切换;v-if切换有一个局部编译/卸载的过程,切换过程中合适地销毁和重建内部的事件监听和子组件;
3.v-show适合频繁切换;v-if切换频率低的
4.v-show性能消耗低,v-if性能消耗大
————————————————
版权声明:本文为CSDN博主「嚣张农民」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/weixin_40808668/article/details/109091092

  • 3
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

嚣张农民

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值