2020年 10月份 深圳富途前端面试及题解

1. 协商缓存与强制缓存
2. vue如何hack元素的数组方法,从而实现响应
3. es6 Class语法 constructor中 super()的作用
4. 富文本的存储与渲染中, 如何防止富文本中的编写的代码导致的xss攻击
5. Vue.$nextTick实现原理以及使用异步更新的原因
6. 浏览器输入url到页面渲染完毕的过程
7. get与post请求区别
8. 如何实现图片懒加载
9. xss及csrf攻击的原理及防御方法
10. 合法的[{()}]表达式校验(不校验层级关系)

function isValid(str) {
    let chars = str.split('')

    let map = new Map();
    map.set(')', '(');
    map.set('}', '{');
    map.set(']', '[');

    let stack = [];
    for (let i = 0; i < str.length; i++) {
        if (map.has(chars[i])) {
            //为右括号时，如果栈为空或者栈顶与该括号类型不匹配返回false
            if (stack.length === 0 || map.get(chars[i]) !== stack.pop()) {
                return false;
            }
        } else {
            //为左括号时直接入栈
            stack.push(chars[i]);
        }
    }
    return stack.length === 0;
}

console.log(isValid('{[]}[]'));

7. 手写new方法

let myNew =function (constructor) {

if (!(constructorinstanceof Function)) {

throw new Error('arguments[0] require a function')

}

;

    let restArgs =Array.prototype.slice.call(arguments, 1);

    // 创建一个空对象

    let instance = {};

    // 将这个空对象的 __proto__ 指向 构造函数Function.prototype

    instance.__proto__ = constructor.prototype;

    // 将构造函数的作用域赋给新对象(因此this就指向了这个新对象) && 执行构造函数中的代码(为这个新对象添加属性)

    let result = constructor.apply(instance, restArgs);

    // 返回新对象

    return resultinstanceof Object ? result : instance;

}

function Person(name) {

this.name = name;

    this.sayHi =function () {

console.log('My name is great ', this.name)

}

}

myNew(Person, 'Alex', 22).sayHi()

2. 判断数组A(已排序)是数组B(已排序)的子数组

function isChildrenArr(parent, child) {
    let parentLength = parent.length
    if (parentLength < 1) {
        return false
    }
    let childLength = child.length
    if (childLength < 1) {
        return true
    }
    if (childLength > parentLength) return false
    let parentLoopIndex = 0
    let childIsSame = 0
    while (parentLoopIndex < parentLength) {
        if (parent[parentLoopIndex] > child[childIsSame]) {
            return childIsSame === childLength
        }

        if (parent[parentLoopIndex] === child[childIsSame]) {
            childIsSame++
        }
        parentLoopIndex++
    }

    return childIsSame === childLength
}

console.log(isChildrenArr([1, 2, 3, 4, 5, 6], [2, 3, 4]))

3. 斐波那契数列递归优化(尾递归优化)

1.  粗糙版本



function fibo1(n) {

if (n ===1)return 1

    if (n ===2)return 1

    return fibo1(n -2) +fibo1(n -1)

}
尾递归优化
function fibo2(n, current =0, next =1) {

if (n ===0)return 1

    if (n ===1)return next

return fibo2(n -1, next, current + next)

}