2021-03-15 有赞一面二面总结

电话一面问题概要

1.伪类和伪元素的区别
css伪类和伪元素的区别是什么？

因此，伪类与伪元素的区别在于：有没有创建一个文档树之外的元素。
css3规范中要求使用双冒号（::）表示伪元素，以此来区分伪类和伪元素，比如::before和::after等伪元素使用双冒号（::），:hover和:active伪类使用单冒号（:）。

3.http2.0相比1.1的优化点
HTTP/2.0 相比1.0有哪些重大改进？
4.https加密过程
为什么用抓包工具看HTTPS包是明文的
5.常见的继承 class extends 是用了哪种继承
6.$slot的具体用法
7.描述vue的生命周期 以及说明keep-alive 加了什么生命周期 有什么用
8.map和weak-map
9.css的盒子模型和弹性盒模型的区别 以及如何转化
10.webpack的tree-shaking
摇树优化(tree shaking)

二面远程做题

1.第一题会用到正则匹配和转码相关知识，todo

/**
 * ## 问题1 todo
 * 解析url中的queryString
 * 
 * 输入：https://www.youzan.com?name=coder&age=20&callback=https%3A%2F%2Fyouzan.com%3Fname%3Dtest&list[]=a&list[]=b&json=%7B%22str%22%3A%22abc%22,%22num%22%3A123%7D
 * 输出：
 * {
 *  name: "coder",
 *  age: "20",
 *  callback: "https://youzan.com?name=test",
 *  list: ["a", "b"],
 *  json: {
 *      str: 'abc',
 *      num: 123
 *  }
 * }
 */
function parseQuery(urlinput) {
    // coding...

}

const url = 'https://www.youzan.com?name=coder&age=20&callback=https%3A%2F%2Fyouzan.com%3Fname%3Dtest&list[]=a&list[]=b&json=%7B%22str%22%3A%22abc%22,%22num%22%3A123%7D';
console.log(parseQuery(url));

2.第二题核心就是将路径分开，然后取到最后的值

/**
 * ## 问题2
 * 实现 getValue 函数来获取path对应的值
 */

var object = { 'a': [{ 'b': { 'c': 3 } }] }; // path: 'a[0].b.c'
var array = [{ "a": { b: [1] } }]; // path: '[0].a.b[0]'

function getValue(obj, path, defaultValue) {
    // coding...
    let splitArr = path.split('.');
    let strResultTotal = [];
    for (let [index, item] of splitArr.entries()) {
        if (item.indexOf('[') !== -1) {
            let strResult = item.split('[');
            if (strResult[0] !== '') {
                strResultTotal.push(strResult[0]);
            }
            for (let i = 1; i < strResult.length; i++) {
                strResult[i] = strResult[i].replace(']', '');
                strResultTotal.push(strResult[i]);
            }
        } else {
            strResultTotal.push(item);
        }
    }
    let result = [];
    result[0] = obj[strResultTotal[0]];
    for (let [index, item] of strResultTotal.entries()) {
        if (typeof result[index]==='object'&&result[index][strResultTotal[index + 1]]) {
            result[index + 1] = result[index][strResultTotal[index + 1]];
        } else if (typeof result[index] !== 'object'&&!strResultTotal[index + 1]) {
            return result[index];
        } else {
            return defaultValue;
        }
    }
    return result[result.length - 1];
}

console.log(getValue(object, 'a[0].b.c', 0));  // 输出3
console.log(getValue(array, '[0].a.b[0]', 12)); // 输出 1
console.log(getValue(array, '[0].a.b[0].c', 12));  // 输出 12

3.关键在于判断两个对象所有的key和value相等，即可认为相等。涉及到递归，循环引用问题也需要解决，todo

/**
 * ## 问题3
 * 对数组做去重
 * 
 * @example
 * [1,'1',1]                            -> [1,'1']
 * [{a: 1}, {b: 1}, {a: 1}]             -> [{a: 1}, {b: 1}]
 * [{a: 1, b: 2}, {b: 1}, {a: 1, b: 2}] -> [{a: 1, b: 2}, {b: 1}]
 * [[1, {a: 1}], [2], [3], [1, {a: 1}]] -> [[1, {a: 1}], [2], [3]]
 * [{a: 1, b: 2}, {b: 1}, {b: 2, a: 1}] -> [{a: 1, b: 2}, {b: 1}]
 */
let resArr = []
function uniqueArray(array) {
    // coding...

}


console.log(uniqueArray([1, '1', 1]))
// [1,'1']
console.log(uniqueArray([{ a: 1, b: 2 }, { b: 1 }, { b: 2, a: 1 }]))
// [{a: 1, b: 2}, {b: 1}]

4.递归改变所有的key值即可，注意要先递归，不然第一层的key改不了

/**
 * 问题 4
 * 将一个json数据的所有key从下划线改为驼峰
 * 
 * @param {object | array} value 待处理对象或数组
 * @returns {object | array} 处理后的对象或数组
 */
function mapKeysToCamelCase(data) {
   if(typeof data === 'object'){
        Object.keys(data).forEach((item) => {
            if (typeof data[item] === 'object') {                
                mapKeysToCamelCase(data[item])
            }
            if (item.indexOf('_') !== -1) {                
                let arr = item.split('_')
                let key=[]
                key.push(arr[0])
                for (let i = 1; i < arr.length; i++) {
                    let arr2=arr[i].split('')
                    arr2[0]=arr2[0].toUpperCase()
                    let str2=arr2.join('')
                    key.push(str2)
                }
                
                let keyResultArr = key.join('')
                data[keyResultArr]=data[item]
                delete data[item]
            }
          
        })
        return data
    }
}

const testData = {
    a_bbb: 123,
    a_g: [1, 2, 3, 4],
    a_d: {
        s: 2,
        s_d: 3
    },
    a_f: [1, 2, 3, {
        a_g: 5
    }],
    a_d_s: 1
}

console.log(mapKeysToCamelCase(testData))
// {
//     aBbb: 123,
//     aG: [1, 2, 3, 4],
//     aD: {
//         s: 2,
//         sD: 3
//     },
//     aF: [1, 2, 3, {
//         aG: 5
//     }],
//     aDS: 1
// }