Window对象

BOM
Window对象
- 定时器-延时函数
- js执行机制
- - 同步任务
  - 异步任务
  - 执行机制
- location对象
- navigator 对象
- histroy 对象
本地存储
- 本地存储分类
- - localStorage
  - sessionStorage
- 存储复杂数据类型
拼接字符串的新思路

BOM

BOM浏览器对象模型

Window对象

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

定时器-延时函数

只执行一次，把一段代码延迟执行。

setTimeout(回调函数,等待的毫秒数)   //返回一个id数字型

清除延时函数：

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

js执行机制

js的特点：单线程，也就是说，同一个时间只能做一件事
为了解决这个问题，利用多核cpu的计算能力，js出现了同步和异步。
同步：前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的。
异步：在做一件事情的同事，还可以去处理其他事情。
本质区别：这条流水线上各个流程的执行顺序不同

同步任务

在主线程上执行，形成一个执行栈。

异步任务

通过回调函数实现的。异步任务相关添加到任务队列中。
异步任务有三种类型：
1、普通事件，如click、resize
2、资源加载，如load、error等
3、定时器，包括setInerval、setTimeout等

执行机制

先执行执行栈中的同步任务，异步任务放入到任务队列中，一旦执行栈中的所有同步任务执行完毕，系统就会按照次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行。

由于主线程不断的重复获得任务、执行任务、再获取任务、再执行，所以这种机制被称为事件循环（event loop）

location对象

拆分并保存了URL地址的各个组成部分。
常用的属性和方法：

href属性
获取完整的URL地址，对其赋值时用于地址的跳转

location.href = 'https://www.baidu.com'

search属性
获取地址中携带的参数符号？后面的部分

location.search

hash属性
获取地址中的哈希值， # 号后面部分

location.hash

reload方法
用来刷新当前页面，传入参数true时表示强制刷新

location.reload()
location.reload(true)   //强制刷新

navigator 对象

记录浏览器的相关信息。

userAgent属性
检测浏览器的版本及平台

histroy 对象

管理历史记录，浏览器的后退、前进、历史记录等

本地存储

数据存储在用户浏览器中，读取、读取方便、甚至页面刷新不丢失数据，容量较大。

本地存储分类

localStorage

本地存储只能存储字符串类型，存入的时候是数字型，拿出来后也会是字符串！
作用：可以将数据永久存储在本地（用户的电脑），除非手动删除，否则关闭页面也会存在。
语法：

存储数据

localStorage.setItem('key','value')

获取数据

localStorage.getItem('key')

删除

localStorage.removeItem('key')

更改数据

localStorage.setItem('key','value')  //前提是key已经存在

sessionStorage

关闭浏览器就会消失，用法和localstorage一致

存储复杂数据类型

本地存储只能存储字符串，无法直接存储复杂数据类型
将复杂数据类型转换成JSON字符串然后再存储到本地。
语法：

JSON.stringify(复杂数据类型)        //如对象、数组

取到的JSON字符串，属性和值都是被双引号包含
最后将JSON字符串转换为复杂数据类型
语法：

JSON.parse(JSON字符串)        //转换成：对象、数组

拼接字符串的新思路

数组的map方法
map可以遍历数组处理数据，并且返回新的数组。主要用于需要返回一个新数组，不要用来遍历数组。

  const arr = ['red', 'green', 'pink']
const newArr = arr.map(function (ele, index) {console.log(ele);    //ele得到数组中每个元素console.log(index)  //得到数组中每个元素的索引号return ele + '颜色'   //遍历数组，为每个元素添加字符颜色 返回了一个新数组
})
console.log(newArr)     //newArr = ['red颜色, 'green颜色', 'pink颜色']

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

// join方法：将数组中所有元素返回一个字符串
console.log(newArr.join())          //若join()小括号里什么也不写，则用逗号拼接：red颜色,green颜色,pink颜色
console.log(newArr.join(''))        //若join()小括号里写空字符，则没有间隔符号：red颜色green颜色pink颜色

APIS（BOM）——Window对象、本地存储相关推荐

BOM——window对象
BOM 浏览器对象模型,它提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是window BOM 由一系列相关的对象构成,并且每个对象都提供了很多方法与属性 BOM 缺乏标准,JavaScri ...
js bom window对象
一.全局作用域我们全局作用域定义了一个变量name,window对象下也能访问,证明在全局作用域下定义的变量,会自动纳入window对象. var name = "Bob";co ...
Wed APIS-Window对象、本地存储、数组的map（）方法、数组的join（）方法
目录 Window对象 1.BOM(浏览器对象模型) 2.定时器-延时函数 3.JS执行机制 4.location对象 5.navigator对象 6.histroy对象本地存储 1.分类 1.1. ...
window对象属性
window对象属性 window对象中存储的属性和方法比较多,我们只对常用的做说明,不常用的看看就好. 首先是window中的这几个属性,这几个属性存储的值都是对象{}.每个对象对应一种操作,可以理 ...
JS9day(BOM对象模型,setTimeout定时器，JS单线程执行机制，location对象，swiper插件，localStorage本地存储，购物车案例升级版，学习信息案例（本地存储）)
文章目录 BOM简介定时器-延时函数 5秒关闭广告案例递归模拟setInterval函数两种定时器对比 JS 执行机制 location对象 navigator对象 histroy对象(了解) ...
BOM的window对象的属性及其方法
Window对象是客户端javascript最高层对象之一,只要打开浏览器窗口,不管该窗口中是否有打开的网页,当遇到BODY.FRAMESET或 FRAME元素时,都会自动建立window对象的实例. ...
客户端本地存储的比较及使用window.name数据传输
一:cookie: 1. 什么是cookie? Cookie是在客户端用于存储会话信息的,用户请求页面在web服务器与浏览器之间传递.每当同一台计算机通过浏览器请求某个页面时,就会发送这个 cooki ...
Web APIs介绍（四）——offset/client/scroll/轮播图/本地存储
1.1. 元素偏移量 offset 系列 1.1.1 offset 概述 offset 翻译过来就是偏移量, 我们使用 offset系列相关属性可以动态的得到该元素的位置(偏移).大小等. 获得元素距 ...
Web APIs 本地存储
window 对象:浏览器窗口 1.window对象的三个特点 (1)window 是js中的顶级对象所有的全局函数全局变量都是window对象的成员(属性+成员) (2)只要是window对象中 ...

APIS（BOM）——Window对象、本地存储

Window对象

BOM

Window对象

定时器-延时函数

js执行机制

同步任务

异步任务

执行机制

location对象

navigator 对象

histroy 对象

本地存储

本地存储分类

localStorage

sessionStorage

存储复杂数据类型

拼接字符串的新思路

APIS（BOM）——Window对象、本地存储相关推荐

最新文章

热门文章