当前位置: 首页 > news >正文

JavaScript之WebAPIs-BOM

目录

  • BOM操作浏览器
    • 一、Window对象
      • 1.1 BOM(浏览器对象模型)
      • 1.2 定时器-延时函数
      • 1.3 js执行机制
      • 1.4 location对象
      • 1.5 navigator对象
      • 1.6 history对象
    • 二、本地存储
    • 三、补充
      • 数组中的map方法
      • 数组中的join方法
      • 数组中的forEach方法(重点)
      • 数组中的filter方法(重点)

BOM操作浏览器

一、Window对象

1.1 BOM(浏览器对象模型)

  • window对象是一个全局对象,是js中的顶级对象
  • document、alert()、console.log()都是window的属性,基本BOM的属性和方法都是我window的
  • 所有通过var定义再全局作用域中的变量、函数都会变成window对象的属性和方法
  • window对象下的属性和方法调用时可以略window

1.2 定时器-延时函数

延时函数与间歇函数不同,只执行一次
语法:setTimeout(回调函数,等待的毫秒数)
清楚延时函数:

let timer = setTimeout(回调函数,等待的毫秒数)
clearTimeout(timer)

【注意】:延时器需要等待,后面的代码先执行,每一次调用延时器都会产生一个新的延时器

1.3 js执行机制

JavaScript是单线程的,为了解决这个问题,利用多核CPU的计算能力,出现了同步和异步
同步和异步的本质区别:这条流水线上各个流程的执行顺序不同

  • 同步任务
    同步任务都在主线程上执行,形成一个执行栈
  • 异步任务
    就是的异步任务通过回调函数实现,异步任务相关添加到任务队列中,任务队列也叫消息队列
    异步任务一般有三个类型:① 普通事件(click、resize) ② 资源加载(load、error) ③ 定时器(setInterval、setTimeout)
    执行步骤:① 先执行执行栈中的同步任务 ② 异步任务放到任务队列 ③ 当执行栈中的同步任务执行完毕时,系统或依次读取任务队列中的异步任务
  • 事件循环(event loop):由于主线程不断地重复获取任务、执行任务再获取任务、在执行,这种机制就叫事件循环

1.4 location对象

location的数据类型是对象,它拆分并保存了url地址的各个部分
常用属性和方法:

  1. href属性
    获取完整的url地址,赋值时用于地址的跳转
    // 可以得到当前文件url地址
    console.log(location.href)
    // 可以通过js方式跳转到目标地址
    location.href = 'http://www.itcast.cn'
    
  2. search属性
    获取地址中携带的参数,符号?后面部分
  3. hash属性
    获取地址中携带的参数,符号#后面部分
  4. reload()方法:
    刷新页面,可以传入参数,传入true表示强制刷新

1.5 navigator对象

navigator的数据类型是对象,记录了浏览器自身的相关信息
常用属性和方法:

  1. 通过userAgent检测浏览器版本及平台
// 检测userAgent(浏览器信息)
!(function (){const userAgent = navigator.userAgent//验证是否为Android或iPhoneconst android = userAgent.match(/(Android);?[¥s¥/]+([¥d.]+)?/)const iphone = userAgent.match(/(iPhone¥sOS)¥s([¥d_]+)/)//如果是Android或iPhone,则跳转至移动站点if (android || iphone){location.href = 'http://m.itcast.cn}
})();

1.6 history对象

history的数据类型是对象,管理历史记录: 前进、后退、历史记录
常见属性和方法:

  • back() 后退功能
  • forward() 前进功能
  • go(参数) 前进后退,参数如果是1就前进一个页面如果是-1就后退一个页面

