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:在这里插入图片描述

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

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

相关文章

2024可信数据库发展大会:TDengine CEO 陶建辉谈“做难而正确的事情”

在当前数字经济快速发展的背景下,可信数据库技术日益成为各行业信息化建设的关键支撑点。金融、电信、能源和政务等领域对数据处理和管理的需求不断增加,推动了数据库技术的创新与进步。与此同时,人工智能与数据库的深度融合、搜索与分析型数…

Elasticsearch基础(五):使用Kibana Discover探索数据

文章目录 使用Kibana Discover探索数据 一、添加样例数据 二、数据筛选 三、保存搜索 使用Kibana Discover探索数据 一、添加样例数据 登录Kibana。在Kibana主页的通过添加集成开始使用区域,单击试用样例数据。 在更多添加数据的方式页面下方,单击…

sublime中无法找到Package Control或Install Package

在Crtl Shift P 中无法查找到Package Control或Install Package或调用产生报错。 可以尝试在 首选项 ---- > 设置中 检查配置文件"ignored_packages":紧跟的中括号中是否为空,如果不为空请删除其中内容。 如果不确定内容,可以用下面的…

【Python】使用库 -- 详解

库就是别人已经写好了的代码,可以让我们直接拿来用。 一个编程语言能不能流行起来,一方面取决于语法是否简单方便容易学习,一方面取决于生态是否完备。所谓的 “生态” 指的就是语言是否有足够丰富的库,来应对各种各样的场景。在…

TCP与UDP的理解

文章目录 UDP协议UDP协议的特点UDP的应用以及杂项 TCP协议TCP协议段格式解释和TCP过程详解确认应答机制 -- 序号和确认序号以及6位标志位中的ACK超时重传机制连接管理机制 与标志位SYN,FIN,ACK滑动窗口与16位窗口大小流量控制拥塞控制延迟应答捎带应答和面向字节流粘包问题TCP异…

Docker核心技术:容器技术要解决哪些问题

云原生学习路线导航页(持续更新中) 本文是 Docker核心技术 系列文章:容器技术要解决哪些问题,其他文章快捷链接如下: 应用架构演进容器技术要解决哪些问题(本文)Docker的基本使用Docker是如何实…

深入理解Java 8的流式API:简化代码,提升效率

文章目录 深入理解Java 8的流式API:简化代码,提升效率一、流 Stream二、Int | Long | Double Stream三、收集器 Collectors 深入理解Java 8的流式API:简化代码,提升效率 Java 8引入了Stream API,它提供了一种新的抽象&…

JavaDS —— 二叉树

树的基本概念 树是一种非线性的数据结构,它是由n(n>0)个有限结点组成一个具有层次关系的集合。把它叫做树是因为它看 起来像一棵倒挂的树,也就是说它是根朝上,而叶朝下的。 树形结构中,子树之间不能有…

SpringCloud------Sentinel(微服务保护)

目录 雪崩问题 处理方式!!!技术选型 Sentinel 启动命令使用步骤引入依赖配置控制台地址 访问微服务触发监控 限流规则------故障预防流控模式流控效果 FeignClient整合Sentinel线程隔离-------故障处理线程池隔离和信号量隔离​编辑 两种方式优缺点设置方式 熔断降级-----…

tinymce富文本支持word内容同时粘贴文字图片上传 vue2

效果图 先放文件 文件自取tinymce: tinymce富文本简单配置及word内容粘贴图片上传 封装tinymce 文件自取&#xff1a;tinymce: tinymce富文本简单配置及word内容粘贴图片上传 页面引用组件 <TinymceSimplify refTinymceSimplify v-model"knowledgeBlockItem.content…

用html做python教程01

用html做python教程01 前言开肝构思实操额外修饰更换字体自适应 最后 前言 今天打开csdn的时候&#xff0c;看见csdn给我推荐了一个python技能书。 说实话&#xff0c;做得真不错。再看看我自己&#xff0c;有亿点差距&#x1f61f;。 开肝 先创建一个文件&#xff0c;后缀…

