前端笔试题1

HTML/CSS

题1: 

1.使用CSS 让该节点不可见,方法越多越好。
<div class="hidden"'>Hi</div>

使用CSS 让节点不可见的方法有以下几种:

  • 把 visibility 属性设置为 hidden,这样元素框不会被绘制,但仍然占据布局空间https://developer.mozilla.org/zh-CN/docs/Web/CSS/visibility
  • 把 display 属性设置为 none,这样元素框不会被显示,也不会占据布局空间https://www.runoob.com/css/css-display-visibility.html
  • opacity 属性设置为 0,这样元素框会变成完全透明,但仍然可以响应事件。

   

 题2:

2.在哪些场景下用过 position 的哪些值,它们分别有什么特性?

你好,这是Bing。😊

根据搜索结果,我发现position属性有以下五个值:

  • static:默认值,元素按照正常的文档流进行排列,不受其他定位属性的影响
  • relative:相对定位,元素相对于自己原来的位置进行偏移,但仍然占据文档流中的位置
  • absolute:绝对定位,元素脱离文档流,相对于最近的非static定位的祖先元素进行定位
  • fixed:固定定位,元素脱离文档流,相对于浏览器窗口进行定位,不随滚动条移动31。
  • sticky:粘性定位,元素在滚动时切换为固定定位,相对于最近的滚动祖先和包含块进行定位

 

JavaScript

题3:

3. 什么是单线程?什么是单线程昇步?

单线程和单线程异步的区别是:

  • 单线程是指一个程序或一个进程只能同时执行一个任务,不能同时处理多个任务。
  • 单线程异步是指单线程程序在遇到耗时的操作(如网络请求,定时任务等)时,不会等待其完成,而是继续执行后续的代码,当耗时的操作完成后,再通过回调函数或事件通知单线程程序进行处理。

单线程异步的优点是可以提高程序的效率和响应速度,避免阻塞代码的执行。单线程异步的缺点是代码的逻辑和顺序会变得复杂,需要注意回调地狱和错误处理等问题。

 题4:

	// 4. The output of the following program isvar fn =[]for (var i = 0; i < 10; i++) {fn[i] = function (param){console.log(i + param)}}fn [5](5)var data = {a: 10, b: 20}console.log('第'+i+'条数据:'+data)

这段代码的输出是:

15
第10条数据:[object Object]

这是因为var声明的变量会发生变量提升(hoisting),而且没有块级作用域(block scope),所以i的值在循环结束后是10,而不是5。所以,当调用fn[5](5)时,打印出的是i + param,即10 + 5 = 15。然后,打印出'第'+i+'条数据:'+data,即’第10条数据:’ + ‘[object Object]’。如果想要打印出5 + 5 = 10,可以使用let声明变量,它会创建块级作用域,每次循环都会创建一个新的变量。

题5:

	// 5. The output of the following program isconsole.log(1)setTimeout(() => {console.log(2)}, 0)console.log(3)new Promise((resolve, reject) => {console.log(4)resolve()}).then(() => {console.log(5)}, () => {console.log(6)})console.log(7)

这段代码的输出是:

1
3
4
7
5
2

这是因为JavaScript是单线程的,它会先执行同步代码,然后再执行异步代码。异步代码又分为微任务(microtask)和宏任务(macrotask),微任务的优先级高于宏任务。setTimeout是一个宏任务,Promise.then是一个微任务。所以,同步代码会按照顺序打印出1、3、4、7,然后微任务队列中的Promise.then会打印出5,最后宏任务队列中的setTimeout会打印出2。

 题6:

// 5. The output of the following program isconst a=[1,1,1,1,1]for (let i = 0; i< 5; i++) {for (let j = 0; j < i; j++) {a[i] = a[i]+ a[j]}}for (let i = 0; i < 5; i++){console.log(a[i])}

 这段代码的输出是:

1
2
4
8
16

这是因为这段代码实现了一个斐波那契数列(Fibonacci sequence),它的规律是每一项都等于前两项之和。所以,a[1] = a[0] + a[0] = 1 + 1 = 2,a[2] = a[1] + a[0] = 2 + 1 = 4,以此类推。

 题7:

