1.字节跳动 -前端面试

首先提前15分钟进入牛客房间，进行声音 视频，网络的调试，一切准备工作就绪后，开始正式面试

面试官 先让进行一下自我介绍。于是简单的介绍后，就开始正式进入面试阶段

1、手写快速排序 ？

该方法的基本思想是：

1．先从数列中取出一个数作为基准数。

2．分区过程，将比这个数大的数全放到它的右边，小于或等于它的数全放到它的左边。

3．再对左右区间重复第二步，直到各区间只有一个数。

var quickSort = function(arr) {
　　if (arr.length <= 1) { return arr; }
　　var pivotIndex = Math.floor(arr.length / 2);
　　var pivot = arr.splice(pivotIndex, 1)[0];
　　var left = [];
　　var right = [];
　　for (var i = 0; i < arr.length; i++){
　　　　if (arr[i] < pivot) {
　　　　　　left.push(arr[i]);
　　　　} else {
　　　　　　right.push(arr[i]);
　　　　}
　　}
　　return quickSort(left).concat([pivot], quickSort(right));
};

　　

function quickSort(arr) {
    if (!arr.length) {
        return []
    }
    const [pivot,...rest] = arr;
    return [
        ...quickSort(rest.filter(item => item < pivot)),
        pivot,
        ...quickSort(rest.filter(item => item >= pivot))
    ]
}

　　

2、https为啥安全 ？

http协议属于明文传输协议，交互过程以及数据传输都没有进行加密，通信双方也没有进行任何认证，通信过程非常容易遭遇劫持、监听、篡改，严重情况下，会造成恶意的流量劫持等问题，甚至造成个人隐私泄露（比如银行卡卡号和密码泄露）等严重的安全问题

HTTPS，其实就是身披SSL协议这层外壳的HTTP

3、cdn原理，有了解嘛 ？

CDN网络是在用户和服务器之间增加Cache层，主要是通过接管DNS实现，将用户的请求引导到Cache上获得源服务器的数据，从而降低网络的访问时间。

https://blog.csdn.net/xiangzhihong8/article/details/83147542

4、单页路由是如何实现 ？

1. 配置路由模式history和hash
2. 添加和删除路由
3. 监听路由变化并调用对应路由回调
4. 暴露路由跳转函数

 

5、宏任务和微任务 程序题 ？

console.log('1');
setTimeout(function () {
console.log('2');
})

new Promise(function (resolve) {
console.log('3');
}).then(function () {
new Promise(function (resolve) {
console.log('4');
}).then(function () {
console.log('5');
})
console.log('6');
})

console.log('7');　　

正确输出 ：

 1

 3

 7

 2

6、对promise all 有了解嘛？用promise实现一个promise.all  ？

function promiseAll(promises) {
    return new Promise((resolve, reject) => {
      let resultCount = 0;
      let results = new Array(promises.length);

      for (let i = 0; i < promises.length; i++) {
        promises[i].then(value => {
          resultCount++;
          results[i] = value;
          if (resultCount === promises.length) {
            return resolve(results)
          }
        }, error => {
          reject(error)
        })
      }
    })
  }

  let p1 = new Promise(resolve => resolve('p1'))
  let p2 = new Promise(resolve => resolve('p2'))
  let p3 = Promise.reject('p3 error')

  promiseAll([p1, p2]).then(results => {
    console.log(results)    // ['p1', 'p2']
  }).catch(error => {
    console.log(error)
  })

  promiseAll([p1, p2, p3]).then(results => {
    console.log(results)
  }).catch(error => {
    console.log(error)      // 'p3 error'
  })

　　

7、左右宽度写死 ，中间自适应？

html：

 <div className="container">
     <div className="main left"></div>
     <div className="main right"></div>
     <div className="main center">
       <h1>float </h1>
         <p>float浮动划分左中右</p>
       </div>
  </div>

css：

方法1：float

.main {
  height: 100px;
}
.left {
  float: left;
  width: 300px;
  background-color: green;
}
.right {
  float: right;
  width: 300px;
  background-color: gray;
}
.center {
  background-color: gold;
}

 

方法2：flex

.flex {
      margin-top: 160px;
      display: flex;
    }
    .flex-left {
      width: 300px;
      background-color: green;
    }
    .flex-right {
      width: 300px;
      background-color: gray;
    }
    .flex-center {
      flex: 1;
      background-color: gold;
    }

方法3 ： position 

.position-left {
      width: 300px;
      background-color: green;
      position: absolute;
      left: 0;
    }
    .position-right {
      width: 300px;
      background-color: gray;
      position: absolute;
      right: 0;
    }
    .position-center {
      background-color: gold;
      position: absolute;
      left: 300px;
      right: 300px;
    }

　　

 

8、css 样式题 

 <div>
  <p className="font1 font2">111111</p>
 </div>

.font1{
color:red;
}
.font2{
color:pink;
}