JS-13 BOM；window对象的作用及常见方法；location对象的常见属性及方法；history、screen对象；JSON基本语法及序列化；Storage

最新推荐文章于 2024-02-22 13:47:09 发布

龙猫呗

最新推荐文章于 2024-02-22 13:47:09 发布

阅读量114

点赞数

分类专栏： JavaScript 文章标签： javascript json 前端

本文链接：https://blog.csdn.net/qq_54075517/article/details/131198169

版权

JavaScript 专栏收录该内容

27 篇文章 1 订阅

订阅专栏

1_认识BOM

BOM：浏览器对象模型（Browser Object Model）

简称 BOM，由浏览器提供的用于处理文档（document）之外的所有内容的其他对象；
比如navigator、location、history等对象；

JS重要的运行环境就是浏览器

浏览器本身又作为一个应用程序需要对其本身进行操作；
通常浏览器会有对应的对象模型（BOM，Browser Object Model）；
将BOM看成是连接JavaScript脚本与浏览器窗口的桥梁；

BOM主要包括的对象模型：

window：包括全局属性、方法，控制浏览器窗口相关的属性、方法；
location：浏览器连接到的对象的位置（URL）；
history：操作浏览器的历史；
navigator：用户代理（浏览器）的状态和标识（很少用到）；
screen：屏幕窗口信息（很少用到

2_window对象

window对象在浏览器中从两个视角来看待：

视角一：全局对象。
- ECMAScript其实是有一个全局对象的，这个全局对象在Node中是global；
- 在浏览器中就是window对象；
视角二：浏览器窗口对象。作为浏览器窗口时，提供了对浏览器操作的相关的API；

两个视角存在大量重叠的地方，不需要刻意去区分：

事实上对于浏览器和Node中全局对象名称不一样的情况，目前已经指定了对应的标准，称之为globalThis，并且大多数浏览器都支持它；
放在window对象上的所有属性都可以被访问；
使用var定义的变量会被添加到window对象中；
window默认给我们提供了全局的函数和类：setTimeout、Math、Date、Object等

2.1_window对象的作用

window对象作用：

包含大量的属性，localStorage、console、location、history、screenX、scrollX等等（大概60+个属性）；
包含大量的方法，alert、close、scrollTo、open等等（大概40+个方法）；
包含大量的事件，focus、blur、load、hashchange等等（大概30+个事件）；
包含从EventTarget继承过来的方法，addEventListener、removeEventListener、dispatchEvent方法；

MDN文档查看：https://developer.mozilla.org/zh-CN/docs/Web/API/Window

在这里插入图片描述

MDN文档的符号：

红色垃圾桶——删除符号：表示这个API已经废弃，不推荐继续使用了；
蓝色感叹——点踩符号：表示这个API不属于W3C规范，某些浏览器有实现（所以兼容性的问题）；
蓝色药瓶——实验符号：该API是实验性特性，以后可能会修改，并且存在兼容性问题；

2.2_window常见事件

在这里插入图片描述

3_location对象

location对象用于表示window上当前链接到的URL信息。

3.1_常见的属性

href: 当前window对应的超链接URL, 整个URL；

protocol: 当前的协议；

host: 主机地址；(有端口号)

hostname: 主机地址(没有端口号)；

port: 端口；

pathname: 路径；

search: 查询字符串；

hash: 哈希值；（一般是带#，处于网址末尾）

username：URL中的username（很多浏览器已经禁用）；

password：URL中的password（很多浏览器已经禁用）；

    // 1.完整的URL
    console.log(location.href)
    // 2.获取URL信息
    console.log(location.hostname)
    console.log(location.host)
    console.log(location.protocol)
    console.log(location.port)
    console.log(location.pathname)
    console.log(location.search)
    console.log(location.hash)

3.2_Location对象常见的方法

location.href=“url” location.href是一个属性，改变url地址。

location.assign("url") 加载新的文档，效果与location.href相当。assign会添加记录到浏览历史，点击后退可以返回之前页面。

location.replace 将地址替换成新url，该方法通过指定URL替换当前缓存在历史里（客户端）的项目。与以上两者的区别在于：在replace之后，浏览历史就被清空了。因此若使用replace页面跳转后是不能后退的。

location.reload() 实现页面刷新。使用它时，需要在页面加载后重新获取资源，不会产生重试对话框的效果

<body>

  <button>打开新的网页</button>
  <button>替换新的网页</button>
  <button>网页重新加载</button>
  
  <script>

    // location方法
    var btns = document.querySelectorAll("button")
    btns[0].onclick = function() {
      location.assign("http://www.baidu.com")
    }
    btns[1].onclick = function() {
      location.replace("http://www.baidu.com")
    }
    btns[2].onclick = function() {
      location.reload()
    }

  </script>

</body>

3.3_URLSearchParams

URLSearchParams 定义了实用的方法来处理 URL 的查询字符串

将一个字符串转化成URLSearchParams类型；
将一个URLSearchParams类型转成字符串；

常见的方法：

