用友集团前端面经整理及答案

用友集团前端面经

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 --save2 在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里的重绘

用友集团前端面经整理及答案相关推荐
1. 前端周报：前端面试题及答案总结；JavaScript参数传递的深入理解
  1.2017前端面试题及答案总结 |掘金技术征文 "金三银四,金九银十",用来形容求职最好的几个月.但是随着行业的饱和,初中级前端er就业形势不容乐观. 行业状态不可控,我们能做的 ...
2. html5试卷答案,常见的HTML5前端面试题及答案
  原标题:常见的HTML5前端面试题及答案随着互联网技术的日渐成熟,用人单位在面试时,不仅考察面试者的技术掌握情况,更加注重人才对于理论知识的考量.因为理论知识掌握扎实证明面试者接受过专业的训练,深知 ...
3. 前端面试题及答案：app怎么做适配的？
  前端面试题及答案:app怎么做适配的?下面一起来看看吧! 基于手机系统开发的app(原生Android/IOS) 另外一种是webapp 设置以下标签: 具体的含义为:app完成的页面的宽度等于设备的 ...
4. 2022年最新互联网大厂前端面试题及答案-前端工程必备技能(持续整理更新中【关注收藏不迷路】）
  对于做前端的朋友,或者做了前端几年了,基础不好的,或者想进大厂的想了解深入,下面的知识点很多前端朋友都没有深入了解.很重要,看完有种茅塞顿开感觉,**关注+收藏哦,总有一天用的得.** 涉及到知识点: ...
5. 前端面试题及答案整理（2022最新版）
  收集整理2022年最新前端面试题及答案,方便平时翻看记忆,欢迎各位大佬们补充. 一般来说,把下面基础中的高频题写熟练就差不多了.当然去面大厂这些远远不够,还要再刷一些算法题. 基础高频 1.手写 i ...
6. 2019前端面试题及答案汇总
  2019前端面试题及答案汇总 DOM事件流包含几个阶段事件委托(代理)的原理是什么?它有什么优势和缺点? 使用原生JS为以下li实现事件委托,点击后打印对应的node-type属性值. 使用jQue ...
7. jquery级试题_腾讯2020前端面试题含答案解析
  程序猿的生活:打造全网web前端全栈资料库(总目录)看完学的更快,掌握的更加牢固,你值得拥有(持续更新)zhuanlan.zhihu.com 1 在jquery 中想要找到所有元素的同辈元素,下面哪 ...
8. 2018最新Web前端经典面试试题及答案-史上最全前端面试题(含答案)--转载
  版权声明:本文为转载文章,感谢博主小胖梅的博客,如有侵权,请联系我删除,谢谢转载链接: https://blog.csdn.net/xm1037782843/article/details/8070 ...
9. 超全前端面试题及答案
  HTML+CSS 1.对WEB标准以及W3C的理解与认识标签闭合.标签小写.不乱嵌套.提高搜索机器人搜索几率.使用外链css和js脚本.结构行为表现的分离.文件下载与页面速度更快.内容能被更多的用 ...
10. web前端面试题及答案
  web前端面试题 1.overflow:hidden是否形成新的块级格式化上下文? A:会形成 B:不会答案:会. 分析: BFC:它是一个独立的渲染区域,只有Block-level box参与, ...
最新文章
热门文章