前端——面试(苏小妍)

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:flexjustify-content:centeralign-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(){}
}

优点
- 数据未发生改变时，优先读取缓存，不需要像method和watch每次都执行函数
- setter和getter :设置和获取值触发

23.Watch监听使用

watch：更多的是「观察」的作用，类似于某些数据的监听回调，每当监听的数据变化时都会执行回调进行后续操作；有关联但没有依赖。主要用于事件的派发，可异步
使用场景：需要在数据变化时执行异步或开销较大的操作时使用，watch允许执行异步操作。

24.以后的发展规划

前端——面试(苏小妍)相关推荐

关于Web前端面试的小技巧，千万不要错过！
Web前端工程师在面试的时候,除了对公司以及所应聘的岗位职责做好充分准备工作之外,掌握一定的面试技巧也能助你一臂之力.除此之外,就是需要对所做的项目能够阐述清楚并且针对一些细节能够对答如流.那么怎么才 ...
前端面试回答-小程序面试_css
236个前端面试问答的资源链接一.面试官:css3动画有哪些? 1.是什么 CSS动画(CSS Animations)是为层叠样式表建议的允许可扩展标记语言(XML)元素使用CSS的动画的模块即指 ...
【前端面试】小鹅通面试记录
面试岗位:前端工程师(远程面试) 面试轮数:4轮(技术面试+笔试一共3轮) 难度:中等以下讲述过程: 1.首先是笔试,hr发给我一份笔试题,一共三道,规定时间半小时内完成.笔试并不难,第一题是算法排 ...
[前端面试] 微信小程序相关面试题
前言话不多说,来看下微信小程序有哪些面试题吧! 1.请谈谈微信小程序主要目录和文件的作用? project.config.json 项目配置文件,用得最多的就是配置是否开启https校验: App. ...
2019 web 前端面试总结（春招）
说是春招总结,其实春招只试了头条,算是对找工作以来的总结吧.而且时间过去了快半年了,中间也去实习了一段时间,了解了公司前端开发到底在做什么,不像之前只有在实验室的 low 到爆的项目经验. 关于 of ...
2022前端面试必问的几个小问题，你学费了吗？
写在前面 CSDN话题挑战赛第1期活动详情地址:https://marketing.csdn.net/p/bb5081d88a77db8d6ef45bb7b6ef3d7f 参赛话题:前端面试宝典话 ...
前端面试官，我为什么讨厌你。
近两年来,参加过的前端面试不下二十场了,吐槽一下.我所经历的,都是小公司,大公司的同学请无视. 招聘信息能否不要装逼?写一大堆你项目根本用不上的,来给谁看?我曾遇到上面写了一堆对js如何要求,对mv* ...
Web前端面试自我介绍对话技巧注意事项
大家在学会了web前端技术后,当然是要准备找一个适合自己的web前端工作了,那么面试环节是必不可少的,有一个良好的自我介绍表述,在HR心中也能加分不少,接下来小编就为大家介绍一下Web前端面试自我介绍 ...
那些巨头公司的前端面试都喜欢问些什么？
在过去的几年里,我在亚马逊和雅虎面试过很多专注于前端开发的Web开发者和软件工程师,在这篇文章中,我想分享一些面试技巧,帮助候选人为面试做好准备. 免责声明--本文并非旨在列出在前端面试中可能会被问到 ...
前端面试查漏补缺--(一) 防抖和节流
前言本系列最开始是为了自己面试准备的.后来发现整理越来越多,差不多有十二万字符,最后决定还是分享出来给大家. 为了分享整理出来,花费了自己大量的时间,起码是只自己用的三倍时间.如果喜欢的话,欢迎收藏 ...

前端——面试(苏小妍)

前端——面试(苏小妍)相关推荐

最新文章

热门文章