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.mzph.cn/web/50703.shtml

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

相关文章

微服务面试-分布式 注册中心 远程调用 保护

标红的原理还是不太熟悉 重新看 分布式事务 CAP理论 Consistency&#xff08;一致性&#xff09; Availability&#xff08;可用性&#xff09; Partition tolerance &#xff08;分区容错性&#xff09; BASE 理论 就是做取舍 cap三选二 AT模式脏写 TCC模式 注册中…

2024年7月29日(web nginx)

web 一、web基本概念和常识 Web:为用户提供的一种在互联网上浏览信息的服务,Web服务是动态的、可交互的、跨平台的和图形化的。 Web 服务为用户提供各种互联网服务,这些服务包括信息浏览服务,以及各种交互式服务,包括聊天、购物、学习等等内容。 Web 应用开发也经过了几代技术…

MySQL 执行计划详解

文章目录 一. 概念二. 语法三. 详解各字段1. id2. select_type3. table4. partitions5. type6. possible_keys与key7. key_len8. ref9. rows10. filtered11. Extra 一. 概念 有了慢查询后&#xff0c;需要对慢查询语句进行分析。一条查询语句经过MySQL查询优化器后&#xff0c…

最新 【Navicat Premium 17.0.8】简体中文版破解激活永久教程

官方下载地址&#xff1a; https://www.navicat.com.cn/download/navicat-premium 百度网盘补丁链接 链接: https://pan.baidu.com/s/11hu414Honi3Y9dPQ6-07JQ?pwd04mu 提取码: 04mu 未安装过的用户可直接跳过该步骤&#xff0c;如果已安装Navicat&#xff0c;记得先卸载干净…

阿里云主机 安装RabbitMQ

一、操作系统 用的是Alibaba Cloud Linux release 3 (Soaring Falcon)系统&#xff0c;可以通过命令&#xff1a;lsb_release -a 查看系统信息。 二、安装RabbitMQ RabbitMQ 是基于 Erlang 语言构建的&#xff0c;要安装RabbitMQ&#xff0c;需先安装Erlang环境。通过Erlang V…

【图解网络】学习记录

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 TCP/IP 网络模型有哪几层&#xff1f;键入网址到网页显示&#xff0c;期间发生了什么&#xff1f;Linux 系统是如何收发网络包的&#xff1f;NAPIHTTP 是什么&#…

Win10出现错误代码0x80004005 一键修复指南

对于 Windows 10 用户来说&#xff0c;错误代码 0x80004005 就是这样一种迷雾&#xff0c;它可能在不经意间出现&#xff0c;阻碍我们顺畅地使用电脑。这个错误通常与组件或元素的缺失有关&#xff0c;它可能源自注册表的错误、系统文件的损坏&#xff0c;或者是软件的不兼容。…

PyTorch 的 .pt 文件是什么?以及都能存储什么样的数据格式和复合数据格式?加载 train.pt 文件的一个代码示例

&#x1f349; CSDN 叶庭云&#xff1a;https://yetingyun.blog.csdn.net/ 一、PyTorch 的 .pt 文件是什么&#xff1f; .pt 文件的基本概念&#xff1a; .pt 文件是 PyTorch 中特有的一种文件格式&#xff0c;用于保存和加载各类数据。.pt为 PyTorch 的缩写。此文件格式极其灵…

dotnet-starter-kit:一个Web API+Blazor多租户、模块化、简洁DDD架构!

推荐一个Web APIBlazor多租户、模块化、简洁DDD项目框架。 01 项目简介 dotnet-starter-kit是一个基于 .NET 8 的开源项目&#xff0c;架构构建基于 Clean Architecture 原则的解决方案。支持多租户、模块化&#xff0c;一个开箱即用的项目&#xff0c;方便我们快速开发项目。…

GitEval — 预测你的 GitHub 个人资料的质量

使用机器学习来预测你是否擅长编码 可直接在橱窗里购买&#xff0c;或者到文末领取优惠后购买&#xff1a; 如果你曾经申请过技术职位&#xff0c;你可能已经向公司发送了你的 GitHub 个人资料链接。此个人资料中的信息可以很好地表明你的编码能力以及是否适合团队。所有这些信…

