前端面试题合集（一）

news2024/9/21 14:40:47

前端面试题合集

- - 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>