JS笔记--Web APIS(下)

最新推荐文章于 2024-08-20 18:04:12 发布

彩虹桥下的小淅猪

最新推荐文章于 2024-08-20 18:04:12 发布

阅读量600

点赞数

分类专栏：前端JaveScript学习文章标签：前端 javascript

本文链接：https://blog.csdn.net/m0_64931189/article/details/130905409

版权

前端JaveScript学习专栏收录该内容

4 篇文章 0 订阅

订阅专栏

# Web APIs - 第5天笔记

## 定时器

-延迟函数

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

语法：

~~~JavaScript

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

~~~

setTimeout 仅仅只执行一次，所以可以理解为就是把一段代码延迟执行。

-间歇函数

setInterval : 每隔一段时间就执行一次

清除延时函数：

~~~JavaScript

clearTimeout(timerId)

~~~

>注意点

>1. 延时函数需要等待,所以后面的代码先执行

>2. 返回值是一个正整数，表示定时器的编号

~~~html

<body>

// 定时器之延迟函数

// 1. 开启延迟函数

let timerId = setTimeout(function () {

console.log('我只执行一次') }, 3000)

// 1.1 延迟函数返回的还是一个正整数数字，表示延迟函数的编号

console.log(timerId)

// 1.2 延迟函数需要等待时间，所以下面的代码优先执行

// 2. 关闭延迟函数

clearTimeout(timerId)

</script>

</body>

~~~

## location对象

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

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

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

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

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

~~html

<body>

<form>

</form>

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

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

常用属性和方法：- 通过 userAgent 检测浏览器的版本及平台

~~~javascript

// 检测 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

对象history (历史)是对象，主要管理历史记录，该对象与浏览器地址栏的操作相对应，如前进、后退等**使用场景**history对象一般在实际开发中比较少用，但是会在一些OA 办公系统中见到。

## 本地存储（今日重点）

本地存储：将数据存储在本地浏览器中

好处：

1、页面刷新或者关闭不丢失数据，实现数据持久化

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

### localStorage（重点）

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

特性:以键值对的形式存储，并且存储的是字符串。

<body>

// 本地存储 - localstorage 存储的是字符串

// 1. 存储

localStorage.setItem('age', 18)

// 2. 获取

console.log(typeof localStorage.getItem('age'))

// 3. 删除

localStorage.removeItem('age')

</script>

</body>

### sessionStorage（了解）

特性：- 用法跟localStorage基本相同

- 区别是：当页面浏览器被关闭时，存储在 sessionStorage 的数据会被清除

存储：sessionStorage.setItem(key,value)

获取：sessionStorage.getItem(key)

删除：sessionStorage.removeItem(key)

### localStorage 存储复杂数据类型

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

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

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

什么是JSON字符串：

- 首先是1个字符串

- 属性名使用双引号引起来，不能单引号

- 属性值如果是字符串型也必须双引号

~~~html

<body>

// 本地存储复杂数据类型

const goods = { name: '小米', price: 1999 }

// localStorage.setItem('goods', goods)

// console.log(localStorage.getItem('goods'))

// 1. 把对象转换为JSON字符串 JSON.stringify(对象)

localStorage.setItem('goods', JSON.stringify(goods))

// console.log(typeof localStorage.getItem('goods'))

</script>

</body>

~~~

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

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

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

~~~html

<body>

// 本地存储复杂数据类型

const goods = { name: '小米', price: 1999 }

// localStorage.setItem('goods', goods)

// console.log(localStorage.getItem('goods'))

// 1. 把对象转换为JSON字符串 JSON.stringify

localStorage.setItem('goods', JSON.stringify(goods))

// console.log(typeof localStorage.getItem('goods'))

// 2. 把JSON字符串转换为对象

JSON.parse console.log(JSON.parse(localStorage.getItem('goods')))

</script>

</body>

~~~

## 数组map 方法

使用场景：map 可以遍历数组处理数据，并且返回新的数组

语法：

~~~javascript

<body>

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() 方法用于把数组中的所有元素转换一个字符串

语法：

~~~html

<body>

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>

~~~

# Web APIs - 第6天笔记

## 正则表达式

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

使用场景：

例如验证表单：手机号表单要求用户只能输入11位的数字 (匹配)- 过滤掉页面内容中的一些敏感词(替换)，或从字符串中获取我们想要的特定部分(提取)等

### 正则基本使用

1. 定义规则

~~~JavaScript

const reg = /表达式/

~~~

- 其中` / / `是正则表达式字面量

- 正则表达式也是`对象 `

2. 使用正则

- `test()方法` 用来查看正则表达式与指定的字符串是否匹配

- 如果正则表达式与指定的字符串匹配，返回`true`，否则`false`

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

### 元字符

1. 普通字符: 大多数的字符仅能够描述它们本身，这些字符称作普通字符，例如所有的字母和数字。

- 普通字符只能够匹配字符串中与它们相同的字符。 - 比如，规定用户只能输入英文26个英文字母，普通字符的话 /[abcdefghijklmnopqrstuvwxyz]/

