公式面试题总结(三)

13.说说你对 BOM 的理解,常见的 BOM 对象你了解哪些?

BOM (Browser Object Model)浏览器对象模型

提供了独立于内容与浏览器窗口进行交互的对象
其作用就是跟浏览器做一些交互效果
比如如何进行页面的后退,前进,刷新,浏览器的窗口发生变化,滚动条的滚动,以及
获取客户的一些信息如:浏览器品牌版本,屏幕分辨率
浏览器的全部内容可以看成 DOM, 整个浏览器可以看成 BOM
window 对象:
        ◼ BOM 的顶层对象,代表整个浏览器窗口。
        ◼ 所有全局变量、函数以及 BOM 的其他对象都是 window 对象的属性。
        ◼ 提供了许多方法和属性 open(),alert(), prompt(), setTimeout(), location, navigator 等。
location 对象:
        ◼ 提供有关当前页面 URL 的信息,并且可以用来导航到新的 URL。
        ◼ 常用属性有 href(完整 URL), pathname(路径名), search(查询字符串)等,
        ◼ 方法有 assign(), reload(), replace()等。
navigator 对象:
        ◼ 提供了关于浏览器的信息,如名称、版本号和用户代理字符串等。
        ◼ 常用于检测浏览器类型和能力。
history 对象:
        ◼ 通过脚本访问浏览器的浏览历史。
        ◼ 对象只提供了前进(forward())、后退(back())和重载当前页面(go())等有限的方法,并
        不能读取具体的历史记录条目。
screen 对象:
         提供了关于用户屏幕的信息,如宽度、高度、可用宽度、可用高度、色彩深度等。
localStorage/sessionStorage 对象:
这两者都是 Web Storage API 的一部分,用于在用户的浏览器上存储数据。
localStorage 用于持久化存储,而 sessionStorage 的数据仅在当前会话期间有效。
document 对象:
        ◼ 代表当前页面的 HTML 文档。
        ◼ 虽然严格来说它属于 DOM(Document Object Model)的一部分,但因为可以直
        接通过 window.document 访问,所以也常被视为 BOM 的一部分。
        ◼ 它提供了操作文档内容、结构和样式的方法,如 getElementById(), querySelector(),
        createElement()等。

14.Javascript 本地存储的方式有哪些?区别及应用场景?

Cookie

小型文本文件,为了辨别用户身份而储存在用户本地终端上的数据
不超过 4KB 的小型文本数据
由 Name、Value 和几个控制 cookie 有效期、安全性、使用范围的可选属性组成
每次请求中都会被发送,不使用 HTTPS 对其加密,保存的信息很容易被窃取,导
致安全风险。
应用场景: 标记用户与跟踪用户行为的情况

sessionStorage

持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的
存储的信息在同一域中是共享的
无法像 Cookie 一样设置过期时间
只能存入字符串,无法直接存对象

应用场景:适合长期保存在本地的数据(令牌)

localStorage

一旦页面(会话)关闭,sessionStorage 将会删除数据
应用场景: 敏感账号一次性登录

indexedDB

一种低级 API,用于客户端存储大量结构化数据(包括, 文件/ blobs)。
该 API 使用索引来实现对该数据的高性能搜索
应用场景: 存储大量数据的情况、在线文档(富文本编辑器)保存编辑历史的情况
优点
        ◆ 储存量理论上没有上限
        ◆ 所有操作都是异步的,相比 LocalStorage 同步操作性能更高,尤其是数据量
        较大时
        ◆ 原生支持储存 JS 的对象
        ◆ 是个正经的数据库,意味着数据库能干的事它都能干
缺点
        ◆ 操作非常繁琐
        ◆ 本身有一定门槛
关于 indexedDB 的使用基本使用步骤 如下:
打开数据库并且开始一个事务 创建一个 object store
构建一个请求来执行一些数据库操作,像增加或提取数据等。
通过监听正确类型的 DOM 事件以等待操作完成。
在操作结果上进行一些操作(可以在 request 对象中找到)
关于使用 indexdb 的使用会比较繁琐,大家可以通过使用 Godb.js 库进行缓
存,最大化的降低操作难度

15.什么是防抖和节流?有什么区别?如何实现?

防抖:

在事件触发后,等待一段时间后再执行处理函数。如果在等待时间内又发生了该
事件,就重新开始计时。简单来说,就是将多次连续触发的事件合并成一次执行。

