近期由于自身原因,不得不需要换个工作,就利用休息时间去面试一下郑州的前端,看看能不能找到适合的工作。(原公司需要外派出省了,对郑州深深热爱的我,不得不丢下熊掌了

由于疫情的冲击,目前市场完全打破了“金九银十”的说法。就业难,不再是口头上,也有可能是上个月华为等大厂裁员所导致的。有同行想挪一挪的,可以先看看我这总结再说,毕竟我还在求职中,整体情况如下:内部员工不敢跳槽,大公司裁人,市场上整体坑位不多,外包项目常年招人,自营项目薪资低一截

2022年9月中级前端工程师面试题整理——郑州市场-QUI-Notes

面试题

1.通过 document.getElementById("box")如何知道这个元素具体是什么标签?div,img...

答:nodeName或tagName,返回大写字符串:DIV/IMG...

2.box.nodeType的节点类型返回值是什么类型?

  • 数字
  • 元素节点 1
  • 属性节点 2
  • 文本节点 3
  • 注释节点 8
  • document文本节点 9
  • documentType节点 10
  • documentFragment节点 11

3.如何获取元素内的文本内容?

答:textContent或innerText

4.如何获取元素内的所有子元素?

答:innerHtml

5.outerHtml返回的是什么?

元素本身+所有子元素

6.vue组件通信都有哪些?如何使用?

1.父传子:v-bind+属性,props传参;子传父:$emit 触发父函数,可以向外传参。
2.子调父:$parent ——this.$parent.fun();父调子:$children ——this.$children[0].fun()
3.通过选择器ref触发子组件的方法实现父子传值
4.project / inject注入传参,非响应的,例如:
父组件提供:

 project() {
        return {
            parent: this
        }
    }

子组件注入:

inject: ['parent']

4.$attrs和$listeners
5.通过vuex传值,父存子取;
6.路由传参:动态参数query
7.插槽 slot 传参

7.vue $emit有什么用?

子组件可以使用 $emit,让父组件监听到自定义事件 。
父组件:

<child @childMsg="showChildMsg"></child>

子组件

<button @click=" this.$emit("childMsg","hello world!"); ">向父组件传值</button>

8.vue中的$attrs和$listeners属性及用法是什么?

$attrs
从父组件传给自定义子组件的属性,如果没有 prop 接收会自动设置到子组件内部的最外层标签上,如果是 class 和 style 的话,会合并最外层标签的 class 和 style。
子组件通过 v-bind="$attrs" 将所有属性绑定到指定元素身上,此时若inheritAttrs为true(默认),最外层div也会有这些属性,正确的应将inheritAttrs改为false,这样去掉默认外层的属性,仅保留在需要的元素身上。
$listeners
子组件通过 v-on="$listeners" 接受父组件绑定的所有函数,例如
父:

<my-input 
@focus="onFocus" 
@input="onInput">
 </my-input>

子:

<input
        type="text"
        v-bind="$attrs"
        v-on="$listeners"
 />

9.vue的虚拟DOM节点原理?

答:render是vue的渲染函数。render函数涉及到vue里的一个核心思想:虚拟DOM。render通过createElement 返回一个包含子节点信息的虚拟VNode,由VNode组成的组件树称之为虚拟DOM。
render方法的实质就是生成template模板;然后在组件挂载前的时候渲染出来。
VNode在vue中是一个构造函数,虚拟DOM也是由这个构造函数生成的,其构造属性有:tag,data,children,text,elm,context等,不存在的时候就是 undefined.

10.vue的内置组件有哪些?如何使用?

Transition、TransitionGroup、KeepAlive、Teleport、Suspense

vue如何使用动态组件?
通过component组件用is动态绑定组件名实现动态组件

11.vue路由router都有哪些钩子?

1.全局守卫:
beforeEach-全局路由前置守卫,afterEach-全局路由后置守卫
2.组件内守卫:
beforeRouterEnter,beforeRouterUpdata,beforeRouterLeave
3.独享守卫:beforeEnter,在路由配置中直接用的守卫函数

12.混入了解过没有?如何使用?

vue混入mixins是将组件公共的逻辑和配置数据提取出来,便于多组件共同使用。
混入对象也可以有data,computed,methods,mounted等方法。
混入对象可以全局引入也可以局部按需引入,建议按需引入。
优点:各个混入对象都是一个new实例,相对独立。
缺点:混入后,会将组件和混入对象的数据和方法合并,变量和方法重复导致污染,不方便找的问题。

13.js都有哪些网络请求方式?

get-查询、post-新增、put-修改、delete-删除、options-预检、head
get请求是用来获取数据的,只是用来查询数据,不对服务器的数据做任何的修改,新增,删除等操作。
post请求一般是对服务器的数据做改变,常用来数据的提交,新增操作。
put请求与post一样都会改变服务器的数据,但是put的侧重点在于对于数据的修改操作,但是post侧重于对于数据的增加。
delete请求用来删除服务器的资源。
head请求查询http头信息,而仅仅是HTTP头信息,不返回具体数据。
options请求属于浏览器的预检请求,查看服务器是否接受请求,预检通过后,浏览器才会去发get,post,put,delete等请求。
trace请求服务器回显其收到的请求信息,该方法主要用于HTTP请求的测试或诊断

14.new promise都有几种状态(怎么修改状态)

pending,resolved,rejected 
当状态为pending时候,可以被修改为resolved,rejected状态,成功走resolved,失败走rejected!

15.微信登录机制.

客户端随机生成32位psk密钥,通过RSA公钥加密之后,发送至服务端APPserve,服务端保存psk密钥,生成登录票据temp_uin,然后通过AES加密返回给客户端appClient,客户端再通过AES解密保存登录票据。

16.多页面需要登录的时候wx.login触发

任何页面都可以使用wx.login

wx.login()登陆流程:在onlaunch时验证token是否存在,不存在执行登录;存在的话继续验证token是否过期,过期的话执行登录;不过期将token存储到globaldata全局变量中。

17.vue父组件怎么监听子组件的生命周期

方法1:子组件在指定声明周期内通过$emit 调用父组件的事件,当父组件事件触发时,说明子组件在这个生命周期内。
方法2:通过 @hook: + 指定生命周期 = “回调函数”;
例如:

@hook:mounted="doSomething"

18.css的权重

1.link<head<html嵌套样式< !important
2.标签<class<id< !important
标签权重值为1,class为10,id是1000,!important是无穷大

19.computed计算属性和watch的本质区别

computed计算属性,依赖值变化时,重新计算;需要return一个结果;适用于多个变量影响一个计算属性值。
watch监听属性,监听值变化时执行回调函数,不一定有返回;适用于多个数据受一个变量影响。

20.vue的生命周期有几个

vue2生命周期:
beforeCreate|created,beforeMount|mounted,beforeUpdate|updated,beforeDestroy|destroyed 8个

vue3生命周期:
beforeCreate|created,beforeMount|mounted,beforeUpdate|updated,beforeUnmount|Unmounted 8个

21.vue 中get set方法的原理

get和set的原理归根到底还是vue数据双向绑定的原理:vue定义一个观察者类函数,将所有的数据循环遍历,然后通过defineProperty | proxy 观察数据键值对的get和set,get的时候,直接将对应的val返回;set的时候改变对应的键值对,然后通知页面重新渲染数据。

defineProperty不能监听数组变化需要特殊处理,必须递归遍历完所有数据,不能监听新增、删除操作
proxy弥补defineProperty的缺点,而且还能怼Map和Set实现拦截,但是不支持ie,所以vue3使用proxy替换defineProperty。

22.css如何绘制语音按下的波浪效果?

css3动画animation方法实现,点击时添加动画效果,松开是移除效果。
2.如何实现语音波长和时间成正比,语音时长越长,波浪效果越长?
使用div参照进度条的效果,时间越长,波浪就越长,根据时长改变波浪线的长度。
3.border 为什么可以绘制三角形?
boder线宽不变的前提下,宽度不断缩小直到宽高为0,四边形状从梯形变成四个三角形。

23.border-radius圆角的属性有几个值?分别什么意思?

1个值,表示4个角都是同一个值;
2个值,表示左上-右下,右上-左下的值;
3个值,表示左上,右上,右下,左下的值和右上一样。
4个值,分别是左上,右上,右下,左下;

24.vue 函数式组件

vue函数式组件是一个不包含状态和实例的组件;该组件不支持响应式,并且不能通过this关键字引用,用于定义没有响应数据,也不需要有任何生命周期的场景,只接受一些props来显示组件。

25.vue  if和show区别

v-if是消耗性能的动态渲染方式,条件为真是渲染出来,为假的时候销毁节点;v-show是利用样式display显示隐藏实现的,页面渲染div之后一直存在,隐藏只是样式控制隐藏了。

26.vue如何实现深度监听?

watch:{
handler(val, oldval){
                    if(val.text == 'love'){
                        alert('I Love You')
                    }
           },
          deep:true//开启深度监听
}

27.vuex如何实现异步修改状态值?

创建一个action方法,里面用setTimeout更改状态值,如下:

const actions = {
   addAction ({commit}) {
    commit('add', 10)
    setTimeout(() => {
      commit('reduce')
      console.log('action中执行mutations中的reduce方法')
    }, 3000)
    console.log('我比reduce先执行了')
  }
}

27.vue页面刷新数据丢失怎么办?

方法一:
vue插件:vue-ls  ,安装引入之后

import Storage from 'vue-ls';
options = {
  namespace: 'vuejs__', // 存储的key的前缀
  name: 'ls', // 命名,Vue变量.[ls]或this.[$ls]。全局:Vue.ls,上下文:this.$ls
  storage: 'local', //  存储名称【三个可选项】:session, local, memory
};
Vue.use(Storage, options);

存值:

 Vue.ls.set(key,val,expire);

取值: - 取不到用默认值

Vue.ls.get(key,defalutVal);

监听值变化-回调函数参数如watch一样:

let callback = (val, oldVal, uri) => {//val:当前值,oldVal:旧值,uri:修改来自的选项卡的url
          console.log('localStorage change', val);
} 
Vue.ls.on('foo', callback);//开启监听
Vue.ls.off('foo', callback) //关闭监听

移除存储

Vue.ls.remove('foo'); //从storage中移除,返回值true或false

全部清除

Vue.ls.clear() 

 
方法二:
html5存储indexedDB,localstorage,sessionStorage,cookie

28.v-html和v-text有什么区别?

v-html渲染成实际效果,v-text会将代码转义输出,是文本样式

8.v-html容易被xss攻击,有什么解决办法?
方法一:安装防注入插件:npm install xss ,xss插件会将标签和样式都去除,样式不美观;
方法二:可以安装vue-dompurify-html,替代v-html

// 安装:
         npm install vue-dompurify-html

 // 引入:
         import VueDOMPurifyHTML from 'vue-dompurify-html'
         Vue.use(VueDOMPurifyHTML)
 // 使用:
         <div v-dompurify-html="rawHtml"></div>

29.猴子吃香蕉,一天吃一半扔1个,第六天剩一个,递归出一共多少水果。

反推:
第6天 -  1
第5天 - (1+1)2 = 4
第4天 -   (4+1)2 =10
....

let i =6,s;
aa(i)
function aa(i){
	if(i == 6 ){
		s = 1;
		i-- ;
		aa(i);
	}else{
		if(i>1){
			s = (s+1)*2;
			i-- ;
			aa(i);
		}
	}

}

 

30.简要叙述http三次握手四次挥手;

三次握手 —— 连接的时候
第一次:客户端向服务端发送传输数据的请求;
第二次:服务端做出响应,“可以传输”。这时已经确定了服务端可以收到客户端的请求,但服务端不知道客户端可不可以收到自己返回的数据,顺便问一句,“可以收到数据吗?”;
第三次:客户端可以收到服务端的数据,它得告诉服务端“可以收到”。

通俗理解就是当客户端发起申请后不仅客户端要确认服务端,服务端也要确认客户端,所以为什么两次就不行,多一次又繁琐。
就比如打电话一样,
小明给小红打电话,电话通了小明问听的到吗?
小红说听得到你听得到吗?
小明说听得到。然后开始通话

四次挥手 —— 断开的时候
第一次:先由客户端向服务端发送断开连接的请求;
第二次:服务端向客户端发出的请求进行回应,“你发送的断开请求我收到了”。---但这时不会立刻断开,服务端可能还有没有传输完的数据;
第三次:服务端将没有传输完的数据集中一下,都给客户端发过去。---第二次和第三次都是由服务端发送,但不能同时发送。
第四次:客户端收到后对服务端发送“收到了”,这时才会断开连接。

通俗理解
小明对小红说,我所有的东西都说完了,我要挂电话了。
小红说,收到,我这边还有一些东西没说。
经过若干秒后,小红也说完了,小红说,我说完了,现在可以挂断了
小明收到消息后,又等了若干时间后,挂断了电话。

31.网页输入网址之后,页面是如何显示出来的?

1、浏览器分析指向页面的URL
2、浏览器向DNS系统请求解析域名所对应的服务器IP地址
3、DNS系统解析出服务器的IP,并返回给主机
4、浏览器与该服务器的进程建立TCP链接(三次握手,端口默认为80)

32.js都有哪些数据类型?js判断数据类型的方法有哪些?

基本类型:Number、String、Boolean、Undefined、Null、Symbol(es6)
引用类型:对象(Object)、数组(Array)、函数(Function),还有两个特殊的对象:正则(RegExp)和日期(Date)

33.js判断数据类型的方法有哪些?

1.typeof 类型判断,方法:typeof A
基本类型,除 null 以外,均可以返回正确的结果。
引用类型,除 function 以外,一律返回 object 类型。
对于 null ,返回 object 类型。
对于 function 返回 function 类型。

2.instanceof 原型判断,返回布尔,方法:A instanceof B

instanceof 只能用来判断两个对象是否属于实例关系, 而不能判断一个对象实例具体属于哪种类型。
[] instanceof Array; // true
new Date() instanceof Date;// true
[] instanceof Object; // true

3.constructor 构造判断,返回布尔,方法:A.constructor == B

null 和 undefined 是无效的对象,因此是不会有 constructor 存在的,这两种类型的数据需要通过其他方式来判断。

"a".constructor == String   //true
[].constructor == Array   //true

4.toString 对象原型方法判断,返回【object 类型】, 方法:Object.prototype.toString.call(value)
Object.prototype.toString.call('') ;   // [object String]
Object.prototype.toString.call(1) ;    // [object Number]

34.vue都有哪些指令?

v-once指令、v-show指令、v-if指令、v-else指令、v-else-if指令、v-for指令、v-html指令、v-text指令、v-bind指令、v-on指令、v-model指令

35.vue自定义指令的生命周期有哪些?

bind:绑定时,自定义指令绑定于相应dom时执行(类似于vue生命周期的beforeMount) 
inserted:指令所在dom添加到父节点时执行,渲染时(类似于以前的mounted)    
update:更新时,不保证更新完成(指令所在组件有更新时执行),不保证该更新和当前指令所在dom有关 
componentUpdated:更新完成时,指令所在组件更新完成(类似于以前vue生命周期的updated)
unbind:解除绑定,类似于beforeDestroy

36.js中什么是面向对象开发?

面向对象(oop)是把事务分解成为一个个对象,然后由对象之间分工与合作,面向对象是以对象功能来划分问题,而不是步骤。万物皆对象!
面向对象的特性:封装性,继承性,多态性。

38.beforeCreat和created有什么区别?

37.如何实现一个promise?

38.如何实现一个push方法?

通过函数的内置对象arguments遍历循环,赋值给对应的this[this.length]
Array.prototype.push1 = function () {
      for (var i = 0; i < arguments.length; i++) {
        this[this.length] = arguments[i];
      }
      return this.length;
}

39.操作数组都有哪些方法?

  • shift -  删除数组第一个  ——原数组被修改
  • pop - 删除数组最后一个 ——原数组被修改
  • unshift - 添加到数组头部  ——原数组被修改
  • push - 新增数组最后面 ——原数组被修改
  • splice - 可以新增也可以删除 ——原数组被修改

40.谈谈对ES6的理解?都有哪些变化?

1.新增了块级作用域(let,const)
2.提供了定义类的语法糖(class)
3.新增了一种基本数据类型(Symbol)
4.新增了变量的解构赋值
5.函数参数允许设置默认值,引入了rest参数,新增了箭头函数。
6.数组新增了一些API,如isArray / from / of 方法;数组实例新增了 entries(),keys() 和 values() 等方法。
7.对象和数组新增了扩展运算符
8.ES6新增了模块化(import / export)
9.ES6新增了Set和Map数据结构。
10.ES6原生提供Proxy构造函数,用来生成Proxy实例
11.ES6新增了生成器(Generator)和遍历器(Iterator)

41.ES6的解构赋值可以解构字符串嘛?

可以!如:let [a, b, c, d, e] = 'hello';

42.vue计算属性的值被修改的话会报错,如何实现修改计算属性不报错?

43.watch监听时候,如何组件创建后就监听一次变化?

immediate: true,

44.内存中的堆和栈的理解。
基本类型都在栈里面,固定大小和长度,后入先出的原则,只允许在尾部删除;

引用类型入堆里面,未知长度,先进先出的原则,只允许在头部删除;

45.apply,call,bind区别?

apply(db,arr)
call(db,a,b,c)
bind(db,a,b,c)定义的函数需要手动调用一次,默认并不会像apply和call一样直接触发。

46.postMessage是什么?

postMessage是h5工作线程Web Workers(长响应)的一个请求方法,然后通过onmessage进行捕获。

postMessage通信要注意:
1.同协议:https
2.同端口,默认443
3.同域名,domain

Window.postMessage(message, targetOrigin, [transfer]);

message 消息内容
targetOrigin 接受地址

例如:
发消息

btn.onclick = function(){
            // 发消息 这里的 msgPage 是其它窗口的一个引用
            msgPage && msgPage.postMessage(textarea.value, 'http://127.0.0.1:5500/onmessage.html')
}

收到消息

  window.addEventListener('message', function(e){
            console.log(e)
            // 消息来源
            msgPage = e.source
            document.title = e.data
            textarea.value = e.data
 })

47.什么是WebSocket?

WebSocket是为解决客户端与服务端实时通信而产生的技术。其本质是先通过HTTP/HTTPS协议进行握手后创建一个用于交换数据的TCP连接。
优点:
1.WebSocket服务器和客户端建立通信之后有效期内可以彼此相互推送信息;
2.服务器与客户端之间交换的标头信息很小。
3.通信方式不显示ajax
使用:

var ws = new WebSocket(“ws://localhost:8080”);
通信方法:
ws.onopen = function(){ 
  console.log(“open”);
  ws.send(“hello”);
};
ws.onmessage
ws.onclose 
ws.onerror 

48.typescript设计模式,

创建型模式:工厂,建造者,原型,单例
结构型模式:适配器、桥接、组合、装饰、外观、享元、代理
行为型模式:命令、中介者、观察者、状态、策略

49.typescript八大排序

冒泡,插入,选择,快速,归并,桶,基数

50.什么是冒泡排序?

相邻两项比较,较小的放前面,大的放后面,进行多次冒泡,直到符合序列从小到大的排序规则。

51.如何判断变量时数组还是对象?

首先,typeof可以判断基本类型,但是判断null,object,array都会返回object,所以不能用;
1.使用原型方法:instanceof,返回布尔值,不过这个对字符串和布尔值不准确,但是判断数组还是对象没问题;
arr instanceof Array
2.使用 consturctor 构造函数判断,不过对undefined和null不能使用,再者构造函数可以变,修改之后也会影响
arr.consturctor == Object
3.使用对象原始方法:Object.prototype.toString.call(arr),返回【object Array】,目前这个方法是最佳的解决办法。

52.v-for和v-if的优先级,有什么解决办法?

vue2 v-for的优先级高于v-if,会造成性能浪费。
vue3 反之。
解决办法:
1.可以使用computed计算属性动态显示;
2.加父级div,v-if提前

53.v-key有什么作用?

注意事项:
v-key尽量用id,不要用index,因为vue渲染列表就地复用策略,如果用index时,往列表中间插入值,这时会造成之后的数据都会重新渲染,比较费事浪费性能。
而用id的话,根据id的唯一性,只会渲染当前的数据,其他的就地复用,效果更加。
也就是说,不加key,key值默认是undefined,然后diff通过key值比较之后,列表会重新渲染,加了key之后,只会就地复用的数据不渲染,只会渲染改变或新增的列,大大提高效率。

54.响应式原理:

vue中内部采用了发布-订阅模式。内部结合了Object.defineProperty这个ES5的新特性(ie8浏览器可不支持哦...),对vue传入的数据进行了相应的数据拦截,为其动态添加get与set方法。当数据变化的时候,就会触发对应的set方法,当set方法触发完成的时候,内部会进一步触发watcher,当数据改变了,接着进行虚拟dom对比,执行render,后续视图更新操作完毕。

55.双向绑定原理:

vue的双向绑定是由v-model语法糖实现的,对于input输入框来说,就是value和@input事件共同实现的双向绑定。对于checkbox或其他组件是用过@change事件和value实现。
当我们用组件实现一个双向绑定,通过props将value传入,在值更新改变时触发input事件,事件通过$emit将状态值同步到父组件,实现双向绑定。

56.自定义指令的生命周期

自定义指令有五个生命周期(也叫钩子函数),分别是 bind,inserted,update,componentUpdated,unbind
bind:只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个绑定时执行一次的初始化动作。
inserted:被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于document中)。
update:被绑定于元素所在的模板更新时调用,而无论绑定值是否变化。通过比较更新前后的绑定值,可以忽略不必要的模板更新。
componentUpdated:被绑定元素所在模板完成一次更新周期时调用。
unbind:只调用一次,指令与元素解绑时调用。

57.mvvm和mvc最大区别

mvvm实现了view和model直接的自动同步(双向绑定),而不再像之前一样,需要手动操作dom元素控制view视图更新变化。
那为什么说vue并没有完全按照mvvm的思想?
vue提供了一个$ref的方法可以操控view