前端面试题

一、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>
.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;    }
</style>

二、给定一个以数字组成的数组，实现输出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)
        })
        list.sort(function (a, b) {
            return a.id - b.id;
        })
        var lists = []
        list.forEach(value => {
            lists.push(value.name)
        })
        return lists
    }
    console.log(filterSort(source));

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

现有一个 POST 接口：https://xxx.com/students，每次请求只能返回 10 个学生的课程成绩 如下

该接口有一定概率请求失败 不可忽略：Response Status Code 500，Body 为空

要求：

实现一个函数，总共需获得 100 个成绩大于 90 分，且时间在2021年12月3日之后的学生的课程成绩，并按各自成绩从大到小排列返回。（可直接使用 fetch 或 axios）

提示：

• 浏览器最多可以有 6 个并行的网络请求

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

• 尽可能用最少的请求次数

async function fetchStudents(){

    // 实现相应逻辑
const source = axios.CancelToken.source();
const query = function query() {
    return axios.post('https://xxx.com/students', null, { cancelToken: source.token })
        .then(response => response.data);
};
const fetchStudents = function fetchStudents() {
    return new Promise(resolve => {
        // 创建6个工作区同时进行
        let works = new Array(6).fill(null),
            values = [],
            flag = false;
        works.forEach(() => {
            // 每个工作区都是获取学生信息；当此任务执行完（不论成功还是失败），继续去获取学生信息..
            const next = async () => {
                if (flag) return;
                // 当values存储的结果够100个后，就无需再发请求(取消正在发送的请求)
                if (values.length >= 100) {
                    resolve(values.slice(0, 100));
                    source.cancel();
                    flag = true;
                    return;
                }
                try {
                    let value = await query();
                    value = value.filter(item => {
                        return item.score >= 90 && (new Date(item.time) - new Date('2021-12-03')) > 0;
                    });
                    values = values.concat(value);
                } catch (_) { }
                next();
            };
            next();
        });
    });
};

}

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

 对象转url格式

    // http://www.baidu.com/?a=1&name=join
    function fn(obj) {
        const params = []
        //  Object.keys() 遍历对象的属性名返回一个数组
        Object.keys(obj).forEach(key => {
            let val = obj[key]//取出属性值
            params.push([key, val].join('=')) //用等号拼接  
        })
        return params.join("&")//用&分割
    }
    let = obj = {
        a: 1,
        name: 'join'
    }
    console.log(fn(obj));