二、本地存储

  • 数据存储在用户浏览器
  • 设置、读取方便、甚至页面刷新不丢失数据
  • 容量较大,sessionStorage和localStorage约5M左右
  • 常见使用场景:页面刷新数据不丢失
    1. localStorage
      作用:可以把数据永久的存储在本地(用户的电脑),除非手动删除,否则关闭页面也会存在
      特性:① 可以多窗口共享 ② 以键值对形式存储使用
      语法:
      • 存储(有就是存储,没有就是修改) localStorage.setItem(key,value)
      • 获取 localStorage.getItem(key)
      • 删除 localStorage.removeItem(key)
        【注意】:本地存储只能存储字符串类型
    2. sessionStorage
      关闭浏览器时数据消失
      特性:① 生命周期为关闭浏览器窗口 ② 在同一个窗口下数据可以共享 ③ 以键值对的形式存储使用 ④ 用法与localStorage基本相同
  • 存储复杂数据类型
    解决本地存储只能存储字符串类型数据的问题
    把对象转换为JSON字符串:JSON.stringify(obj)
    把JSON字符串转换为对象:JSON.parse(localStorage.getItem('obj'))
    JSON对象:属性和值都有引号,且引号都用双引号

三、补充

数组中的map方法

遍历数组处理数据,并且返回新的数组
map也叫映射,有返回值,forEach没有
语法:

数组名.map(function (数组元素,元素索引) {})

数组中的join方法

用于把数组中的所有元素转换成一个字符串
转换后的数组元素通过参数里指定的分隔符进行分割,若为空字符串(‘’),则所有元素之间没有任何字符,参数为空则用逗号分隔
语法:

// 数组名.join('')
const arr = ['red颜色','blue颜色','green颜色']
console.log(arr.join(''))

数组中的forEach方法(重点)

遍历数组中的每个元素,无返回值,适合遍历数组对象
语法:

数组名.forEach(function (数组元素,元素索引) {})

数组中的filter方法(重点)

筛选数组符合条件的元素,并返回筛选之后元素的新数组不改变原数组,只能写比较运算符
语法: currentValue必须写,index可选

数组名.filter(function (currentValue, index) {return 筛选条件
})

eg:在这里插入图片描述

相关文章:

JavaScript之WebAPIs-BOM

