前端面试题合集(一)

news2024/11/28 20:39:02

前端面试题合集

      • 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函数中需要注意一下几点:

  1. concat不会改变原数组,而是新建一个数组
  2. 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>

效果如下:
首先显示内容:
在这里插入图片描述
点击一下会隐藏内容:
在这里插入图片描述

再次点击会再次进行显示:
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/987300.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

埋头干活不会汇报,别说 996 就算 007 也没用!

​ 见字如面&#xff0c;我是军哥&#xff01; 经调研发现 80% 的程序员认为工作汇报就是形式主义&#xff0c;无聊至极&#xff0c;但是我要和你说&#xff0c;做好工作汇报非常重要&#xff0c;这直接关系到你在这家公司能否快速成长和晋升加薪&#xff0c;而且要告诉你一件扎…

vue3:18、Pinia持久化(pinia-plugin-persistedstate)

安装插件 npm i pinia-plugin-persistedstate main.js中引入 import { createApp } from vue import { createPinia } from pinia import App from ./App.vue import piniaPluginPersistedstate from pinia-plugin-persistedstate // createApp(App).use(CreatePinia()).mou…

Day58|leetcode 739. 每日温度、496.下一个更大元素 I

今天开始单调栈&#xff01; leetcode 739. 每日温度 题目链接&#xff1a;739. 每日温度 - 力扣&#xff08;LeetCode&#xff09; 视频链接&#xff1a;单调栈&#xff0c;你该了解的&#xff0c;这里都讲了&#xff01;LeetCode:739.每日温度_哔哩哔哩_bilibili 题目概述 …

Unity——脚本与导航系统

Unity内置了一个比较完善的导航系统&#xff0c;一般称为Nav Mesh&#xff08;导航网格&#xff09;&#xff0c;用它可以满足大多数游戏中角色自动导航的需求。 一、导航系统相关组件 Unity的导航系统由以下几个部分组成&#xff1a; Nav Mesh。Nav Mesh与具体的场景关联&…

【postgresql 基础入门】数据库服务的管理,启动、停止、状态查看、配置加载、重启都在这里

数据库服务管理 ​专栏内容&#xff1a; postgresql内核源码分析手写数据库toadb并发编程 ​开源贡献&#xff1a; toadb开源库 个人主页&#xff1a;我的主页 管理社区&#xff1a;开源数据库 座右铭&#xff1a;天行健&#xff0c;君子以自强不息&#xff1b;地势坤&#xff…

【精读Uboot】反汇编分析SPL的_main函数

1、简介 典型的Uboot启动分为两个阶段&#xff0c;bootrom->SPL&#xff08;Secondary Program Loader&#xff09;->ATF->OPTEE(可选)->Uboot。其中SPL为BL2&#xff0c;ATF为BL31&#xff0c;OPTEE为BL32&#xff0c;Uboot为BL33。其中bootrom是固化在芯片内部的…

MySQL 8.0.34(x64)安装笔记

一、背景 从MySQL 5.6到5.7&#xff0c;再到8.0&#xff0c;版本的跳跃不可谓不大。安装、配置的差别也不可谓不大&#xff0c;特此备忘。 二、过程 &#xff08;1&#xff09;获取MySQL 8.0社区版&#xff08;MySQL Community Server&#xff09;   从 官网 字样 “MySQL …

3D印刷电路板在线渲染查看工具

从概念上讲&#xff0c;这是有道理的&#xff0c;因为PCB印制电路板上的走线从一个连接到下一个连接的路线基本上是平面的。 然而&#xff0c;我们生活在一个 3 维世界中&#xff0c;能够以这种方式可视化电路以及相应的组件&#xff0c;对于设计过程很有帮助。本文将介绍KiCad…

VsCode Ctrl+.修复无效

vscode 快速修复(quick fix) 快捷键(Ctrl .)被占用问题解决方法_vscode快速修复快捷键_追求者2016的博客-CSDN博客

Android 系统源码目录frameworks/base/packages和packages/apps下的APP区别

概要 在 Android Open Source Project (AOSP) 源代码中&#xff0c;frameworks/base/packages 和 packages/apps 目录都包含 Android 系统中的应用程序&#xff0c;但它们在性质和用途上有一些区别&#xff1a; 1&#xff0c;frameworks/base/packages frameworks/base 目录…

