likes
comments
collection
share

百度面试官真宠我，给我出这两题！

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

手风琴

手风琴效果是一种用户界面设计中的交互模式，常见于网页或应用程序中，表现为一系列可展开和收起的内容区域。当用户点击或触摸其中一个标题或按钮时，与之相关联的内容区域会展开，同时其他已经展开的内容区域会自动收起，整个过程类似于手风琴的伸缩动作，因此得名“手风琴效果”。

百度面试官真宠我，给我出这两题！

要做出手风琴效果

首先我们要先创建六个单位,所以我们在<body>里面创建六个列表项

<ul class="accordion">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>

此时我们得到了以下结果：

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

接下来我们要把这6个数字并到一排，并把他们变成一个一个方块，并给他们涂上颜色

我们将所有元素的外边距和内边距设为0，并且设置盒模型为border-box。这意味着元素的宽度和高度会包括内边距和边框，但不包括外边距。使用Flexbox布局，让列表项水平排列。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
ul,
li {
  list-style: none;
}
.accordion {
  display: flex;
  width: 600px;
  height: 200px;
  line-height: 200px;
  text-align: center;
  color: #fff;
}
  .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: #01f;
}
.accordion li:nth-child(6) {
  background-color: #3c9;
}

我们得到这样的效果

百度面试官真宠我，给我出这两题！

可以看到这个图形太小了，完全不是我们的理想型，我们使用flex：1将它变大

我们使用flex：1是因为目的是让所有列表项在父容器（.accordion）中均匀分配空间，无论是容器有多余空间还是刚好够用。这对于创建手风琴的基础布局非常有用，

.accordion li {
  flex: 1;
  cursor: pointer;//将鼠标指针变为手形，提示用户这些项可点击
}

百度面试官真宠我，给我出这两题！

现在，我们的手风琴就看得很舒服了，接下来我们来到最关键的部分：我们指针停留时，方块展开。

.accordion li:hover {
  flex: 2;
}

当鼠标悬停在列表项上时，将其flex值设为2，这会使得该列表项相对于其他项变宽，这样我们就可以得到开头那个git一样的手风琴效果，是不是能简单呢？快去试试吧

数组展开

当面试官给你一个[1,[2,[3,[4]]]]数组，你该如何将它转成[1,2,3,4]呢，你先思考一分钟，看看能想到几种方法。

方法一：递归
const arr = [1,[2,[3,[4]]]];

function flatten(arr){ 
    let result = []//定义一个空数组 result，它将用于存储最终展平后的数组元素。
    for(var i = 0 , len = arr.length ; i<len ; i++){
        //此处有一个小细节，我们令len=arr.length,这样len缓存了arr.length，这样就不用反复调用arr.length，这样就可以减少耗时                                     
        if(Array.isArray(aii[i])){
            result = result.concat(flatten(arr[i]))
        //首先检查当前元素arr[i]是否为数组（使用Array.isArray()方法）。如果是，则对这个子数组递归调用flatten函数，并将返回的结果（一个展平后的数组）与result数组使用concat()方法合并。                                    
        }else{
            result.push(arr[i])
        }
        //否则加入数组
    }
    return result
}                                             
console.log(flatten(arr)); // 应输出: [1, 2, 3, 4]
方法二：转为字符串
//数组对象 toString一下,转成了字符串
console.log([1,[2,[3,[4,[5,[6]]]]]].toString(),typeof[1,[2,[3,4]]].toString())
var arr = [1,[2,[3,[4,[5,[6]]]]]]
//扁平化
function flatten(arr){
    var strArr = arr.toString();//以，隔开的字符串
    var numArr = strArr.split(',');
    var result = []
    for(var i = 0,len= result.length;i <len;i++){
        //numArr[i]字符串，js可以强制类型转换(Number()显示类型转换)
        //+ 和 Number()是一样的，+ 一是拼接字符串，二是数值计算，三是类型转换 隐式类型转换 
        result.push(+numArr[i])
    }
    //console.log(numArr);
    return result
}
console.log(flatten(arr))
方法三：ES6语法
var arr = [1,[2,[3,[4,[5,[6]]]]]]

function flatten(arr){
    // ['1','2','3']
    //map
    return arr.toString().split(',').map(function(item){
        //console.log(item);
        return +item
    })
}

console.log(flatten(arr));

  • 首先，使用 toString() 将数组转换为字符串，再用 split(',') 按照逗号分割字符串，得到一个字符串数组。

  • 接着，使用 map() 方法遍历这个字符串数组。对于数组中的每个元素（即每个字符串项）：

  • 通过箭头函数 (item) => +item，对每个字符串元素应用一元加号 + 进行隐式类型转换，将其转换为数字。

  • map() 方法会创建一个新的数组，其中的元素是原数组每个元素转换后的结果。

这三种你想到了吗，如果有新的方法欢迎分享到评论区

好的，这次的内容就分享到这了，如果小友觉得整的还不错的，可以留下一个小小的赞帮助俺找回自己的脑子，谢谢啦！！！

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