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.mzph.cn/bicheng/48928.shtml

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

相关文章

Linux——Centos系统安装(动图演示)

一、创建虚拟机并做相应配置 打开VMware Workstation,选择创建新的虚拟机; 1、选择自定义选项:点击下一步 2、选择虚拟机硬件兼容性:直接下一步就行了;点击下一步 3、安装客户机操作系统:这里我们选择稍后安…

C++对象模型之绕过private权限修饰符

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言一、C对象模型二、演示1.类层次2.内存排列 总结 前言 咱们都知道C语言在创建类的时候data member(数据成员)和fuchtion member&#xf…

C++文件操作-二进制文件-写文件

#include<iostream>//1、包含头文件 fstream #include<fstream> using namespace std;class Person { public:char m_Name[64];//姓名int m_Age;//年龄 };void test01() {//2、创建流对象ofstream ofs;//3、打开文件ofs.open("person.txt", ios::out | i…

Linux操作系统的有关常用的命令

1.linux系统的概述 1.1 什么是Linux系统? Linux&#xff0c;全称GNU/Linux&#xff0c;是一种免费使用和自由传播的类UNIX操作系统&#xff0c;其内核由林纳斯本纳第克特托瓦 兹&#xff08;Linus Benedict Torvalds&#xff09;于1991年10月5日首次发布&#xff0c;它主要受…

Mysql集合转多行

mysql 集合转多行 SELECT substring_index(substring_index(t1.group_ids, ,, n), ,, -1) AS group_id FROM (select 908,909 as group_ids ) t1, (SELECT rownum : rownum 1 AS n FROM ( SELECT rownum : 0 ) r, orders ) t2 WHERE n < ( LENGTH( t1.group_ids ) - LENGT…

【Linux】微基准测试

1、基准测试和微基准测试 1.1 定义 1)基准测试(Benchmark Testing): 基准测试是一种用于衡量计算机系统、软件应用或硬件组件性能的测试方法。它通过运行一系列标准化的任务场景来测量系统的性能表现,旨在帮助评估系统的各种指标,如响应时间、吞吐量、延迟、资源利用率…

LVGL项目实战之UI规划

LVGL项目实战之UI规划 ** 实物购买&#xff1a;TB 南山府嵌入式 ** 我们在在做项目之前&#xff0c;先需要确定项目的需求以及可能实现的功能&#xff0c;我们只有确定这些才能够对整体的框架进行把握。 本小结就说一下我们这个项目的一个整体的框架结构以及功能。 1-硬件构…

C++基础知识:C++中的引用,引用的函数的参数,值传递和址传递和引用传递的区别,以及代码演示。

1.值传递(实参值不变) #include<iostream>using namespace std;//1.值传递(实参值不变) void Swap01(int a,int b){int tempa;ab;btemp;cout<<"形式参数a"<<a<<endl;cout<<"形式参数b"<<b<<endl; }int main(){…

C语言实现二叉树以及二叉树的详细介绍

目录 1.树概念及结构 1.1树的概念 1.2树的相关概念 1.3树的表示 2.二叉树概念及结构 2.1二叉树的概念 2.2特殊的二叉树 2.3二叉树的性质 2.4二叉树的存储结构 3.二叉树顺序结构--特殊的二叉树--堆及其实现 3.1堆的概念及结构 3.2堆的实现 3.2.1堆的结构 3.2.2堆…

快速排序算法详解

快速排序&#xff08;Quick Sort&#xff09;是计算机科学与技术领域中非常经典的一种排序算法&#xff0c;由C. A. R. Hoare在1960年提出。它应用分治思想进行排序&#xff0c;通过对数据进行分区操作&#xff0c;并递归地对分区后的子序列进行排序&#xff0c;从而达到整个序…

骑砍战团MOD开发(52)-使用BrfExporterBlender制作BRF文件

一.Blender模型导出为BRF文件 import bpy import structclass BrfFile:def __init__(self):self.meshes []self.bodies []class Mesh:def __init__(self):self.name self.material_name self.vertices []self.morph_keys []self.vertices_fvf []self.faces []class Ve…

《JavaSE》---21.<简单认识Java的集合框架包装类泛型>

目录 前言 一、什么是集合框架 1.1类和接口总览 二、集合框架的重要性 2.1 开发中的使用 2.2 笔试及面试题 三、背后所涉及的数据结构 3.1 什么是数据结构 3.2 容器背后对应的数据结构 四、包装类 4.1 基本数据类型和对应的包装类 4.2 装箱和拆箱 1.最初的写法 2.…

org.springframework.context.ApplicationContext发送消息

1、创建消息的实体类 package com.demo;/*** 监听的实体类**/ public class EventMessage {private String name;public EventMessage(String name) {this.name name;}public String getName() {return name;}public void setName(String name) {this.name name;} }2、创建消…

【Linux】如何使用docker快速部署Stirling-PDF并实现远程处理本地文档

文章目录 前言1. 安装Docker2. 本地安装部署StirlingPDF3. Stirling-PDF功能介绍4. 安装cpolar内网穿透5. 固定Stirling-PDF公网地址 前言 本篇文章我们将在Linux上使用Docker在本地部署一个开源的PDF工具——Stirling PDF&#xff0c;并且结合cpolar的内网穿透实现公网随时随…

lua 实现 函数 判断两个时间戳是否在同一天

函数用于判断两个时间戳是否在同一天。下面是对代码的详细解释&#xff1a; ### 函数参数 - stampA 和 stampB&#xff1a;两个时间戳&#xff0c;用于比较。- resetInfo&#xff1a;一个可选参数&#xff0c;包含小时、分钟和秒数&#xff0c;用于调整时间戳。 ### 函数实现…

Java 集合框架:Java 中的双端队列 ArrayDeque 的实现

大家好&#xff0c;我是栗筝i&#xff0c;这篇文章是我的 “栗筝i 的 Java 技术栈” 专栏的第 019 篇文章&#xff0c;在 “栗筝i 的 Java 技术栈” 这个专栏中我会持续为大家更新 Java 技术相关全套技术栈内容。专栏的主要目标是已经有一定 Java 开发经验&#xff0c;并希望进…

共享模型之无锁

一、问题提出 1.1 需求描述 有如下的需求&#xff0c;需要保证 account.withdraw() 取款方法的线程安全&#xff0c;代码如下&#xff1a; interface Account {// 获取余额Integer getBalance();// 取款void withdraw(Integer amount);/*** 方法内会启动 1000 个线程&#xf…

[技术总结] C++ 使用经验

const 和 constexpr 有什么区别. const 一般是设置一个只读的属性, 在运行时还有可能通过cast变成一个可修改的. 但是constexpr是告诉编译器这就是一个常亮, 在编译时就可以计算出来然后进行替换.static 修饰的成员函数 & 成员变量 static 修饰的成员函数只能访问 static 修…

GraphPad prism处理cck-8获得ic50

C组为空白对照组&#xff0c;a组为dmso对照组&#xff0c;b组为细胞加药组&#xff0c;八个梯度的药物浓度 一、数据转化 首先&#xff0c;打开软件&#xff0c;选项中选择x的第一项&#xff0c;y的第二项&#xff0c;单一药物浓度设定了几个孔就选几 把自己的药物浓度直接复制…

ubuntu22安装拼音输入法

专栏总目录 一、安装命令&#xff1a; sudo apt update sudo apt install fcitx sudo apt install fcitx-pinyin 二、切换输入法