北京北纬通信科技前端面试

今天从下午两点面试到了五点多，谈了很多吧，今天是Hr先面，基本聊一些家常，然后就是技术总监和一个小姐姐面试，压力挺大的吧，小姐姐先进来说我们老大人可好了。然后说你是北科的？我是地大的你们对面，我17届的。然后就开始了，这是我被面的最长的一次。问题很多，但是leader告诉我，有总结面试的习惯吗？让我试试今天反思出来三个最重要的点，问题问的很多，让我捋一下。

1、自我介绍
2、介绍一下自己项目的难点，以及怎么解决的。
3、问了一下组件间的通信方式。
4、实现一个左右分布的布局。
5、了解其他布局方式吗？
6、盒子模型了解吗？描述一下两种盒子模型的区别,属性值
7、如何实现一行六个框的布局，然后间隔均匀
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.mycards {
           width: 100%;
           display: flex;
           flex-wrap: wrap;
           justify-content: space-between;
           border: 1px red solid;
       }

       .card_item {
           flex: 1;
           width: 16%;
           min-width: 16%; 
           max-width:16%; 
           height: 350px;
           border: 1px red solid;
       }
8、能不能不用vuex去实现一个状态管理。
9、ES6的标准了解多少，介绍一下。
10、描述一下async和await。
11、数组去重的方式
12、就我刚才提到的用set可以去重，问我set去重和普通方式的去重的效率比较
13、框架选型的问题，为什么选择vue不选择react
14、前端的优化做哪些，leader说想听我做的实实在在的优化，不是依托外界的
15、算法问了我如何确定一个回文串的所有中点
16、好像还问了我在鉴权阶段，如何分别用户
17、vue3.0和2.0的区别了解吗？
18、Vue3.0为什么把Object.defineProperty改为Proxy代理，说他的原理。
19、promise在使用的过程中，如果使用try catch包住，其中一个是获取name、一个获取phonenumber，第二个用await卡住，但是请求是并行的，如果第一个try catch捕捉到了第一个错误，还能正常获取第二个值吗？
20、深拷贝和浅拷贝的方式，介绍一下

深拷贝和浅拷贝这个概念，应该很简单了，对于计算机科班出身的人，应该都知道，浅拷贝获得的是引用，而不会另外开辟内存空间，而深拷贝是会另外开辟内存空间。

名字是存在栈内存中，值是存在堆内存中，但是栈内存会提供一个引用的地址指向堆内存中的值。b=a进行拷贝时，其实复制的是a的引用地址，而并非堆里的值。

而当我们a[0]=1时进行数组修改时，由于a与b指向的是同一个地址，所以自然b也受了影响，这就是所谓的浅拷贝。如果能做到在堆内存中也开辟一个新的内存专门存放b的值，就像基本类型哪样，岂不是就达到了深拷贝的效果。

实现浅拷贝的方法：

  • for……in只循环第一层
1
2
3
4
5
6
7
function simpleCopy(obj1) {
   var obj2 = Array.isArray(obj1) ? [] : {};
   for (let i in obj1) {
   obj2[i] = obj1[i];
  }
   return obj2;
}

网上传的这种做法，我去切实实践了一下

1
2
3
4
5
6
7
8
9
10
>var obj4 = simpleCopy(obj)		//这个simpleCopy是上面这个
<undefined
>obj4			//我obj就是这样定义的，拷贝出来，内容一致
{a: 1, b: 2}
>var obj5=Object.assign(obj)	//这就是下面的方法，确实是一致的
<undefined
>obj4===obj						//本来都是网上博客所说的浅拷贝
<false				//但是只有Object.assign(obj)实现了浅拷贝，那是为什么呢？
>obj5===obj		
<true

我进一步思考，好像懂了，确实是浅拷贝，但是对于这个对象的第一层是深拷贝，切切实实的深拷贝，但是对于如果对象里嵌套对象的情况，是无法深拷贝的，所以可以理解是浅拷贝了吧。也就是说，对象的属性如果是对象那么就是一种浅拷贝了。

同样的原理，Object.assign也是可以实现和上述的simpleCpoy的里面单层深拷贝，多层嵌套却是浅拷贝的样子。Object.assign({},obj)

  • Object.assign方法
1
var obj = object.assign(obj)
  • 直接用=赋值
1
2
let  a = [0,1,2,3,4]
	b=a

实现深拷贝的方法：

  • 采用递归去拷贝所有层级属性
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
/*
    手写一个深拷贝的方式
*/
function cloneInDeep(source){
    if(source && typeof source === 'object'){
        let target = {};
        for (let prop in source){
            let value = source[prop];       //取出来所有的值

            if(Array.isArray(value)){       // 如果值是个数组，那就重新创建一个数组，将值装入
                let newArray = [];
                value.forEach(function(item, index){
                    if(Array.isArray(item) || Object.getPrototypeOf(item) === Object)   
                    {
                        newArray.push(cloneInDeep(item))      //如果数组的值是一个对象，则将对象进一步拷贝
                    }else{
                        newArray.push(item)
                    }
                });
                target[prop] = newArray;
            }else if(Object.getPrototypeOf(value) === Object.prototype){
                target[prop] = cloneInDeep(value);          //对象继续深入拷贝
            }else{
                target[prop] = value;       //基本数据类型就直接交付
            }
        }
        return target;
    }else{
            throw new Error('source is not object!')
    }
}

https://www.jianshu.com/p/1c142ec2ca45

21、移动端开发熟悉吗？
22、最长公共子串（动态规划）
23、Echart的参数了解多少？

问题挺多的，我突然想不起来了，问题挺多的。后面就开始聊家常了，leader问我有没有女朋友是另我猝不及防的，还问我大学期间成绩如何，大学期间参加什么社团、大学期间有没有什么兴趣，和我聊了聊，问我最近看了什么电影，喜欢什么类型的，哈哈哈，告诉我工作不是生活的全部，他也想从测面了解我。聊了很多吧，慢慢就放松了，最后问他会挂我吗？leader说，他不挂我，剩下的一面是架构师面我，让我加油。

面经总结

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！