get：获取搜索参数的值；
set：设置一个搜索参数和值；
append：追加一个搜索参数和值；
has：判断是否有某个搜索参数；
MDN文档：https://developer.mozilla.org/zh-CN/docs/Web/API/URLSearchParams

网址栏有中文，使用encodeURIComponen编码、decodeURIComponent解码

  <script>
    var urlSearchString = "?name=haha&age=18&height=1.88"
    var searchParams = new URLSearchParams(urlSearchString)
    console.log(searchParams.get("name"))    //haha
    console.log(searchParams.get("age"))    //18
    console.log(searchParams.get("height"))	 //1.88
 
    searchParams.append("address", "北京市")
    console.log(searchParams.get("address"))   //北京市
      //下面的乱码，已经默认用encodeURLComponnont编码
    console.log(searchParams.toString())   //name=haha&age=18&height=1.88&address=%E5%8C%97%E4%BA%AC%E5%B8%82
    
</script>

4_history对象

history对象允许我们访问浏览器曾经的会话历史记录。

有两个属性：

length：会话中的记录条数；
state：当前保留的状态值；

五个方法：

back()：返回上一页，等价于history.go(-1)；
forward()：前进下一页，等价于history.go(1)；
go()：加载历史中的某一页；
pushState()：打开一个指定的地址；【可以返回上一个界面】
replaceState()：打开一个新的地址，并且使用replace；【无法返回上一个界面】

history和hash目前是vue、react等框架实现路由的底层原理

<body>

  <button>修改history</button>
  <button class="back">返回上一级</button>
  
  <script>

    // 前端路由核心: 修改了URL, 但是页面不刷新
    // 1> 修改hash值
    // 2> 修改history

    // 1.history对应的属性
    console.log(history.length)
    console.log(history.state)

    // 2.修改history
    var btnEl = document.querySelector("button")
    btnEl.onclick = function() {
      history.pushState({ name: "why", age: 18 }, "", "/why")
      // history.replaceState({ name: "why", age: 18 }, "", "/why")
    }

    var backBtnEl = document.querySelector(".back")
    backBtnEl.onclick = function() {
      // history.back()
      // history.forward()
      // 类似于上面的两个方法, 只是可以传入层级
      // history.go(-2)
    }

  </script>

</body>

5_navigator对象

表示用户代理的状态和标识等信息，用到的地方很少

在这里插入图片描述

6_screen对象

主要记录的是浏览器窗口外面的客户端显示器的信息： 比如屏幕的逻辑像素 screen.width、screen.height；

在这里插入图片描述

7_JSON

7.1_来源

目前的开发中，JSON是一种非常重要的数据格式，它不是编程语言，而是一种可以在服务器和客户端之间传输的数据格式。

JSON全称JavaScript Object Notation（JavaScript对象符号）：

JSON是由Douglas Crockford构想和设计的一种轻量级资料交换格式，算是JavaScript的一个子集；
但是虽然JSON被提出来的时候是主要应用JavaScript中，但是目前已经独立于编程语言，可以在各个编程语言中使用；
很多编程语言都实现了将JSON转成对应模型的方式；

其他的传输格式：

XML：在早期的网络传输中主要是使用XML来进行数据交换的，但是这种格式在解析、传输等各方面都弱于JSON，目前已经很少被使用；
Protobuf：在网络传输中目前越来越多使用的传输格式是protobuf，但是直到2021年的3.x版本才支持JavaScript，所以目前在前端使用的较少；【适用于数据交换频率很高的场景】

JSON被使用的场景越来越多：

网络数据的传输JSON数据；
项目的某些配置文件；
非关系型数据库（NoSQL）将json作为存储格式

7.2_小程序的app.json

在这里插入图片描述

7.3_基本语法

JSON的顶层支持三种类型的值：

简单值：数字（Number）、字符串（String，不支持单引号）、布尔类型（Boolean）、null类型；
对象值：由key、value组成，key是字符串类型，并且必须添加双引号，值可以是简单值、对象值、数组值；
数组值：数组的值可以是简单值、对象值、数组值；

要单独新建一个j文件，以ison为后缀名；json文件里面不能写注释；有严格的语法，必须遵守，不能乱加符号；

{
  "name": "hhh",
  "age": 123,
  "friend": {
    "name": "xxx",
    "age": null
  }
}

7.4_JSON序列化

某些情况下想将JavaScript中的复杂类型转化成JSON格式的字符串，方便进行处理：

比如将一个对象保存到localStorage中；
但是直接存放一个对象，这个对象会被转化成 [object Object] 格式的字符串，并不是想要的结果；

JSON序列化方法

在ES5中引用了JSON全局对象，该对象有两个常用的方法：

stringify() 将JavaScript类型转成对应的JSON字符串；
parse() 解析JSON字符串，转回对应的JavaScript类型；

