Bom操作和正则表达式

最新推荐文章于 2024-07-30 17:19:26 发布

胡想

最新推荐文章于 2024-07-30 17:19:26 发布

阅读量32

点赞数

分类专栏： JavaScript 文章标签：正则表达式 javascript

本文链接：https://blog.csdn.net/Huxiang_he/article/details/135092066

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

window对象

`BOM`(浏览器对象模型)

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

定时器-延时函数

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

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

延时器需要等待,所以后面的代码先执行

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

`JS`执行机制

同步

前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的。比如做饭的同步做法：我们要烧水煮饭，等水开了（10分钟之后），再去切菜，炒菜，形成一个执行栈

异步

你在做一件事情时，因为这件事情会花费很长时间，在做这件事的同时，你还可以去处理其他事情。比如做饭的异步做法，我们在烧水的同时，利用这10分钟，去切菜，炒菜，异步任务相关添加到任务队列中

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

location对象

常用属性和方法

href 属性获取完整的 URL 地址，对其赋值时用于地址的跳转
search 属性获取地址中携带的参数，符号？后面部分
hash 属性获取地址中的啥希值，符号 # 后面部分
reload 方法用来刷新当前页面，传入参数 true 时表示强制刷新

<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.itcast.cn'

    // 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对象

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

// 检测 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'
  }})();

histroy对象

histroy对象方法	作用
back()	可以后退功能
forward()	前进功能
go(参数)	前进或后退，参数是1作用前进1个页面，-1后退一个页面

本地存储

`localStorage`

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

**特性：**以键值对的形式存储，并且存储的是字符串，省略了window

语法

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

`sessionStorage`

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

存储复杂数据类型

本地只能存储字符串,无法存储复杂数据类型，需要将复杂数据类型转换成JSON字符串,在存储到本地。

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

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

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

Map

**作用：**map 迭代数组，并且返回新的数组

<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)
</script>
</body>

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

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

join

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

<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>

正则表达式

正则表达式（Regular Expression）是一种字符串匹配的模式（规则）

定义规则
```
const reg =  /表达式/
```
- 其中/ /是正则表达式字面量
- 正则表达式也是对象
使用正则
- test()方法 用来查看正则表达式与指定的字符串是否匹配
- 如果正则表达式与指定的字符串匹配，返回true，否则false

   <body>
     <script>
       // 正则表达式的基本使用
       const str = 'web前端开发'
       // 1. 定义规则
       const reg = /web/
   
       // 2. 使用正则  test()
       console.log(reg.test(str))  // true  如果符合规则匹配上则返回true
       console.log(reg.test('java开发'))  // false  如果不符合规则匹配上则返回 false
     </script>
   </body>

检索（查找）符合规则的字符串

如果匹配成功，exec() 方法返回一个数组，否则返回null，包含正确匹配的位置

元字符

边界符

边界符说明
^ 表示匹配行首以谁开始
$ 表示匹配行末以谁结束
如果 ^ 和 $ 在一起，表示必须是精确匹配。
量词

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

边界符	说明
^	表示匹配行首以谁开始
$	表示匹配行末以谁结束

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

字符类

[a-z] 表示 a 到 z 26个英文字母都可以
[a-zA-Z] 表示大小写都可以
[0-9] 表示 0~9 的数字都可以
[^a-z] 匹配除了小写字母以外的字符，（ [ ] 里面加上 ^ 取反符号）
. 匹配除换行符之外的任何单个字符

预定类	说明
\d	匹配0-9的任一字符，相当于[0-9]
\D	匹配0-9以外的任一字符，相当于[ ^0-9]
\w	匹配任意的字母，数字，下划线，相当于 [a-zA-Z0-9_]
\W	匹配除字母，数字，下划线以外的字符，相当于 [ ^a-zA-Z0-9_]
\s	匹配空格，包括换行符，制表符，空格符，相当于 [\t\r\n\v\f]
\S	匹配非空格以外的字符，相当于[ ^\t\r\n\v\f]

修饰符

修饰符约束正则执行的某些细节行为，如是否区分大小写、是否支持多行匹配等
- i 是单词 ignore 的缩写，正则匹配时字母不区分大小写
- g 是单词 global 的缩写，匹配所有满足正则表达式的结果

      <body>
        <script>
          // 替换和修饰符
          const str = '欢迎大家学习前端，相信大家一定能学好前端，都成为前端大神'
          // 1. 替换  replace  需求：把前端替换为 web
          // 1.1 replace 返回值是替换完毕的字符串
          // const strEnd = str.replace(/前端/, 'web') 只能替换一个
      
          // 2. 修饰符 g 全部替换
          const strEnd = str.replace(/前端/g, 'web')
          console.log(strEnd) 
        </script>
      </body>