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;
}