一份试题解析

Best_卡卡

已于 2022-01-27 01:45:13 修改

阅读量2.6k

点赞数

分类专栏： js 文章标签： javascript 前端

于 2022-01-27 01:42:52 首次发布

本文链接：https://blog.csdn.net/weixin_43909743/article/details/122711005

版权

js 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

一、CSS 自适应搜索框
要求右侧 button 固定宽度 80px，左侧 input 随页面宽度变化始终占满剩余空间
请尝试用不同的 CSS 布局方案，尽量多写出几种实现

二、读代码写执行结果
以下是一个页面的代码，请写出用户点击了

后控制台的输出结果

<body>
  <div id="i"/>
</body>

<script>
document.body.addEventListener("mousedown", () => {
  console.log("key1")
}, true)

document.getElementById("i").addEventListener("mousedown", () => {
  console.log("key2")
}, true)

document.body.addEventListener("mousedown", () => {
  console.log("key3")
}, false)

document.getElementById("i").addEventListener("mousedown", () => {
  console.log("key4")
}, false)
</script>

三、请求后端接口，按要求获取数据
• 现有一个 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 [...]
}

四、笔试题
实现一个函数，给任意长度版本号排序

JavaScript
// 实现一个函数，能够对任意长度的版本号字符串进行从小到大的排序；
// 注：版本号字符串仅包含 数字 和 "." 分隔符

/* 例:
输入:
['1.1', '2.3.3', '4.3.5', '0.3.1', '0.302.1', '4.20.0', '4.3.5.1', '1.2.3.4.5'];

输出:
['0.3.1', '0.302.1', '1.1', '1.2.3.4.5', '2.3.3', '4.3.5', '4.3.5.1', '4.20.0']

*/

function sortVersion(versions){
 // code here
 
}

我的解答

1、第一题CSS 自适应搜索框
// 方式一：
div{display: flex;}
button{width:80px}
input{flex: 1;}
// 方式二：
div{
  border: 1px solid red;
  display: grid;
  grid-template-columns: auto 80px;
}

2、
读代码写执行结果
  key1 ， key3
 原因： true 事件捕获执行 false 默认冒泡执行；
 div不占空间点击不到
如果div有值并且点击div 是key1 key2 key4 key3

3、
// 初步用递归实现 每次执行一个接口
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进行数据保存操作

4、

sort()实现对字符的Unicode比较，
需注意
其次为什么不能用a-b进行判断？原因是会被类型转换
.的 Unicode 值为 46
0的 Unicode 值为 48

function sortVersion(versions){
 versions.sort((a, b) => {
    let i = 0;
    const arr1 = a.split('.');
    const arr2 = b.split('.');
    while (true) {
        const s1 = arr1[i];
        const s2 = arr2[i++];
        if (s1 === undefined || s2 === undefined) {
            return arr2.length - arr1.length;
        }

        if (s1 === s2) continue;

        return s2 > s1 ? -1 : 1;
    }
});

}

Best_卡卡

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
一份试题解析

一、CSS 自适应搜索框要求右侧 button 固定宽度 80px，左侧 input 随页面宽度变化始终占满剩余空间请尝试用不同的 CSS 布局方案，尽量多写出几种实现二、读代码写执行结果以下是一个页面的代码，请写出用户点击了后控制台的输出结果<body> <div id="i"/></body><script>document.body.addEventListener("mousedown", () => { consol
复制链接

扫一扫