JavaScript API小白通俗易懂超级自学笔记（BOM篇完结）

文章目录

前言BOMBOM的定义定时器-延时函数定义语法
JS执行机制同步与异步执行宏任务与微任务闭包与作用域链
loaction对象loaction对象的定义location 对象的属性
navigator对象navigator对象的定义常见属性常用方法注意事项实际应用示例
histroy对象history对像的定义history对象的常用属性和方法pushState()和replaceState()popstate事件使用场景注意事项
本地存储(`重点`)本地存储的定义本地存储的特点本地存储分类——localStoragelocalStorage的语法
本地存储分类——sessionStorage本地存储——处理复杂数据类型语法：

正则表达式正则表达式定义语法元字符元字符的定义元字符的分类

补充数组中map方法迭代数组语法：
数组中join方法语法：

前言

JavaScript API（Application Programming Interface）是一组预定义的函数、对象和协议，允许开发者通过JavaScript与外部系统、服务或功能进行交互。它提供了一种标准化的方式访问特定功能，无需从头编写底层代码。简单来说API是浏览器提供的一套操作浏览器功能和页面元素的接口。通过JavaScript可以调用这些API，实现与浏览器和页面的交互。

API的作用
使用JavaScript操作HTML文档和浏览器，实现页面的动态效果和交互功能。

API的分类

DOM (Document Object Model)：文档对象模型，用于操作HTML文档BOM (Browser Object Model)：浏览器对象模型，用于操作浏览器功能事件处理程序：响应用户操作的函数

本篇为JavaScript API 中的DOM篇

BOM

BOM的定义

BOM（Browser Object Model，window对象，浏览器对象模型）是 JavaScript 与浏览器交互的核心 API 集合，提供了独立于网页内容（DOM）的浏览器功能操作接口。与 DOM 不同，BOM 并非标准化的规范，但主流浏览器均实现了类似的对象和功能。

window对象是一个全局对象，也可以说是JavaScript中的顶级对象像document，alert()，console.log()都是window属性，基本BOM的属性和方法都是window的所有通过var定义在全局中的变量，函数都会变成window对象的属性和方法window对象下的属性和方法调用的时候可以省略window

定时器-延时函数

定义

JavaScript内置的一个用来让代码延迟执行的函数—setTimeout

语法


  <script>
    setTimeout(function () {
      console.log('时间到了')
    }, 2000)
  </script>

setTimeout只会执行一次，所有可以理解为就是把一段代码延迟执行。

清除延时函数


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

注：延时器需要等待，所有后面的代码会先执行；每次调用延时器都会产生一个新的延时器，返回一个ID
回忆：间歇函数，不同点在于延时函数只执行一次，间歇函数每隔一段时间就会执行一次，除非手动清除

JS执行机制

JavaScript语言的一大特点就是单线程，同一时间只能做一件事情。JavaScript是为了处理页面中用户的交互，以及操作DOM而诞生的。比如我们对某个DOM元素进行添加和删除操作，不能同时进行，应该先进行添加，再进行删除。
单线程就意味着所有任务都需要排队，前一个任务结束，下一个任务才能开始执行。这样就会导致如果JS执行时间过长，就会造成页面的渲染不连贯，导致页面渲染加载堵塞的感觉。

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

JavaScript的执行机制基于单线和事件循环（Event Loop），通过异步任务处理实现非阻塞操作。以下是关键组成部分：

调用栈（Call Stack）：记录函数执行顺序的栈结构，遵循后进先出原则。任务队列（Task Queue）：存放异步任务回调的队列，分为宏任务（MacroTask）和微任务（MicroTask）。事件循环：持续检查调用栈是否为空，将队列中的任务推入栈执行。

同步与异步执行

同步任务直接进入调用栈执行，阻塞后续代码直到完成。

异步任务通过Web API（如setTimeout、XMLHttpRequest）处理后，回调函数进入任务队列。例如：