// 7.写出①所在的 while循坏的作用;补全②的代码。// isSymmetry 用来判断正整数n是否是一个对称数,例:12321是对称数,而123不是function isSymmetry (n) {let i=n let j=0// ①while (i) {j=j*10+i%10i=parseint(i/10)// return ②console.log(isSymmetry (12321)) // true console.log(isSymmetry (1231)) // false

这段代码的①所在的while循环的作用是将n的每一位反转,得到一个新的数j。例如,如果n是12321,那么j就是12321;如果n是1231,那么j就是1321。

补全②的代码的一种可能方法是:

return j === n

这样就可以判断j和n是否相等,如果相等,说明n是一个对称数,返回true;如果不相等,说明n不是一个对称数,返回false。

 题8:

// 8. 把数组倒序輸出(不是排序)(不能用内置方法)const arr = ['name', 'first', '5', 7, 4, '2', 9]

一种把数组倒序输出的方法是:

const arr = ['name', 'first', '5', 7, 4, '2', 9]
let len = arr.length // 获取数组长度
for (let i = len - 1; i >= 0; i--) { // 从后往前遍历数组console.log(arr[i]) // 输出每一项
}

这样就可以得到以下输出:

9
2
4
7
5
first
name
``

题9:

// 9(过一面必做题)数组中的重复项最多出现N次。(时间复杂度越低得分越高)原题9.1:outputNth([1, 1, 1, 11], 2) // return[1,1])(按原数组出现的先后返回,合并到一起)outputNth([20,37,20,20, 21],2)//return [20,20,37,21](按原数组出现的先后返回,合并到一起)原题9.2:如果要求outputNth([20,37,20,20,21],2)//return [20,37,20,21]呢?(按原数组出现的先后返回)题9.1: function outputNth (array.n){题9.2:function outputNth (array, n){}请预估自己的时间复杂度:}请预估自己的时间复杂度:

这两道题都可以用一个哈希表(hash table)来记录每个元素出现的次数,然后遍历数组,根据不同的要求输出结果。具体的代码如下:

题9.1:

function outputNth(array, n) {let hash = {} // 创建一个空的哈希表let result = [] // 创建一个空的结果数组for (let num of array) { // 遍历数组中的每个元素if (hash[num]) { // 如果哈希表中已经有这个元素hash[num]++ // 将其出现次数加一} else { // 如果哈希表中没有这个元素hash[num] = 1 // 将其出现次数设为一}if (hash[num] <= n) { // 如果这个元素出现次数小于等于nresult.push(num) // 将其加入结果数组}}return result // 返回结果数组
}

题9.2:

function outputNth(array, n) {let hash = {} // 创建一个空的哈希表let result = [] // 创建一个空的结果数组for (let num of array) { // 遍历数组中的每个元素if (hash[num]) { // 如果哈希表中已经有这个元素hash[num]++ // 将其出现次数加一} else { // 如果哈希表中没有这个元素hash[num] = 1 // 将其出现次数设为一}if (hash[num] === n) { // 如果这个元素出现次数等于nresult.push(num) // 将其加入结果数组} else if (hash[num] < n) { // 如果这个元素出现次数小于nresult.push(num) // 将其加入结果数组result.push(null) // 同时在后面加入一个空值,用来占位,方便后面删除多余的元素}}return result.filter(item => item !== null) // 返回结果数组,并过滤掉空值
}

这两道题的时间复杂度都是O(n),因为只需要遍历一次数组,哈希表的查找和插入操作都是常数时间。

题10: 

 

 

可以参考一下:

// 定义一个栈类
class Stack {// 构造函数,初始化一个空数组作为栈constructor() {this.items = []}// 入栈操作,将元素添加到栈顶push(element) {this.items.push(element)}// 出栈操作,将栈顶元素移除并返回pop() {return this.items.pop()}// 查看栈顶元素,不改变栈peek() {return this.items[this.items.length - 1]}// 判断栈是否为空isEmpty() {return this.items.length === 0}// 获取栈的大小size() {return this.items.length}// 清空栈clear() {this.items = []}// 打印栈中的元素print() {console.log(this.items.toString())}
}// 创建一个栈对象
let stack = new Stack()// 测试入栈操作
stack.push(5)
stack.push(8)
stack.push(11)
stack.push(15)// 测试打印操作
stack.print() // 输出 [5,8,11,15]// 测试出栈操作
console.log(stack.pop()) // 输出 15
console.log(stack.pop()) // 输出 11// 测试查看操作
console.log(stack.peek()) // 输出 8// 测试其他操作
console.log(stack.isEmpty()) // 输出 false
console.log(stack.size()) // 输出 2// 测试清空操作
stack.clear()
console.log(stack.isEmpty()) // 输出 true

