前端——面试(苏小妍)

最新推荐文章于 2023-11-28 11:49:24 发布

荔枝同学呀

最新推荐文章于 2023-11-28 11:49:24 发布

阅读量683

点赞数 3

分类专栏：面试

本文链接：https://blog.csdn.net/qq_44349849/article/details/114176261

版权

面试专栏收录该内容

10 篇文章 1 订阅

订阅专栏

1.自我介绍
2.为什么会做这个项目，需求是什么

网络的普及和生活质量的提高，工作和生活很大程度都会与网络打交道，聊天工具十分普及，广泛使用。
我的技术栈是vue，这个项目也是基于vue-cli，vuex，vueRouter等搭建的项目。
以往使用到的都是http协议，实时聊天项目使用了websocket协议代替http协议，有很多优点。

3.项目是否部署到服务器上，部署的整个过程

系统开发:修改端口server.port = 80 打包
服务器准备、环境配置：云服务，阿里云—云服务器ECS—实例—创建实例—购买服务器(cpu ,内存，硬盘，操作系统镜像)—网络配置(分配公网IPV4地址，带宽，安全组中Linux端口22,window端口3389)—会有公网和私网IP，用户名和密码
在操纵系统中安装目标程序所需要的环境：用FTP工具将本地上传到服务器，建立连接—主机：公网IP，协议：SFTP/SSH 端口：用户名：密码：
程序部署及运行：打包–上传(FTP工具)—启动
域名绑定：字母与IP绑定，访问域名相当于访问IP地址，购买域名—域名备案(ICP)—域名解析(解析，添加记录：记录值是IP地址，域名)

4.讲述一下从用户点击登录过程，从前端拿数据和后台拿数据以及从数据库拿数据

用户点击页面登录—前端页面vue组件获取表单的值—判断是登录还是注册，通过Vuex的异步操作action，执行dispatch操作—执行异步操作，发送post请求(此处因为是前后端分离项目，通过webpack的proxy解决跨域问题)—请求发送到后端后，处理请求—后端—返回成功或失败数据

5.为什么选用nodejs的express

定义：最小且灵活的web应用程序框架，为web和移动应用程序提供了一组强大的功能，它的行为就像是一个中间件，可以帮助管理服务器和路由。
优点：简单、灵活、简约和可扩展；提供快速生成工具express-generator，快速开发web应用。
其他框架
- Koa：是一个新的web框架，由Express幕后的原班人马打造，致力于成为web应用和API开发领域中的一个更小、更富有表现力、更健壮的基石。用async函数代替回调函数。优点：集成大量web API,没有绑定中间件；非常轻量；try/catch更好处理错误；代码可读性和维护性相对较高。
- Hapi：基础功能相对丰富的框架，开发人员专注于业务而不是项目构建。优点：提供了缓存、身份验证和输入验证；提供众多企业插件。

6.排序算法

冒泡：依次比较两个相邻元素，前一个元素比后一个元素大，就交换，最大元素在末尾。
选择：从序列中选择最小的元素存放在新序列的起始位置，再从剩余的元素中继续寻找最小元素，存放到新序列末尾，依次执行，直到排序完成
插入：第一个元素看做有序序列，从第二个元素开始，插入有序序列，当前元素与前面已经排好序的元素比较，小于就交换。
归并：采用二分法，将序列一直不断的分组，直到小于2个元素，分组排序后再合并。
快速：找一个基准，剩余元素与基准进行对比，小于放入left，大于放入right，递归调用。

7.ES6包的引入和引出的几种方式与node.js的使用区别

Node.js
- 导出 module.exports = {} exports.xxx = ‘xxx’
- 引入：require()
ES6
- 导出：export
- 导入：import xxx from ‘/xxx’

8.弹性盒子布局 flex

a{
	display:flex
	justify-content:center
	align-items:center
}

9.CSS盒子模型

标准：width=content
IE：width= content + 左右padding + 左右border
CSS3引入：box-sizing属性值：content-box(标准) border-box(IE)

10.CSS中position的每一个值以及区别

固定定位 fixed：元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动。 Fixed 定位使元素的位置与文档流无关，因此不占据空间。Fixed 定位的元素和其他元素重叠。
相对定位 relative：如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。
绝对定位 absolute：绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于。 absolute 定位使元素的位置与文档流无关，因此不占据空间。 absolute定位的元素和其他元素重叠。
粘性定位 sticky：元素先按照普通文档流定位，然后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位。而后，元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。
默认定位 Static：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit: 规定应该从父元素继承 position 属性的值。

11.原型链

原型：每一个构造函数都拥有一个属性(prototype)，是一个指针，指向一个对象就是原型对象，指向这个对象的属性和方法，可以被所有该函数的实例所共享
原型链：对象查找属性，首先会在当前对象中进行查找，如果找不到则会去对象的原型对象中去查找，如果找不到则去原型对象的原型对象中去查找，依次类推，这样形成了一个链式结构，为原型链
构造函数的prototype属性指向原型对象
原型对象有一个constructor属性指向该构造函数
构造函数的实例有一个__proto__属性指向原型对象，依次遍历

12.继承

原型链继承
构造函数继承
组合继承
寄生继承
寄生组合继承
详情：转发至“尘埃、落定”

13.箭头函数与普通函数区别

箭头函数没有this，所以需要通过查找作用域链来确定this的值，这就意味着如果箭头函数被非箭头函数包含，this 绑定的就是最近一层非箭头函数的 this。
箭头函数没有自己的arguments对象，但是可以访问外围函数的arguments对象
不能通过 new 关键字调用，同样也没有 new.target值和原型
对比
- 作用域链：用于查找标识符
- 原型链：用于查找引用类型(对象)的属性

14.如何修改this方式及区别