console.log('1');
setTimeout(() => console.log('2'), 0);
console.log('3');
// 输出顺序：1 → 3 → 2

宏任务与微任务

宏任务：包括setTimeout、setInterval、I/O操作等，优先级较低。微任务：包括Promise.then、MutationObserver等，优先级较高。

事件循环的优先级规则：

执行当前宏任务。执行所有微任务（直到微任务队列清空）。渲染页面（如有需要）。执行下一个宏任务。

示例：


setTimeout(() => console.log('宏任务'), 0);
Promise.resolve().then(() => console.log('微任务'));
// 输出顺序：微任务 → 宏任务

闭包与作用域链

函数执行时会创建执行上下文，包含变量对象、作用域链和this。闭包通过保留外部函数的作用域链，实现变量持久化：


function outer() {
    let x = 10;
    return function inner() {
        console.log(x);
    };
}
const closure = outer();
closure(); // 输出 10

以下代码展示了执行顺序的典型场景：


console.log('Start');
setTimeout(() => console.log('Timeout'), 0);
Promise.resolve().then(() => console.log('Promise'));
console.log('End');

输出顺序：


Start
End
Promise
Timeout

同步任务优先于异步任务执行。微任务优先级高于宏任务。事件循环持续监控调用栈和任务队列的状态。闭包通过作用域链访问外部变量，影响内存管理。

loaction对象

loaction对象的定义

location 对象是 JavaScript 中 window 对象的一个属性，用于获取或设置当前页面的 URL 相关信息。它提供了对 URL 各个部分的访问和操作能力，常用于页面导航或 URL 解析。

location 对象的属性

href: 完整 URL 字符串，例如 https://example.com:8080/path?query=value#hash
protocol: URL 的协议部分（包括冒号），例如 https:
host: 主机名和端口号，例如 example.com:8080
hostname: 主机名部分，例如 example.com
port: 端口号，例如 8080
pathname: URL 路径部分，以 / 开头，例如 /path
search: 查询字符串部分，以 ? 开头，例如 ?query=value
hash: 锚点部分，以 # 开头，例如 #hash
origin: URL 的协议、主机名和端口号组合，例如 https://example.com:8080
search: 取网址？后面的资源
reload: 用于刷新当前页面，传入参数true时表示强制刷新

navigator对象

navigator对象的定义

navigator 是浏览器提供的 JavaScript 对象，用于获取浏览器和操作系统的相关信息。它属于 BOM（Browser Object Model）的一部分，提供了一系列属性和方法，帮助开发者识别用户环境。

常见属性

1. navigator.userAgent (重点记住)
返回浏览器的用户代理字符串，包含浏览器名称、版本和操作系统信息。


console.log(navigator.userAgent); // 例如 "Mozilla/5.0 (Windows NT 10.0...) Chrome/91.0..."

2. navigator.platform
返回操作系统平台（如 “Win32”、“MacIntel”）。


console.log(navigator.platform); // 例如 "Win32"

3. navigator.language
返回用户的首选语言（如 “zh-CN”）。


console.log(navigator.language); // 例如 "en-US"

4. navigator.cookieEnabled
返回布尔值，表示浏览器是否启用 Cookie。


console.log(navigator.cookieEnabled); // true 或 false

5. navigator.onLine
检测网络连接状态（在线/离线）。


console.log(navigator.onLine); // true 或 false

常用方法

1. navigator.geolocation.getCurrentPosition()
获取用户的地理位置（需用户授权）。


navigator.geolocation.getCurrentPosition(
  (position) => console.log(position.coords.latitude, position.coords.longitude),
  (error) => console.error(error)
);

2. navigator.clipboard.writeText()
写入文本到系统剪贴板（需 HTTPS 环境）。


navigator.clipboard.writeText("复制内容").then(() => console.log("成功"));

3. navigator.mediaDevices.getUserMedia()
访问用户媒体设备（如摄像头/麦克风）。