应用场景

用户输入搜索框时,可以使用防抖来减少实时搜索接口的请求次数。
窗口大小调整时,可以使用防抖来避免频繁调整布局。

实现方式

使用 setTimeout 延迟执行函数。
每次触发事件时先清除之前设置的定时器,再重新设置新的定时器。

节流:

节流是指在一定时间间隔内只触发一次事件。无论事件触发多频繁,在指定时间
间隔内,只会执行一次处理函数。

应用场景

页面滚动、resize 等频繁触发的事件,可以使用节流来限制处理函数的
执行频率。

实现方式

使用定时器控制事件的触发间隔。
在定时器执行时,更新标志位以防止重复触发事件。
在指定时间间隔后清除定时器,再次允许事件触发。

区别:

防抖是等待一段时间后再执行,而节流是在时间间隔内只执行一次。
防抖合并连续的触发事件,节流限制事件的触发频率。
防抖会延迟执行处理函数,节流会按照固定的时间间隔执行处理函数。

16.如何通过 JS 判断一个数组

使用 Array.isArray()

这是 ES6 引入的一个原生方法,专门用来检测给定的对象是否为数组。
let arr = [1, 2, 3];
console.log(Array.isArray(arr)); // 输出: true

使用 Object.prototype.toString.call():

这个方法会返回一个表示该对象的字符串,对于数组,它会返回 “[object Array]”。
let arr = [1, 2, 3];
console.log(Object.prototype.toString.call(arr) === '[object Array]'); // 输出: true

使用 instanceof:

这个操作符检查构造函数的 prototype 属性是否出现在某个实例对象的原型链上。
let arr = [1, 2, 3];
console.log(arr instanceof Array); // 输出: true

通过 constructor 属性:

虽然这种方法可行,但是不推荐,因为 constructor 属性可以被轻易篡改。
let arr = [1, 2, 3];
console.log(arr.constructor === Array); // 输出: true

通过原型链上的 isPrototypeOf() 方法:

这种方法相对较少使用,也是基于原型链的检查。
let arr = [1, 2, 3];
console.log(Array.prototype.isPrototypeOf(arr)); // 输出: true

创建一个数组

使用 Array 构造函数

let array1 = new Array(); // 创建一个空数组
let array2 = new Array(3); // 创建一个长度为 3 的空数组
let array3 = new Array("Apple", "Banana", "Cherry");

使用字面量语法

最常见的创建数组,更简洁且推荐使用。
let array4 = []; // 创建一个空数组
let array5 = ["Apple", "Banana", "Cherry"]; // 创建包含三个初始元素的数组

使用 Array.of()

将一组参数转换为数组
let array6 = Array.of(1, 2, 3); // 创建包含三个元素的数组
let array7 = Array.of(0); // 正确创建只有一个元素 0 的数组,与 new Array(0)不同

通过扩展运算符(...)

复制或合并数组,快速创建数组。
let array8 = [..."hello"]; // ["h", "e", "l", "l", "o"]

通过 Array.from()

将类数组对象(拥有 length 属性和索引元素)或可迭代对象转换为真正的数组。
let arrayLike = {0: 'a', 1: 'b', 2: 'c', length: 3};
let array9 = Array.from(arrayLike); // 创建数组 ["a", "b", "c"]
let iterable = new Map([["a", 1], ["b", 2]]);
let array10 = Array.from(iterable); // 创建数组 [["a", 1], ["b", 2]]

17.说说你对作用域链的理解

作用域 ,即变量(变量作用域又称上下文)和函数生效(能被访问)的区域或集合
一个包含一系列作用域的列表,这个列表定义了变量的可访问性。 每个函数在创建时都会生成自己的作用域链,这个链最初由全局作用域组成。
当函数嵌套时,内部函数的作用域链会包含外部函数的作用域,以此类推,形成了一个
链条。
将作用域分成:
全局作用域
任何不在函数中或是大括号中声明的变量
可以在程序的任意位置访问
函数作用域
也叫局部作用域,如果一个变量是在函数内部声明的它就在一个函数作用域下面。
这些变量只能在函数内部访问,不能在函数以外去访问
块级作用域
ES6 引入了 let 和 const 关键字,和 var 关键字不同
在大括号中使用 let 和 const 声明的变量存在于块级作用域中。
在大括号之外不能访问这些变量
词法作用域 ,又叫 静态作用域 ,变量被创建时就确定好了,而非执行阶段确定的。也就是说
我们写好代码时它的作用域就确定了,JavaScript 遵循的就是词法作用域
作用域链
当在 Javascript 中使用一个变量的时候
首先 Javascript 引擎会尝试在当前作用域下去寻找该变量,
如果没找到,再到它的上层作用域寻找,
以此类推直到找到该变量或是已经到了全局作用域
如果在全局作用域里仍然找不到该变量,它就会在全局范围内隐式声明该变量(非严格
模式下)或是直接报错

