⼀、填空题（25）
1. flex布局如何设置主轴的排列⽅式 justify-content:
2. 使⽤媒体查询，写出屏幕宽度⼤于300的样式 @media screen and (min-width:300px){}
3. JS是单线程还是多线程 单线程
4. 是⽤css设置宽度为100%-200px width:cals(100% - 200px)
5. 如何根据id获取DOM对象 document.getElementById(“id”)
6. 根据下列代码，写出下列程序的打印值 4个5
for (var i = 1; i < 5; i++) {
setTimeout(()=>{
console.log(i);
})
}7. 根据下列代码写出打印值 张三 李四 张三
var name = '张三'
var obj = {
name: "李四",
sayName: () => {
console.log(this.name)
},
}
function sayName2() {
console.log(this.name)
}
obj.sayName2 = sayName2
sayName2()
obj.sayName2()
obj.sayName()8. 获取对象中所有的key值的⽅法 reflect.ownkeys() 9. 修改函数的this指向的三种⽅法 call() apply() bind() 10. promise的三种状态是什么 pending fulfilled rejected 11. 请按照顺序填写下列代码的输出 1, 2, 5, 3
const promise = new Promise((resolve, reject) => {
console.log(1);
resolve(3);
console.log(2);
reject(4)
})
promise.then((res) => {
console.log(res);
}).catch(err=>{
console.log(err);
})
console.log(5); ⼆、简答题（40）
(⼀) 请列出HTML的标签，⾄少10个。（5分）
<html> <head> <meta> <title> <body> <script> <header> <aside> <p> <nav> <div> <footer>
(⼆) 简述块级元素、⾏内元素，⾏内块元素各⾃的特点，以及各 个标签之间如何转换。（5分）
块:
有默认的宽高，宽是父元素的100%，高度是内容所撑起来的高度
宽高可以设置
独占一行
可以容纳任意的元素（h/p元素不能容纳块状元素）
可以设置外边距和内边距的
行:
有默认的宽高，宽高是内容所撑起来的
宽高设置是无用的
相邻的行内元素或者行内块元素在同一行上显示
只可以容纳行内元素与内容
水平方向上的外边距和内边距可以设置，垂直方向设置无用
块转行内：display: inline;
行内转块：display: block;
块、行内元素转换为行内块： display: inline-block;
(三) 前端中常⽤的单位有哪些，分别是如何换算的。（5分）
px: 像素 绝对定位
em: 相对于自身
rem: 相对于根标签
vh: 视图的高度
vw: 视图的宽度
(四) HTTP请求常⻅的状态码有哪些，什么含义，⾄少5个。（5 分）
200: 请求成功
500: 请求失败
404: 请求不到页面
302: 重定向
400: 语法报错
(五) CSS中常⽤的定位有哪些，分别有什么特点。（5分）
static 静态定位 不脱标占位置 不可以偏移
relative 相对定位 不脱标占位置 可以偏移
absolute 决对定位 脱标不占位置 可以偏移
fixed 固定定位 脱标布置位置 可以偏移
(六) 请简述普通函数和箭头函数的区别。（5分）
1.参数只有一个时,可以省略小括号
2.return后面只有一条语句时,可以省略return和{}
3.箭头函数没有arguments内置函数
4.箭头函数不能构造函数
5.箭头函数没有prototype属性
6.call()和apply()能调用箭头函数,但不能改变this指向
7.箭头函数的this指向父作用域(定义它的地方)
(七) 请简述let、const、var的区别（5分）
let var 在全局定义的变量是全局变量,在局部定义的变量是局部变量
let:声明的变量不能提升,不能重复,只在当前作用域有效,会产生暂时性的死区
const:必须赋初始值,是常量,声明的变量不能提升,不能重复,只在当前作用域有效,会产生暂时性的死区
(⼋) 使⽤flex布局实现⽔品+垂直居中，写出容器样式box，⼦集样式名为item（5分）
.box{
display:flex;
width:600px;
height:600px;
border:1px solid blue;
justify-content:center;
align-items:center;
}
.item{
width:200px;
height:200px;
background-color:red;
}
三、编程题（35）
(⼀) 给定指定数组list[33,2,18,3,7,5,6,19,2,5,36,24,77]。
1.选择合适的数组api，获取到数组中所有的偶数，并将这些偶数除以2打印.（5分）
console.log(list.foreach((item)=>{
if(item%2==0){
return item/2
}
}))2.对数组进⾏冒泡排序，实现从⼤到⼩排序。（5分）
console.log(list.sort((a,b)=>{
return b-a
}))3.选择合适的数组api，对数据进⾏求和。（5分）
console.log(list.reduce((total,item)=>{
return total+item
},0))(⼆) 现有给定的所有的⻆⾊数组为roleList，⽤户已选择的⻆⾊数组为selectedRoleList
const roleList = [{
id: 1,
name: '⽼板'
}, {
id: 2,
name: '经理'
}, {
id: 3,
name: '运营总监'
}, {
id: 4,
name: 'CEO'
}, {
id: 5,
name: '销售'
}, {
id: 6,
name: '实施'
}, {
id: 7,
name: '程序员'
}, {
id: 8,
name: 'UI⼯程师'
}, {
id: 9,
name: '产品经理'
}];
// ⽤户已选择的数组
const selectedRoleList = [{
id: 2,
name: '经理'
}, {
id: 3,
name: '运营总监'
}, {
id: 6,
name: '实施'
}, {
id: 7,
name: '程序员'
}, {
id: 9,
name: '产品经理'
}]; 1.使⽤合适的数组api，获取已经选择数组的id列表（列表的每⼀项只有 id），即[2,3,6,7,9]。（5分）
console.log(selectedRoleList.map(item => item.id));2.使⽤合适的数组api，获取所有未选中的⽤户列表。（5分）
console.log(roleList.filter(item => !selectedRoleList.some(selectedItem => selectedItem.id == item.id)));(三) 基于以下数据
const list = [
{id:3,name:"张三丰"},
{id:5,name:"张⽆忌"},
{id:13,name:"杨逍"},
{id:33,name:"殷天正"},
{id:12,name:"赵敏"},
{id:97,name:"周芷若"},
1.实现找到所有姓杨的⼈；（5分）
console.log(list.filter((item)=>{
return item.name.startsWith(“杨”)
}))2.找到所有包含天这个字的⼈；（5分）
console.log(list.filter((item)=>{
return item.name.includes(“天”)
}))
扫一扫
4849
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
