老己的JavaScript API笔记5

FinchLin
35 阅读6分钟

JavaScript API知识笔记 第五天

一、Window对象

window对象是一个全局对象，也可以说是JavaScript中的顶级对象

1.BOM（浏览器对象模型）

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

-像document、alert()、console.log()这些都是window的属性，基本BOM的属性和方法都是window的

-所有通过var定义在全局作用域中的变量、函数都会变成window对象的属性和方法

-window对象下的属性和方法调用的时候可以省略window

2.定时器-延时函数

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

语法：

setTimeout(回调函数,等待的毫秒数)

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

每一次调用延时器都会产生一个新的延时器

消除延时函数：

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

对比：

-延时函数: 执行一次

-间歇函数:每隔一段时间就执行一次,除非手动清除

案例

5秒钟之后消失的广告

需求：5秒钟之后，广告自动消失

①：设置延时函数

②：隐藏元素

const img = document.querySelector('img')
        setTimeout(function () {
            img.style.display = 'none'
        }, 5000)

3.JS执行机制

JavaScript 语言的一大特点就是单线程，也就是说，同一个时间只能做一件事

如果 JS 执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉

于是，JS 中出现了同步和异步

同步

前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的。

比如做饭的同步做法：我们要烧水煮饭，等水开了（10分钟之后），再去切菜，炒菜。

同步任务

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

异步

你在做一件事情时，因为这件事情会花费很长时间，在做这件事的同时，你还可以去处理其他事情。

比如做饭的异步做法，我们在烧水的同时，利用这10分钟，去切菜，炒菜。

JS 的异步是通过回调函数实现的。

异步任务

一般而言，异步任务有以下三种类型:

1、普通事件，如 click、resize 等

2、资源加载，如 load、error 等

3、定时器，包括 setInterval、setTimeout 等

异步任务相关添加到**任务队列**中（任务队列也称为消息队列）。

执行机制

  1. 先执行执行栈中的同步任务。

  2. 异步任务放入任务队列中。

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

image.png

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

5.location对象

location 的数据类型是对象，它拆分并保存了 URL 地址的各个组成部分

常用属性和方法：
  • href 属性获取完整的 URL 地址，对其赋值时用于地址的跳转
location.href='http://baidu.com'

案例

5秒钟之后跳转的页面

需求：用户点击可以跳转，如果不点击，则5秒之后自动跳转，要求里面有秒数倒计时

①：目标元素是链接

②：利用定时器设置数字倒计时

③：时间到了，自动跳转到新的页面

let i = 5
        const a = document.querySelector('a')
        let t = setInterval(function () {
            i--
            a.innerHTML = `${i}秒后跳转百度`
            if (i === 0) {
                clearInterval(t)
                location.href = 'https://baidu.com'
            }
        }, 1000)
  • search 属性获取地址中携带的参数，符号 ？后面部分
//https://www.example.com/user?name=张三&age=20&gender=男
console.log(location.search)
//得到?name=张三&age=20&gender=男
  • hash 属性获取地址中的啥希值，符号 # 后面部分
//https://www.example.com/user?name=张三#profile/setting
console.log(location.hash)
//#profile/setting

后期vue路由的铺垫，经常用于不刷新页面，显示不同页面

  • reload 方法用来刷新当前页面，传入参数 true 时表示强制刷新
<button>刷新</button>
    <script>
        const btn=document.querySelector('button')
        btn.addEventListener('click',function(){
            location.reload(ture)
        })
    </script>

4.navigator对象

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

通过 userAgent 检测浏览器的版本及平台

eg：

const userAgent=navigator.userAgent
//验证是否为Android或iPhone

5.history对象

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

image.png

二、本地存储

1.本地存储介绍

1、数据存储在用户浏览器中

2、设置、读取方便、甚至页面刷新不丢失数据

3、容量较大，sessionStorage和localStorage约 5M 左右

2.本地存储分类

localStorage

作用:

可以将数据永久存储在本地(用户的电脑), 除非手动删除，否则关闭页面也会存在

特性：

  • 可以多窗口（页面）共享（同一浏览器可以共享）
  • 以键值对的形式存储使用

语法：

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

image.png

sessionStorage

特性：

  • 生命周期为关闭浏览器窗口

  • 在同一个窗口(页面)下数据可以共享

  • 以键值对的形式存储使用

  • 用法跟localStorage 基本相同

3.存储复杂数据类型

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

解决方法：

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

语法：

JSON.stringify(复杂数据类型)

eg：

const goods={
            name:'mi10',
            price:1999
        }
        localStorage.setItem('goods',JSON.stringify(goods))

实现将复杂数据转换成JSON字符串 存储 本地存储中

image.png

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

语法：

const obj=JSON.parse(localStorage.getItem('goods'))

实现将JSON字符串转换成对象 取出 时候使用

image.png

补充

数组中map方法 迭代数组

作用：

map 迭代数组

语法：

const arr=[1,2,3]
arr.map(function(item,index){
    console.log(item) //item 得到数组所有元素
    console.log(index) //index 得到对应的索引号
})

map可以处理数据，并返回新数组

eg：

const arr=['pink','red','blue']
const newArr=arr.map(function(item,index){
    console.log(item) //item 得到数组所有元素
    console.log(index) //index 得到对应的索引号
    return item+'老师'
})
console.log(newArr) //['pink老师','red老师','blue老师']

数组中join 方法

作用：

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

语法：

const arr=['pink老师','red老师','blue老师']
console.log(arr.join('')) // pink老师red老师blue老师

数组元素是通过参数里面指定的分隔符进行分隔的

avatar
文章
阅读
粉丝