18.JavaScript 原型,原型链 ? 有什么特点?

原型:

每个实例都会被分配到一个 prototype 属性,指向一个对象,此对象为函数的原型对象,
这个原型对象的所有属性和方法供函数所拥有。
默认情况下创建函数时,函数的原型上都会添加 constructor,这个 constructor 指向当
前函数对象。

原型链:

每个对象都有__proto__属性,由于原型本身也是一个对象,也有该属性,那么就可以利
用这一属性继续向上一级查找,这样就形成一条链式结构。
最顶级的对象是 Object(window),在往上就是 null。

原型链的查找机制:

查找属性时,先在对象自身查找,如果对象本身没有,就去原型中查找
如果还没有就继续向原型链的上一级查找,找到就输出。
如果指导 object 层还没有,最终返回 undefined。

事件

用户和浏览器交互瞬间

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

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

相关文章

“螺丝钉“好,还是“杂役“好

本篇中,螺丝钉指代大厂工作,杂役则代表小公司工作。这无疑是一个见仁见智且颇为棘手的问题,需结合自身年龄、所处环境等实际状况来做出抉择。倘若一定要给出个人观点:“刚毕业应选择大厂螺丝钉,这对自身眼界的开阔以及…

将AIRNet集成到yolov8中,实现端到端训练与推理

AIRNet是一个图像修复网络,支持对图像进行去雾、去雨、去噪声的修复。其基于对比的退化编码器(CBDE),将各种退化类型统一到同一嵌入空间;然后,基于退化引导恢复网络(DGRN)将嵌入空间修复为目标图像。可以将AIRNet的输出与yolov8进行端到端集成,实现部署上的简化。 本博…

关于 Redis 中集群

哨兵机制中总结到,它并不能解决存储容量不够的问题,但是集群能。 广义的集群:只要有多个机器,构成了分布式系统,都可以称之为一个“集群”,例如主从结构中的哨兵模式。 狭义的集群:redis 提供的…

java面试题:什么时候使用抽象类?什么时候使用接口

**使用抽象类的情景:** 1. **需要共享实现:** 当你想要为一组相关类提供一些通用的实现代码时,可以使用抽象类。抽象类可以包含具体的方法实现,这些实现可以被其子类继承和复用。 2. **代码复用:** 抽象类有助于消除代…

Django学习二:配置mysql,创建model实例,自动创建数据库表,对mysql数据库表已经创建好的进行直接操作和实验。