目录 BOM操作浏览器一、Window对象1.1 BOM(浏览器对象模型)1.2 定时器-延时函数1.3 js执行机制1.4 location对象1.5 navigator对象1.6 history对象 二、本地存储三、补充数组中的map方法数组中的join方法数组中的forEach方法(重点)数组中的filter方法(重…...

Math Reference Notes: 数学思想和方法

文章目录 1. 数学思想1.1 数形结合思想1.2 转化思想1.3 分类讨论思想1.4 整体思想 2. 数学方法2.1 配方法2.2 因式分解法2.3 待定系数法2.4 换元法2.5 构造法2.6 等积法2.7 反证法2.8 判别式法 1. 数学思想 1.1 数形结合思想 定义:将数与形(代数与几何…...

Spring Cloud GateWay(4.1.4)

介绍 该项目提供了一个建立在 Spring 生态系统之上的 API 网关,包括:Spring 6、Spring Boot 3 和 Project Reactor。Spring Cloud Gateway 旨在提供一种简单而有效的方法来路由到 API,并为其提供跨领域关注点,例如:安…...

基于PHP+MYSQL开发制作的趣味测试网站源码

基于PHPMYSQL开发制作的趣味测试网站源码。可在后台提前设置好缘分, 自己手动在数据库里修改数据,数据库里有就会优先查询数据库的信息, 没设置的话第一次查询缘分都是非常好的 95-99,第二次查就比较差 , 所以如果要…...

【微信小程序】wx.navigateTo传参时不能使用const定义的数据类型

2024年7月21日更新 今日调试时发现似乎是因为使用vant-weapp时按照官方提示关闭了style:"v2"导致的此情况,打开之后无法复现该内容,特此提示。 以下是原内容 如题,笔者测试了好久才找到这个bug,想传递的数据是this.d…...

【Android studio环境搭建】Android studio连接夜神模拟器

Android studio连接夜神模拟器 一、 步骤 1.下载好Android Studio和夜神模拟器, 2.打开夜神模拟器,找到其安装目录下的 nox_adb.exe文件 3.右键进入cmd命令打开,管理员权限执行下面命令 PS D:\Program Files\Nox\bin> .\nox_adb.exe connect 127.…...

Qt:26.Qt项目:贪吃蛇游戏

一、项目功能演示: 开始界面可以点击进入游戏。 点击进入游戏之后,切换到选项界面,该界面可以选择游戏难度,回退,以及查询最近一次游戏得分。 游戏具体界面如下。贴图啥的可以自己换,本人审美不咋行&#x…...

通过HTML/CSS 实现各类进度条的功能。

需求:我们在开发中会遇到使用各式各样的进度条,因为当前插件里面进度条各式各样的,为了方便我们定制化的开发和方便修改样式,我们这里使用HTML和CSS样式来进行开发进度条功能。 通过本文学习我们会明白如何使用 HTML/CSS 创建各种…...

Opencv学习项目3——人脸识别

之前我们获取了一张图像的人脸信息,现在我们来使用特征点分析来匹配两张lyf照片的相似度 获取两张图片的人脸信息 import cv2 import face_recognition# 加载图像文件 img1 face_recognition.load_image_file(lyf1.png) img2 face_recognition.load_image_file(l…...

【js自学打卡11】生成器函数(generator函数)的使用总结+代码举例

力扣的js入门免费题刷完了,开始自己找题练练,顺便捡捡知识点 力扣2649 1.思路 一眼递归,但事实证明也可以直接flat手撕。 arr.flat(Infinity) //直接扁平化到最底层涉及到了一些关于生成器和异步编程相关的知识点,学一下。 2.…...

深入了解jdbc-02-CRUD

文章目录 操作和访问数据库Statement操作数据表的弊端sql注入问题PreparedStatement类ResultSet类与ResultSetMetaData类资源的释放批量插入 操作和访问数据库 数据库的调用的不同方式: Statement:用于执行静态 SQL 语句并返回它所生成结果的对象。PreparedStatem…...

《基于 Kafka + Quartz 实现时限质控方案》

📢 大家好,我是 【战神刘玉栋】,有10多年的研发经验,致力于前后端技术栈的知识沉淀和传播。 💗 🌻 CSDN入驻不久,希望大家多多支持,后续会继续提升文章质量,绝不滥竽充数…...

浏览器的卡顿与react的解决思路

以下内容是阅读过程中结合自己的思考而诞生的产物,不一定准确,但相反的,可能个人对实际情况有很大的误解。 仅做参考,欢迎指正。 前面提到浏览器显示的其实是渲染流程最后渲染出来的一张图片,而一个行为引起的副作用需…...

XXE:XML外部实体引入

XXE漏洞 如果服务器没有对客户端的xml数据进行限制,且版本较低的情况下,就可能会产生xxe漏洞 漏洞利用流程 1.客户端发送xml文件,其中dtd存在恶意的外部实体引用 2.服务器进行解析 3.服务器返回实体引用内容 危害:任意文件读…...

3D培训大师创新培训体验,加速空调关键组件的高效精准安装

如今,空调系统的复杂性和精密性与日俱增,对专业技术人员的要求也日益提高。尤其是决定空调是否能平稳运行的空调关键组件的装配培训,不再局限于传统的理论讲解和实体模型演示,而是更注重数字化、沉浸式学习。 案例背景 某空调公…...

PyTorch 深度学习实践-循环神经网络(高级篇)

视频指路 参考博客笔记 参考笔记二 文章目录 上课笔记总代码练习 上课笔记 个人能力有限,重看几遍吧,第一遍基本看不懂 名字的每个字母都是一个特征x1,x2,x3…,一个名字是一个序列 rnn用GRU 用ASCII表作为词典,长度为128&#x…...

这才是老板喜欢的电子信息类简历

点击可直接使用...

MySQL学习之事务,锁机制

事务 什么是事务? 事务就是逻辑上的一组操作,要么全做,要么全不做 事务经典例子:转账,转账需要两个操作,从一个人账户上减钱,在另一个账户上加钱,比如说小红给小明转账100元&…...

开源知识付费小程序源码 内容付费系统php源码 含完整图文部署教程

在当今数字化时代,知识付费作为一种新型的经济模式,正逐渐受到越来越多内容创作者、专家及商家的青睐。开源知识付费小程序源码和内容付费系统PHP源码作为实现这一模式的重要工具,为构建高效、安全、可扩展的知识付费平台提供了强大的技术支持…...

时序数据库如何选型?详细指标总结!

工业物联网场景,如何判断什么才是好的时序数据库? 工业物联网将机器设备、控制系统与信息系统、业务过程连接起来,利用海量数据进行分析决策,是智能制造的基础设施,并影响整个工业价值链。工业物联网机器设备感知形成了…...

未来机器人的大脑:如何用神经网络模拟器实现更智能的决策?

编辑:陈萍萍的公主一点人工一点智能 未来机器人的大脑:如何用神经网络模拟器实现更智能的决策?RWM通过双自回归机制有效解决了复合误差、部分可观测性和随机动力学等关键挑战,在不依赖领域特定归纳偏见的条件下实现了卓越的预测准…...

深度学习在微纳光子学中的应用

深度学习在微纳光子学中的主要应用方向 深度学习与微纳光子学的结合主要集中在以下几个方向: 逆向设计 通过神经网络快速预测微纳结构的光学响应,替代传统耗时的数值模拟方法。例如设计超表面、光子晶体等结构。 特征提取与优化 从复杂的光学数据中自…...

工业安全零事故的智能守护者:一体化AI智能安防平台

前言: 通过AI视觉技术,为船厂提供全面的安全监控解决方案,涵盖交通违规检测、起重机轨道安全、非法入侵检测、盗窃防范、安全规范执行监控等多个方面,能够实现对应负责人反馈机制,并最终实现数据的统计报表。提升船厂…...

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility 1. 实验室环境1.1 实验室环境1.2 小测试 2. The Endor System2.1 部署应用2.2 检查现有策略 3. Cilium 策略实体3.1 创建 allow-all 网络策略3.2 在 Hubble CLI 中验证网络策略源3.3 …...

STM32F4基本定时器使用和原理详解

STM32F4基本定时器使用和原理详解 前言如何确定定时器挂载在哪条时钟线上配置及使用方法参数配置PrescalerCounter ModeCounter Periodauto-reload preloadTrigger Event Selection 中断配置生成的代码及使用方法初始化代码基本定时器触发DCA或者ADC的代码讲解中断代码定时启动…...

3403. 从盒子中找出字典序最大的字符串 I

3403. 从盒子中找出字典序最大的字符串 I 题目链接:3403. 从盒子中找出字典序最大的字符串 I 代码如下: class Solution { public:string answerString(string word, int numFriends) {if (numFriends 1) {return word;}string res;for (int i 0;i &…...

Rapidio门铃消息FIFO溢出机制

关于RapidIO门铃消息FIFO的溢出机制及其与中断抖动的关系,以下是深入解析: 门铃FIFO溢出的本质 在RapidIO系统中,门铃消息FIFO是硬件控制器内部的缓冲区,用于临时存储接收到的门铃消息(Doorbell Message)。…...

JAVA后端开发——多租户

数据隔离是多租户系统中的核心概念,确保一个租户(在这个系统中可能是一个公司或一个独立的客户)的数据对其他租户是不可见的。在 RuoYi 框架(您当前项目所使用的基础框架)中,这通常是通过在数据表中增加一个…...

【MATLAB代码】基于最大相关熵准则(MCC)的三维鲁棒卡尔曼滤波算法(MCC-KF),附源代码|订阅专栏后可直接查看

文章所述的代码实现了基于最大相关熵准则(MCC)的三维鲁棒卡尔曼滤波算法(MCC-KF),针对传感器观测数据中存在的脉冲型异常噪声问题,通过非线性加权机制提升滤波器的抗干扰能力。代码通过对比传统KF与MCC-KF在含异常值场景下的表现,验证了后者在状态估计鲁棒性方面的显著优…...

STM32---外部32.768K晶振(LSE)无法起振问题

晶振是否起振主要就检查两个1、晶振与MCU是否兼容;2、晶振的负载电容是否匹配 目录 一、判断晶振与MCU是否兼容 二、判断负载电容是否匹配 1. 晶振负载电容(CL)与匹配电容(CL1、CL2)的关系 2. 如何选择 CL1 和 CL…...