用友集团前端面经整理及答案
用友集团前端面经
1.==和===的区别
==用于一般比较,"==="用于严格比较。
“==”在比较的时候会进行强制类型转换，“===”严格比较，不会进行强制类型转换，只要类型不匹配就返回false。
2.float和定位有什么区别
1.float定位关键词是margin/padding,position定位关键词是left/right/top/bottom。
2.float脱离文档流，在文中不占位置。
3.float是相对定位，会随着浏览器的大小和分辨率的变化而改变，而position就不行。
最大的区别：
float定位后，原位置被清空，position定位后，保留原位置。
3.BFC
BFC（BlockFormattingContext,BFC）是web页面的可视化css渲染的一部分，是布局过程中生成块级盒子的区域。
BFC指的是块级格式化上下文，一个元素形成了BFC之后，那么它内部元素产生的布局不会影响到外部元素，外部元素的布局也不会影响到BFC中的内部元素。一个BFC就像是一个隔离区域，和其他区域互不影响。
一般来说根元素是一个BFC区域，浮动和绝对定位的元素也会形成BFC，display属性的值为inline-block、flex这些
属性时也会创建BFC。还有就是元素的overflow的值不为visible时都会创建BFC。
4.懒加载实现原理
懒加载的原理就是先在页面中把所有的图片统一使用一张占位图进行占位，把真正的路径存在元素的“data-url”的自定义属性里，要用的时候就取出来，再设置；
5.利用数组的api实现队列怎么实现
JS分别为队列和堆栈的实现提供了两个函数。
队列实现：
shift() ： 删除集合中第一个元素，并返回这个元素的值
unshift() ：在集合开头添加新元素（一个或多个均可），并返回新的集合的长度
var queue = new Array();
// unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。
queue.unshift(1);
queue.unshift(2);
queue.unshift(3);
queue.unshift(4);
// pop() 方法用于删除并返回数组的最后一个元素。
var first = queue.pop();
console.log(first); // 结果为1，先进先出
堆栈实现：
pop() ：删除集合的最后一个元素，并返回元素的值
push() ：将元素添加到集合的结尾
var stack = new Array();
stack.push(1);
stack.push(2);
stack.push(3);
stack.push(4);
var first = stack.pop();
console.log(first);// 结果为4，先进后出
6.sass怎么选中父元素
Sass嵌套时调用父选择器时，在父级要调用子级的样式前面加一个&符号.
7.清除浮动的作用 应用场景
作用：被设置浮动的元素会脱离标准流（竖直排列），从而达到水平排列的效果，使界面更美观。
清除浮动是为了清除使用浮动元素产生的影响。浮动的元素，高度会塌陷，而高度的塌陷使我们页面后面的布局不能正常显示。
需要清除浮动的三个条件：
- 父级元素没有高度
- 子盒子浮动
- 影响下面布局
常用方法overflow:hidden
清除浮动的方式：
- 使用clear属性清除浮动；
- 使用BFC块级格式化上下文来清除浮动。
8.水平垂直居中
- text-align ：center+ vertical-align：middle
- 绝对定位+margin：auto（对于宽高一定）
- 利用transform+绝对定位
- flex布局
display:flex;
align-items:center;
justify-content:center.
9.html语义化
也就是说元素本身传达了关于标签所包含内容类型的一些信息。
- 代码结构
- 有利于SEO
- 提升用户体验
- 便于团队开发和维护
- 方便其他设备解析
nav article footer 等
10.改变this指向的方法
- apply
- call
- bind
11.es6 箭头函数以及什么时候不可以用
主要原因还是因为箭头函数内部没有this指向，它只能指向外围的作用域。
- 在对象上定义函数
var cat = {
lives: 9,
jumps: () => {
this.lives--;
}
}
- 在原型上定义函数
- 动态上下文中的回调函数
var button = document.getElementById('press');
button.addEventListener('click', () => {
this.classList.toggle('on');
});
- 构造函数中
箭头函数不可以作为构造函数，不可以使用new命令，否则会抛出一个错误。
12.怎么判断数组
1. Array.isArray()
2. a instanceof Array
3. Array.prototype.isPrototypeOf(a)
13.实现宽高一直成比例的块（padding百分比是依据父元素的什么）
高度：根据父元素内容区的高度而不是宽度。
对于宽度，默认如元素的100%。
14.解释一下line-height
行高是指文本行基线间的垂直距离。
父元素不设置固定高度时，height等于line-height.
父元素设置固定高度时，Line-height又不等于height。
内联元素的高度是由line-height决定的。
无论内联元素line-height如何设置，最终父级元素的高度都是由数值大的那个line-height决定的。
15.pc端，移动端，多个请求去请求一个api，但是对于不同的端，需要的数据格式不同，你怎么区分？
根据请求头的User-Agent
16. 对于es6的新语法，为了使浏览器支持，除了bable解析，其他的，比如promise解析玩可能还是语法糖，但是浏览器不识别promise，怎么处理？
es6-promise 解决使用Vue后IE下不支持Promise的问题
npm i es6-promise --save-dev
在main.js中
import Promise from 'es6-promise'
Promise.polyfill();
babel-polyfill：（解决浏览器不支持es6的问题）
1 npm i babel-polyfill --save
2 在main.js中 import ‘babel-polyfill’
3 修改项目入口设置：
entry:{
app:'./src/main.js'改为 app['babel-polyfill','./src/main.js']
},
17.1w行js代码，模块化如何处理?
1.AMD：define+require（异步加载）
2.CMD:export +import（异步加载）
3.ES6:export+import
4.commonJS：module.export+require（）(同步加载）
18.nginx你使用过哪些功能，具体的实现了解过吗?
就是跨域的时候用过
19.js异步的处理，哪几种？
promise
generator+回调函数
async await async函数中的await接收一个Promise对象.
事件监听
20.前端路由的实现方式？
history
hash
21.缓存的实现？304服务端和前端如何是实现？
22. localStorage，如果满了，客户端如何处理？
存不进去并报错（QuotaExceededError）
方案：
1、划分域名。各域名下的存储空间由各业务组统一规划使用
2、跨页面传数据：考虑单页应用、优先采用 url 传数据
3、最后的兜底方案：清掉别人的存储
23.排序算法，时间复杂度，空间复杂度
冒泡排序时间复杂度O(n)，空间复杂度O(1)
原理：在序列中对当前还未排序的数，自上而下对相邻的两个数依次进行比较和调整，让较大的数往下沉，较小的往上冒。
快速排序时间复杂度O(nlonn),空间复杂度(nlogn）
插入排序时间复杂度O（n），空间复杂度O(1)
堆排序 时间 复杂度O(nlogn) 空间复杂度O(1)
归并排序 时间复杂度O（nlogn)空间复杂度O(n)
原理：将待排序序列分为若干个子序列，，对每个子序列进行排序。 * 然后再把相邻的两个有序子序列合并，并排序成为新的有序子序列。
24.递归 递归形成回调地狱会浏览器崩了，怎末解决回调地狱
大多数的递归大都采用for循环,for循环效率高很多
promise async/await
25.js数据类型
基本数据类型：null undefined boolean string number
复杂数据类型：Object
ES6 新引入symbol
26判断数据类型
变量类型：
基本类型：保存的是基本类型的数据
引用类型：保存的是地址值，数据类型是对象类型。
1.type of
可以判断undefined/number/string/boolean/function
不可以判断：null object array
2.instance of 判断对象的具体数据类型 不能判断Null 和undefined
3.Object.prototype.toString.call() 一般数据类型都能判断，最准确常用的一种
27.继承 es5 es6
ES5的继承实质上是先创建子类的实例对象，然后再将父类的方法添加到this上（Parent.apply(this)），然后再把原型链继承。
ES6的继承机制完全不同，实质上是先创建父类的实例对象this（所以必须先调用父类的super()方法，才可使用this关键字，否则报错。），然后再用子类的构造函数修改this实现继承。
28.babel转换的内部了解过吗 不了解
Babel解析成AST，然后插件更改AST（抽象语法树），最后由Babel输出代码。
29.es6新特性
let var
展开运算符 map set
30.h5新特性
H5的新特性：
- 用于绘画 canvas 元素。
- 用于媒介回放的du video 和 audio 元素。
- 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；sessionStorage 的数据在浏览器关闭后自动删除。
- 语意化更好的内容元素，比如 article、footer、header、nav、section。
- 表单控件，calendar、date、time、email、url、search。
css3的新特征:
1.选择器。
2.和透明度。 - 多栏布局。
- 多背景图。
5.Word Wrap。 - 文字阴影。
7.@font-face属性。
8.圆角(边框半径)。
9.边框图片。
10.盒阴影。 - 盒子大小。
- 媒体查询。
13.语音。
12.canvas 一些用法，在canvas上设置事件怎末（不会啊）小姐姐给我讲了一会
13.canvas会导致重绘，怎末提升性能，解决（不会，说到了DOM里的重绘）
31.那就说下DOM里的重绘重排吧
重排一定会导致重排，修改DOM的尺寸位置大小时，会产生冲排。修改像素信息产生重绘。
32.动画
33.svg了解过吗（不了解)
34.node.js说说你的了解
35.mongdb查找元素，一系列的 。。。。mongdb怎末建一个索引，怎末维护一个mongdb（不懂啊）
36.mysql数据库这块真的很惨，她说她们这块就大多采用mysql
37.单线程，多线程区别
而一个进程又是由多个线程所组成的。
单线程是程序中的一个执行流，每个线程都有自己的专有寄存器(栈指针、程序计数器等)，但代码区是共享的，
即不同的线程可以执行同样的函数。
多线程是指程序中包含多个执行流，即在一个程序中可以同时运行多个不同的线程来执行不同的任务，
也就是说允许单个程序创建多个并行执行的线程来完成各自的任务。
例子：
你早上上班，正要打卡的时候，手机响了。。你如果先接了电话，等接完了，在打卡，就是单线程。
如果你一手接电话，一手打卡。就是多线程。
2件事的结果是一样的。。你接了电话且打了卡。
21.多线程之间的通信方式（不会）
1.方式一：使用Object类的wait() 和 notify() 方法
2. ReentrantLock 结合 Condition也可以完成;
3.方式三：使用 volatile 关键字
方式四：使用JUC工具类 CountDownLatch
方式五：基本LockSupport实现线程间的阻塞和唤醒
如有错误，欢迎大家批评与指正。