前端笔试题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://xiahunao.cn/news/1381466.html

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

相关文章

inkscape制作向日葵

inkscape制作向日葵logo 双击打开inkscape 软件 2.创建一个五角星&#xff0c;填充相应的颜色 3.创建一个圆填充相应的颜色 把五角星增加圆角和辐条&#xff0c; 5.绘制向日葵的眉毛、眼睛、鼻子、嘴巴 6.把圆和五角星重叠在一起&#xff0c;选中五角星——选择图层——层置…

Android_Butterfly_动画

Android_Butterfly_动画 运行效果 所需文件 MainActivity package com.example.a517_butter; import android.animation.AnimatorSet; import android.animation.ObjectAnimator; import android.graphics.drawable.AnimationDrawable; import android.os.Bundle; //imp…

matlab 绘花,MATLAB绘图花样一

多组数据在一张图中显示----hold on x = [5 20 40 60 80 100 120]; y = [-0.2 -0.36 -0.26 -0.24 -0.33 -0.41 -0.55]; y1 = [-0.15 -0.31 -0.21 -0.19 -0.28 -0.36 -0.5]; y2 = [-0.25 -0.41 -0.31 -0.29 -0.38 -0.46 -0.6]; plot(x,y); hold on; plot(x,y1); hold on; plot(x…

R语言笔记(一)

1.iris&#xff1a;鸢尾花数据集 Sepal&#xff1a;花萼 Petal&#xff1a;花瓣 Species&#xff1a;种数 2.sunflowerplot(iris[,4:5],col”gold”,seg.col”gold”) 表示画出向日葵的散点图&#xff0c;iris[,4:5]表示iris数据的第四、五列的数据画向日葵散点图…

python用turtle画太阳花_Python绘图——认识turtle小海龟

海龟作图&#xff0c;turtle是Python重要的标准库之一&#xff0c;我们可以编写指令让一个虚拟的小海龟在屏幕上来回移动。这个海龟带着一只钢笔&#xff08;pen&#xff09;&#xff0c;我们可以让海龟无论移动到哪都使用这只钢笔来绘制线条。 海龟作图最初源自20世纪60年代的…

向日葵android平板,向日葵远程控制 - 黑科技改变生活,让端游一秒变手游 - Android 应用 - iPad - 【最美应用】...

玩主机的看不起玩平台的&#xff0c;玩平台的看不起玩端游的&#xff0c;玩端游的看不起玩页游的&#xff0c;玩页游的还看不起玩手游的。 现在不要分什么彼此了&#xff0c;通过以下方法&#xff0c;想用手机玩平台游戏、玩端游、玩页游&#xff0c;可一次实现&#xff01; 手…

海龟画图 python太阳花_python画图之“小海龟”turtle

“小海龟”turtle是Python语言中一个很流行的绘制图像的函数库&#xff0c;想象一个小乌龟&#xff0c;在一个横轴为x、纵轴为y的坐标系原点&#xff0c;(0,0)位置开始&#xff0c;它根据一组函数指令的控制&#xff0c;在这个平面坐标系中移动&#xff0c;从而在它爬行的路径上…

python turtle库制作可爱的假向日葵

效果图&#xff1a; 是不是很可爱呢&#xff01;现在就带各位朋友们亲手做一个假向日葵花吧 # sun flower 向日葵 # 创作人&#xff1a;李国庆 # 扣扣&#xff1a;1974914843 import turtle as tt.begin_fill() t.pendown() t.circle(60) t.fd(14) t.fillcolor(yellow) t.end…

windows系统链接UBuntu向日葵

参考链接&#xff1a; 1、https://www.pianshen.com/article/67791913548/ 2、https://www.codeleading.com/article/8793979874/ 3、https://www.linuxidc.com/Linux/2011-07/39491.htm 解决方法 1.官网下载: https://sunlogin.oray.com/download/ 双击deb安装&#xff0c;然…

python画行向日葵,基于matplotlib的向日葵散点图

我不知道有什么matplotlib实现&#xff0c;但不难做到。在这里&#xff0c;我让hexbin进行计数&#xff0c;然后遍历每个单元格并添加适当数量的花瓣&#xff1a; import numpy as np import matplotlib.pyplot as plt from matplotlib import colors np.random.seed(0) n 200…

python用turtle画太阳花_详解python使用turtle库来画一朵花

看了群主最后成像的图片&#xff0c;应该是循环了36次画方框&#xff0c;每次有10度的偏移。 当然不能提前看答案&#xff0c;自己试着写代码。 之前有用过海龟画图来画过五角星、奥运五环、围棋盘等&#xff0c;所以感觉不难。 # !/usr/bin/env python # -*- coding:utf-8…

微信小程序隐私协议模板

在 设置 中找到 用户隐私保护 进行更新&#xff0c;如下图&#xff1a; 具体协议补充可参考如下&#xff1a; 为了分辨用户&#xff0c;开发者将在获取你的明示同意后&#xff0c;收集你的微信昵称、头像 为了显示距离&#xff0c;开发者将在获取你的明示同意后&#xff0c;收…

多线程与并发编程面试题总结

多线程与并发编程 多线程 线程和进程的区别&#xff1f; 从操作系统层面上来讲&#xff1a;进程(process)在计算机里有单独的地址空间&#xff0c;而线程只有单独的堆栈和局部内存空间&#xff0c;线程之间是共享地址空间的&#xff0c;正是由于这个特性&#xff0c;对于同…

linux鲁班猫代码初尝试[编译镜像][修改根文件系统重编译][修改设备树改屏幕为MIPI]

编译镜像 官方百度云盘资料:https://doc.embedfire.com/linux/rk356x/quick_start/zh/latest/quick_start/baidu_cloud/baidu_cloud.html 解压虚拟机压缩包:"鲁班猫\8-SDK源码压缩包\开发环境虚拟机镜像\ubuntu20.04.7z"后既可以用VMware打开,打开后可以看到已经有…

idea 快捷键代码行标记并快捷跳到标记行(搬砖必备)

idea有一个组合快捷键 非常好用 快捷键1 标记代码行&#xff08;左边的行数会出现一个1&#xff0c;代表着已经标记了&#xff09;&#xff1a; ctrlshift1 快捷键2 迅速跳到标记行&#xff08;直接抵达砖厂&#xff0c;哈哈&#xff09;&#xff1a; ctrl1 这边给大家送上…

圈子才是成功的捷径

前言 最近我在读徐涛写的《历史的面孔》这本书&#xff0c;感受颇深&#xff0c;启发挺大的。 真心建议大家可以读一读历史人物相关的书籍&#xff0c;每个历史人物在其所在的背景下&#xff0c;每一个的抉择几乎都能给人以思考。 &#xff08;文末有彩蛋&#xff09; 尤其…

工作中,我们应该走捷径吗?

很多人喜欢走捷径&#xff0c;遇到困难&#xff0c;为了走捷径&#xff0c;找了很多方法&#xff0c;做了很多努力&#xff0c;到最后才发现&#xff0c;这个硬碰硬的过程是避免不了的&#xff0c;除了正面击溃困难&#xff0c;别无选择。 工作中有没有捷径可以走呢&#xff1f…

【几个python虚拟环境会遇到的问题】

几个python虚拟环境会遇到的问题 twine is not recognized as an internal or external command,operable program or batch file.setup命令不报错但不起作用pipreqs is not recognized as an internal or external command,operable program or batch file. ‘twine’ is not …

包管理工具详解npm 、 yarn 、 cnpm 、 npx 、 pnpm(2023)

1、包管理工具npm &#xff08;1&#xff09;包管理工具npm&#xff1a; Node Package Manager&#xff0c;也就是Node包管理器&#xff1b;但是目前已经不仅仅是Node包管理器了&#xff0c;在前端项目中我们也在使用它来管理依赖的包&#xff1b;比如vue、vue-router、vuex、…

OOAD 2 UML

什么是UML&#xff08;Unified Modeling Language&#xff09; 统一建模语言&#xff08;UML&#xff09; 是描述、构造和文档化系统制品的可视化语言。 The Unified Modeling Language is a visual language for specifying,constructing and documenting the artifacts of sy…