【JS】Chapter10-Bom 操作

站在巨人的肩膀上

黑马程序员前端JavaScript入门到精通全套视频教程,javascript核心进阶ES6语法、API、js高级等基础知识和实战教程

(十)Bom 操作

1. Window对象

1.1 BOM(浏览器对象模型)

  • BOM(Browser Object Model) 是浏览器对象模型
  • window对象是一个全局对象,也可以说是JavaScript中的顶级对象
  • 像document、alert()、console.log()这些都是window的属性,基本BOM的属性和方法都是window的。
  • 所有通过var定义在全局作用域中的变量、函数都会变成window对象的属性和方法
  • window对象下的属性和方法调用的时候可以省略window

1.2 定时器-延时函数

  • JavaScript 内置的一个用来让代码延迟执行的函数,叫 setTimeout
  • 语法:
    setTimeout(回调函数, 等待的毫秒数)
    
  • setTimeout 仅仅只执行一次,所以可以理解为就是把一段代码延迟执行, 平时省略window
  • 清除延时函数:
    let timer = setTimeout(回调函数, 等待的毫秒数)
    clearTimeout(timer)
    
  • 注意点
    • 延时器需要等待,所以后面的代码先执行
    • 每一次调用延时器都会产生一个新的延时器
  • 两种定时器对比:执行的次数
    • 延时函数:执行一次
    • 间歇函数:每隔一段时间就执行一次,除非手动清除

1.3 JS执行机制

  • 经典面试题1:
console.log(1111)
setTimeout(function() {console.log(2222)
}, 1000)
console.log(3333)// 输出结果是
1111
3333
2222
  • 经典面试题2:
console.log(1111)
setTimeout(function() {console.log(2222)
}, 0)
console.log(3333)// 输出结果也是
1111
3333
2222
  • JavaScript 语言的一大特点就是单线程,也就是说,同一个时间只能做一件事。

  • 这是因为 Javascript 这门脚本语言诞生的使命所致——JavaScript 是为处理页面中用户的交互,以及操作 DOM 而诞生的。比如我们对某个 DOM 元素进行添加和删除操作,不能同时进行。应该先进行添加,之后再删除。

  • 单线程就意味着,所有任务需要排队,前一个任务结束,才会执行后一个任务。这样所导致的问题是:如果 JS 执行的时间过长,这样就会造成页面的渲染不连贯,导致页面渲染加载阻塞的感觉。

  • 为了解决这个问题,利用多核 CPU 的计算能力,HTML5 提出 Web Worker 标准,允许 JavaScript 脚本创建多个线程。于是,JS 中出现了同步和异步。

  • 同步:前一个任务结束后再执行后一个任务,程序的执行顺序与任务的排列顺序是一致的、同步的。比如做饭的同步做法:我们要烧水煮饭,等水开了(10分钟之后),再去切菜,炒菜。

  • 异步:你在做一件事情时,因为这件事情会花费很长时间,在做这件事的同时,你还可以去处理其他事情。比如做饭的异步做法,我们在烧水的同时,利用这10分钟,去切菜,炒菜。

  • 同步和异步,他们的本质区别:这条流水线上各个流程的执行顺序不同。

  • 同步任务:同步任务都在主线程上执行,形成一个执行栈。

  • 异步任务:

    • JS 的异步是通过回调函数实现的。
    • 一般而言,异步任务有以下三种类型:
      1. 普通事件,如 click、resize 等
      2. 资源加载,如 load、error 等
      3. 定时器,包括 setInterval、setTimeout 等
    • 异步任务相关添加到任务队列中(任务队列也称为消息队列)。
  • 执行机制:

    1. 先执行执行栈中的同步任务。
    2. 异步任务放入任务队列中。
    3. 一旦执行栈中的所有同步任务执行完毕,系统就会按次序读取任务队列中的异步任务,于是被读取的异步任务结束等待状态,进入执行栈,开始执行。
  • 由于主线程不断的重复获得任务、执行任务、再获取任务、再执行,所以这种机制被称为事件循环(event loop)。