navigator.mediaDevices.getUserMedia({ video: true })
  .then(stream => console.log("已获取媒体流"))
  .catch(error => console.error("拒绝访问:", error));

注意事项

兼容性差异：部分属性（如 navigator.bluetooth）可能仅在特定浏览器或版本中支持。隐私限制：地理位置、剪贴板等 API 需要用户授权或 HTTPS 环境。用户代理嗅探：依赖 userAgent 检测浏览器时需谨慎，可能被伪造或失效，推荐使用特性检测（Feature Detection）。

实际应用示例

检测移动设备
通过结合 userAgent 和屏幕宽度判断：


const isMobile = /Android|iPhone|iPad/i.test(navigator.userAgent) && window.innerWidth < 768;

检查浏览器是否支持 WebP 图片格式


const supportsWebP = document.createElement('canvas')
  .toDataURL('image/webp')
  .indexOf('data:image/webp') === 0;


 <script>
    // 检测 userAgent（浏览器信息）
    !(function () {
      const userAgent = navigator.userAgent
      // 验证是否为Android或iPhone
      const android = userAgent.match(/(Android);?[s/]+([d.]+)?/)
      const iphone = userAgent.match(/(iPhonesOS)s([d_]+)/)
      // 如果是Android或iPhone，则跳转至移动站点
      if (android || iphone) {
        location.href = 'http://m.itcast.cn'
      }
    })();
    // !(function () { })();
    !function () { }()
  </script>

histroy对象

history对像的定义

在实际开发中见的比较少，但在一些OA办公系统中会见到
history对象是浏览器提供的JavaScript接口，用于操作浏览器的会话历史记录。它允许开发者在不刷新页面的情况下导航到不同的URL，或获取当前会话的历史状态信息。

history对象的常用属性和方法

length属性
返回当前会话历史记录的条目数量，包括当前页面。例如，新打开的标签页该值为1。


console.log(history.length); // 输出历史记录条目数

back()方法（※）
导航到历史记录中的前一个页面，相当于用户点击浏览器的“后退”按钮。


history.back();

forward()方法（※）
导航到历史记录中的后一个页面，相当于用户点击浏览器的“前进”按钮。


history.forward();

go()方法（※）
导航到历史记录中的指定位置。参数为整数，正数表示前进，负数表示后退。


history.go(-2); // 后退两步
history.go(1);  // 前进一步

pushState()和replaceState()

pushState()方法
将新状态添加到历史记录堆栈中，不刷新页面。接受三个参数：状态对象、标题（通常忽略）和URL。


history.pushState({page: 1}, '', 'page1.html');

replaceState()方法
替换当前历史记录条目，不刷新页面。参数与pushState()相同。


history.replaceState({page: 2}, '', 'page2.html');

popstate事件

当用户导航历史记录时触发（如点击后退/前进按钮）。可以通过监听此事件响应历史记录变化。


window.addEventListener('popstate', (event) => {
  console.log('Location changed:', event.state);
});

使用场景

单页应用（SPA）中常用history API实现无刷新导航。例如，结合pushState()和popstate事件动态加载内容。

注意事项

使用pushState()或replaceState()时，URL需同源。修改路径或查询参数可行，但跨域操作会抛出异常。

本地存储(`重点`)

本地存储的定义

本地存储（Local Storage）是Web浏览器提供的一种客户端存储机制，允许网页将数据以键值对的形式持久保存在用户的本地设备上。即使关闭浏览器或重启设备，数据仍可保留，除非用户主动清除或通过代码删除。

本地存储的特点

持久性：数据不会随会话结束（如关闭标签页或浏览器）而丢失，需手动清除或通过API删除。存储容量：通常限制为5MB~10MB（不同浏览器可能略有差异）。作用域：数据按域名隔离，同一域名下的页面可共享存储内容。

本地存储分类——localStorage

作用：可以将数据永久存储在本地，除法手动删除，否则关闭页面也会存在特性：可以多窗口页面共享（同一浏览器可以共享）以键值对的形式存储使用

