likes
comments
collection
share

谈谈baidu基础面试题

作者站长头像
站长
· 阅读数 41

浅聊一下大厂面试题的小细节

一、手风琴

这道题主要是考css对弹性布局的理解，话不多说先上个图：

谈谈baidu基础面试题

相信大家要做出一个这样的样式是很简单的，但我们需要的是注意里面的细节。

在这之前介绍一个工具给大家：

stylus

Stylus是一种CSS预处理器，它允许前端开发者以更简洁、模块化的方式编写CSS代码，并提供了变量、嵌套规则、运算符等高级功能，提高了代码的可维护性和可扩展性。

通过npm i -g stylus这个指令安装，然后通过这个stylus --version指令看安装的是什么版本判断是否安装成功。

谈谈baidu基础面试题

然后可以安装这个插件可以方便我们在styl文件编译：

谈谈baidu基础面试题

使用stylus common.styl -o common.css 这个命令使styl文件转变成css文件；使用stylus -w common.styl -o common.css 命令可以监听styl然后同步更新css文件。

css

接下来就来完成我们的代码吧：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>手风琴</title>
    <link rel="stylesheet" href="common.css">
</head>
<body>
    <ul class="accordion">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>

先通li创建6个列表项当作盒子来装我们那6个琴键，然后来完成css吧：

*
    margin 0
    padding 0
    box-sizing border-box

ul,li
    list-style none

.accordion
    display flex
    width 600px
    height 200px
    li
        flex 1
        cursor pointer
        line-height 200px
        color white
        transition: flex .5s
        &:nth-child(1)
            background-color #f66
        &:nth-child(2)
            background-color #66f
        &:nth-child(3)
            background-color #f90
        &:nth-child(4)
            background-color #09f
        &:nth-child(5)
            background-color #9c3
        &:nth-child(6)
            background-color #3c9
        &:hover
            flex 2

我们来扣一下上面代码的细节吧：在* 中我们加入box-sizing border-box使元素的宽度和高度会包括内容、边框和内边距的总和。ul，li中用list-style none来移除列表项（<li>元素）前面的小圆点，然后使用弹性布局让六个琴键布局在同一行，先在父类中display flex，再在子类li中flex 1让子类中的六个琴键平分父类这个盒子的宽度；再使用&:nth-child()来给六个琴键做不同的样式，当鼠标移到一个琴键上在 &:hover用flex 2来反馈效果，最后加个transition: flex .5s反馈时间让其看起来更丝滑。这就是以上小细节了。把上面styl文件转换成css文件就是这样了：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
ul,
li {
  list-style: none;
}
.accordion {
  display: flex;
  width: 600px;
  height: 200px;
}
.accordion li {
  flex: 1;
  cursor: pointer;
  line-height: 200px;
  color: #fff;
  transition: flex 0.5s;
}
.accordion li:nth-child(1) {
  background-color: #f66;
}
.accordion li:nth-child(2) {
  background-color: #66f;
}
.accordion li:nth-child(3) {
  background-color: #f90;
}
.accordion li:nth-child(4) {
  background-color: #09f;
}
.accordion li:nth-child(5) {
  background-color: #9c3;
}
.accordion li:nth-child(6) {
  background-color: #3c9;
}
.accordion li:hover {
  flex: 2;
}

二、展平数组

将一个const arr=[1,[2,[3,4]]]这样套娃又套娃的数组给展平变成一个正常的[1,2,3,4]这样的数组，这里给大家使用三种方法

一、递归

function flatten(arr) {
    let result=[]
    for(let i=0,len=arr.length;i<len;i++){
        // 数组，递归
        if(Array.isArray(arr[i])){
            result=result.concat(flatten(arr[i]))
        }
        // 否则 加入数组
        else{
            result.push(arr[i])
        }
    }
    return result
}

提一个细节在for循环中使用len=arr.length是因为arr是对象，读取.length会耗时，把它赋给len就不用每次循环都要读取.length。这个方法呢可行但递归比较麻烦耗内存还容易爆栈。

二、转字符串在转数字存入数组

function flatten(arr) {
    var strArr=arr.toString()  // , 隔开的字符串
    var numArr=strArr.split(',')
    var result=[]
    for(var i=0,len=numArr.length;i<len;i++){
        result.push(+numArr[i]);
    }
    return result
}

这里把字符串转换为数字还有两种方法：parseInt()``Number()这两种都是显式类型转换，而用+是隐式类型转换，+号的作用 一是拼接字符串，二是数值计算，三是类型转换，在这它旁边只有一个元素所以他的作用是第三种。

三、map()

function flatten(arr) {
    return arr.toString().split(',').map(function(item){
        return +item
    })
}

这也算最简单的了，用map()依次遍历。

ok以上就是我对这些基础面试题的了解了，欢迎大佬指导！！！

转载自:https://juejin.cn/post/7374783392674185242
评论
请登录