共同点
- 功能角度：三者都能改变this指向，且第一个传递的参数都是this指向的对象。
- 传参角度：三者都采用的后续传参的形式。
不同点
- 传参方面： call 的传参是单个传递的，而 apply 后续传递的参数是数组形式， bind 没有规定，传递值和数组都可以。
- 执行方面： call 和 apply 函数的执行是直接执行的，而 bind 函数会返回一个函数，然后我们想要调用才会执行。

15.let，const解决什么问题

解决：变量污染问题
引入块级声明：声明在指定块的作用域之外无法访问的变量
Var:定义一个变量，可以重复赋值，重复定义；有变量提升，变量可以在声明之前使用，值为undefined；在浏览器环境下声明变量会挂载到window上。
Let:定义一个变量，可以重复赋值，不可以重复定义；块级作用域，也称词法作用域，没有变量提升，存在暂时性死区；全局作用域下创建一个新的绑定，该绑定不会添加为全局对象的属性。
Const:定义一个常量，声明时必须赋值，也就是必须初始化，不可以重复赋值，不可以重复定义，常量如果是对象，对象中的值可以修改；块级作用域，也称词法作用域，没有变量提升，存在暂时性死区

16.提升作用域

Js引擎会在正式执行之前先进行一次预编译，在这个过程中，首先将变量声明及函数声明提升至当前作用域的顶端，然后进行接下来的处理
作用域
- 变量作用域：变量起作用的范围。函数以外的变量都称之为全局变量，以内的称为局部变量，局部变量和全局变量同名时，局部变量优先。
- 函数作用域：也称为局部作用域，函数声明时就形成，在函数内声明的所有变量在函数体内始终有定义。函数内部的变量不会被函数外部访问，函数内部可以访问全局的变量。
提升
- 变量提升：只会提升变量的声明，不会提升变量的赋值初始化
- 函数提升：一般使用函数声明和函数表达式(var a = function (){})声明函数，将函数声明整个都提升到当前作用域的顶部。函数提升优先于变量提升

17.Promise介绍

异步编程出现原因
- js是单线程，同一时刻只允许一个代码块执行，耗时任务时，UI渲染阻塞
- 回调函数解决存在回调地狱，并行处理问题。
使用：new Promise(function (resolve, reject){ })
状态
- pending 等待
- Fulfilled 完成
- Rejected 错误，只能从等待转化为其他状态，而后不能改变
异步链式调用：.then.then
同步并行请求
- Promise.all([多任务的数组]).then().catch()，全部成功后走then，否则走catch
- Promise.race()是只要一个成功就成功

18.Generator(生成器)

摘录自公众号“小鹿动画学编程”

定义：生成器是一种返回迭代器的函数,调用生成器不会立即执行，通过迭代器的对象控制生成器的执行。
形式：function* gen() {yield 1;yield 2;}
控制过程：使用迭代器控制生成器。
- 通过调用生成器返回一个迭代器对象，用来控制生成器的执行。
- 调用迭代器的next方法向生成器请求一个值。
- 请求的结果返回一个对象，对象中包含一个value值和done布尔值，告诉我们生成器是否还会生成值。
- 如果没有可执行的代码，生成器就会返回一个undefined值，表示整个生成器已经完成。
状态变化
- 每当代码执行到 yield 属性，就会生成一个中间值，返回一个对象。
- 每当生成一个值后，生成器就会非阻塞的挂起执行，等待下一次值的请求。
- 再次调用 next 方法，将生成器从挂起状态唤醒，中断执行的生成器从上次离开的位置继续执行。
- 直到遇到下一个 yield ，生成器挂起。
- 当执行到没有可执行代码了，就会返回一个结果对象， value 的值为 undefined , done 的值为true ，生成器执行完成。
生成器更像是一个状态运动的状态机。
- 挂起开始状态——创建一个生成器处于未执行状态。
- 执行状态——生成器的执行状态。
- 挂起让渡状态——生成器执行遇到第一个 yield 表达式。
- 完成状态——代码执行到 return 全部代码就会进入全部状态。

19.类型转换 Number和Boolean转换

Boolean的false：’’ false 0 null NaN undefined

20.for in for of

迭代器不可以使用break、continue.
For:遍历数组
forEach:ES5标准，遍历数组，不可以使用break、continue、return语句。只是执行操作，不会生成数组
Map:遍历数组，传入函数，三个参数(element index arr)，执行相应的操作，生成新数组。
For in:ES5标准，遍历数组索引和对象属性，原型链上的所有属性都将被访问到，可以使用hasOwnProperty检测一个属性是否是私有属性，存在于实例还是原型中。可使用break、continue、return语句
For of:ES6标准，遍历数组的值，可使用break、continue、return语句

21.Vue要修改数组的某一项值

Vue.set(array,index,newItem) vm.$set(array,index,newItem)
Array.splice(index,num,newItem) 删除或替换(num为0时是添加元素)

22.Computed使用场景

Computed：计算属性，依赖其它属性值，并且computed 的值有缓存，只有它依赖的属性值发生改变，下一次获取computed 的值时才会重新计算computed 的值；主要用于同步对数据的处理，处理负责的逻辑运算
使用场景：需要进行数值计算且依赖其他数据时使用，利用computed的缓存特性，避免每次取值时，都要重新计算，性能开销小。
eg:三个表单，第三个表单的值是第一个和第二个的拼接，并且在前面两个表单的数值变化时，第三个表单的数值也在变化

computed: {  
	fullName: {   
	 // getter    
	get: function () {      
		return this.firstName + ' ' + this.lastName    
	},   
	 // setter    
	set: function (newValue) {      
		var names = newValue.split(' ')     
	 	this.firstName = names[0]      
		this.lastName = names[names.length - 1]   
	} 
}
//ES6写法
get(){}
set(){}
}