神策数据前端面试

一面

朋友说，下面5道题只总共只给了10分钟！！！！

1. 实现一个版本比较函数

举例：项目发布了版本1.2.2.2.2, 之前的版本是 1.1.55 ,现在需要比较哪个版本号大。 注意：版本号的长度不确定 返回值：相等返回 0， 大于 返回 1，小于返回 -1

// 使得下面的返回正确
console.log(compare("1.2.2.2.2", "1.3.55"));  // -1
console.log(compare("1.2", "1.2.55"));  // -1
console.log(compare("1.2.2", "1.2.2")); //0
console.log(compare("1.3.2", "1.2.2")); // 1 
console.log(compare("1.20.2", "1.3.20")); // 1 
console.log(compare("1.0.1.0", "1.0.1")); // 0

答案：

function compare(v1, v2){
    if(v1 === v2) {
        return 0;
    }

    const arr1 = v1.split('.');
    const arr2 = v2.split('.');
    const maxLen = Math.max(arr1.length, arr2.length);
    for(let i = 0; i < maxLen; i++) {
        const item1 = arr1[i] || '';
        const item2 = arr2[i] || '';
        const l1 = item1.length;
        const l2 = item1.length;
        const maxL = Math.max(l1, l2);
        const sum1 = Number(item1) * 10 ** (maxL - l1);
        const sum2 = Number(item2) * 10 ** (maxL - l2);
        if(sum1 > sum2) {
            return 1;
        }
        else if(sum1 < sum2) {
            return -1;
        }
    }
    return 0;
}

思路：比较每位版本的大小，如果版本不存在，就用0替代。
比较特殊的是3 比 21大，所以比较大小的时候进行了 10 ** (maxL - l1)的操作  

2. 实现 before 和 after 方法

实现对一个函数的二次包装、封装后的函数支持调用前、调用后的额外代码执行

function aop(fn,before,after){
    return function (...arg) {
        before && before();
        fn && fn(...arg)
        after && after()
    }

}

 

3. 实现一个 dom 工厂函数

方法申明：

// elementType 元素类型： 如div，button
// attributes：元素 dom 属性，如 src ，href，id 或任意自定义属性
// events:  一个对象，包含要监听的事件如： {onclick:()=>{},onmousedown:()=>{}}
// parent: 宿主元素,创建的元素做为parent子元素。

答案：

function CreateDom(elementType, attributes, events, parent) {
    let dom = document.createElement(elementType);
    //这里其实要做容错是null的情况
    for (let attr in attributes) {
        // 这里我简单的赋值，其实vue或者react源码里都有style等的判断
        dom[attr] = attributes[attr]
    }
    for (let attr in events) {
        // 这里我简单的赋值，其实vue或者react源码里都有style等的判断
        dom[attr] = events[attr]
    }
    parent.appendChild(div)
}

4. 实现一个将下划线命名转为驼峰命名的函数

_a_ba_ca => aBaCa
_A_ba_ca => aBaCa
A_ba_ca => aBaCa

function transformNaming(str){
    const arr = str.split('_');
    return arr.reduce((pre, cur) => {
        if(pre === '') {
            return cur.slice(0, 1).toLowerCase() + cur.slice(1)
        }
        else {
            return pre + cur.slice(0, 1).toUpperCase() + cur.slice(1);
        }

    }, '');
}

5. 完善如下代码实现链式调用

new Duck().go('100').sing('hello'); //打印出 100,hello

function Duck() {}
Duck.prototype.go = function(param) {
    console.log(param)
    return this;
}
Duck.prototype.sing = function(param) {
    console.log(param)
    return this;
}