bilibili前端实习一面-上海T2

3.22晚上6点半面试的，一共50分钟

1.自我介绍

2.有了解过es6嘛，简单介绍一下

3.var/let/const

4.一段代码看输出（先变量提升再函数提升）

console.log(a); //打印a函数
function a() {
    return 4;
}
var a = 3;
console.log(a); //打印3

5.箭头函数的特性

语法更简洁、清晰

箭头函数不会创建自己的this、而是从它定义的地方继承过来

不能作为构造函数使用

没有arguments对象

不能作为生成器函数

6.浅拷贝与深拷贝，以及复杂对象深拷贝的实现

可以使用JSON.stringify、JSON.parse来实现简单的深拷贝，但这种情况对于循环引用以及对象属性是函数的情况下会失效

//weakmap来解决循环引用的问题
function deepClone(target, map = new WeakMap()) {
    if(typeof target === 'object') {
        if(map.has(target)) return map.get(target);
        let cloneObj = Array.isArray(target) ? [] : {};
        map.set(target, cloneObj);
        for(let key in target) {
            cloneObj[key] = deepClone(target[key], map);
        }
        return cloneObj;
    }
    else {
        return target
    }
}

7.一段promise、setTimeout代码的输出

8.vue的响应式原理

vue2.x：使用Object.defineProperty劫持对象属性 + 发布订阅模式实现

vue3 使用Proxy实现对对象的代理

9.vue2.下中对数组push一个值可以实现响应式嘛

可以的，vue2.x对能改变数组的七个方法push、pop、shift、unshift、sort、splice、reverse进行了重写

10.vue中key的作用

和diff算法有关系，标识虚拟节点，使得它做比较的时候更快一些

11.diff算法的实现过程

diff算法在比较新旧虚拟dom，再将其差异反映到真实dom上去

虚拟dom是一个用来表示真实DOM的js对象，比较的过程是深度优先遍历的，一层层的去比较

如果当前层节点不一样，则更新节点；一样则取比较他们的孩子节点，vue里面的key就可以用来标识孩子节点，这又分为了四种情况，新节点新增孩子节点、新节点删除孩子节点、新旧节点孩子节点内容一样、新旧节点孩子内容不一样

为了更好的复用孩子节点，将其移动到改变后的位置效率更高，因此这个问题可以抽象为编辑距离问题，即新旧两个字符串，只能对旧字符串做三种操作，分别是插入一个字符、删除一个字符、替换一个字符

，求最终将旧字符串变成新字符串的最小操作次数；这个问题的解法又是依靠动态规划去做的。

12.了解浏览器的重排和重绘嘛

从浏览器的渲染机制说起，对于html会渲染成DOM树，对于css会渲染成cssom树，两颗树进行结合形成render tree，再回流/重排去计算元素的几何属性，重绘是将元素的样式绘制出来。

当元素的几何属性发生变化的时候会引起重排，其元素的样式发生变化的时候会引起重绘

重排一定会去引起重绘，重排的性能开销更大一些

13.有没有了解过减少回流操作的方法

css3的transfrom、translate新建了一个图层，在GPU层面上减少回流的发生

批量操作DOM

14.在js中引入了vue框架，会减少回流的发生嘛?

应该是会减少的，vue是有虚拟dom的

15.那你认为原生js不管怎么写都是比不过vue的性能嘛？

不太了解

16.浏览器的缓存有哪几种

强制缓存和协商缓存，服务器返回头里cache-control里的字段控制使用哪种缓存，分别有max-age、no-cache、no-store

强缓存没过期则直接去向浏览器缓存里拿数据，过期了则向服务器查询缓存是否可用，有etag和last-modify字段来进行判断是否缓存资源有更新，没更新则返回304状态码告诉客户端缓存可用，更新了则返回新的资源

17.使用过webpack嘛？

没有

18.了解过https嘛

https在http的基础上加了证书认证与数据加密，首先介绍下对称加密与非对称加密，对称加密的密钥是一样的，非对称加密的密钥是不一样的，分为公钥与私钥，用公钥加密的只能用私钥解开，用私钥加密的只能用公钥解开，

所依据的原理是大数的因子分解是特别困难的。顾名思义公钥发布在互联网上，私钥自己保留。然后有个第三方的证书机构，服务器会将自己的公钥与域名发布给证书机构，机构用自己的私钥对其进行加密生成证书发给服务器，

服务器再将这个证书发给客户端，客户端这边可以用证书机构的公钥解密证书确认服务器的身份，同时得到了服务器的公钥，然后客户端生成对称密钥，使用服务器公钥加密对称密钥再发送给服务器，服务器收到后用私钥解密得到对称密钥，

这样双方就建立了一个信任关系并且之后使用不会被破解到的对称密钥来加密之后的http消息

19.后端返回是对象数组，每个对象都是具体的商品及其所对应的类别，将其转换为新的对象数组，新的对象是每个商品的类别即其对应的商品

v8打印对象会只显示object，需要JSON.stringify将其转化为JSON字符串

var products = [
    {name:"1", category:['a','b','c']},
    {name:"2", category:['a','b']},
    {name:"3", category:['a','c'}
]

//完成以下函数使得输出为
 [
     {name:'a',children:[{name:1}, {name:2}, {name:3}]},
     {name:'b',children:[{name:1}, {name:2}]},
     {name:'c',children:[{name:1}, {name:3}]}
 ]    
function getCategory(products) {
    //todo
    //使用map, map的key即为商品种类，value为数组，数组元素为具体商品
    //先遍历原先的对象数组生成map
    //再遍历map生成目标对象
}

20.连续子数组的最大和

//输入一个整型数组，数组中的一个或连续多个整数组成一个子数组。求所有子数组的和的最大值。
function getMax(nums) {
    //动态规划，dp[i]表示以nums[i]为结尾的最大连续子数组和
    //dp[i] = dp[i-1] < 0 ? nums[i]: dp[i]+nums[i];
    const l = nums.length;
    const dp = new Array(l);
    dp[0] = nums[0];
    let ans = dp[0];
    for(let i=1;i<l;i++){
        dp[i] = Math.max(nums[i]+dp[i-1],nums[i]);
        ans = Math.max(ans,dp[i]);
    }
    return ans;
};

console.log(getMax([-2,1,-3,4,-1,2,1,-5,4]))