一、CSS 自适应布局
已知：
• 布局分为：父元素A和N个子元素B；
• A宽度不固定：最小宽度为1000px，内部边距是32px
• B的宽度不固定：相邻两个B元素的间距是16px，所有B的宽度相同，边框为1像素，颜色为999
• 每行只能有3个B元素，超过的话需要换行；
• 最左侧B元素和最右侧的B元素，距离A的边缘都是32px； `
.client-a {
min-width: 1000px;
padding: 32px;
display: flex;
justify-content: space-between;
flex-wrap: wrap; }
.client-b {
width: 32%;
padding: 16px;
border: 1px #999;
margin: 0 32px 0 32px; }
二、给定一个以数字组成的数组，实现输出id为数字，并且从小到大排序的name（请使用es6语法）
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(source) {
// 写下你的代码
}
filterSort(source)
答案：
const arr = []
source.map((item, index) => {
if (typeof (item.id) == "number") {
arr.push(item)
function compare(p) { //这是比较函数
return function (m, n) {
var a = m[p];
var b = n[p];
return a - b; //升序
}
}
arr.sort(compare("id"));
const arr1 = []
arr.map(item => {
arr1.push(item.name)
})
console.log(arr1);
return arr1
}
}) `
二、给定一个以数字组成的数组，实现输出id为数字，并且从小到大排序的name（请使用es6语法） • 现有一个 POST 接口：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进行数据保存操作
