前端面试题合集（一）
前端面试题合集
-
-
- 1.js异步方案
- 2.文件上传如何限制文件类型
- 3. 说出== 与===的区别
- 4.多维数组如何降维
- 5.如何给一个按钮绑定两个onclick事件
-
1.js异步方案
js异步方法分为两种，分别为defer和async,如果没有写其中一种的话代码从上到下同步执行，遇到脚本代码之后会先去执行脚本再回来执行文档中的代码。
- defer为延迟执行，在js脚本在加载时，HTML并没有停止解析，两个是并行的。直到整个document解析完毕之后才会执行js脚本代码，并且多个脚本是按照顺序进行执行。
- async为异步执行，区别是当脚本加载完毕之后就会立即执行，也就是说js的执行任然会堵塞文档解析，并且多个脚本不是按照顺序执行的。
2.文件上传如何限制文件类型
文件上传时可添加accept属性来限制文件类型，限制上传类型分为.doc文件类型和.docx文件类型。
- doc限制：accept=“application/msword”
- docx限制：application/vnd.openxmlformats-officedocument.wordprocessingml.document
3. 说出== 与===的区别
==是宽松数值比较，先将变量进行转换之后再进行比较
===是直接比较等号两边 的值和类型是否相等
4.多维数组如何降维
1.Array.protoType.flat();
const multArray = [[1,2,3],[4,5,6],[7,8,9]];
const flatArray = multArray.flat();
console.log(flatArray);
2.使用扩展运算符
const multArray1 = [[1,2,3],[4,5,6],[7,8,9],10];
const flatArray1 = [].concat(...multArray1);
console.log(flatArray1);
3.使用递归函数
const res = [];
const flatArray2 = (arr) => {
arr.forEach(element => {
Array.isArray(element) ? flatArray2(element) : res.push(element);
});
}
const multArray2 = [[1,2,3],[4,5,6],[7,8,9]];
flatArray2(multArray2)
console.log(res);
4.将多维转化为字符串，再转化为一维数组–String类型
let multArray3 = [[1,2,3],[4,5,6],[7,8,9]];
console.log(multArray3.join(',').split(','));
5.concat函数
let ans = [];
let multArray4 = [[1,2,3],[4,5,6],[7,8,9]];
multArray4.forEach((item) => {
if(item.constructor == Array) {
ans = ans.concat(item);
}else ans.push(item);
})
console.log(res);
在concat函数中需要注意一下几点：
- concat不会改变原数组，而是新建一个数组
- concat不会合并多层数组，只会合并最外层的
详细内容可以参考：JS concat()用法
5.如何给一个按钮绑定两个onclick事件
使用addEventListener实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>一个按钮绑定两个事件</title>
</head>
<body>
<button class="btn">点我切换/隐藏</button>
<p id ="show1">我们出来咯，哈哈哈哈哈哈哈哈哈</p>
<p id ="show2">我们出来咯，哈哈哈哈哈哈哈哈哈</p>
<p id ="show3">我们出来咯，哈哈哈哈哈哈哈哈哈</p>
<script>
const btn = document.querySelector('.btn');
const ps = document.querySelectorAll('[id^="show"]');
btn.addEventListener('click', function() {
for(let i = 0 ; i < ps.length; i++) {
if(ps[i].style.display == 'none') {
ps[i].style.display = 'block';
}else {
ps[i].style.display = 'none';
}
}
})
</script>
</body>
</html>
效果如下：
首先显示内容：
点击一下会隐藏内容：
再次点击会再次进行显示：
