JavaScript组成

  • ECMAScript:

    • 规定了js基础语法核心知识。
    • 比如：变量、分支语句、循环语句、对象等等

  • Web APIs :

    • DOM 文档对象模型， 定义了一套操作HTML文档的API
    • BOM 浏览器对象模型，定义了一套操作浏览器窗口的API

Window对象

BOM (Browser Object Model ) 是浏览器对象模型

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

1676047436362.png

定时器-延迟函数

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

语法：

1
setTimeout(回调函数, 延迟时间)

setTimeout 仅仅只执行一次，所以可以理解为就是把一段代码延迟执行, 平时省略window

清除延时函数：

1
2
let timerId = setTimeout(回调函数, 延迟时间)
clearTimeout(timerId)

注意点：

  1. 延时函数需要等待,所以后面的代码先执行
  2. 返回值是一个正整数，表示定时器的编号
  3. 每次调用延时器都会产生一个新的延时器

对比间歇函数 setInterval : 每隔一段时间就执行一次， , 平时省略window

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<body>
	<script>
		// 定时器之延迟函数
		// 1. 开启延迟函数
		let timerId = setTimeout(function () {
			console.log('我只执行一次')
		}, 3000)
		// 1.1 延迟函数返回的还是一个正整数数字，表示延迟函数的编号
		console.log(timerId)
		// 1.2 延迟函数需要等待时间，所以下面的代码优先执行
		// 2. 关闭延迟函数
		clearTimeout(timerId)
	</script>
</body>

JS执行机制

JavaScript语言是单线程，如果执行时间过长就会造成渲染不连贯

同步任务：

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

异步任务：

  • JS的异步是通过回调函数实现的。
  • 一般而已，异步任务有以下三种类型：
    1. 普通事件，如click、resize等
    2. 资源加载，如load、error等
    3. 定时器，包括setInterval、setTimeout等
  • 异步任务相关添加到任务队列中（也称为消息队列）
  1. 先执行执行栈中的同步任务。
  2. 异步任务放入任务队列中。
  3. 一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待 状态，进入执行栈，开始执行。

image.png

image.png

  • 由于主线程不断的重复获取任务、执行任务、再获取任务、再执行任务，所以这种机制被称为事件循环（event loop）
1
2
3
4
5
6
console.log(1)
console.log(2)
setTimeout(function () {
	console.log(3)
})
console.log(4)

image.png

location对象

location (地址) 它拆分并保存了 URL 地址的各个组成部分， 它是一个对象

属性/方法 说明
href 属性，获取完整的 URL 地址，赋值时用于地址的跳转
search 属性，获取地址中携带的参数，符号 ？后面部分
hash 属性，获取地址中的啥希值，符号 # 后面部分
reload() 方法，用来刷新当前页面，传入参数 true 时表示强制刷新 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<body>
	<form>
		<input type="text" name="search"> <button>搜索</button>
	</form>
	<a href="#/music">音乐</a>
	<a href="#/download">下载</a>
	<button class="reload">刷新页面</button>
	<script>
		// location 对象  
		// 1. href属性 （重点） 得到完整地址，赋值则是跳转到新地址
		console.log(location.href)
		// location.href = 'http://www.bilibili.com'  可以通过js方式跳转到目标地址
		// 2. search属性  得到 ? 后面的地址 
		console.log(location.search)  // ?search=笔记本
		// 3. hash属性  得到 # 后面的地址
		console.log(location.hash)
		// 4. reload 方法  刷新页面
		const btn = document.querySelector('.reload')
		btn.addEventListener('click', function () {
			// location.reload() // 页面刷新
			location.reload(true) // 强制页面刷新 ctrl+f5
		})
	</script>
</body>

navigator对象

navigator是对象，该对象下记录了浏览器自身的相关信息

常用属性和方法：

  • 通过 userAgent 检测浏览器的版本及平台
1
2
3
4
5
6
7
8
9
10
11
// 检测 userAgent（浏览器信息）
(function () {
	const userAgent = navigator.userAgent
	// 验证是否为Android或iPhone
	const 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'
	}
})()

history对象

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

方法 作用
back() 可以后退功能
forward() 前进功能
go(参数) 前进后退功能，参数为1表示前进一个页面，为-1表示后退一个页面

本地存储