这就是完整的代码,你可以运行一下看看效果。希望这能帮助你理解栈这种数据结构。😊

 

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

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

相关文章

CTFSHOW php命令执行

目录 web29 过滤flag web30 过滤system php web31 过滤 cat|sort|shell|\. 这里有一个新姿势 可以学习一下 web32 过滤 &#xff1b; . web33 web34 web35 web36 web37 data伪协议 web38 短开表达式 web39 web40 __FILE__命令的扩展 web41 web42 重定向…

SpringBoot自定义拦截器interceptor使用详解

Spring Boot拦截器Intercepter详解 Intercepter是由Spring提供的Intercepter拦截器&#xff0c;主要应用在日志记录、权限校验等安全管理方便。 使用过程 1.创建自定义拦截器&#xff0c;实现HandlerInterceptor接口,并按照要求重写指定方法 HandlerInterceptor接口源码&am…

[深度学习入门]PyTorch深度学习[Numpy基础](上)

目录 一、前言二、Numpy概述三、生成Numpy数组3.1 从已有数据中创建数组3.2 利用random模块生成数组3.3 创建特定形状的多维数组3.4 利用arange和linspace函数生成数组 四、获取元素五、Numpy的算术运算5.1 对应元素相乘5.2 点积运算 六、后记 本文的目标受众&#xff1a; 对机…

C++进阶 智能指针

本篇博客简介&#xff1a;介绍C中的智能指针 智能指针 为什么会存在智能指针内存泄露内存泄漏定义内存泄漏的危害如何检测内存泄漏如何避免内存泄漏 智能指针的使用及其原理RAII设计一个智能指针C官方的智能指针 定制删除器智能指针总结 为什么会存在智能指针 我们首先来看下面…

Spring5 AOP 默认使用 JDK

这是博主在使用dubbo实现远程过程调用的时候遇到的问题&#xff1a; 我们如果在服务提供者类上加入Transactional事务控制注解后&#xff0c;服务就发布不成功了。原因是事务控制的底层原理是为服务提供者类创建代理对象&#xff0c;而默认情况下Spring是基于JDK动态代理方式创…

SpringBoot 整合Swagger2

一、Swagger简介 Swagger是一套开源工具和规范&#xff0c;用于设计、构建和文档化RESTful Web服务。它允许开发人员定义API的各个方面&#xff0c;并生成易于理解的API文档和交互式API探索界面。同时&#xff0c;Swagger还提供代码生成工具&#xff0c;可自动生成与API交互的客…

MySQL和钉钉单据接口对接

MySQL和钉钉单据接口对接 数据源系统:钉钉 钉钉&#xff08;DingTalk&#xff09;是阿里巴巴集团打造的企业级智能移动办公平台&#xff0c;是数字经济时代的企业组织协同办公和应用开发平台。钉钉将IM即时沟通、钉钉文档、钉闪会、钉盘、Teambition、OA审批、智能人事、钉工牌…

dingding机器人

“自定义机器人”只支持消息发送&#xff0c;自动回复需要“企业内部机器人” 消息发送 import requests import jsonres requests.post(https://oapi.dingtalk.com/robot/send?access_token036a339axxx,data json.dumps({"text": {"content":"h…

医疗保健中的 NLP:实体链接

一、说明 HEalthcare和生命科学行业产生大量数据&#xff0c;这些数据是由合规性和监管要求&#xff0c;记录保存&#xff0c;研究论文等驱动的。但随着数据量的增加&#xff0c;搜索用于研究目的的必要文件和文章以及数据结构成为一个更加复杂和耗时的过程。例如&#xff0c;如…

消息队列(11) - 通信协议的设计

目录 通信协议设计代码实现 通信协议设计 对于我们客户端与服务器之间的通信协议我们约定如下&#xff1a; 具体的协议设计: 之后我们传递的参数也是这些 关于 type其实是在描述当前这个请求 、 响应是在调用那个API 约定如下 对于channel ,是tcp链接中的一个逻辑上的链接,…