localStorage的语法


// 存储数据
localStorage.setItem('key', 'value');

// 读取数据
const data = localStorage.getItem('key');

// 删除数据
localStorage.removeItem('key');

本地存储分类——sessionStorage

特性：
1. 声明周期为关闭浏览器窗口
2. 在统一窗口页面下可以共享数据
3. 以键值对的形式存储使用
4. 用法与loacalStorage基本相同


// 存储数据
sessionStorage.setItem('key', 'value');
// 读取数据
const value = sessionStorage.getItem('key');
// 删除数据
sessionStorage.removeItem('key');
//清空所有数据
sessionStorage.clear();

本地存储——处理复杂数据类型

本地只能存储字符串，无法存储更多的复杂数据类型必须将复杂数据类型转换成JSON字符串，才能存储到本地

语法：

使用JSON.stringify()将数据转换成JSON字符串
JSON对象属性和值都是双引号


//声明一个对象
const userData = { name: "Alice", preferences: { theme: "dark" } };

// 存储，将对象转化成JSON字符串（保证数据不丢失）
localStorage.setItem("user", JSON.stringify(userData));

// 读取，将JSON字符串转换成对象
const storedData = JSON.parse(localStorage.getItem("user"));

注：JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，常用于前后端数据传输。JSON.parse 是 JavaScript 中的一个内置方法，用于将符合 JSON 格式的字符串转换为 JavaScript 对象。

正则表达式

正则表达式定义

是用于匹配字符串中字符组合的模式，在JavaScript中，也是一钟对象通常用于查找，替换符合正则表达式的文本过滤掉页面内容中的一些敏感词（替换），或从字符串中获取我们想要的特定部分（提取）等

使用场景： 验证表单，如用户名单只能输入英文字母，数字或者下划线，昵称输入框可以输入中午（匹配）；比如用户名：/^ [a-z0-9_-]{3,16}$/

语法

先定义，后查找


	<script>
	const str = '你一定会成为最棒的自己'
    // 1. 定义规则
    const dzh = /最棒/
    // 2. 是否匹配[test()方法，用来查看正则表达式与指定的字符串是否匹配]
    console.log(dzh.test(str))  // true(匹配，返回true)
    // 3. 第二种方法exec()-->如果不匹配返回null(了解即可)
    console.log(reg.exec(str))  // 返回数组
	</script>

元字符

元字符的定义

是一些具有特殊含义的字符，可以极大的提高了灵活性和强大的匹配功能。比如规定用户只能输入26个英文字母abcde……;换成元字符的写法：[a-z]。

元字符的分类

为了方便记忆与学习，对众多的元字符进行了分类
边界符（表示位置（手机号必须1开头，QQ），开头和结尾，必须用什么开头，用什么结尾）

边界符	说明
^	表示匹配行首的文本(以谁开始)
$	表示匹配行尾的文本(以谁结束)


<script>
		//必须以前开头，是就返回true，不是则返回false
		console.log(/^前/.test('前端工程师'))//true
		console.log(/前$/.test('前端工程师'))//false
		console.log(/^前$/.test('前'))//精确匹配，且只有这一种情况为true，其余为false
</script>

量词（表示重复次数（手机号必须11位））
用来设定某个模式出来的次数

量词	说明
*	重复零次或更多次
+	重复一次或更多次
?	重复零次或一次
{n}	重复n次
{n,}	重复n次或更多次
{n,m}	重复n到m次

字符类（比如d表示0-9 -对量词做出简化）
匹配字符集合 [ ]


<script>
	// [abc] 只先一个
	console.log(/^[abc]$/.test('a'))//true
	console.log(/^[abc]$/.test('b'))//true
	console.log(/^[abc]$/.test('c'))//true
	console.log(/^[abc]$/.test('ab'))//false
	console.log(/^[abc]{3}$/.test('abc'))//true
	console.log(/^[a-z]$/.test('s'))//true
	console.log(/^[a-zA-Z0-9]$/.test('a'))
