小米前端实习一面面经

1. 什么时候开始学的前端，学了啥

2. 用过flex吗？来做几道题

   1. 效果如图，给出html结构，并且不能修改html结构

      • 

      • <div class="parent">
            <div class="children a">A</div>
            <div class="children b">B</div>
            <div class="children c">C</div>
        </div>

        
        

      •   .parent {
              background-color: #ccc;
              display: flex;
              justify-content: space-between;
              align-items: center;
              height: 100px;
              width: 300px;
            }
        
            .children {
              background-color: red;
              width: 50px;
              height: 50px;
            }
        
            .a {
              order: 1;
            }
        
            .b {
              order: 2;
            }
        
            .c {
              order: 0;
            }

        
        
        

   2. 同上，不能修改html结构

      • 

      • <div class="parent">
            <div class="children a">A</div>
            <div class="children b">B</div>
            <div class="children c">C</div>
        </div>

        
        

      •    .parent {
              background-color: #ccc;
              display: flex;
              justify-content: space-between;
              align-items: center;
              height: 100px;
              width: 300px;
            }
        
            .children {
              background-color: red;
              width: 50px;
              height: 50px;
            }
        
            .a {
              order: 1;
              margin-left: -150px;
            }
        
            .b {
              order: 2;
            }
        
            .c {
              order: 0;
            }

        
        
        

   3. 可以修改html结构（需要注意父级元素宽度变小后，子元素不缩小，并且父元素宽度过大时，元素之间的间隙不能超过30px，父元素最小宽度150px）

      • 

      • <div class="parent">
            <div class="children a">A</div>
            <div class="hidden"></div>
            <div class="children b">B</div>
            <div class="hidden"></div>
            <div class="children c">C</div>
        </div>

        
        

      •   .parent {
              background-color: #ccc;
              display: flex;
              justify-content: center;
              align-items: center;
              height: 100px;
              width: 300px;
              min-width: 150px;
            }
        
            .hidden {
              flex-basis: 30px;
            }
        
            .children {
              background-color: red;
              width: 50px;
              height: 50px;
              flex-shrink: 0;
            }

        
        
        

3. 如何让下图的元素A显示在B的上方？

   • 

   • 设置position属性脱离文档流，再设置的A的z-index属性提高层级

   • 说了说那个层叠顺序，正的z-index>z-index:auto>inline-block盒子>浮动盒子>block盒子，具体这些写法行不行也不知道

4. canvas与svg区别？

   • canvas基于JS绘制图形，可以创建可交互的图形，例如地图啥的

   • SVG基于XML标签的矢量图，保证图像不失真

   • 别的不晓得，咖喱给给

5. 如何用svg实现下列环形进度条，说思路？

   • 
     

   • SVG标签中嵌套一个circle标签，给标签配置stroke-width设置环的宽度，stroke设置环的颜色，stroke-dasharray绘制一段圆弧

   • 中间的图形不会，呜呜呜

6. 问了很多道代码输出题，主要涉及

   • 变量提升（1道）

   • 块级作用域（2道）

   • this指向（2道）

   • 事件循环（3道）

   • 说结果，以及为什么

7. 了解call和apply吗，将函数参数的arguments对象转换为字符串，并且不能事先将arguments转换为数组

   • function test(){
          const res=Array.prototype.join.call(arguments,'')
      	  console.log(res)
     }
     test(1,2,3,4)

     
     

8. 有一个大数组有一个小数组，想要从大数组中移除小数组里的元素

   • 大：[1, 3, 2, 4, 2, 5, 6, 7, 8, 9]

   • 小：[13, 2, 3, 5, 7]

   • 结果: [1, 4, 6, 8, 9]

   • let arr1=[1, 3, 2, 4, 2, 5, 6, 7, 8, 9]
     let arr2=[13, 2, 3, 5, 7]
     let res=[],index=0
     let map=new Map()
     for(let i=0;i<arr2.length;i++){
        map.set(arr2[i],true)
     
     }
     for(let num of arr1){
         if(!map.has(num)){
            res[index++]=num
         }
     }
     console.log(res)

     
     
     

9. 无重复字符的最长子串的长度

   • 输入: s = "abcabcbb"

   • 输出: 3

   • 解释: 因为无重复字符的最长子串是 "abc"，所以其长度为 3。

   • 输入: "bbbbb"

   • 输出: 1

   • 解释: 因为无重复字符的最长子串是 "b"，所以其长度为 1

   • function lengthOfLongestSubstring(s: string): number {
         let left=0,right=0,res=0,map=new Map()
         while(right<s.length){
             let char=s[right++]
             if(!map.has(char)){
                 map.set(char,1)
             }else{
                 res=Math.max(res,map.size)
                 while(left<right&&map.has(char)){
                     let leftItem=s[left++]
                     map.delete(leftItem)
                 }
                 map.set(char,1)
             }
         }
         return map.size>res?map.size:res
     };

     
     
     

10. 浏览器所能显示的最小字体为12px，如何让其显示8px的大小

    • 用transform缩放，或者修改meta标签的viewport配置视图缩放

11. 如何判断元素出现在可视区？

    • 判断元素的offetTop与clientHeight+scrollTop的关系

12. requestAnimationFrame的特点？

    • 根据屏幕刷新率执行注册的回调函数，一般60hz的刷新率，每秒执行60次回调函数

    • 并且requestAnimationFrame 会把每一帧中的所有 DOM 操作集中起来，在一次重绘或回流中就完成

    • 相比setTimeout实现的动画更加流畅

    • 在网页失去焦点后，会停止执行对应的回调函数，节省CPU开销

13. Vuex中存储的数据在页面刷新后会怎样，怎么解决？

    • 刷新后Vuex保存的状态存储在内存中，刷新页面后丢失，需要通过浏览器的本地存储暂存数据

14. 反问
15. 总体来说，主要就是在做题，问的东西倒不是特别多，太久没写布局，一来的布局就写了半天，淦，呜呜呜