策略模式实战应用

场景 假设做了个卖课网站&#xff0c;会员等级分为月vip、年vip、终生vip&#xff0c;每个等级买课的优惠力度不一样&#xff0c;传统的写法肯定是一堆的 if-else&#xff0c;现在使用策略模式写出代码实现 代码实现 策略模式的核心思想就是对扩展开放&#xff0c;对修改关闭…

应用案例|基于三维机器视觉的机器人纸箱拆码垛应用解决方案

Part.1 项目背景 在现代物流和制造行业中&#xff0c;纸箱的拆码垛操作是一项重要且频繁的任务。传统的纸箱拆码垛工作通常由人工完成&#xff0c;这种方式存在劳动强度大、生产效率低以及人为操作容易导致错误等问题&#xff0c;严重影响物料的安全运输和质量。为了满足物流行…

大模型“瘦身”进手机 下一个iPhone时刻将至?

一股“端侧大模型”浪潮正在涌来。华为、高通等芯片巨头正探索将AI大模型植入端侧&#xff0c;让手机实现新一代物种进化。 相比ChatGPT、Midjourney等AI应用依赖云端服务器提供服务&#xff0c;端侧大模型主打在本地实现智能化。它的优势在于能够更好地保护隐私&#xff0c;同…

有没有推荐的golang的练手项目?

前言 下面是github上的golang项目&#xff0c;适合练手&#xff0c;可以自己选择一些项目去练习&#xff0c;整理不易&#xff0c;希望能多多点赞收藏一下&#xff01;废话少说&#xff0c;我们直接进入正题>>> 先推荐几个教程性质的项目&#xff08;用于新手学习、巩…

RS-232标准

目录 1、概述2、RS-232接口的特点3、RS-232接口协议【仿真】 1、概述 RS-232接口是在1970年由美国电子工业协会(EIA)联合贝尔系统、调制解调器厂家及计算机终端生产厂家共同制定的用于串行通讯的标准。它的全名是“数据终端设备(DTE)和数据通讯设备(DCE)之间串行二进制数据交换…

Hadoop理论及实践-HDFS读写数据流程(参考Hadoop官网)

NameNode与DataNode回顾 主节点和副本节点通常指的是Hadoop分布式文件系统&#xff08;HDFS&#xff09;中的NameNode和DataNode。 NameNode&#xff08;主节点&#xff09;&#xff1a;NameNode是Hadoop集群中的一个核心组件&#xff0c;它负责管理文件系统的命名空间和元数据…

arcgis pro 3.0.2 安装及 geemap

arcgis pro 3.0.2 安装及 geemap arcgis pro 3.0.2 安装 arcgis pro 3 版本已经很多了&#xff0c;在网上找到资源就可以进行安装 需要注意的是&#xff1a;有的文件破解文件缺少&#xff0c;导致破解不成功。 能够新建地图就是成功了&#xff01; geemap安装 1.需要进行环…

Python web实战之Django 的 WebSocket 支持详解

关键词&#xff1a;Python, Django, WebSocket, Web 如何使用 Django 实现 WebSocket 功能&#xff1f;本文将详细介绍 WebSocket 的概念、Django 的 WebSocket 支持以及如何利用它来创建动态、响应式的 Web 应用。 1. WebSocket 简介 1.1 什么是 WebSocket&#xff1f; 在 W…

【果树农药喷洒机器人】Part7:静态PWM变量喷药实验

&#x1f4e2;&#xff1a;如果你也对机器人、人工智能感兴趣&#xff0c;看来我们志同道合✨ &#x1f4e2;&#xff1a;不妨浏览一下我的博客主页【https://blog.csdn.net/weixin_51244852】 &#x1f4e2;&#xff1a;文章若有幸对你有帮助&#xff0c;可点赞 &#x1f44d;…

【编程指南】ES2016到ES2023新特性解析一网打尽

ES2016 Array.prototype.includes() Array.prototype.includes 方法&#xff1a; 这个方法用于检查数组是否包含特定元素&#xff0c;如果包含则返回 true&#xff0c;否则返回 false // 我有一个水果篮子 const fruitBasket [apple, banana, orange, grape];// 我要检查篮…