<script>

    var obj = {
      name: "hhh",
      age: 18,
      friend: {
        name: "xxx"
      }
    }

    console.log(obj.name, obj.age)    //hhh 18

    // 1.将obj对象进行序列化
    var objJSONString = JSON.stringify(obj) 
    console.log(objJSONString)   //{"name":"hhh","age":18,"friend":{"name":"xxx"}}

    // 2.将对象存储到localStorage
    localStorage.setItem("info", objJSONString)
    
    var item = localStorage.getItem("info")
    console.log(item, typeof item)    //  {"name":"hhh","age":18,"friend":{"name":"xxx"}}   string

    // 3.将字符串转回到对象(反序列化)
    var newObj = JSON.parse(item)
    console.log(newObj)   //  "name":"hhh"   "age":18    "friend":{"name":"xxx"}     Object

  </script>

Stringify的参数replace

JSON.stringify() 将一个 JavaScript 对象或值转换为 JSON 字符串：

如果指定了一个 replacer 函数，则可以选择性地替换值；
如果指定的 replacer 是数组，则可选择性地仅包含数组指定的属性；
对象本身包含toJSON方法，那么会直接使用toJSON方法的结果

<script>
    var obj = {
      name: "hhh",
      age: 18,
      friend: {
        name: "xxx"
      }
    }

    // 1.replacer参数
    var objJSONString = JSON.stringify(obj, function(key, value) {
      if (key === "name") {
        return "coderhhh"
      }
      return value
    }, "")
    console.log(objJSONString)   //{"name":"coderhhh","age":18,"friend":{"name":"coderhhh"}}

    // 2.space参数
    var objJSONString = JSON.stringify(obj, null, 4)
    console.log(objJSONString)   //json数据每行缩进4个字符  ,打印美观

  </script>

<script>
    var obj = {
      name: "hhh",
      age: 18,
      friend: {
        name: "xxx"
      },
      toJSON: function() {
        return "123"
      }
    }

    // 3.如果对象本身有显示toJSON方法, 那么直接调用toJSON方法
    var objJSONString = JSON.stringify(obj)
    console.log(objJSONString)  //123

  </script>

Stringify的参数space

JSON.parse() 方法用来解析JSON字符串，构造由字符串描述的JavaScript值或对象。

<script>

    var obj = {
      name: "hhh",
      age: 18
    }

    var objJSONString = JSON.stringify(obj) 
    console.log(objJSONString)    //{"name":"hhh","age":18}
    
	//也可以利用函数，修改数值。
    var newObj = JSON.parse(objJSONString, function(key, value) {
      if (key === "age") {
        return value + 2
      }
      return value
    })
    console.log(newObj)   //age:20   name :  "hhh"

  </script>

8_Storage

页面右键——>检查——>点击应用（Application）

在这里插入图片描述

WebStorage主要提供了一种机制，可以让浏览器提供一种比cookie更直观的key、value存储方式：

localStorage：本地存储，提供的是一种永久性的存储方法，在关闭掉网页重新打开时，存储的内容依然保留；
sessionStorage：会话存储，提供的是本次会话的存储，在关闭掉会话时，存储的内容会被清除；

localStorage和sessionStorage的区别

关闭网页后重新打开，localStorage会保留，而sessionStorage会被删除；
在页面内实现跳转，localStorage会保留，sessionStorage也会保留；
在页面外实现跳转（打开新的网页），localStorage会保留，sessionStorage不会被保留；

Storage常见的方法和属性

（1）属性： Storage.length 返回一个整数，表示存储在Storage对象中的数据项数量；只能读不能修改

（2）方法：

Storage.key()：该方法接受一个数值n作为参数，返回存储中的第n个key名称；
Storage.getItem()：该方法接受一个key作为参数，并且返回key对应的value；
Storage.setItem()：该方法接受一个key和value，并且将会把key和value添加到存储中。如果key存储，则更新其对应的值；
Storage.removeItem()：该方法接受一个key作为参数，并把该key从存储中删除；
Storage.clear()：该方法的作用是清空存储中的所有key；

9_补充

<body>

  <div class="box">
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
  </div>
  
  <script>

    // 强调: 代码的执行顺序

    var btnEls = document.querySelectorAll("button")

    // [btn1, btn2, btn3, btn4]

    // 对每一个按钮的点击进行监听
    for (var i = 0; i < btnEls.length; i++) {
      var btnItemEl = btnEls[i]
      btnItemEl.index = i
      
      debugger

      btnItemEl.onclick = function() {
        debugger
        console.log(i)
        console.log(btnItemEl)

        // 怎么样在这里能拿到对应的btnItemEl
        // 方案一: 直接获取this
        console.log(this)

        // 方案二: 先获取索引
        console.log(this.index)
      }
    }

    console.log(i) // 4
    console.log(btnItemEl)



  </script>

</body>

龙猫呗

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS-13 BOM；window对象的作用及常见方法；location对象的常见属性及方法；history、screen对象；JSON基本语法及序列化；Storage

BOM；window对象的作用及常见方法；location对象的作用及常见方法；history、screen对象；JSON基本语法及序列化；Storage
复制链接

扫一扫