滴滴面试尴尬+愉快之旅

男娘i 2022-08-28 05:57 217阅读 0赞

点击上方 前端瓶子君，关注公众号

回复算法，加入前端编程面试算法每日一题群

![1db38d6e433135030389d387345e5cb7.png][]

面试官也在看的前端面试资料

## 前言 ##

今天第一次面试的我无比紧张，面试遇到一个很好的面试官，让人感觉很亲切。当面试官问我的问题不懂时，面试官会让去我百度，了解后再解释给他听，然而百度我也找不到，只能尴尬的说不会，让面试官给我解释这个问题。在面试最后和面试官聊天的过程中也很愉悦，也给了我很好的建议。下面我将给大家介绍我的面试题！

### flex：7 1 100px中这三个参数你知道什么意思吗？ ###

下面我们通过例子来解释一下吧！

#### flex子元素伸缩属性 ####

*  第一个参数表示: flex-grow 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
 *  第二个参数表示: flex-shrink 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
 *  第三个参数表示: flex-basis给上面两个属性分配多余空间之前, 计算项目是否有多余空间, 默认值为 auto, 即项目本身的大小

**1. 扩大情况**

![722d75802e9fd8cf7fb652c1156a4ef1.png][]![5338e1c6dd87a4250efbb6c024324bcb.png][]![bada6a04ef45315598e7bbe97745e16b.png][]![c4c498d873d8e84c781cc88afc546dd0.png][]

看到上面的效果来分析结果吧

为什么item0设置的是50px，还是50px呢？

为什么item1设置的是50px，怎么变成87.5px呢？

为什么item2设置的是100px，怎么变成362.5px呢？

当`空间充足`时，`flex子项`的宽度计算公式是： `自身的基础宽度 + 容器剩余宽度 *（自身伸张比例 / 所有子项伸张比例之和`），要注意两种缩写

1.  flex:none是flex: 0 0 auto的缩写
2.  flex:num 是flex:numb 1 0%的缩写。如flex：1 => flex: 1 1 0%。

> 我们在item中设置了总得容器宽度为500px，容器中的item0、itme1、item2分别先占有自身的基础宽度，容器中剩余宽度则采用放大比例来进行放大。
> 
> 剩余宽度 ：500 - 50 - 50 - 100 = 300
> 
> item0本身宽度设置了50px，flex: none 等价于 flex: 0 0 auto，所有item0不参与放大,还是50px
> 
> item0宽度：50 + 300\*（ 0 / (0+1+7）) = 50
> 
> item1本身宽度设置的是flex: 1 1 50px中的第三个参数的值50px，当是扩大的情况下，我们只要看第一个参数就好了，item0的第一个参数是0，item1的第一个参数是1，item2的第一个参数是7，所以容器剩余宽度将会被分为8份，item1占一份，即为37.5px，item1总的宽度为87.5px
> 
> item1宽度：50 + 300 \* ( 1 /（0+1+7）) = 87.5
> 
> item2同理可得，item2占7份，即为262.5，item2总的宽度为362.5
> 
> item2宽度：100 + 300 \*（ 7 /（0+1+7））= 362.5

**2. 缩小情况**

![73a71965902de149d567b5d1564c00e7.png][] 1.png ![8c98741fb08a526e48b5f22bc5ec5f06.png][] 2.png ![71645aab9e6650e36ec55927cea2107c.png][] 3.png

![6a508b77a67a59b7652677e7ca91ed8c.png][]当`空间充足不足`时，`flex子项`的宽度计算公式是： `自身的基础宽度 \- 超出宽度 *(自身宽度*收缩比例/总权重）`

> 超出宽度=300+100+200-300=300
> 
> 总权重=300 \* 1+100\* 1+200\*2=800 //理解一下总权重如何得出
> 
> item1的宽度=300 - 300 \* 300\*1/800 =300 - 112.5=187.5；(只有width属性时，flex的属性值是0 1 auto,空间不足时也会收缩)
> 
> item2的宽度=100 - 300 \* 100\*1/800 =100 - 37.5=62.5；
> 
> item3的宽度=200 - 300 \* 200\*2 /800 =200-150=50；

注意flex:num这种缩写写法，展开相当于flex:num 1 0%，此时的flex-basis是0%,不是设置的width；计算总权重时该项的权重为0

### 将头像边框改为圆？ ###

![7bec9ea09056e203f44db155a9098d64.png][] 6.png

原来的css样式![08f9b98c69c63b86b238908b9297b2c0.png][]修改后的css样式![b6793ca990e2e40124e2861d893a2c7d.png][]

> 问题来了，面试官问我为什么20px可以，24px也可以，那么多少px最合适呢？（这里的意思是不能随意写一个数字）你怎么得出来的？

