Javascript面试基础6【每日更新10】

Gulp

  • gulp是前端开发过程中一种基于流的代码构建工具,是自动化项目的构建利器;它不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成

  • Gulp的核心概念:流
  1. 流,简单来说就是建立在面向对象基础上的一种抽象的处理数据的工具。在流中,定义了一些处理数据的基本操作,如读取数据,写入数据等,程序员是对流进行所有操作的,而不用关心流的另一头数据的真正流向
  • gulp正是通过流和代码优于配置的策略来尽量简化任务编写的工作
  • Gulp的特点:
  1. 易于使用:通过代码优于配置的策略,gulp让简单的任务简单,复杂的任务可管理。
  2. 构建快速利用Node.js 流的威力,你可以快速构建项目并减少频繁的IO操作。
  3. 易于学习通过最少的API,掌握 gulp毫不费力,构建工作尽在掌握:如同一系列流管道
     

Vue双向数据绑定

Vue核心基础-CSDN博客

设计模式—观察者模式与发布订阅-CSDN博客

vue.js 则是采用数据劫持结合发布者-订阅者模式的方式,通过0bject.defineProperty( 来劫持各个属性的setter ,getter ,在数据变动时发布消息给订阅者,触发相应的监听回调
 

事件的各个阶段

在JavaScript中,事件处理是一个重要的概念,它允许开发者在用户与网页进行交互时执行代码。事件处理通常涉及到事件的各个阶段,这些阶段也被称为事件流(Event Flow)或事件传播(Event Propagation)。主要可以分为三个阶段:捕获阶段(Capturing Phase)、目标阶段(Target Phase,也称为事件处理阶段或冒泡前的激活阶段)、冒泡阶段(Bubbling Phase)。

1. 捕获阶段(Capturing Phase)

  • 顺序:从文档的根节点(通常是document对象)开始,向下传播到目标元素。
  • 特点:在捕获阶段,事件处理器会从最外层的节点开始触发,然后向事件的目标节点传播。这个阶段的目的是在事件到达目标节点之前,先给外层的元素机会来处理这个事件。
  • 用途:捕获阶段通常用于事件在到达目标元素之前进行拦截处理,例如,阻止事件进一步传播或修改事件对象。

2. 目标阶段(Target Phase)

  • 顺序:当事件到达目标元素时,会触发目标元素上的事件处理器。
  • 特点:在这个阶段,事件处理器被绑定在目标元素上,即用户实际与之交互的元素。这通常是我们设置事件监听器的地方。
  • 注意:技术上讲,目标阶段并不是事件传播的一个独立阶段,但它发生在捕获阶段和冒泡阶段之间,是事件处理器被目标元素实际调用的时刻。

3. 冒泡阶段(Bubbling Phase)

  • 顺序:从目标元素开始,向上传播到文档的根节点。
  • 特点:在冒泡阶段,事件会从目标元素开始,一直向上传播到DOM树的顶层。这个阶段的目的是允许事件在到达顶层之前,沿途的每个节点都有机会处理这个事件。
  • 用途:冒泡阶段常用于在不特定知道哪个元素会被点击的情况下,处理事件。例如,点击了列表中的某个项,但你可能希望无论点击了哪个项,都能触发同一个事件处理器。

设置事件监听器时指定阶段

在JavaScript中,使用addEventListener方法添加事件监听器时,可以通过第三个参数来指定监听器是在捕获阶段还是冒泡阶段触发。如果省略这个参数,或者将其设置为false,则监听器会在冒泡阶段触发。如果设置为true,则监听器会在捕获阶段触发。

element.addEventListener('click', function(event) {  // 事件处理代码  
}, true); // 在捕获阶段触发  element.addEventListener('click', function(event) {  // 事件处理代码  
}, false); // 在冒泡阶段触发(默认)