OMRON G9SP和NB触摸屏使用232口通讯

G9SP和NB触摸屏使用232口通讯 实验时间&#xff1a;2023/9/7 实验设备&#xff1a;G9SP-N20S、CP1W-CIF01&#xff08;232串口选减板&#xff09;、NB5Q-TW00B、XW2Z-200T&#xff08;串口线&#xff09;&#xff0c;CP1W-20EDT1&#xff0c;D4GS-N4T&#xff08;安全门开关&a…

alibaba国际版阿里巴巴API接入说明(阿里巴巴商品详情+关键词搜索商品列表)

API地址:https://o0b.cn/anzexi 调用示例&#xff1a;https://api-gw.onebound.cn/alibaba/item_get/?keytest_api_key& &num_iid60840463360&&langzh-CN&secret 参数说明 通用参数说明 url说明 https://api-gw.onebound.cn/平台/API类型/ 平台&#xf…

Golang 方法使用的注意事项和细节

方法的声明(定义) furie (recevier type) methodName (参数列表) (返回值列表){方法体return返回值 } 1)参数列表&#xff1a;表示方法输入 2) recevier type:表示这个方法和type这个类型进行绑定&#xff0c;或者说该方法作用于type类型 3) receiver type:type可以是结构体…

mysql 安全加固

PS&#xff1a;之前在做安全测试的时候&#xff0c;报告mysql有安全漏洞&#xff0c;于是研究了下如何修复&#xff0c;于是记录下来分享给大家 1.1修改mysql 存放位置 修复 1.停服务 service mysqld stop2.迁位置 2.1 新建迁移目录 mkdir /home/database2.2 迁移数据文件…

深入探索KVM虚拟化技术:全面掌握虚拟机的创建与管理

文章目录 安装KVM开启cpu虚拟化安装KVM检查环境是否正常 KVM图形化创建虚拟机上传ISO创建虚拟机加载镜像配置内存添加磁盘能否手工指定存储路径呢&#xff1f;创建成功安装完成查看虚拟机 KVM命令行创建虚拟机创建磁盘通过命令行创建虚拟机手动安装虚拟机 KVM命令行创建虚拟机-…

如何基于国标GB28181视频平台EasyGBS国标云服务平台建设智慧环保在线监测系统

EasyGBS平台可提供流媒体接入、处理、转发等服务&#xff0c;支持内网、公网的安防视频监控设备通过国标GB/T28181协议进行视频监控直播。基于视频图像的环保监督管理智能监控系统&#xff0c;结合了计算机技术、AI、云计算、网络传输技术和网络存储技术等先进技术&#xff0c;…

CloudQuery X PolarDB:让数据库管理更简单

前言&#xff1a;8 月 15 日&#xff0c;CloudQuery 数据操作管控平台与阿里云 PolarDB 数据库管理软件&#xff0c;完成产品集成认证测试。也在以下功能上完善了用户使用 PolarDB 的体验&#xff0c;使数据库的管理更加安全高效。 支持在 CloudQuery 中创建连接&#xff0c;便…

如何学习python?比较通义千问、文心一言、ChatGPT给的答案,你就知道啦

通义千问 通义千问是阿里巴巴达摩院自主研发的超大规模语言模型&#xff0c;能够回答问题、创作文字&#xff0c;还能表达观点、撰写代码。通义千问的能力覆盖自然语言处理的多个领域&#xff0c;包括语言理解、文本生成、代码写作等。通义千问在多项性能指标上达到了业界领先水…

springcloudSeata处理分布式事务之1.7.0

1.5.0之后版本发生了很大改变 1.seata安装 1.1官网地址 http://seata.io/zh-cn/ 1.2下载地址 https://github.com/seata/seata/releases 下载的是seata-server-1.7.0.zip 1.3seata相关配置的修改 seata-server-1.7.0\seata\conf下的application.yml进行修改 server:por…

香港服务器怎么解除被封ip?

​  解除被封IP的方法因具体情况而异&#xff0c;需要根据实际情况选择合适的解决方案。本文关于香港服务器被封IP的常见解除方法有以下步骤。 第一步&#xff1a;服务器检查 用户需要立即启动服务器进行检查。或提前申请免费试用。如果IP地址被屏蔽&#xff0c;请联系客户服…