回答：长度和宽度相等，border-radius设置为长度（宽度）的一半。因为这个头像的长宽都是32px，所以最合适的就是16px。`评论区指出使用border-radius:50% 更好`

![7e048a0061bc65cc9e35636819a07483.png][] 22.png

### 遍历嵌套对象 ###

> 问题：编写函数获得对象中的值`666`，必须使用到 `str = 'a.b.c';`

1.      方法一

let obj = {
        a:{
            b:{
                c:666
            }
        }
    }
     
    var str = 'a.b.c';
    const getData = ()=>{
      var newArr =  str.split('.').reduce((o,s)=>{ return  o[s]},obj)
        return newArr
    }
    console.log( getData());

1.      方法二

let obj = {
        a:{
            b:{
                c:666
            }
        }
    }
     
    var str = 'a.b.c';
    const getData=(obj,str)=>{
     str.split('.').forEach(element =>{ 
         obj= obj[element]
    })    
    return obj;
    }
    console.log(getData(obj,str));

这道题的重点就是要知道检索对象中包含的值有什么方法。

方法有两种:

1.  在`[]`后缀中包括住一个字符串表达式的方法 如：`obj[a]`
2.  可以使用`.`表示法 如：`obj.a`

其中上面的解法就是采用`[]`的方法来解决这道题的。

## 总结 ##

通过这次面试我了解了自己的不足，也从面试官的谈话中得到了许多好的建议。继续加油吧！冲冲冲！

如果遍历嵌套对象更好的方法，可以在评论区下留言哦！大家一起互相学习一番！

最后给大家一个对于项目的建议：最好有一个自己的idea做出来的项目，因为面试官更喜欢从项目里来了解你。

本人大三，正在学习前端知识！

关于本文

作者：Lovi

地址：https://juejin.cn/post/6951592511928270885

![7454df0bed2d65929e3ec044f1f99aad.png][]

## 最后 ##

欢迎关注【前端瓶子君】✿✿ヽ(°▽°)ノ✿

回复「算法」，加入前端编程源码算法群，每日一道面试题（工作日），第二天瓶子君都会很认真的解答哟！

回复「交流」，吹吹水、聊聊技术、吐吐槽！

回复「阅读」，每日刷刷高质量好文！

如果这篇文章对你有帮助，「在看」是最大的支持

》》面试官也在看的算法资料《《

“在看和转发”就是最大的支持

[1db38d6e433135030389d387345e5cb7.png]: /images/20220828/5976f61d3b3d4999a85671d517128955.png
[722d75802e9fd8cf7fb652c1156a4ef1.png]: https://img-blog.csdnimg.cn/img_convert/722d75802e9fd8cf7fb652c1156a4ef1.png
[5338e1c6dd87a4250efbb6c024324bcb.png]: https://img-blog.csdnimg.cn/img_convert/5338e1c6dd87a4250efbb6c024324bcb.png
[bada6a04ef45315598e7bbe97745e16b.png]: https://img-blog.csdnimg.cn/img_convert/bada6a04ef45315598e7bbe97745e16b.png
[c4c498d873d8e84c781cc88afc546dd0.png]: /images/20220828/7240b71b0f6d4b78836dbfa857cf554e.png
[73a71965902de149d567b5d1564c00e7.png]: https://img-blog.csdnimg.cn/img_convert/73a71965902de149d567b5d1564c00e7.png
[8c98741fb08a526e48b5f22bc5ec5f06.png]: https://img-blog.csdnimg.cn/img_convert/8c98741fb08a526e48b5f22bc5ec5f06.png
[71645aab9e6650e36ec55927cea2107c.png]: /images/20220828/b32920ac358c4ba18cd16f9167262aec.png
[6a508b77a67a59b7652677e7ca91ed8c.png]: /images/20220828/cf88ef2d5ff94d89adb65ad4be1cdb7a.png
[7bec9ea09056e203f44db155a9098d64.png]: /images/20220828/355ba4ad3e8a4cd69eb4ee579333cd39.png
[08f9b98c69c63b86b238908b9297b2c0.png]: https://img-blog.csdnimg.cn/img_convert/08f9b98c69c63b86b238908b9297b2c0.png
[b6793ca990e2e40124e2861d893a2c7d.png]: /images/20220828/12679402671a43879967cec8ab07fedb.png
[7e048a0061bc65cc9e35636819a07483.png]: /images/20220828/fa663459bb2f4f8a920e809f51157516.png
[7454df0bed2d65929e3ec044f1f99aad.png]: /images/20220828/05ca07f621d04684bf8368dee5584fb8.png