</script>

字符类 . 表示除换行符之外的任何单字符预定义：指的是常见模式的简写方法

预定类	说明
d	匹配0-9之间的任一数字，相当于[0-9]
D	匹配所有0-9以外的字符，相当于 [^0-9]
w	匹配任意的字母、数字和下划线，相当于[A-Za-z0-9_]
W	除所有字母、数字和下划线以外的字符，相当于 [^A-Za-z0-9_]
s	匹配空格（包括换行符、制表符、空格符等），相等于[ vf]
S	匹配非空格的字符，相当于 [^ vf]

日期格式：^d{4}-d{1,2}-d{1.2}

修饰符
用来约束正则执行某些细节行为，如是否区分大小写，是否支持多行匹配等等。

语法：


<script>
/表达式/修饰符

//i是单词ignore的缩写，正则匹配时字母不区分大小
//g是单词global的缩写，匹配所有满足正则表达式的结果（全局）
console.log(/a/i.test('a'))
console.log(/a/i.test('A'))
</script>

替换replace替换


<script>
字符串.replace(/正则表达式/,'替换文本')

const str = 'java是一门编程语言， 学完JAVA工资很高'
const re = str.replace(/java/ig, '前端')
console.log(re)  // 前端是一门编程语言， 学完前端工资很高
</script>

补充

数组中map方法迭代数组

map可以遍历数组处理数据，并且返回新的数组

语法：


<script>
	const arr = ['red','green','blue']
	const newArr = arr.map(function(ele,index){
				console.log(ele)//数组元素
				console.log(index)//数组索引号
				return ele + '颜色'
	})
	console.log(newArr)// ...颜色
</script>

数组中join方法

join()方法用于把数组中的所有元素转换成一个字符串

语法：


<script>
	const arr = ['red颜色','blue颜色','green颜色']
	console.log(arr.join(''))//red颜色blue颜色green颜色
</script>

注：数组元素是通过参数里面指定的分隔符进行分隔的，空字符串('' )，则所有元素之间没有如何字符；小括号为空，则用逗号隔开

内容分享

文章版权归作者所有，未经允许请勿转载。

「实用」盘点那些开发中最常用的Git命令

内容分享

1个月前

000

网络共享小技巧：学会电脑共享设置，让你连接网络共享不再失败。

内容分享

1个月前

100

深度学习驱动的图像爬虫实战：从海量图片抓取到智能分析全流程

内容分享

2周前

010

新摄影照相——高光

内容分享

7天前

000

暂无评论

您必须登录才能参与评论！

立即登录

暂无评论...

JavaScript API小白通俗易懂超级自学笔记（BOM篇完结）

文章目录

前言

BOM

BOM的定义

定时器-延时函数

定义

语法

JS执行机制

同步与异步执行

宏任务与微任务

闭包与作用域链

loaction对象

loaction对象的定义

location 对象的属性

navigator对象

navigator对象的定义

常见属性

常用方法

注意事项

实际应用示例

histroy对象

history对像的定义

history对象的常用属性和方法

pushState()和replaceState()

popstate事件

使用场景

注意事项

本地存储( 重点)

本地存储的定义

本地存储的特点

本地存储分类——localStorage

localStorage的语法

本地存储分类——sessionStorage

本地存储——处理复杂数据类型

语法：

正则表达式

正则表达式定义

语法

元字符

元字符的定义

元字符的分类

补充

数组中map方法 迭代数组

语法：

数组中join方法

语法：

电机控制中摩擦力辨识和惯量辨识技术

Python好玩的算法库

相关文章

「实用」盘点那些开发中最常用的Git命令

网络共享小技巧：学会电脑共享设置，让你连接网络共享不再失败。

深度学习驱动的图像爬虫实战：从海量图片抓取到智能分析全流程

新摄影照相——高光

暂无评论

热门网站

热门文章

标签云

本地存储(`重点`)

数组中map方法迭代数组