我经历的前端面试（三）

来自某健康前端一面。

项目：

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