Javascript前端面试基础(八)

window.onload和$(document).ready区别

  • window.onload()方法是必须等到页面内包括图片的所有元素加载完毕后才能执行
  • $(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕

window.onload

  • 触发时机window.onload 事件会在整个页面(包括所有的依赖资源,如图片、样式表和脚本文件等)完全加载后触发。这意味着页面上的所有资源都必须加载完成,window.onload 事件才会触发。
  • 使用场景:适用于需要在页面所有资源(如图片、外部脚本等)加载完成后才执行的代码。例如,如果你需要在页面加载完成后立即显示一个包含图片的模态框,那么使用 window.onload 是合适的。
  • 原生JavaScriptwindow.onload 是原生 JavaScript 的一部分,不需要额外的库或框架。

$(document).ready()

  • 触发时机$(document).ready() 是 jQuery 中的一个方法,它在 DOM 完全就绪后触发,但不等待像图片这样的外部资源加载完成。这意味着 DOM 树已经被完全构建和解析,但可能还有像图片这样的元素在加载中。
  • 使用场景:适用于需要在 DOM 元素可用后立即执行代码,但又不需要等待所有资源(如图片)加载完成的情况。这对于初始化插件、绑定事件监听器等操作非常有用。
  • jQuery 依赖$(document).ready() 是 jQuery 特有的方法,因此它依赖于 jQuery 库。

 addEventListener()和attachEvent()的区别

  • addEventListener(是符合W3C规范的标准方法; attachEvent()是IE低版本的非标准方法
  • addEventListener()支持事件冒泡和事件捕获;-而attachEvent()只支持事件冒泡addEventListener()的第一个参数中,事件类型不需要添加on ; attachEvent(需要添加'on'
  • 如果为同一个元素绑定多个事件, addEventListener()会按照事件绑定的顺序依次执行,attachEvent()会按照事件绑定的顺序倒序执行
     

 数组去重方法总结

1. 使用ES6的Set结构

ES6 提供了 Set 数据结构,它类似于数组,但是成员的值都是唯一的,没有重复的值。利用这一特性,可以轻松实现数组去重。

let arr = [1, 2, 2, 3, 4, 4, 5];  
let uniqueArr = [...new Set(arr)];  
console.log(uniqueArr); // [1, 2, 3, 4, 5]

2. 使用filter()和indexOf()

filter() 方法创建一个新数组,其包含通过所提供函数实现的测试的所有元素。而 indexOf() 方法返回在数组中可以找到一个给定元素的第一个索引,如果不存在,则返回-1。通过这两个方法结合使用,也可以实现数组去重。

let arr = [1, 2, 2, 3, 4, 4, 5];  
let uniqueArr = arr.filter((item, index) => arr.indexOf(item) === index);  
console.log(uniqueArr); // [1, 2, 3, 4, 5]

3. 使用Map数据结构

Map 对象保存键值对,并且能够记住键的原始插入顺序。利用这一特性,也可以实现数组去重。

let arr = [1, 2, 2, 3, 4, 4, 5];  
let map = new Map();  
let uniqueArr = arr.filter(item => !map.has(item) && map.set(item, true));  
console.log(uniqueArr); // [1, 2, 3, 4, 5]

4. 使用reduce()

reduce() 方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行),将其结果汇总为单个返回值。通过 reduce(),我们也可以实现数组去重。

let arr = [1, 2, 2, 3, 4, 4, 5];  
let uniqueArr = arr.reduce((acc, current) => {  if (acc.indexOf(current) === -1) {  acc.push(current);  }  return acc;  
}, []);  
console.log(uniqueArr); // [1, 2, 3, 4, 5]

5. 使用for循环

最后,虽然不如上面的方法简洁,但你也可以使用传统的 for 循环结合 indexOf() 方法实现去重

let arr = [1, 2, 2, 3, 4, 4, 5];  
let uniqueArr = [];  
for (let i = 0; i < arr.length; i++) {  if (uniqueArr.indexOf(arr[i]) === -1) {  uniqueArr.push(arr[i]);  }  
}  
console.log(uniqueArr); // [1, 2, 3, 4, 5]

 75(设计题)想实现一个对页面某个节点的拖曳?如何做(使用原生JS)

  • ”给需要拖拽的节点绑定mousedown , mousemove , mouseup 事件
  1. mousedown事件触发后,开始拖拽
  2. mousemove时,需要通过event.c1ientX和clientY获取拖拽位置,并实时更新位置
  3. mouseup时,拖拽结束

  76 Javascript全局函数和全局变量

全局变量

  • infinity 代表正的无穷大的数值。
  • NaN指示某个值是不是数字值。
  • undefined 指示未定义的值。

全局函数

  • decodeURI()解码某个编码的 URI 。
  • decodeURIComponent(解码一个编码的 URI组件。encodeURI()把字符串编码为URI。
  • encodeURIComponent()把字符串编码为URI 组件。escape()对字符串进行编码。
  • eval() 计算JavaScript字符串,并把它作为脚本代码来执行。
  • isFinite()检查某个值是否为有穷大的数。
  • isNaN()检查某个值是否是数字。
  • Number()把对象的值转换为数字。
  • parseFloat()解析一个字符串并返回一个浮点数。parseInt()解析一个字符串并返回一个整数。String()把对象的值转换为字符串。
  • unescape()对由escape()编码的字符串进行解码

使用js实现⼀个持续的动画效果

在JavaScript中,实现一个持续的动画效果通常涉及到定时器(如setIntervalrequestAnimationFrame)来不断更新DOM元素的属性(如位置、大小、透明度等),以产生动画效果。这里,我将使用requestAnimationFrame来展示一个简单的例子,因为它提供了更好的性能和更平滑的动画效果。

<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<title>持续动画示例</title>  
<style>  #movingBox {  width: 50px;  height: 50px;  background-color: blue;  position: absolute;  left: 0;  }  
</style>  
</head>  
<body>  
<div id="movingBox"></div>  
<script src="animate.js"></script>  
</body>  
</html>

function animateBox(element, startX, endX, duration) {  let startTime = null;  function step(timestamp) {  if (!startTime) startTime = timestamp;  const progress = timestamp - startTime;  const position = startX + (progress / duration) * (endX - startX);  // 更新元素的位置  element.style.left = position + 'px';  // 如果动画未结束,则继续动画  if (progress < duration) {  requestAnimationFrame(step);  }  }  // 开始动画  requestAnimationFrame(step);  
}  // 获取元素并调用动画函数  
const box = document.getElementById('movingBox');  
animateBox(box, 0, 500, 3000); // 从左到右移动,持续3秒

这个例子中,animateBox函数接受一个DOM元素、起始X位置、结束X位置和持续时间作为参数。它使用requestAnimationFrame来更新元素的位置,直到达到指定的结束位置或持续时间结束。

注意事项

  • requestAnimationFrame的回调函数接收一个时间戳参数,它表示调用requestAnimationFrame时的时间。这个时间戳可以用来计算动画的进度。
  • 使用requestAnimationFrame相比setIntervalsetTimeout,可以更有效地控制动画的帧率,并且更节能,因为它在浏览器重绘之前调用回调函数,避免了不必要的绘制工作。
  • 为了让动画看起来更自然,可以根据需要调整动画的速度曲线(如线性、缓入、缓出等)。
  • 当你不再需要动画时,可以使用cancelAnimationFrame来停止它,以避免不必要的资源消耗

 

 封装一个函数,参数是定时器的时间,.then执行回调函数

 项目做过哪些性能优化?

  • 减少HTTP请求数
  • 减少DNS 查询使用CDN
  • 避免重定向图片懒加载
  • 减少DOM元素数量·
  • 减少DOM操作
  • 使用外部JavaScript和css
  • 压缩JavaScript .css、字体、图片等
  • 优化 css Sprite
  • 使用iconfont
  • 字体裁剪
  • 多域名分发划分内容到不同域名”
  • 尽量减少iframe使用
  • 避免图片src为空
  • ·把样式表放在link 中
  • .把JavaScript放在页面底部

 JS怎样判断两个对象相等

1. 递归比较

通过递归地遍历对象的每个属性,并比较它们的值和类型,可以编写一个函数来检查两个对象是否相等。这种方法比较复杂,但可以处理嵌套对象和数组

function deepEqual(obj1, obj2) {  if (obj1 === obj2) {  return true;  }  if (typeof obj1 !== 'object' || obj1 === null ||  typeof obj2 !== 'object' || obj2 === null) {  return false;  }  const keys1 = Object.keys(obj1);  const keys2 = Object.keys(obj2);  if (keys1.length !== keys2.length) {  return false;  }  for (let key of keys1) {  if (!keys2.includes(key) || !deepEqual(obj1[key], obj2[key])) {  return false;  }  }  return true;  
}  // 示例  
const obj1 = { a: 1, b: { c: 2 } };  
const obj2 = { a: 1, b: { c: 2 } };  
console.log(deepEqual(obj1, obj2)); // true

2. 使用JSON.stringify()

一种简单但可能不总是可靠的方法是使用JSON.stringify()将对象转换成字符串,然后比较这些字符串。这种方法简单且易于实现,但它不能处理函数、undefined、循环引用等特殊情况。

function shallowEqualJson(obj1, obj2) {  return JSON.stringify(obj1) === JSON.stringify(obj2);  
}  // 示例  
const obj1 = { a: 1, b: 2 };  
const obj2 = { a: 1, b: 2 };  
console.log(shallowEqualJson(obj1, obj2)); // true

3. 使用库

许多流行的JavaScript库(如Lodash)提供了深度比较对象的功能。例如,Lodash的_.isEqual方法能够处理复杂的数据结构,包括嵌套对象和数组。

// 假设已经通过<script>标签或npm/yarn引入了Lodash  
const _ = require('lodash');  const obj1 = { a: 1, b: { c: 2 } };  
const obj2 = { a: 1, b: { c: 2 } };  
console.log(_.isEqual(obj1, obj2)); // true

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

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

相关文章

[css3] 如何设置边框颜色渐变

div {border: 4px solid;border-image: linear-gradient(to right, #8f41e9, #578aef) 1; }参考&#xff1a; 5种CSS实现渐变色边框&#xff08;Gradient borders方法的汇总

银行贷款信用评分不足?大数据帮你找回失去的“分”

在这个信息爆炸的时代&#xff0c;无论是个人还是企业&#xff0c;数据都成为了衡量信用和评估风险的重要依据。贷款、融资、求职甚至是日常消费&#xff0c;都可能因为一份好的数据报告而变得更加顺畅。那么&#xff0c;如何高效地查询自己的大数据&#xff0c;面对评分不足时…

文件上传漏洞(ctfshow web151-161)

Web151 F12修改源代码 exts后面png改为php 这样就可以上传php的文件了 Web152&#xff1a; 考点&#xff1a;后端不能单一校验 就是要传图片格式&#xff0c;抓个包传个png的图片 然后bp抓包修改php后缀解析 然后放包 Web153-web156 在php代码中可以使用“{}”代替“[]” …

uniapp时间戳转时间

时间戳转时间 utils页面 function timestampToTime(time) { const date new Date(time); const year date.getFullYear(); const month String(date.getMonth() 1).padStart(2, 0); // 月份从0开始&#xff0c;所以要加1&#xff0c;并补齐0 const day String(date…

尚庭公寓(五)

图片上传管理 由于公寓、房间等实体均包含图片信息&#xff0c;所以在新增或修改公寓、房间信息时&#xff0c;需要上传图片&#xff0c;因此我们需要实现一个上传图片的接口。 **1. 图片上传流程** 下图展示了新增房间或公寓时&#xff0c;上传图片的流程。 可以看出图片上传…

深度学习Week21——学习DenseNet算法

文章目录 深度学习Week21——学习DenseNet算法 一、前言 二、我的环境 三、学习DenseNet算法 四、代码复现 4.1 配置数据集 4.2 构建模型 五、模型应用与评估 5.1 编写训练函数 5.2 编写测试函数 5.3 训练模型 5.4 结果可视化 一、前言 &#x1f368; 本文为&#x1f517;365天…

第一个设计模式——单例模式

目录 一、特点&#xff1a; 二、实现单例模式步骤 三、饿汉式 四、懒汉式 五、双重检查锁 六、静态内部类 七、枚举 八、可能被反序列化和反射破坏什么意思&#xff1f; 九、如何解决呢&#xff1f; 一、特点&#xff1a; 唯一性&#xff0c;单例模式确保程序中只有一…

Qt自定义带前后缀图标的PushButton

写在前面 Qt提供QPushButton不满足带前后缀图标的需求&#xff0c;因此考虑自定义实现带前后缀图标的PushButton&#xff0c;方便后续快速使用。 效果如下&#xff1a; 同时可设置前后缀图标和文本之间间隙&#xff1a; 代码实现 通过前文介绍的Qt样式表底层实现 可以得…

HiveSQL中last_value和first_value函数的应用

概述 今天做一个数据分析&#xff0c;其中有一列数据有些有数据有些没数据&#xff0c;因此我们需要把每数据的进行补充进来因此我们需要使用last_value 函数和over 结合使用&#xff0c;但是遇到一个比较奇葩的问题不能按照预期进行处理。 新说原因&#xff1a; 由于我们要处…

vue3-环境变量-JavaScript-axio-基础使用-lzstring-字符串压缩-python

文章目录 1.Vue3环境变量1.1.简介1.2.全局变量的引用1.3.package.json文件 2.axio2.1.promise2.2.安装2.3.配置2.3.1.全局 axios 默认值2.3.2.响应信息格式 2.4.Axios的拦截器2.4.1.请求拦截器2.4.2.响应拦截器2.4.3.移除拦截器2.4.4.自定义实例添加拦截器 3.lz-string3.1.java…

java项目数据库 mysql 迁移到 达梦

目录 一、下载安装达梦数据库 1、下载 2、解压 3、安装 二、迁移 三、更改SpringBoot 的 yml文件 1、达梦创建用户 2、修改yml 一、下载安装达梦数据库 1、下载 下载地址 https://eco.dameng.com/download/ 点击下载 开发版 (X86平台) , 然后选择操作系统并点击立…

“科技创新‘圳’在变革”2025深圳电子展

电子产业作为现代社会的核心驱动力之一&#xff0c;正以前所未有的速度发展。在这样的背景下&#xff0c;深圳作为中国的经济特区和创新高地&#xff0c;又一次迎来了备受瞩目的盛会——2025深圳电子展览会。本次展览会定于2025年4月9日至11日&#xff0c;在深圳会展中心&#…

剪画小程序:手机提取人声和伴奏

在音乐的海洋中&#xff0c;我们常常渴望更纯粹地感受歌手的嗓音魅力。 如今&#xff0c;有了 剪画&#xff0c;人声分离不再是难题&#xff01; 想象一下&#xff0c;当您沉浸在一首动人的歌曲中&#xff0c;却希望更清晰地捕捉到歌手声音中的每一个微妙情感。 无论是经典老…

算能端侧 AI 盒子 Stable Diffusion 一秒一张图:AirBox BM1684X

本篇文章聊聊基于 端侧 AI 计算设备&#xff0c;20~30 瓦功耗运行大模型的算能 AirBox。 写在前面 去年的双十二的时候&#xff0c;在群里看到了一张照片&#xff0c;“手掌大小的 NUC”&#xff0c;但是能够跑大模型。 这个草就种下了。 今年 7 月初的时候&#xff0c;在上…

学习008-02-04-09 Assign a Standard Image(分配标准图像)

Assign a Standard Image&#xff08;分配标准图像&#xff09; This lesson explains how to associate an entity class with a standard image from the DevExpress.Images assembly. This image illustrates the entity class in the following sections of the UI: 本课介…

C# 知识点总结

入门 C#程序在.NET上运行&#xff0c;.NET framework包含两个部分&#xff1a; ①&#xff1a;.NET framework类库 ②&#xff1a;公共语言运行库CLR&#xff08;.NET虚拟机&#xff09; CLS&#xff08;公共语言规范&#xff09; CTS&#xff08;通用类型系统&#xff09; .N…

ubuntu20.04安装nginx,mysql8,php7.4详细教程,包成功

目录 1.更新索引 2.安装 Nginx 1.安装 Nginx&#xff1a; 2.启动 Nginx 服务并设置为开机自启&#xff1a; 3.开放防火墙的 80 端口&#xff1a; 4.检查 Nginx 是否正常运行&#xff1a; 3.安装 MySQL 8.0 1.首先&#xff0c;安装 MySQL 的仓库&#xff1a; 安装过程中你会看…

RewardBench:Evaluating Reward Models for Language Modeling

Leaderboard&#xff1a; https://hf.co/spaces/allenai/reward-bench Code&#xff1a; https://github.com/allenai/reward-bench Dataset&#xff1a; https://hf.co/datasets/allenai/reward-bench 在人类偏好的强化学习&#xff08;RLHF&#xff09;过程中&#xff0c;奖励…

【Vulnhub系列】Vulnhub_Seattle_003靶场渗透(原创)

【Vulnhub系列靶场】Vulnhub_Seattle_003靶场渗透 原文转载已经过授权 原文链接&#xff1a;Lusen的小窝 - 学无止尽&#xff0c;不进则退 (lusensec.github.io) 一、环境准备 1、从百度网盘下载对应靶机的.ova镜像 2、在VM中选择【打开】该.ova 3、选择存储路径&#xff0…

【AI大模型】-- 应用部署

一、GPU价格参考 有些在京东就能买到&#xff1a;https://item.jd.com/10065826100148.html美国商务部限制 GPU 对华出口的算力不超过 4800 TOPS 和带宽不超过 600 GB/s&#xff0c;导致最强的 H100 和 A100 禁售。英伟达随后推出针对中国市场的 A800 和 H800。 H100 与 A100&…