1.4 location对象

  • location 的数据类型是对象,它拆分并保存了 URL 地址的各个组成部分
  • 常用属性和方法:
    • href 属性获取完整的 URL 地址,对其赋值时用于地址的跳转
      // 可以得到当前文件URL地址
      console.log(location.href)
      // 可以通过js方式跳转到目标地址
      location.href = 'http://www.itcast.cn'
      
    • search 属性获取地址中携带的参数,符号 ?后面部分
      console.log(location.search)
      
    • hash 属性获取地址中的啥希值,符号 # 后面部分
      console.log(location.hash)
      
      • 后期vue路由的铺垫,经常用于不刷新页面,显示不同页面,比如 网易云音乐
    • reload 方法用来刷新当前页面,传入参数 true 时表示强制刷新
      <button>点击刷新</button>
      <script>let btn = document.querySelector('button')btn.addEventListener('click', function() {location.reload(true)// 强制刷新,类型ctrl+f5})
      </script>
      

1.5 navigator对象

  • navigator 的数据类型是对象,该对象下记录了浏览器自身的相关信息
  • 常用属性和方法:
    • 通过 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 histroy对象

  • history 的数据类型是对象,主要管理历史记录,该对象与浏览器地址栏的操作相对应,如前进、后退、历史记录等

  • 常用属性和方法

    history对象方法作用
    back()可以后退功能
    forward()前进功能
    go(参数)前进后退功能。参数如果是1,则前进1个页面;如果是-1,则后退1个页面
  • history 对象一般在实际开发中比较少用,但是会在一些 OA 办公系统中见到。

2. 本地存储

2.1 本地存储介绍

为了满足各种各样的需求,会经常性在本地存储大量的数据,HTML5规范提出了相关解决方案。
- 数据存储在用户浏览器中
- 设置、读取方便、甚至页面刷新不丢失数据
- 容量较大,sessionStorage和localStorage约 5M 左右
- 常见的使用场景:
- https://todomvc.com/examples/vanilla-es6/ 页面刷新数据不丢失

2.2 本地存储分类

2.2.1 localStorage
  • 使用 localStorage 把数据存储的浏览器中
  • 作用: 可以将数据永久存储在本地(用户的电脑), 除非手动删除,否则关闭页面也会存在
  • 特性:
    • 可以多窗口(页面)共享(同一浏览器可以共享)
    • 以键值对的形式存储使用
  • 语法:
    // 存储数据:
    localStorage.setItem(key, value)// 获取数据:
    localStorage.getItem(key)// 删除数据:
    localStorage.removeItem(key)
    
  • 浏览器查看本地数据:F12->Application->Storage->Local Storage
2.2.2 sessionStorage
  • sessionStorage 特性:
    • 生命周期为关闭浏览器窗口
    • 在同一个窗口(页面)下数据可以共享
    • 以键值对的形式存储使用
    • 用法跟 localStorage 基本相同

2.3 存储复杂数据类型

  • 本地只能存储字符串,无法存储复杂数据类型.

  • 解决:需要将复杂数据类型转换成JSON字符串,再存储到本地

  • 语法:JSON.stringify(复杂数据类型)

  • 例子:

    const goods = {name: '小米10',price: 1999
    }
    localStorage.setItem('goods', JSON.stringify(goods))
    
    • 将复杂数据转换成JSON字符串存储本地存储中.
  • 因为本地存储里面取出来的是字符串,不是对象,无法直接使用

  • 解决:把取出来的字符串转换为对象

  • 语法:JSON.parse(JSON字符串)

  • 例子:

    const obj = JSON.parse(localStorage.getItem('goods'))
    console.log(obj)
    
    • 将JSON字符串转换成对象取出时候使用.

3. 综合案例

3.1 数组中map方法迭代数组

  • map 也称为映射。映射是个术语,指两个元素的集之间元素相互“对应”的关系.
  • 作用:map 迭代数组
  • 语法:
    const arr = ['pink', 'red', 'blue']
    arr.map(function(item, index) {console.log(item)   // item 得到数组元素 'pink' 'red' 'blue'console.log(index)  // index 得到索引号 0 1 2
    })
    
  • 使用场景:
    • map 可以处理数据,并且返回新的数组
  • 例子:
    const arr = ['pink', 'red', 'blue']
    const newArr = arr.map(function(item, index) {console.log(item)   // item 得到数组元素 'pink' 'red' 'blue'console.log(index)  // index 得到索引号 0 1 2return item + '老师'
    })
    console.log(newArr)     // ['pink老师', 'red老师', 'blue老师']
    

3.2 数组中join方法

  • 作用:join() 方法用于把数组中的所有元素转换一个字符串
  • 语法:
    const arr = ['pink老师', 'red老师', 'blue老师']
    console.log(arr.join(''))   // pink老师red老师blue老师
    
  • 参数:
    • 数组元素是通过参数里面指定的分隔符进行分隔的

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

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

相关文章

力扣labuladong一刷day2共7题

力扣labuladong一刷day2共8题 | 26. 删除有序数组中的重复项 83. 删除排序链表中的重复元素 文章目录 力扣labuladong一刷day2共8题 | 26. 删除有序数组中的重复项 83. 删除排序链表中的重复元素一、26. 删除有序数组中的重复项二、83. 删除排序链表中的重复元素三、27. 移除元…

C++实战学习:输出类的抽象和实现详解

最近写了一些博客复习C的知识&#xff0c;但理论终究是理论&#xff0c;那多态、继承等C特性到底该在什么情况下使用&#xff1f;如何模块化地完成一个程序呢&#xff1f;还有没有什么C语法方面值得学习的知识呢&#xff1f;本节就来分析一个实际项目中的例子&#xff0c;来理解…

多测师肖sir_高级金牌讲师_jenkins搭建

jenkins操作手册 一、jenkins介绍 1、持续集成&#xff08;CI&#xff09; Continuous integration 持续集成 团队开发成员每天都有集成他们的工作&#xff0c;通过每个成员每天至少集成一次&#xff0c;也就意味着一天有可 能多次集成。在工作中我们引入持续集成&#xff0c;通…

大模型时代,开发者成长指南 | 新程序员

【编者按】GPT 系列的面世影响了全世界、各个行业&#xff0c;对于开发者们的感受则最为深切。以 ChatGPT、Github Copilot 为首&#xff0c;各类 AI 编程助手层出不穷。编程范式正在发生前所未有的变化&#xff0c;从汇编到 Java 等高级语言&#xff0c;再到今天以自然语言为特…

Python高级语法----Python多线程与多进程

文章目录 多线程多进程注意事项多线程与多进程是提高程序性能的两种常见方法。在深入代码之前,让我们先用一个简单的比喻来理解它们。 想象你在一家餐厅里工作。如果你是一个服务员,同时负责多个桌子的顾客,这就类似于“多线程”——同一个人(程序)同时进行多项任务(线程…

HttpUtils工具类

作为Java开发程序员&#xff0c;需要我们经常写一些工具类来简化开发过程&#xff0c;我们自己肯定写过或者用过HttpUtils用来发送http请求&#xff0c;但是每次手写太繁琐了&#xff0c;于是就按照标准写了一个Http工具类&#xff0c;现在分享出来。 1.HTTP请求简介 HTTP(Hy…

SSM 线上知识竞赛系统-计算机毕设 附源码 27170

SSM线上知识竞赛系统 摘 要 科技进步的飞速发展引起人们日常生活的巨大变化&#xff0c;电子信息技术的飞速发展使得电子信息技术的各个领域的应用水平得到普及和应用。信息时代的到来已成为不可阻挡的时尚潮流&#xff0c;人类发展的历史正进入一个新时代。在现实运用中&#…

虚幻引擎:如何使用 独立进程模式进行模拟

第一步:先更改配置 第二步,在启动的两个玩家里面,一个设为服务器,一个链接进去地图就可以了 1.设置服务器 2.另一个玩家链接

企业级低代码开发,科技赋能让企业具备“驾驭软件的能力”

科技作为第一生产力&#xff0c;其强大的影响力在各个领域中都有所体现。数字技术&#xff0c;作为科技领域中的一股重要力量&#xff0c;正在对传统的商业模式进行深度的变革&#xff0c;为各行业注入新的生命力。随着数字技术的不断发展和应用&#xff0c;企业数字化转型的趋…

远程运维用什么软件?可以保障更安全?

远程运维顾名思义就是通过远程的方式IT设备等运行、维护。远程运维适用场景包含因疫情居家办公&#xff0c;包含放假期间出现运维故障远程解决&#xff0c;包含项目太远需要远程操作等等。但远程运维过程存在一定风险&#xff0c;安全性无法保障&#xff0c;所以一定要选择靠谱…

RocketMQ如何安全的批量发送消息❓

优点&#xff1a; 批量发送消息可以提高rocketmq的生产者性能和吞吐量。 使用场景: 发送大量小型消息时&#xff1b;需要降低消息发送延迟时&#xff1b;需要提高生产者性能时&#xff1b; 注意事项&#xff1a; 消息列表的大小不能超过broker设置的最大消息大小;消息列表…

如何快速教你看自己电脑cpu是几核几线程

目录 一、我们日常中说的电脑多少核多少线程&#xff0c;很多人具体不知道什么意思&#xff0c;下面举例4核和4线程什么意思。二、那么4线程又是怎么回事呢&#xff1f;三、那么知道了上面的介绍后怎么看一台电脑是几核&#xff0c;几线程呢&#xff1f; 一、我们日常中说的电脑…

JSONP 跨域访问(2), JSONP劫持

JSONP 跨域访问(2), JSONP劫持 一, 利用 XSS 漏洞执行jsonp 1. 利用过程 发现有jsonp的请求: <script type"text/javascript" src"http://192.168.112.200/security/jsonp.php?callbackjsonpCallback"></script>向xss漏洞的位置注入代码…

​软考-高级-信息系统项目管理师教程 第四版【第24章-法律法规与标准规范-思维导图】​

软考-高级-信息系统项目管理师教程 第四版【第24章-法律法规与标准规范-思维导图】 课本里章节里所有蓝色字体的思维导图

springboot 项目升级 2.7.16 踩坑

记录一下项目更新版本依赖踩坑 这个是项目最早的版本依赖 这里最初是最初是升级到 2.5.7 偷了个懒 这个版本的兼容性比较强 就选了这版本 也不用去修改就手动的去换了一下RabbitMQ的依赖 因为这边项目有AMQP 风险预警 1.spring-amqp版本低于2.4.17的用户应升级到2.4.17 2.spri…

时序预测 | MATLAB实现WOA-CNN-BiLSTM-Attention时间序列预测(SE注意力机制)

时序预测 | MATLAB实现WOA-CNN-BiLSTM-Attention时间序列预测&#xff08;SE注意力机制&#xff09; 目录 时序预测 | MATLAB实现WOA-CNN-BiLSTM-Attention时间序列预测&#xff08;SE注意力机制&#xff09;预测效果基本描述模型描述程序设计参考资料 预测效果 基本描述 1.MAT…

蓝桥杯官网练习题(移动距离)

题目描述 X 星球居民小区的楼房全是一样的&#xff0c;并且按矩阵样式排列。其楼房的编号为 1,2,3, 当排满一行时&#xff0c;从下一行相邻的楼往反方向排号。 比如&#xff1a;当小区排号宽度为 6 时&#xff0c;开始情形如下&#xff1a; 1 2 3 4 5 6 12 …

python模块之redisbloom redis布隆过滤器

一、简介 RedisBloom 是一个 Redis 模块&#xff0c;提供了布隆过滤器&#xff08;Bloom Filter&#xff09;、计数器&#xff08;Count-Min Sketch&#xff09;、Top-K&#xff08;Top-K&#xff09;、Top-K with expiry&#xff08;Top-K with Expiration&#xff09;和多样…

开发知识点-golang

golang语言学习 环境搭建win10配置go环境 ubuntu20.04安装golang介绍下载 Go 压缩包调整环境变量验证 Go 安装过程 环境搭建 win10配置go环境 中文网进行下载 https://studygolang.com/dl 配置环境变量 增加GOROOT: 新建 -->变量名为: GOROOT(必须大写) 变量值: 你安装…

2311rust无畏并发.

原文 Rust无畏并发 Rust是为了解决两个麻烦问题: 1,如何安全系统编程 2,如何无畏并发 最初,这些问题似乎是无关的,但令惊讶的是,方法竟然是相同的:使Rust安全的相同工具也可帮助解决并发问题. 内存安全和并发错误,一般认为是代码在不应访问数据时访问数据.Rust依靠所有权为…