随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，HTML5规范提出了相关解决方案。

  1. 数据存储在用户浏览器中
  2. 设置、读取方便、甚至页面刷新不丢失数据
  3. 容量较大，sessionStorage和localStorage约 5M 左右

localStorage

作用：数据可以长期保留在本地浏览器中，刷新页面和关闭页面，数据也不会丢失，除非手动删除

特性：

  • 以键值对的形式存储，并且存储的是字符串， 省略了window
  • 可以多窗口页面共享（同一浏览器）

语法：

  • 存储数据：localStorage.setItem(key, value)
  • 获取数据：localStorage.getItem(key)
  • 删除数据：localStorage.removeItem(key)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>本地存储-localstorage</title>
	</head>
	<body>
		<script>
			// 本地存储 - localstorage 存储的是字符串 
			// 1. 存储
			localStorage.setItem('age', 18)
			// 2. 获取
			console.log(typeof localStorage.getItem('age'))
			// 3. 删除
			localStorage.removeItem('age')
		</script>
	</body>
</html>

image.png

sessionStorage

特性：

  • 生命周期为关闭浏览器窗口
  • 在同一个窗口(页面)下数据可以共享
  • 以键值对的形式存储使用
  • 用法跟localStorage基本相同

区别：

  • 用法跟localStorage基本相同
  • 当页面浏览器被关闭时，存储在 sessionStorage 的数据会被清除

语法：

  • 存储：sessionStorage.setItem(key,value)
  • 获取：sessionStorage.getItem(key)
  • 删除：sessionStorage.removeItem(key)

存储复杂数据类型

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

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

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

JSON字符串：

  • 首先是1个字符串
  • 属性名使用双引号引起来，不能单引号
  • 属性值如果是字符串型也必须双引号
1
2
3
4
5
6
7
8
9
10
11
12
<body>
	<script>
		// 本地存储复杂数据类型
		const goods = {
			name: '小米',
			price: 1999
		}
		// 1. 把对象转换为JSON字符串  JSON.stringify
		localStorage.setItem('goods', goods)
		localStorage.setItem('goods1', JSON.stringify(goods))
	</script>
</body>

image.png

问题：因为本地存储里面取出来的是字符串，不是对象，无法直接使用

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

语法：JSON.parse(JSON字符串)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<body>
	<script>
		// 本地存储复杂数据类型
		const goods = {
			name: '小米',
			price: 1999
		}
		// 1. 把对象转换为JSON字符串  JSON.stringify
		localStorage.setItem('goods', goods)
		localStorage.setItem('goods1', JSON.stringify(goods))
		// 2. 把JSON字符串转换为对象  JSON.parse
		console.log(localStorage.getItem('goods1'))
		console.log(JSON.parse(localStorage.getItem('goods1')))
	</script>
</body>

image.png

其他用法

数组map方法

使用场景：

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

语法：

1
2
3
4
5
6
7
8
9
10
11
12
<body>
	<script>
		const arr = ['red', 'blue', 'pink']
		// 1. 数组 map方法 处理数据并且 返回一个数组
		const newArr = arr.map(function (ele, index) {
			// console.log(ele)  // 数组元素
			// console.log(index) // 索引号
			return ele + '颜色'
		})
		console.log(newArr)  // ['red颜色', 'blue颜色', 'pink颜色']
	</script>
</body>

map 也称为映射。映射是个术语，指两个元素的集之间元素相互“对应”的关系。

map重点在于有返回值，forEach没有返回值（undefined）

数组join方法

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

参数：数组元素是通过参数指定的分隔符进行分隔的，若传入''空字符，则直接连接；若为空则用,逗号隔开

语法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<body>
	<script>
		const arr = ['red', 'blue', 'pink']
		// 1. 数组 map方法 处理数据并且 返回一个数组
		const newArr = arr.map(function (ele, index) {
			// console.log(ele)  // 数组元素
			// console.log(index) // 索引号
			return ele + '颜色'
		})
		console.log(newArr)
		// 2. 数组join方法  把数组转换为字符串
		// 小括号为空则逗号分割
		console.log(newArr.join())  // red颜色,blue颜色,pink颜色
		// 小括号是空字符串，则元素之间没有分隔符
		console.log(newArr.join(''))  //red颜色blue颜色pink颜色
		console.log(newArr.join('|'))  //red颜色|blue颜色|pink颜色
	</script>
</body>