【Vue3】工程创建及目录说明

【Vue3】工程创建及目录说明 背景简介开发环境开发步骤及源码 背景 随着年龄的增长&#xff0c;很多曾经烂熟于心的技术原理已被岁月摩擦得愈发模糊起来&#xff0c;技术出身的人总是很难放下一些执念&#xff0c;遂将这些知识整理成文&#xff0c;以纪念曾经努力学习奋斗的日…

【linux】Shell脚本中basename和dirname的详细用法教程

✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯,先赞后看哦~🎈🎈 🏆 作者简介:景天科技苑 🏆《头衔》:大厂架构师,华为云开发者社区专家博主,阿里云开发者社区专家博主,CSDN全栈领域优质创作者,掘金优秀博主,51CTO博客专家等。 🏆《博客》:Python全…

Python爬虫-淘宝搜索热词数据

前言 本文是该专栏的第70篇,后面会持续分享python爬虫干货知识,记得关注。 在本专栏之前,笔者有详细针对“亚马逊Amazon搜索热词”数据采集的详细介绍,对此感兴趣的同学,可以往前翻阅《Python爬虫-某跨境电商(AM)搜索热词》进行查看。 而在本文,笔者将以淘宝为例,获取…

Linux----Mplayer音视频库的移植

想要播放视频音乐就得移植相关库到板子上 Mplayer移植需要依赖以下源文件&#xff1a;(从官网获取或者网上) 1、zlib-1.2.3.tar.gz &#xff1a;通用的内存空间的压缩库。 2、libpng-1.2.57.tar.gz :png格式图片的压缩或解压库 3、Jpegsrc.v9b.tar.gz : jpeg格式图片的压…

n7.Nginx 第三方模块

Nginx 第三方模块 第三模块是对nginx 的功能扩展&#xff0c;第三方模块需要在编译安装Nginx 的时候使用参数–add-modulePATH指定路径添加&#xff0c;有的模块是由公司的开发人员针对业务需求定制开发的&#xff0c;有的模块是开 源爱好者开发好之后上传到github进行开源的模…

注册安全分析报告:东方航空

前言 由于网站注册入口容易被黑客攻击&#xff0c;存在如下安全问题&#xff1a; 暴力破解密码&#xff0c;造成用户信息泄露短信盗刷的安全问题&#xff0c;影响业务及导致用户投诉带来经济损失&#xff0c;尤其是后付费客户&#xff0c;风险巨大&#xff0c;造成亏损无底洞 …

移动硬盘在苹果电脑上使用后在windows中无法读取 Win和Mac的硬盘怎么通用

在日益普及的跨平台工作环境中&#xff0c;苹果电脑与Windows PC之间的数据交换成为日常需求。然而&#xff0c;用户常面临一个困扰&#xff1a;为何苹果电脑的硬盘能在macOS下流畅运行&#xff0c;却在Windows系统中变得“水土不服”&#xff1f;这一问题核心在于硬盘格式的不…

IP转接服务的重要性及其应用

在现今互联网高度发达的时代&#xff0c;IP转接服务的重要性日益凸显。对于家庭和企业而言&#xff0c;它不仅是连接互联网的桥梁&#xff0c;更是确保网络稳定、高效运行的关键。本文将深入探讨IP转接服务的核心意义及其在互联网世界中的应用。 IP转接服务&#xff0c;简而言之…

QT小细节

QT小细节 1 QTextToSpeech1.1 cmake1.2 qmake 2 QChartView QT6 6.7.2 1 QTextToSpeech 从下图可以看到&#xff0c;分别使用qmake或者cmake编译情况下的&#xff0c;QTextToSpeech的使用方法 QTextToSpeech官方链接&#xff0c;也可以直接在QT Creator的帮助中搜索 1.1 cma…