03每周测试

# 每周测试

# 1、使用正则匹配HH: mm(24小时制)

var str ="22:00";
var reg =/^[0-1][0-9]|[2][0-3]:[0-5][0-9]$/
console.log(reg.test(str));//true

1
2
3

# 2、使用正则匹配yyyy - mm - dd

var reg = /^[0-9]{4}-(0[1-9]|1[0-2])-(0[1-9]|[12][0-9]|3[01])$/;
console.log(reg.test("2021-12-22"));//true

1
2

# 3、下列字符串中，出现次数最多的字母是哪个？

以及出现次数。var str = "sjdklfjslwersdlfjsklf"

var str = "sjdklfjslwersdlfjsklf";
var obj = {};
var arr = str.split("");
arr.forEach((item) => {
    if (obj[item]) {
        obj[item]++;
    } else {
        obj[item] = 1;
    }
});
console.log(obj);
var arr2 = [];
for (key in obj) {
    arr2.push(obj[key]);
}
var max = Math.max(...arr2);
for (key in obj) {
    if (obj[key] === max) {
        console.log("出现最多的字母是" + key + "出现次数是" + obj[key]);
    }
}
//出现最多的字母是s出现次数是4 和 出现最多的字母是l出现次数是4

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# 4、什么是事件委托？有什么作用？

//减少代码执行优化资源,在目标集合元素的父级元素添加事件，
//点击目标集合元素时，因为事件冒泡的作用实现事件委托

1
2

# 5、计算出以下数组的差集。

let arr = [1, 2, 3, 4, 5] arr2 = [2, 4, 6, 8]

var arr = [1, 2, 3, 4, 5]
var arr2 = [2, 4, 6, 8]
var newArr = arr.filter(function (item) {
    return arr2.indexOf(item) === -1;
})
console.log(newArr);//[1, 3, 5]

1
2
3
4
5
6

# 6、计算出

1 + 2 + 3 + 4 +....+100=5050

var sum=0;
for(var i=1; i<=100;i++){
    sum +=i;
}
console.log(sum);

1
2
3
4
5

# 7、事件传播有哪几个阶段？

1、事件冒泡 触发的元素往父级元素传播
2、事件派发发阶段   传递过程
3、事件捕获 父级元素传播到触发的子级元素上（低版本ie）

1
2
3

# 8、json字符串和json对象如何转换？

var json = { name: "小白", age: 18 };
var str = JSON.stringify(json);//json转字符串
var j =JSON.parse(str)//字符串转json
console.log(j);

1
2
3
4

# 9、格式化当前日期，yyyy - mm - dd

var str = "2021-12-24";
function fn(str, sign = "-") {
    var arr = str.split("-");
    var year = arr[0];
    var month = arr[1] - 1;
    var date = arr[2];
    console.log(new Date(year, month, date));
}
fn(str)

1
2
3
4
5
6
7
8
9

# 10、currentTarget和target有什么区别？

currentTarget：放定该事件的元素
target：触发了事件的元素

1
2

# 11、请写出web浏览器缓存机制有哪几种？分别有什么区别

cookie;
    1、最早，兼容性最好
    2、不能直接在谷歌浏览器下操作，只能使用其他浏览器或者在服务器环境操控
    3、存储数据大小（4kb，谷歌浏览器）
    4、存储条数（20条，谷歌浏览器）
    5、操作繁琐（相对于另外两个）
    6、默认关闭浏览器就会消失，如果想要保存需要设置过期时间

localStorage; 本地持久级存储
    1、h5新特性，不能兼容低版本浏览器
    2、默认情况下，永久存储
    3、存储的数据会变成字符串
    4、存储数据大小（5mb，谷歌浏览器）
    5、存储条数（存储条数不限制）
    6、操作相对简单（相对于cookie）

sessionStorage; 本地会话级存储
    1、所有特性都与localStorage一样，只有存储时间不同，sessionStorage默认关闭浏览器就消失

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# 12、计算出以下数组的补集。

let arr = [1,2,3,4,5] arr2 = [2,4,6,8]

var arr = [1, 2, 3, 4, 5];
var arr2 = [2, 4, 6, 8];
var newArr = arr.filter(function (item) {
    return arr2.indexOf(item) === -1;
});
var newArr2 = arr2.filter(function (item) {
    return arr.indexOf(item) === -1;
});
console.log(newArr.concat(newArr2)); //[1, 3, 5, 6, 8]

1
2
3
4
5
6
7
8
9

# 13、使用setTimeout实现10至1的打印，每次减1，到1的时候停止打印

var i = 10;
function fn() {
    setTimeout(() => {
        console.log(i--);
        if (i > 0) {
            fn();
        }
    }, 1000);
}
fn();

1
2
3
4
5
6
7
8
9
10

# 14、边距塌陷如何解决

在父级元素添加 overflow: hidden;

# 15、如何阻止事件的默认行为

e.preventDefault();

编辑

上次更新: 2023/08/06, 00:38:41

← 02每周测试 04每周测试→