2. 元字符(特殊字符）

- 是一些具有特殊含义的字符，可以极大提高了灵活性和强大的匹配功能。

- 比如，规定用户只能输入英文26个英文字母，换成元字符写法： /[a-z]/

#### 边界符

正则表达式中的边界符（位置符）用来提示字符所处的位置，主要有两个字符!

>如果 ^ 和 $ 在一起，表示必须是精确匹配

~~~html<body> <script>

// 元字符之边界符

// 1. 匹配开头的位置 ^

const reg = /^web/

console.log(reg.test('web前端')) // true

console.log(reg.test('前端web')) // false

console.log(reg.test('前端web学习')) // false

console.log(reg.test('we')) // false

// 2. 匹配结束的位置 $

const reg1 = /web$/

console.log(reg1.test('web前端')) // false

console.log(reg1.test('前端web')) // true

console.log(reg1.test('前端web学习')) // false

console.log(reg1.test('we')) // false

// 3. 精确匹配 ^ $

const reg2 = /^web$/

console.log(reg2.test('web前端')) // false

console.log(reg2.test('前端web')) // false

console.log(reg2.test('前端web学习')) // false

console.log(reg2.test('we')) // false

console.log(reg2.test('web')) // true

console.log(reg2.test('webweb')) // flase

</script></body>~~~

#### 量词

量词用来设定某个模式重复次数!

注意：逗号左右两侧千万不要出现空格

~~~html<body> <script>

// 元字符之量词

// 1. * 重复次数 >= 0 次

const reg1 = /^w*$/

console.log(reg1.test('')) // true

console.log(reg1.test('w')) // true

console.log(reg1.test('ww')) // true

console.log('-----------------------')

// 2. + 重复次数 >= 1 次

const reg2 = /^w+$/

console.log(reg2.test('')) // false

console.log(reg2.test('w')) // true

console.log(reg2.test('ww')) // true

console.log('-----------------------')

// 3. ? 重复次数 0 || 1

const reg3 = /^w?$/

console.log(reg3.test('')) // true

console.log(reg3.test('w')) // true

console.log(reg3.test('ww')) // false

console.log('-----------------------')

// 4. {n} 重复 n 次

const reg4 = /^w{3}$/

console.log(reg4.test('')) // false

console.log(reg4.test('w')) // flase

console.log(reg4.test('ww')) // false

console.log(reg4.test('www')) // true

console.log(reg4.test('wwww')) // false

console.log('-----------------------')

// 5. {n,} 重复次数 >= n

const reg5 = /^w{2,}$/

console.log(reg5.test('')) // false

console.log(reg5.test('w')) // false

console.log(reg5.test('ww')) // true

console.log(reg5.test('www')) // true

console.log('-----------------------')

// 6. {n,m} n =< 重复次数 <= m

const reg6 = /^w{2,4}$/

console.log(reg6.test('w')) // false

console.log(reg6.test('ww')) // true

console.log(reg6.test('www')) // true

console.log(reg6.test('wwww')) // true

console.log(reg6.test('wwwww')) // false

// 7. 注意事项：逗号两侧千万不要加空格否则会匹配失败

</script>~~~

#### 范围

表示字符的范围，定义的规则限定在某个范围，比如只能是英文字母，或者数字等等，用表示范围

~~~html<body> <script>

// 元字符之范围 []

// 1. [abc] 匹配包含的单个字符，多选1

const reg1 = /^[abc]$/

console.log(reg1.test('a')) // true

console.log(reg1.test('b')) // true

console.log(reg1.test('c')) // true

console.log(reg1.test('d')) // false

console.log(reg1.test('ab')) // false

// 2. [a-z] 连字符单个

const reg2 = /^[a-z]$/

console.log(reg2.test('a')) // true

console.log(reg2.test('p')) // true

console.log(reg2.test('0')) // false

console.log(reg2.test('A')) // false

// 想要包含小写字母，大写字母，数字

const reg3 = /^[a-zA-Z0-9]$/

console.log(reg3.test('B')) // true

console.log(reg3.test('b')) // true

console.log(reg3.test(9)) // true

console.log(reg3.test(',')) // flase

// 用户名可以输入英文字母，数字，可以加下划线，要求 6~16位

const reg4 = /^[a-zA-Z0-9_]{6,16}$/

console.log(reg4.test('abcd1')) // false

console.log(reg4.test('abcd12')) // true

console.log(reg4.test('ABcd12')) // true

console.log(reg4.test('ABcd12_')) // true

// 3. [^a-z] 取反符

const reg5 = /^[^a-z]$/

console.log(reg5.test('a')) // false

console.log(reg5.test('A')) // true

console.log(reg5.test(8)) // true

</script></body>~~~

# 替换和修饰符

replace 替换方法，可以完成字符的替换

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

修饰符约束正则执行的某些细节行为，如是否区分大小写、是否支持多行匹配等

- i 是单词 ignore 的缩写，正则匹配时字母不区分大小写

- g 是单词 global 的缩写，匹配所有满足正则表达式的结果

## change 事件

给input注册 change 事件，值被修改并且失去焦点后触发

## 判断是否有类

元素.classList.contains() 看看有没有包含某个类，如果有则返回true，么有则返回false

彩虹桥下的小淅猪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS笔记--Web APIS(下)

对象history (历史)是对象，主要管理历史记录，该对象与浏览器地址栏的操作相对应，如前进、后退等**使用场景**history对象一般在实际开发中比较少用，但是会在一些OA 办公系统中见到。例如验证表单：手机号表单要求用户只能输入11位的数字 (匹配)- 过滤掉页面内容中的一些敏感词(替换)，或从字符串中获取我们想要的特定部分(提取)等。const strEnd = str.replace(/前端/g, 'web') console.log(strEnd)search=笔记本。
复制链接

扫一扫

专栏目录