面试题：Css的flex布局，数组的常用处理方法，使用Promise.all一次发送多条请求

小张快跑。

已于 2022-03-14 20:15:48 修改

阅读量1k

点赞数 1

分类专栏：狂刷面试题系列文章标签： css css3 面试

于 2022-03-12 21:00:47 首次发布

本文链接：https://blog.csdn.net/io_123io_123/article/details/123450022

版权

狂刷面试题系列专栏收录该内容

12 篇文章 5 订阅

订阅专栏

今天遇到两个外包公司真实的面试题，方向给大家，欢迎大家提出宝贵意见！

一、CSS 自适应布局

已知：

布局分为：父元素A和N个子元素B；

A宽度不固定：最小宽度为1000px，内部边距是32px

B的宽度不固定：相邻两个B元素的间距是16px，所有B的宽度相同，边框为1像素，颜色为#999

每行只能有3个B元素，超过的话需要换行；

最左侧B元素和最右侧的B元素，距离A的边缘都是32px；

HTML
<div class="client-a">
   <div class="client-b"></div>
   <div class="client-b"></div>
   <div class="client-b"></div>
   <div class="client-b"></div>
   <div class="client-b"></div>
   ...
</div>

<style>
</style>

上面就是这道面试题，基本上考的就是了解一下我们对于Flex布局掌握的程度，足以看出Flex布局的重要性！！！下面是实现的代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .a {
            min-width: 1000px;
            padding: 24px;
            border: 1px solid #333;
            display: flex;
            justify-content: space-evenly;
            flex-wrap: wrap;
        }
        .b {
            flex: 1 0 30%;
            box-sizing: border-box;
            margin: 8px;
            border: 1px solid #999;
        }
    </style>
</head>

<body>
    <div class="a">
        <div class="b">B</div>
        <div class="b">B</div>
        <div class="b">B</div>
        <div class="b">B</div>
        <div class="b">B</div>
        <div class="b">B</div>
        <div class="b">B</div>
        <div class="b">B</div>
        <div class="b">B</div>
    </div>
</body>

</html>

二、给定一个以数字组成的数组，实现输出id为数字，并且从小到大排序的name（请使用es6语法）

JavaScript
// 调用示例
const source = [
    { id: 4, name: 'test1' },
    { id: {}, name: 'ssdf' },
    "test",
    { id: () => {}, name: 'sf' },
    { id: '6', name: 'test3' },
    { id: 6, name: 'test4' },
    { id: 7, name: 'test7' },
    { id: 2, name: 'test2' },
    { name: 'sf' }，
    {},
]

function filterSort() {
    // 写下你的代码    
}

filterSort(source)
// 输出结果如下
['test2', 'test1', 'test4', 'test7']

第二个面试题是要求将数组过滤一遍后进行排序，这是面试官在看我们对于数组的掌握程度，这个题涉及到了一些数组的高阶函数和常用API，如果对于这些数组常用API还不清除的话，可以去看我这篇文章，里面基本将我们常用的一些数组相关方法总结清楚了。

const source = [
    { id: 4, name: 'test1' },
    { id: {}, name: 'ssdf' },
    "test",
    { id: () => {}, name: 'sf' },
    { id: '6', name: 'test3' },
    { id: 6, name: 'test4' },
    { id: 7, name: 'test7' },
    { id: 2, name: 'test2' },
    { name: 'sf' }，
    {},
]
function filterSort(arr) {
    var list = arr.filter(value => {
        return (typeof value.id) == (typeof 1)
    })
    list.sort(function(a, b) {
        return a.id - b.id;
    })
    var lists = []
    list.forEach(value => {
        lists.push(value.name)
    })
    console.log(lists)
}
filterSort(source)

三、请求后端接口，按要求获取数据

现有一个 POST 接口：https://xxx.com/students，每次请求只能返回 10 个学生的课程成绩如下
JSON
[
{ name: ‘张三’, score: 99, time: ‘2021-12-22’ },
{ name: ‘李四’, score: 60, time: ‘2021-12-12’ },
{ name: ‘王五’, score: 77, time: ‘2021-11-08’ },
…
]
• 该接口有一定概率请求失败不可忽略：Response Status Code 500，Body 为空
要求：
实现一个函数，总共需获得 100 个成绩大于 90 分，且时间在2021年12月3日之后的学生的课程成绩，并按各自成绩从大到小排列返回。（可直接使用 fetch 或 axios）
提示：
￮浏览器最多可以有 6 个并行的网络请求
￮尽可能在更短的时间内，运行完成得到结果

JavaScript
async function fetchStudents(){
    // 实现相应逻辑
    return [...]
}

我的实现过程：

// 初步用递归实现 每次执行一个接口
let i=0;let list=[]
function rightTime(time){
	// 时间大于12月03日的时间返回true
}
async function fetchStudents(){
    // 实现相应逻辑
    let res = awiat axios.post(url,data:{pageNum:i+1})
    list =list.cancat(...res.data.filter(item=>{
    	return item.score>90&& rightTime(item.time)
    }))
	if(list.length>=100){
		return list
	}else{
		return fetchStudents()
	}
}
// 深入 可以利用浏览器并行6个的限制每次执行6个接口
利用promise.all进行数据保存操作

小张快跑。

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
面试题：Css的flex布局，数组的常用处理方法，使用Promise.all一次发送多条请求

一、CSS 自适应布局二、给定一个以数字组成的数组，实现输出id为数字，并且从小到大排序的name（请使用es6语法）三、现有一个 POST 接口：https://xxx.com/students，每次请求只能返回 10 个学生的课程成绩如下JSON
复制链接

扫一扫