我經曆的前端面試（三）

來自某健康前端一面。

項目：

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）不按套路出牌的打法更令人恐怖。