关于字节手写的面试题

一、实现一个圣杯布局

<div class="header" >header</div>
<div class="main">
    <div class="left">left</div>
    <div class="center">center</div>
    <div class="right">right</div>
</div>
<div class="bottom">bottom</div>

/* code here */
 .main {
        overflow: hidden;
        padding: 0px 200px;
      }
      .center,
      .left,
      .right {
        float: left;
        position: relative;
        min-height: 130px;
      }

      .left {
        margin-left: -100%;
        width: 200px;
        left: -200px;
      }
      .right {
        width: 200px;
        margin-left: -200px;
        right: -200px;
      }
      .center {
        width: 100%;
      }
      .bottom {
        width: 100%;
      }

二、手动实现一个Promise.all()方法

function myPromiseAll(promiseArr) {
    // code here
    var result = [];
    return new Promise((resolve)=>{
       if(promiseArr.length === 0){
         resolve(promiseArr)
       }
       let count = 0;
       for(let i = 0;i<promiseArr.length;i++){
          Promise.resolve(promiseArr[i]).then(value =>{
              result[i] = value;
              if(++count === promiseArr.length){
                  resolve(result);
              }
          }).catch(err=>{console.log('promise报错了～～～')})
       }
    })

}

// 调用参考
const promise1 = new Promise(resolve => resolve(1));
const promise2 = new Promise(resolve => resolve(2));
const promise3 = new Promise(resolve => resolve(3));
const promiseAll = myPromiseAll([promise1, promise2, promise3]);
promiseAll.then(function(res) {
  console.log(res); // 输出：[1,2,3]
});

三、实现一个 EventBus 类，至少拥有on，emit两个方法

class EventBus {
     constructor(){
         this.events = {};
     }
    // on 用于注册事件
    // emit 用于触发事件
    on(eventName, cb) {
        // code here
        if(!this.events[eventName]){
            this.events[eventName] = [];
        }
        this.events[eventName].push(cb);
    }
    emit(eventName, arg) {
        // code here
        if(this.events[eventName]){
            this.events[eventName].forEach(cb => cb(arg));
        }    
    }
}

// 调用参考
const bus = new EventBus();
bus.on('event01', (eventArg) => console.log('event01', eventArg));
bus.emit('event01', 123); //输出：event01 123

四、实现url字符串转json，json转url字符串的两个方法

function urlToObj(url) {
    // code here
    let path = url.split('?')[0];
    let params = url.split('?')[1];
    let paramsObj = params.split('&');
    let obj = {query:{}}
    obj.path = path;
    for(let i = 0; i<paramsObj.length;i++){
        let objStr = paramsObj[i].split('=')
        obj.query[objStr[0]] = objStr[1];
    }
    return obj;
} 

function objToUrl(obj) {
    // code here
    var path = obj.path;
    let strArr = [];
    for(let i in obj.query){
        strArr.push(i+'='+obj.query[i]);
    }
    strArr.join('&')
    return path + '?' + strArr;
    
}

// 调用参考
const url = 'https://www.douyin.com/abc?foo=1&bar=2';
const urlObj = urlToObj(url); 
console.log(urlObj);
// 输出
// {
//     path: 'https://www.douyin.com/abc',
//     query: {
//         foo: '1',
//         bar: '2'
//     }
// }
urlObj.query.coo = '3'
const newUrl = objToUrl(urlObj); 
console.log(newUrl);
// 输出 https://www.douyin.com/abc?foo=1&bar=2&coo=3

五、实现一个节流函数

// 节流：函数每一段时间内只会执行一次
function throttle(fn, wait) {
    // code here
    let timeId = null;
    return function(args){
       if(!timeId){
          timeId = setTimeout(()=>{
          fn.apply(this,args);
          timeId = null;
          },wait)
       }
    }    
}

// 调用参考
const throttleFn = throttle((arg) => {console.log(arg)}, 1000);
throttleFn(1) // 1
throttleFn(1)

六、实现一个方法以比较两个版本号的大小

// 版本号格式参考如：1.0.0
function compareVersion(source, target) {
    // code here
    var sourceArr = source.split('.');
    var targetArr = target.split('.');
    for(var i = 0;i < Math.max(sourceArr.length,targetArr.length);i++){
       var num1 = +(sourceArr[i] || 0);
       var num2 = +(targetArr[i] || 0);
       if(num1 < num2){
           return -1;
       }else if(num1 > num2){
           return 1;
       }
    }
    return 0;
}

// 调用参考
compareVersion('1.0.3', '1.0.5'); // 返回 -1
compareVersion('1.0.7', '1.0.5'); // 返回 1
compareVersion('1.1.3', '1.0.5'); // 返回 1