Spring事件机制

文章目录 一、Spring事件二、实现Spring事件1、自定义事件2、事件监听器2.1 实现ApplicationListener接口2.2 EventListener2.3 TransactionalEventListener 3、事件发布4、异步使用 三、EventBus1、事件模式2、EventBus三要素3、同步事件3.1 定义事件类3.2 定义事件监听3.3 测…

[tomato]靶机复现漏洞详解!

靶机地址&#xff1a; https://download.vulnhub.com/tomato/Tomato.ova 靶机环境&#xff1a;Vmware 网络&#xff1a;NAT模式 信息收集&#xff1a; arp-scan -l 扫描靶机ip地址 扫描开放的端口信息 nmap -sS -sV -p- 192.168.77.135 发现开放端口21&#xff…

2024年7月30日 十二生肖 今日运势

小运播报&#xff1a;2024年7月30日&#xff0c;星期二&#xff0c;农历六月廿五 &#xff08;甲辰年辛未月乙未日&#xff09;&#xff0c;法定工作日。 红榜生肖&#xff1a;兔、马、猴 需要注意&#xff1a;狗、鼠、牛 喜神方位&#xff1a;西北方 财神方位&#xff1a;…

git 推送时出现错误 Locking support detected on remote “origin“

背景&#xff1a;代码托管是局域网搭建的gitlab 按照提示配置 lfs.locksverify true 还是没有用。 网上搜索了一番&#xff0c;其中有人提到可能时服务器磁盘满了&#xff0c;连到服务器上 df -h 查看&#xff0c; 发现根目录已经写满了&#xff1a; 使用命令行&#xff1a; d…

C/C++进阶 (8)哈希表(STL)

个人主页&#xff1a;仍有未知等待探索-CSDN博客 专题分栏&#xff1a;C 本文着重于模拟实现哈希表&#xff0c;并非是哈希表的使用。 实现的哈希表的底层用的是线性探测法&#xff0c;并非是哈希桶。 目录 一、标准库中的哈希表 1、unordered_map 2、unordered_set 二、模…

【参会邀请】第四届区块链技术与信息安全国际会议(ICBCTIS 2024)诚邀相聚江城!

我们诚挚地邀请您参与第四届区块链技术与信息安全国际会议&#xff08;ICBCTIS 2024&#xff09;。本届会议将于2024年8月17日~19日在中国武汉召开。会议将围绕区块链技术与信息安全等相关研究领域&#xff0c;特邀国内外数位在此领域学术卓越的学者专家做相关致辞与报告&#…

如何使用虚拟机如何安装 Kali Linux ?

1.下载虚拟机&#xff1a;https://www.virtualbox.org/wiki/Downloads 选择你的系统版本 2.下载kali linux系统镜像&#xff1a;https://www.kali.org/get-kali/#kali-virtual-machines 全部下载完成后&#xff0c;我们会得到以下文件&#xff01; 1.压缩Kali Linux压缩包 2.安…

Django实战:开启数字化任务管理的新纪元

&#x1f680; Django实战&#xff1a;开启数字化任务管理的新纪元 &#x1f310; &#x1f4d6; 引言 在数字化转型的浪潮中&#xff0c;任务管理的智能化成为提升组织效能的关键。今天&#xff0c;我将带领大家深入了解我们最新开发的OFTS系统——一款创新的组织任务管理软…

【Opencv】色彩空间 color space

import os import cv2 img cv2.imread(os.path.join(.,dog.jpg)) # 在opencv中使用imread,读取的图片每个像素都是bgr色彩&#xff0c;蓝色&#xff0c;绿色&#xff0c;红色 cv2.imshow(img,img) cv2.waitKey(0) # 颜色空间转化&#xff1a;BGR2RGB img_rgb cv2.cvtC…

【Python学习手册(第四版)】学习笔记10-语句编写的通用规则

个人总结难免疏漏&#xff0c;请多包涵。更多内容请查看原文。本文以及学习笔记系列仅用于个人学习、研究交流。 本文较简单&#xff0c;5-10分钟即可阅读完成。介绍Python基本过程语句并讨论整体语法模型通用规则&#xff08;冒号、省略、终止、缩进、其他特殊情况&#xff0…