我經歷的前端面試（三）

來自某健康前端一面。

項目：

1.從頭開始學習React，從入門到上手生產，如何安排？

技術：

1.事件委託是什麼？爲什麼要事件委託？例子。

 

2.flex佈局（自己的學習筆記）

3.flex佈局中實現文字超長省略，怎麼實現？（本以爲答對了。。）

.parent{
    display: flex;
    flex-direction: row;
    width: 600px;
}

child的兩種情況：（1）直接放超長文字內容 （2）裏面還有元素，元素中放超長文字

情況1:

.chile1{
    flex: 1;
    background-color: chartreuse
}
.child2{
    flex: 2;
    background-color: coral;
    /*普通超出省略三件套*/
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.child3{
    flex:1;
    background-color: cornflowerblue;
}

<div class="parent">
      <div class="child1">1</div>
      <div class="child2">2測試在flex佈局中實現文字超長時省略號；測試在flex佈局中實現文字超長時省略號；測試在flex佈局中實現文字超長時省略號；</div>
      <div class="child3">3</div>
</div>

 

但是把child3改成這樣：

<div class="parent">
      <div class="child1">1</div>
      <div class="child2">2測試在flex佈局中實現文字超長時省略號；測試在flex佈局中實現文字超長時省略號；測試在flex佈局中實現文字超長時省略號；</div>
      <div class="child3">3
          <div> <!--嵌套-->
              測試在flex佈局中實現文字超長時省略號；測試在flex佈局中實現文字超長時省略號；測試在flex佈局中實現文字超長時省略號；
          </div>
      </div>
</div>

效果就是沒有效果！

 

怎麼改？給child加overflow:hidden,該box中的所有元素三件套

.child3 {
    flex: 1;
    overflow: hidden;// 關鍵在這！給flex的元素加這句
    background-color: cornflowerblue;
}
.child3 > * {
    /* 超出省略三件套 */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

4.兩個數據源，如a,b。a b中的數據key都不重複，但a b都有相同的key,找出相同key的元素。

a=[{id:1},{id:2},{id:6}]

b=[{id:6},{id:7},{id:8}]

解法：用key先對a遍歷，然後用key去遍歷b

5.ES6：說一下Generator函數？

6.ES6：說一下Decorator修飾器

7.打包工具：說一下webpack loaders、plugins

8.區塊鏈最核心的兩個技術？（不按套路出牌 。。）

（1）P2P的實現思路？

（2） P2P中怎麼知道對方在哪？利用什麼技術感知對方？

（3）NAT

（4）steon（？？？）

總結：

（1）ES6每每中招！

（2）打包工具提上日程

（3）不按套路出牌的打法更令人恐怖。