文章目录 前言一、项目初始化搭建1、创建项目:test_models_django2、创建应用app01 二、配置mysql三、创建model实例,自动创建数据库表1、创建对象User类2、执行命令 四、思考问题(****)1、是否会生成新表呢(答案报错&…

力扣第197题:上升的温度

关注微信公众号 数据分析螺丝钉 免费领取价值万元的python/java/商业分析/数据结构与算法学习资料 在本篇文章中,我们将详细解读力扣第197题“上升的温度”。通过学习本篇文章,读者将掌握如何使用SQL语句来解决这一问题,并了解相关的复杂度分…

React保姆级教学

React保姆级教学 一、创建第一个react项目二、JSX基本语法与react基础知识1、 插值语法:2、 循环一个简单列表3、 实现简单条件渲染4、 实现复杂的条件渲染5、 事件绑定6、 基础组件(函数组件)7、 使用useState8、 基础样式控制9、 动态类名1…

Dubbo的Cluster策略与Directory实现

Dubbo是一个高性能的Java RPC框架,它提供了丰富的集群容错机制和灵活的路由策略。在Dubbo中,Cluster和Directory是两个核心概念,它们共同工作以实现服务的负载均衡和集群管理。 Cluster 策略 Cluster策略负责将多个服务提供者组合成一个逻辑…

好书推荐之《生成式 AI 入门与亚马逊云科技AWS实战》

最近小李哥在亚马逊云科技峰会领到了一本关于如何在云计算平台上设计、开发GenAI应用的书,名字叫:《生成式 AI 入门与亚马逊云科技AWS实战》,今天仔细看了下,发现这本书讲的真的很好!他涵盖了当下AI领域所有热门的技术…

《软件定义安全》之四:什么是软件定义安全

第4章 什么是软件定义安全 1.软件定义安全的含义 1.1 软件定义安全的提出 虚拟化、云计算、软件定义架构的出现,对安全体系提出了新的挑战。如果要跟上网络演进的步伐和业务快速创新的速度,安全体系应该朝以下方向演变。 𝟭 安全机制软件…

牛客周赛Round 36

链接:登录—专业IT笔试面试备考平台_牛客网 来源:牛客网 A 吃冰 Rana喜欢所有抹茶食品,但是她不喜欢吃热的,她在吃完一份热的抹茶食品后必须至少连续吃两份冰的抹茶食品来降温。 现在有 a 份冰的抹茶食品和 b 份热的抹茶食品&…

设计软件有哪些?照明工具篇,渲染100邀请码1a12

阴影和照明涉及到图片的真实感和氛围,所以熟练使用照明工具是设计师的必备能力,这次我们介绍一些照明工具。 1、VRaySun VRaySun是VRay渲染器中的一个功能,用于模拟太阳光源。它是一种方便易用的光源类型,能够产生逼真的日光效果…

解密Spring Boot:深入理解条件装配与条件注解

文章目录 一、条件装配概述1.1 条件装配的基本原理1.2 条件装配的作用 二、常用注解2.1 ConditionalOnClass2.2 ConditionalOnBean2.3 ConditionalOnProperty2.4 ConditionalOnExpression2.5 ConditionalOnMissingBean 三、条件装配的实现原理四、实际案例 一、条件装配概述 1…

Wireshark TS | 应用传输丢包问题

问题背景 仍然是来自于朋友分享的一个案例,实际案例不难,原因也就是互联网线路丢包产生的重传问题。但从一开始只看到数据包截图的判断结果,和最后拿到实际数据包的分析结果,却不是一个结论,方向有点跑偏,…

spring:基于SimpleModule实现动态管理jackson的序列化器(JsonSerializer)和反序列化器(JsonDeserializer)

Module jackson的(com.fasterxml.jackson.databind.Module)设计作为一个扩展的接口,可以注册到ObjectMapper实例(ObjectMapper.registerModule),为默认ObjectMapper实例提供功能扩展;比如用于定义为数据类型指定序列化和反序列化。 jackson为…

MySQL: 索引与事务

文章目录 1. 索引 (Index)1.1 概念1.2 作用1.3 使用场景1.4 索引的使用1.5 索引的使用案例 (不要轻易尝试)1.6 索引背后的数据结构1.7 重点总结 2.事务2.1 为什么要使用事务2.2 事务的概念2.3 事务的使用2.4 对事务的理解2.5 事务的基本特性 1. 索引 (Index) 1.1 概念 索引是…

深入STL之 栈与队列:数据结构探索之旅

📝个人主页🌹:Eternity._ ⏩收录专栏⏪:C “ 登神长阶 ” 🤡往期回顾🤡:模拟实现list与迭代器 🌹🌹期待您的关注 🌹🌹 ❀stack和queue &#x1f4…

探索软件工程师在新能源汽车研发中的角色与贡献

随着全球对可持续发展的关注不断增加,新能源汽车的研发与应用成为了汽车行业的一个重要方向。作为软件工程师,参与新能源汽车研发不仅能够推动科技创新,还能为环保事业贡献力量。本文将深入探讨软件工程师在新能源汽车研发中的具体贡献、所需…

C#操作MySQL从入门到精通(20)——更新数据

前言: 谈到数据库,大家最容易脱口而出的就是增删改查,本文所说的更新数据就是增删改查的改,改变数据的意思。 本文测试使用的数据库如下: 1、更新一列 所谓更新一列的意思就是只更改一列数据,并且通常要使用where条件,因为不加这个条件的话会导致将所有行的数据进行…

数据可视化Python实现超详解【数据分析】

各位大佬好 ,这里是阿川的博客,祝您变得更强 个人主页:在线OJ的阿川 大佬的支持和鼓励,将是我成长路上最大的动力 阿川水平有限,如有错误,欢迎大佬指正 Python 初阶 Python–语言基础与由来介绍 Python–…