let VS var VS const

  • let
  1. 允许你声明一个作用域被限制在块级中的变量、语句或者表达式。
  2. let绑定不受变量提升的约束,这意味着let声明不会被提升到当前
  3. 该变量处于从块开始到初始化处理的“暂存死区”
  • var
  1. ·声明变量的作用域限制在其声明位置的上下文中,而非声明变量总是全局的
  2. 由于变量声明(以及其他声明)总是在任意代码执行之前处理的,所以在代码中的任意位置声明变量总是等效于在代码开头声明
  • const
  1. 声明创建一个值的只读引用(即指针)
  2. 基本数据当值发生改变时,那么其对应的指针也将发生改变,故造成const申明基本数据类型时”再将其值改变时,将会造成报错,例如const a = 3 ;a = 5 时将会报错
  3. 但是如果是复合类型时,如果只改变复合类型的其中某个Value 项时,将还是正常使用
     

快速让一个数组乱序

sort方法

const arr=[1,2,3,4,5,6];
arr.sort(function(a,b){return Math.random()-0.5;
})

Fisher-Yates洗牌算法

在JavaScript中,快速让一个数组乱序(即打乱数组元素的顺序)的一种常用方法是使用Fisher-Yates洗牌算法(也称为Knuth洗牌算法)。这种方法的基本思想是遍历数组元素,并在每一步中随机选择一个未处理的元素与当前元素交换位置。

以下是一个使用Fisher-Yates洗牌算法来打乱数组顺序的示例代码:

