2022年前端web 面试题（笔试真题）(5)

笔试题

一，自适应布局

已知：

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

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

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

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

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

.client-a{

            min-width: 1000px;

            padding: 24px;

            display: flex;

            border: 1px solid #333;

            flex-wrap: wrap;

            justify-content: space-evenly;

        }

        .client-b{

            flex: 1 0 30%;

            box-sizing: border-box;
           

            margin:8px;

            border: 1px solid #999;

           

        }

第二题

给定一个以数字组成的数组，实现输出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(arr) {
    var list = arr.filter(value => {
        return (typeof value.id) == (typeof 1)
    })
    console.log(list);
    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 个并行的网络请求

尽可能在更短的时间内，运行完成得到结果

尽可能用最少的请求次数

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()
	}
}

2022年 前端web 面试题（笔试真题）(5)

一，自适应布局

猜你喜欢

2022年前端web 面试题（笔试真题）(5)