前端笔试题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.hqwc.cn/news/63876.html

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

相关文章

PHP 之房贷计算器、组合贷

PHP 之房贷计算器、组合贷

一、等额本金 // &#xff08;等额本金&#xff09; //$loanAmount>贷款金额 //$loanPeriod>贷款年限 //$interestRate>贷款利息 function calculateEqualPrincipalPayment($loanAmount, $loanPeriod, $interestRate) {$monthlyPrincipal $loanAmount / ($loanPerio…
阅读更多...
分享一个计算器

分享一个计算器

先看效果&#xff1a; 再看代码&#xff08;查看更多&#xff09;&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>计算器</title><style>* {box-sizing: border-box;}body…
阅读更多...
JVM 基础

JVM 基础

巩固基础&#xff0c;砥砺前行 。 只有不断重复&#xff0c;才能做到超越自己。 能坚持把简单的事情做到极致&#xff0c;也是不容易的。 JVM 类加载机制 JVM 类加载机制分为五个部分&#xff1a;加载&#xff0c;验证&#xff0c;准备&#xff0c;解析&#xff0c;初始化&am…
阅读更多...
积木报表集成前端加载js文件404

积木报表集成前端加载js文件404

项目场景&#xff1a; 在集成积木报表和shiro时候&#xff1a; 集成积木报表&#xff0c;shrio&#xff0c;shrio是定义在另一个模块下的&#xff0c;供另一个启动类使用&#xff0c;积木报表集成shrio的时候&#xff0c;需要依赖存放shrio的核心包&#xff0c;该核心包除了存…
阅读更多...
7.利用matlab完成 符号方阵的特征值分解和 符号矩阵的奇异值分解 （matlab程序）

7.利用matlab完成 符号方阵的特征值分解和 符号矩阵的奇异值分解 （matlab程序）

1.简述 &#xff08;1&#xff09;特征值分解&#xff1a;函数eig 格式&#xff1a;[V,D] eig(A) %计算A的特征值对角阵D和特征向量V&#xff0c;使AVVD成立。 注意&#xff1a;特征值分解时&#xff0c;使用eig&#xff0c;矩阵A必须是方阵。 A [0 1;1 1]; [V,D] ei…
阅读更多...
ADM2587E在RS485和RS422接口的应用（ADM2587E电路原理图和程序开发）

ADM2587E在RS485和RS422接口的应用（ADM2587E电路原理图和程序开发）

最近做一个项目使用到ADM2587E&#xff0c;为了解决公司历史遗留的问题&#xff08;ADM2587E芯片发烫&#xff0c;容易烧毁&#xff0c;485设备只能手拉手连接三四个&#xff0c;就通信不正常现象&#xff09;&#xff0c;认真阅读了Datasheet和官网LayOut的一些设计文档&#…
阅读更多...
Springboot04--vue前端部分+element-ui

Springboot04--vue前端部分+element-ui

注意点&#xff1a; 这边v-model和value的区别&#xff1a;v-model是双向绑定的&#xff0c;value是单向绑定 li的key的问题 vue的组件化开发&#xff1a; 1. NPM&#xff08;类似maven&#xff0c;是管理前段代码的工具&#xff09; 安装完之后可以在cmd里面使用以下指令 2.…
阅读更多...
数据库中的连表更新和连表删除

数据库中的连表更新和连表删除

1.连表更新 准备两张表,id一样,但是姓名不一样, 需求根据id让姓名保持一致 执行的sql UPDATE teacher_copy1 AS b INNER JOIN teacher c ON b.TId c.TId set b.tnamec.tname 执行结果 2.连接删除 DELETE a FROMteacher_copy1 AS aINNER JOIN teacher b ON a.TId b.TId
阅读更多...
flutter 初识（开发体验，优缺点）

flutter 初识（开发体验，优缺点）

前言 最近有个跨平台桌面应用的需求&#xff0c;需要支持 windows/linux/mac 系统&#xff0c;要做个更新应用的小界面&#xff0c;主要功能就是下载更新文件并在本地进行替换&#xff0c;很简单的小功能。 花了几分钟构建没做 UI 优化的示例界面&#xff1a; 由于我们的客…
阅读更多...
STM32F429IGT6使用CubeMX配置串口通信

STM32F429IGT6使用CubeMX配置串口通信

1、硬件电路 2、设置RCC&#xff0c;选择高速外部时钟HSE,时钟设置为180MHz 3、配置USART1引脚 4、生成工程配置 5、部分代码 //重定向printf函数 int fputc(int ch, FILE *f) {HAL_UART_Transmit(&huart1, (uint8_t *)&ch, 1, 0xffff);return ch; } /* USER CODE BE…
阅读更多...
不基于比较的排序：基数排序

不基于比较的排序：基数排序

本篇只是讨论桶排序的具体实现&#xff0c;想了解更多算法内容可以在我的博客里搜&#xff0c;建议大家看看这篇排序算法总结&#xff1a;排序算法总结_鱼跃鹰飞的博客-CSDN博客 桶排序的原理&#xff1a; 代码&#xff1a;sort1是一个比较二逼的实现方式浪费空间&#xff0c;s…
阅读更多...
[git] git基础知识

[git] git基础知识

git是一个免费的、开源的分布式版本控制系统&#xff0c;可以快速高效地处理从小型到大型的各种项目 git易于学习&#xff0c;性能极快 什么是版本控制&#xff1f; 版本控制是一种记录文件内容变化&#xff0c;以便将来查阅特定版本修订情况&#xff0c;可以记录文件修改历史…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023