总结自己的前端面经7-27 用友技术面一面面经大致问题已记录，全程半个小时，面试官很温柔，但是没有给提示。全程都是在一

用友一面半个小时

大致这么多问题，别的记不清了

自我介绍
怎么接触前端的自学还是跟着导师
项目是自己做的还是跟着导师
常见的html标签
块级元素和行内元素的区别
实现水平垂直布局
position定位详解
position fixed和absolute的区别
有做过原生js的项目吗（没有，做过一些小demo轮播图。如何实现轮播图）
js怎么获取DOM元素
获取到DOM元素,怎么改变img的src (两种)
两个变量怎么判断相等
array的方法
有了解过跨域吗，如何解决
数组排序算法
原型链的概念
同步异步的概念如何实现异步变同步
同步任务还是异步任务会阻塞代码
什么是回调函数具体作用
ese新特性有哪些
let const var
有搭建自己的脚手架吗
vue 组件通信的方法
vuex 的方法（答了dispatch 和commit）
vue路由的钩子函数全局守卫
vue路由的懒加载
封装axios 是为了实现什么功能
项目的登录模块怎么实现的如何保持登录状态
封装什么组件为了实现什么功能
后台是自己写的还是用的mock数据

部分问题解答

1. position属性 static absolute relative fixed sticky inheit

1. position: static(默认）
static属性为默认值,没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）.元素设置相对于原本位置的定位，元素并不脱离文档流，因此元素原本的位置会被保留，其他的元素位置不会受到影响

2.position:relative(相对定位)
此处的相对并不是相对于哪个父div或子div，相对只是相对于自身原本的位置发生变化。

3.position:absolute(绝对定位)
absolute定位是布局中最常用到的定位，其生成的位置是相对于带有position属性的父级来定位；
如果父级都没有position属性，则相对于document来定位最多也就到body；
使用absolute定位后，定位元素是脱离文档流的，这时候父级会检测不到定位元素的宽高。inline元素使用absolute定位之后，可以对其设置宽高；

4.position:fixed(固定定位)
也是脱离了文档流，与absolute一样，可以设置宽高，但是父级会检测不到定位元素的宽高，所以无法由子元素撑开。

5.inherit
继承父元素的position属性，但需要注意的是IE8已及往前的版本都不支持inherit属性

6.sticky (黏性定位,吸顶效果)
position属性中最有意思的就是sticky了，设置了sticky的元素，在屏幕范围（viewport）时该元素的位置并不受到定位影响（设置是top、left等属性无效），当该元素的位置将要移出偏移范围时，定位又会变成fixed，根据设置的left、top等属性成固定位置的效果

fixed和absolute的区别

  共同点：

 1.改变行内元素的呈现方式，display被置为block；

 2.让元素脱离普通流，不占据空间；

 3.默认会覆盖到非定位元素上



 不同点：

 absolute的”根元素“是可以设置的，而fixed的”根元素“固定为浏览器窗口。

 当你滚动网页，fixed元素与浏览器窗口之间的距离是不变的。

1. 路由的懒加载
  整个网页默认是刚打开就去加载所有页面，路由懒加载就是只加载你当前点击的那个模块。
  按需去加载路由对应的资源，提高首屏加载速度（tip:首页不用设置懒加载，而且一个页面加载过后再次访问不会重复加载）。
  实现原理：将路由相关的组件，不再直接导入了，而是改写成异步组件的写法，只有当函数被调用的时候，才去加载对应的组件内容。

两种修改img src 的方法

1. 直接获取dom元素修改src
var obj = document.getElementById(“imgid”);\
var obj.src ='realSrc' ;
只能修改内置的属性

2.getAttribute方法获取img的src属性 setAttribute去修改
var obj = document.getElementById(“imgid”)\
var imgSrc = obj.getAttribute(“src”);
imgSrc.setAttribute('src',value)
可以修改自定义的属性 没有则添加

判断两个变量相等

 1. `==` 以及 `===`
 2.  利用数组中的`toString`方法；
 3.`ES6`中的`Object.is`方法；
 4.利用`JSON.stringify`，转换为`String`类型来比较；
### `==` 及 `===`

==为转换类型比较运算符，===为严格比较运算符，在数据类型相同的情况下，使用==一般不会造成问题。

let num = 5;
let num2 = 5;

num == num2;//true
num === num2;//true
复制代码

但在数据类型不一致的情况下，==会做一些隐性的类型转换。

let num = 5;
let str = '5';

num == str;//true
num === str;//false

'' == false;//true
'' === false;//false

null == undefined;//true
null === undefined;//false
复制代码

隐性转换类型可以带来一些便利性，但也有可能造成不易发现的bug，所以还是更推荐使用===来进行比较，这也是TS之所以流行的原因之一。

此外，上面列举的都是基本数据类型的比较，而在用===比较引用类型时，会存在一定的局限性。

let a = {xx: 1};
let b = a;

a === b;//true

let c = {xx: 1};
let d = {xx: 1};

c === d;//false
复制代码


在比较引用类型时，`===`比较的是变量的引用是否相同，`而非值`，当引用不同时，就会返回`false`。

由此可见，`===`并不是一枚无往不利的银弹，在比较对象是否相等时，还需要借助其他更可靠的方法。

**Array toString方法**

前端给后端传参时，后端有时会要求多个参数`,`隔开，`Array toString`方法就比较有用了，这一方法也能用作数组比较。

let arr = [1,3,5,7,9]; let arr2 = [1,3,5,7,9];

arr.toString() === arr2.toString();//true "1,3,5,7,9"


不过也存在一定的局限性，不能用来比较二维及以上的数组、不能包含`null`、`undefined`、`object`、`function`等，否则容易出错，如下

[1,3,5,[2,4,6]].toString();//"1,3,5,2,4,6" [1,null,undefined,'',2].toString();//"1,,,,2" [{xx:2},window,1,2].toString();//"[object Object],[object Window],1,2" 复制代码


**Object.is方法**

`Object.is`是ES6中新增的方法，与`===`非常类似，同样用作比较两个值是否相等。

Object.is(1,1);//true Object.is('str','str');//true Object.is({},{});//false 复制代码


不同的是在判断`+0`和`-0`、`NaN`和`NaN`时的区别。

+0 === -0 //true NaN === NaN //false

Object.is(+0, -0) //false Object.is(NaN, NaN) //true

if (!Object.is) { Object.is = function(x, y) { if (x === y) { // 针对+0 不等于 -0的情况 return x !== 0 || 1 / x === 1 / y; } else { // 针对NaN的情况 return x !== x && y !== y; } }; }


**JSON.stringify**

`JSON.stringify`方法用于把对象或者数组转换为一个 JSON字符串，得出的字符串便可以用作对象的比较。

let obj = {name: 'lin', age: 24}; let obj2 = {name: 'lin', age: 24};

obj === obj2;//false JSON.stringify(obj) === JSON.stringify(obj2);//true 复制代码


`JSON.stringify`弥补了`===`无法准确比较对象的局限，不过它也有一定的局限性，在遇到`undefined`、`function`以及`symbol`值时会忽略。

另外，值得一提的是利用`JSON.parse`、`JSON.stringify`可实现对象深拷贝，局限性同上。

总结自己的前端面经

用友一面 半个小时

部分问题解答

用友一面半个小时