前端笔试题1

news2024/11/26 19:41:33

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 is
		var 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 is
		console.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 is
			const 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%10
			i=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) { // 如果这个元素出现次数小于等于n
      result.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) { // 如果这个元素出现次数等于n
      result.push(num) // 将其加入结果数组
    } else if (hash[num] < n) { // 如果这个元素出现次数小于n
      result.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.coloradmin.cn/o/867495.html

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

相关文章

伯俊ERP对接打通金蝶云星空表头表体组合查询接口与采购订单新增接口

伯俊ERP对接打通金蝶云星空表头表体组合查询接口与采购订单新增接口 数据源平台:伯俊ERP 伯俊科技&#xff0c;依托在企业信息化建设方面的领先技术与实践积累&#xff0c;致力于帮助企业实现全渠道一盘货。伯俊提供数字经营的咨询与系统实施&#xff0c;助力企业信息化升级、加…

【C++】STL初识

1.STL的基本概念 2.vector存放内置数据类型 #include <iostream> using namespace std; #include <vector> #include <algorithm>void MyPrint(int val) {cout << val << endl; }void test01() {//创建vector容器对象&#xff0c;并且通过模板参…

DP1.4接口的PCB布局布线要求

DP接口即为DisplayPort接口&#xff0c;是由视频电子标准协会发布的显示接口。DP接口将在传输视频信号的同时加入对高清音频信号传输的支持&#xff0c;并且同时支持更高的分辨率以及刷新率。DP1.4通信端口规范新标准基于DP1.3规范&#xff0c;宽度不变但加入了显示压缩流技术&…

Spring-Cloud-Loadblancer详细分析_3

前两篇文章介绍了加载过程&#xff0c;本文从Feign的入口开始分析执行过程&#xff0c;还是从FeignBlockingLoadBalancerClient.execute来入手 public class FeignBlockingLoadBalancerClient implements Client {private static final Log LOG LogFactory.getLog(FeignBlock…

【TypeScript】进阶之路语法细节,类型和函数

进阶之路 类型别名(type)的使用接口(interface)的声明的使用二者区别&#xff1a; 联合类型和交叉类型联合类型交叉类型 类型断言获取DOM元素 非空类型断言字面量类型的使用类型缩小&#xff08;类型收窄&#xff09;TypeScript 函数类型函数类型表达式内部规则检测函数的调用签…

什么是响应式设计?列举几种实现响应式设计的方法。

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ 什么是响应式设计&#xff1f;⭐ 实现响应式设计的方法⭐ 写在最后 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几何带你启航前端之旅 欢迎来到前端入门之旅&#xff01;这个专栏…

Linux:Shell编程之免交互

目录 绪论 1、here Document免交互 1.1 格式 1.2 cat结合免交互实现重定向输出到指定文件 1.3 变量替换 2、Expect免交互 2.1 三种写法 3、免交互实现普通用户切换root 3.1 send_user 4、接收参数 5、嵌入执行模式 6、ssh远程登录 绪论 免交互&#xff1a;不需要人…

【Linux进行时】进程概念

进程的概念 什么是进程呢&#xff1f; ❓首先我们需要认识一下什么叫进程呢&#xff1f; 课本概念&#xff1a;程序的一个执行实例&#xff0c;正在执行的程序等 &#x1f525;内核观点&#xff1a;担当分配系统资源&#xff08;CPU时间&#xff0c;内存&#xff09;的实体。…

海外ASO优化之关于应用的营销2

在目标受众中建立信任度&#xff0c;并获得博客/新闻网站的热榜&#xff0c;这样自然会提高应用的知名度和目标受众的认知度。就博客读者而言&#xff0c;需要找出推荐的最佳时间和真正推动我们应用是什么。 1、提供了App Store或Google Play的直接链接。 我们首先需要创建一个…

2023年中国锂电池X-Ray及CT检测设备市场竞争格局及行业市场规模前景分析[图]

锂电池X-Ray成像检测设备主要是利用X射线穿透电芯时的吸收、反射、散射效应实现成像并对图像进行处理及算法分析&#xff0c;实现非接触式的无损、自动测量锂电池电芯内部特征尺寸以进行瑕疵检测&#xff0c;确认电芯结构是否合格、避免造成电芯内部短路等安全隐患。 锂电池X-…

fork创建多个子进程

fork创建多个子进程 示例代码 fork1.c #include <stdio.h> #include <stdlib.h> #include <sys/types.h> #include <unistd.h>int main(int argc,char **argv) {int i, j;pid_t pid;for (i 0; i < 3; i){pid fork();if (pid < 0){perror(&q…

Zip压缩包有密码,如何删除?

Zip压缩包设置设置了密码&#xff0c;想要删除密码&#xff0c;除了将压缩包解压出来之后再将文件压缩为不带密码的压缩文件以外&#xff0c;还有一种删除密码的方法。设置方法如下&#xff1a; 右键点击zip文件&#xff0c;找到打开方式&#xff0c;以Windows资源管理器方式打…

sql server profiler使用

一、打开sql server profiler 二、配置 比如我们只过滤包含这个关键字的&#xff0c;输入&#xff1a;%Employees%

【C++11】lambda表达式 | 包装器

文章目录 一.lambda表达式1.lambda表达式概念2.lambda表达式语法3.lambda表达式交换两个数4.lambda表达式底层原理 二.包装器1.function包装器①function包装器介绍②function包装器统一类型③function包装器的意义 2.bind包装器①bind包装器介绍②bind包装器绑定固定参数③bin…

计算机基础之RAID技术

概述 RAID&#xff0c;Redundant Array of Independent Disks&#xff0c;独立磁盘冗余阵列&#xff0c;一种把多块独立的硬盘&#xff08;物理硬盘&#xff09;按不同的方式组合起来形成一个硬盘组&#xff08;逻辑硬盘&#xff09;&#xff0c;从而提供比单个硬盘更高的存储…

Springboot3整合使用aj-captcha行为验证码解决方案

截止到目前(2023-04-20)&#xff0c;Springboot最新稳定版本已经迭代到3.0.5&#xff0c;而我们项目中使用的行为验证码框架aj-captcha还没有适配Springboot3&#xff0c;码云上类似的请求也没有得到过回应&#xff0c;于是决定自己动手适配一下&#xff0c;研究下来发现适配3.…

oi知识表+NOIP提高组算法及算法思想总结

&#xfeff;算法及算法思想总结 │ By lib │ ├暴力 ├模拟 ├递归及递推:数位统计类 ├构造 ▼├排序算法 │ ├冒泡排序 │ ├选择排序 │ ├计数排序 │ ├基数排序 │ ├插入排序 │ ├归并排序 │ ├快速排序 │…

腾讯云轻量应用服务器地域怎么选?上海广州北京?

腾讯云轻量应用服务器地域是指轻量服务器数据中心所在的地理位置&#xff0c;如上海、广州和北京等地域&#xff0c;如何选择地域&#xff1f;地域的选择建议就近原则&#xff0c;用户距离轻量服务器地域越近&#xff0c;网络延迟越低&#xff0c;速度就越快&#xff0c;根据用…

day38 滑动窗口

1. 滑动窗口 应用场景&#xff1a; 满足xxx条件&#xff08;计算结果、出现次数、同时包含&#xff09; 关键词&#xff1a;最长最短子串无重复等等 1&#xff09;最长 左右指针在起始点&#xff0c;R 向右依次滑动循环&#xff1b; 如果&#xff1a; 窗内元素满足条件&#x…