function shuffleArray(array) {  for (let i = array.length - 1; i > 0; i--) {  // 生成一个0到i的随机索引  const j = Math.floor(Math.random() * (i + 1));  // 交换array[i]和array[j]  [array[i], array[j]] = [array[j], array[i]];  }  return array;  
}  // 示例  
const myArray = [1, 2, 3, 4, 5, 6, 7, 8, 9];  
console.log(shuffleArray(myArray));

 如何渲染几万条数据并不卡住界面

考察了如何在不卡住页面的情况下渲染数据,也就是说不能一次性将几万条都渲染出来,而应该一次渲染部分DOM,那么就可以通过requestAnimationFrame来每16 ms刷新一次
 

requestAnimationFrame 是 Web API 的一部分,它用于在浏览器下一次重绘之前调用指定的函数来更新动画。这是一种高效的方式来创建平滑的动画,因为它允许浏览器优化和最小化重绘和重排,从而提供更好的性能和用户体验。

当你使用 requestAnimationFrame 时,你需要提供一个回调函数作为参数。浏览器会在这个函数准备好进行屏幕更新之前调用它。这个函数通常用于更新动画的当前状态,比如改变元素的位置或样式。

基本用法

function step(timestamp) {  // 更新动画状态  // 例如,改变元素的位置  // ...  // 如果需要继续动画,则再次调用 requestAnimationFrame  requestAnimationFrame(step);  
}  // 启动动画  
requestAnimationFrame(step);

优点

  1. 高效requestAnimationFrame 由浏览器进行优化,以确保动画的平滑性和性能。
  2. 自动时间间隔:你不需要自己设置时间间隔(如使用 setTimeout 或 setInterval),浏览器会基于屏幕刷新率来调用你的回调函数。
  3. 节省CPU:当标签页或窗口不在前台时,requestAnimationFrame 会自动暂停调用回调函数,从而节省CPU资源。

停止动画

要停止动画,你可以简单地不再调用 requestAnimationFrame。但是,如果你需要从一个特定的回调中停止动画(例如,基于某些条件),你可能需要将 requestAnimationFrame 的返回值(一个ID)保存起来,并使用 cancelAnimationFrame 来取消它。

let animationId = null;  function startAnimation() {  animationId = requestAnimationFrame(step);  
}  function stopAnimation() {  if (animationId) {  cancelAnimationFrame(animationId);  animationId = null;  }  
}  function step(timestamp) {  // ... 更新动画状态  // 根据需要决定是否继续动画  // requestAnimationFrame(step);  
}  // 启动和停止动画  
startAnimation();  
// ... 在某个时刻停止动画  
stopAnimation();

 获取页面所有checkbox

怎样添加、移除、移动、复制、创建和查找节点

在JavaScript中,操作DOM(文档对象模型)是常见的任务,包括添加、移除、移动、复制、创建和查找节点。以下是一些基本的示例,说明如何执行这些操作:

1. 创建节点

要创建一个新的DOM节点,你可以使用document.createElement()方法。

// 创建一个新的div元素  
var newDiv = document.createElement("div");  // 设置其一些属性  
newDiv.id = "newDivId";  
newDiv.className = "newDivClass";  
newDiv.textContent = "这是一个新的div";  // 将新创建的元素添加到body中  
document.body.appendChild(newDiv);

2. 查找节点

查找DOM节点可以使用多种方法,如getElementById(),getElementsByClassName(),

 getElementsByTagName()querySelector()querySelectorAll()

// 通过ID查找  
var elementById = document.getElementById("someElementId");  // 通过类名查找(返回HTMLCollection)  
var elementsByClass = document.getElementsByClassName("someClass");  // 通过标签名查找(返回HTMLCollection)  
var elementsByTagName = document.getElementsByTagName("p");  // 使用querySelector查找第一个匹配的元素  
var firstElement = document.querySelector(".someClass");  // 使用querySelectorAll查找所有匹配的元素(返回NodeList)  
var allElements = document.querySelectorAll(".someClass");

3. 添加节点

将新节点添加到DOM中,可以使用appendChild()insertBefore()

// 将新节点添加到body的末尾  
document.body.appendChild(newDiv);  // 将新节点添加到某个特定元素之前  
var referenceNode = document.getElementById("someElementId");  
document.body.insertBefore(newDiv, referenceNode);

4. 移除节点

使用removeChild()方法可以从DOM中移除一个节点。

var elementToRemove = document.getElementById("someElementIdToRemove");  
if (elementToRemove && elementToRemove.parentNode) {  elementToRemove.parentNode.removeChild(elementToRemove);  
}

5. 移动节点

移动节点实际上是一个先移除再添加的过程。首先,使用removeChild()从当前位置移除节点,然后使用appendChild()insertBefore()将其添加到新位置。

6. 复制节点

使用cloneNode()方法可以复制一个节点。这个方法接受一个布尔值作为参数,指定是否进行深复制(复制节点及其所有子节点)。

// 浅复制(只复制节点本身)  
var clonedNode = elementById.cloneNode(false);  // 深复制(复制节点及其所有子节点)  
var clonedNodeDeep = elementById.cloneNode(true);  // 然后,你可以将复制的节点添加到DOM中的某个位置  
document.body.appendChild(clonedNodeDeep);

正则表达式

 正则表达式-CSDN博客

Javascript中callee与caller的作用 

  • caller是返回一个对函数的引用,该函数调用了当前函数;
  • callee是返回正在被执行的function函数,也就是所指定的function对象的正文

在JavaScript中,calleecaller是两个非标准的、但曾经在早期JavaScript版本中广泛使用的属性,它们分别用于函数内部引用当前执行的函数和调用当前函数的外部函数。然而,值得注意的是,由于它们带来的混淆和潜在的性能问题,现代JavaScript开发中通常不推荐使用这两个属性,并且在严格模式(strict mode)下,这两个属性是不可用的。

callee

callee属性是arguments对象的一个属性,它指向当前正在执行的函数本身。这在编写递归函数时特别有用,因为你可以直接使用arguments.callee来引用函数自身,而不需要在函数体内显式地引用函数名。然而,这种做法可能会导致代码难以理解和维护,因为它隐藏了函数的实际名称。

function factorial(n) {  if (n <= 1) {  return 1;  } else {  return n * arguments.callee(n - 1);  }  
}

现代JavaScript中,更推荐使用函数名来引用自身,或者使用箭头函数来避免thisarguments的混淆。

caller

caller属性是一个函数对象的属性,它指向调用当前函数的函数。这在你需要知道是哪个函数调用了当前函数时非常有用。然而,与callee一样,caller属性也带来了代码可读性和维护性的挑战,并且在严格模式下是不可用的。

function outerFunction() {  innerFunction();  
}  function innerFunction() {  console.log(innerFunction.caller); // 指向outerFunction  
}  outerFunction();

替代方案

  1. 递归函数:对于递归函数,直接使用函数名而不是arguments.callee
  2. 调试和日志记录:对于需要知道调用栈的情况,考虑使用现代浏览器的开发者工具,或者利用Error对象的堆栈跟踪(尽管这可能会因浏览器而异且不是跨平台的解决方案)。
  3. 设计模式:考虑使用设计模式(如事件监听器、回调函数等)来管理函数间的依赖和调用关系,而不是依赖caller属性。

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

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

相关文章

多微信聚合神器:高效沟通,一个界面全搞定!

大家都知道&#xff0c;频繁的来回切换微信&#xff0c;不仅浪费时间&#xff0c;还容易错过重要的信息。 今天&#xff0c;我要向大家推荐一款多微信管理神器——个微管理系统&#xff0c;助你实现统一管理&#xff0c;聚合聊天&#xff0c;让沟通变得更加高效。 1、网页扫码…

基于MindIE实现通义千问Qwen推理加速

一、昇腾开发者平台申请镜像 登录Ascend官网昇腾社区-官网丨昇腾万里 让智能无所不及 二、登录并下载mindie镜像 #登录docker login -u XXX#密码XXX#下载镜像docker pull XXX 三、下载Qwen的镜像 使用wget命令下载Qwen1.5-0.5B-Chat镜像&#xff0c;放在/mnt/Qwen/Qwen1.5-…

【无标题】Git(仓库,分支,分支冲突)

Git 一种分布式版本控制系统&#xff0c;用于跟踪和管理代码的变更 一&#xff0e;Git的主要功能&#xff1a; 二&#xff0e;准备git机器 修改静态ip&#xff0c;主机名 三&#xff0e;git仓库的建立&#xff1a; 1.安装git [rootgit ~]# yum -y install git 2.创建一个…

【策略工厂模式】记录策略工厂模式简单实现

策略工厂模式 1. 需求背景2. 代码实现2.1 定义基类接口2.2 排序策略接口定义2.3 定义抽象类&#xff0c;实现策略接口2.4 具体的排序策略实现类2.5 实现策略工厂类2.6 控制类 3. 启动测试4. 总结 1. 需求背景 现在需要你创建一个策略工厂类&#xff0c;来根据策略实现各种排序…

【JAVA】记录一次前端无能造成的 线上bug

有一个需求是 当方式切换 垫资时 清空 当前所选细单商品 但是前端的奇葩 操作是&#xff0c;只是在页面上清空 细单。 不请求 后台删除 细单 让前端 必须 清空同时 请求后台 删除细单 但是 该前端 技术不行&#xff0c; 嫌麻烦 不做 只好 后台 判断该类型时 进行删除操作…

AutoMQ 开源可观测性方案:夜莺 Flashcat

01 引言 在现代企业中&#xff0c;随着数据处理需求的不断增长&#xff0c;AutoMQ [1] 作为一种高效、低成本的流处理系统&#xff0c;逐渐成为企业实时数据处理的关键组件。然而&#xff0c;随着集群规模的扩大和业务复杂性的增加&#xff0c;确保 AutoMQ 集群的稳定性、高可…

权限管理的概述以及vue开发前端的路由、菜单、按钮权限控制实现方案

1. 权限管理概念 1.1 权限定义 权限管理是确保用户只能访问被授权资源的机制。在计算机系统中&#xff0c;权限通常指对特定数据或功能的访问权。权限的设置和控制对于保护数据安全和系统安全至关重要。 1.2 前端权限控制重要性 前端权限控制是用户与应用交互的第一道防线。…

黑马头条Day12-项目部署_持续集成

一、今日内容介绍 1. 什么是持续集成 持续集成&#xff08;Continuous integration&#xff0c;简称CI&#xff09;&#xff0c;指的是频繁地&#xff08;一天多次&#xff09;将代码集成到主干。 持续集成的组成要素&#xff1a; 一个自动构建过程&#xff0c;从检出代码、…

jdk版本管理利器-sdkman

1.什么是sdkman&#xff1f; sdkman是一个轻量级、支持多平台的开源开发工具管理器&#xff0c;可以通过它安装任意主流发行版本&#xff08;例如OpenJDK、Kona、GraalVM等等&#xff09;的任意版本的JDK。通过下面的命令可以轻易安装sdkman: 2.安装 curl -s "https://…

什么是 5G?

什么是 5G&#xff1f; 5G 是第五代无线蜂窝技术&#xff0c;与以前的网络相比&#xff0c;它提供了更高的上传和下载速度、更一致的连接以及更高的容量。5G 比目前流行的 4G 网络更快、更可靠&#xff0c;并有可能改变我们使用互联网访问应用程序、社交网络和信息的方式。例如…

通过 WSL 2 在Windows 上挂载 Linux 磁盘

原文查看 曾为了传输或者共享不同系统的文件频繁地在 Windows 和 Linux 系统之间切换&#xff0c;效率过低&#xff0c;所以尝试通过 WSL 2 在Windows 上挂载 Linux 磁盘。 先决条件 需要在Windows 10 2004 及更高版本&#xff08;Build 19041 及更高版本&#xff09;或 Win…

Redis 缓存

安装 安装 Redis 下载&#xff1a; Releases tporadowski/redis (github.com) winr ----services.msc-----将redis 设置为手动(只是学习&#xff0c;如果经常用可以设置为自动) 安装 redis-py 库 pip install redis-py Redis 和 StrictRedis redis-py 提供 Redis 和 Str…

UDP通信 单播,广播,组播

UDP通信实现 #include <sys/types.h> #include <sys/socket.h> ssize_t sendto(int sockfd, const void *buf, size_t len, int flags, const struct sockaddr *dest_addr, socklen_t addrlen); - 参数&#xff1a; struct sockaddr *src_addr, socklen_t *addrlen…

vue基础3

1.推荐好用的第三方框架 BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务 1.moment.js 2.dayjs 2.收集表达数据 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><title>Document</title><…

MyBatis-Plus自动生成代码

目录 前言一. 什么是 MyBatis-Plus1. Mybatis-Plus 的特点2. Mybatis-Plus 结构二. MyBatis-Plus 自动生成步骤1. 数据库准备2. 环境准备(1) 创建一个空的 Spring Boot 工程(2) 导入pom依赖(3) 编辑application.yml文件(4) 在启动类加入 @MapperScan 注解3. 配置代码4. 运行三.…

数据库安全:MySQL安全配置,MySQL安全基线检查加固

「作者简介」:冬奥会网络安全中国代表队,CSDN Top100,就职奇安信多年,以实战工作为基础著作 《网络安全自学教程》,适合基础薄弱的同学系统化的学习网络安全,用最短的时间掌握最核心的技术。 这一章节我们需要知道MySQL的安全基线标准和加固方式。 MySQL基线检查 1、更新…

【2024最新华为OD-C/D卷试题汇总】[支持在线评测] 围棋的气(100分) - 三语言AC题解(Python/Java/Cpp)

🍭 大家好这里是清隆学长 ,一枚热爱算法的程序员 ✨ 本系列打算持续跟新华为OD-C/D卷的三语言AC题解 💻 ACM银牌🥈| 多次AK大厂笔试 | 编程一对一辅导 👏 感谢大家的订阅➕ 和 喜欢💗 🍿 最新华为OD机试D卷目录,全、新、准,题目覆盖率达 95% 以上,支持题目在线…

unity3d:TabView,UGUI多标签页组件,TreeView树状展开菜单

概述 1.最外层DataForm为空壳编辑数据用。可以有多个DataForm&#xff0c;例如福利DataForm&#xff0c;抽奖DataForm 2.Menu层为左边栏层&#xff0c;每个DataForm可以使用不同样式的MenuForm预制体 3.DataForm中使用ReorderList&#xff0c;可排列配置 4.有定位功能&#xf…

stl-set

目录 目录 内部自动有序、不含重复元素 关于能不能自己造一个cmp&#xff0c;还挺复杂。 访问&#xff1a;只能用迭代器且受限 添加元素&#xff1a;没有pushback&#xff0c;用insert 复杂度&#xff1a;ologn ​编辑 查找元素find&#xff08;&#xff09;&#xff1…

C++-入门(下)

一、前言&#xff1a; 目标&#xff1a; 1. C 关键字 2. 命名空间 3. C 输入 & 输出 4. 缺省参数 5. 函数重载 6. 引用 7. 内联函数 8. auto 关键字 (C11) 9. 基于范围的 for 循环 (C11) 10. 指针空值 ---nullptr(C11) 二、目标的实现&#xff1a; 6. 引用&#xff1a;…