web APIs总结（3）

news2024/11/23 9:48:19

1. 本地存储介绍（重点）

数据存储在用户浏览器中
设置、读取方便、甚至页面刷新不丢失数据
容量较大，sessionStorage和localStorage约 5M 左右

本地存储分类- localStorage

作用: 可以将数据永久存储在本地(用户的电脑), 除非手动删除，否则关闭页面也会存在
特性：可以多窗口（页面）共享（同一浏览器可以共享）；以键值对的形式存储
（注意：本地存储只能存储字符串数据类型）
语法：

存储数据：localStorage.setItem('键'，'值')
获取数据：localStorage.getItem('键')
删除数据：localStorage.removeItem('键')
//修改数据：如果原来有这个键，则是改，如果么有这个键是增
localStorage.setItem('键'，'值')

本地存储分类- sessionStorage

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

存储复杂数据类型

本地只能存储字符串,无法存储复杂数据类型(例如：对象)
解决：1.复杂数据类型存储必须转换为 JSON字符串存储；2.把JSON字符串转换为对象
语法：
JSON.stringify(复杂数据类型)

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

JSON.parse(JSON字符串）

JSON.parse(localStorage.getItem('obj'))

2. 数组中map方法

作用：map可以遍历数组处理数据，并且返回新的数组
（注：map重点在于有返回值，forEach没有返回值）

	const arr = ['red', 'blue', 'green']
    const newArr = arr.map(function (item, i) {
      // console.log(item)  // 数组元素  'red'
      // console.log(i)  // 下标
      return item + '老师'
    })
    console.log(newArr)//['red老师', 'blue老师', 'green老师']

3. 数组中join方法

作用：join() 方法用于把数组中的所有元素转换一个字符串
参数：数组元素是通过参数里面指定的分隔符进行分隔的，空字符串(‘’),则所有元素之间都没有任何字符
（注：小括号为空，则元素之间没有用逗号分隔）

 const arr = ['red', 'blue', 'green']
    // 把数组元素转换为字符串
    console.log(arr.join()) //打印red,blue,green

4. 正则表达式

什么是正则表达式？

是用于匹配字符串中字符组合的模式

作用：

表单验证（匹配）
过滤敏感词（替换）
字符串中提取我们想要的部分（提取）

正则表达式使用分为几步？

1.定义正则表达式语法：
2.判断是否有符合规则的字符串：
test() 方法用来查看正则表达式与指定的字符串是否匹配.如果正则表达式与指定的字符串匹配，返回true，否则false。
const 变量名 = /表达式/

	const str = '我们在学习前端，希望学习前端能高薪毕业'
    // 正则表达式使用：
    // 1. 定义规则
    const reg = /前端/
    // 2. 是否匹配
    console.log(reg.test(str))  // true

3.检索（查找）符合规则的字符串：
exec() 方法在一个指定字符串中执行一个搜索匹配
如果匹配成功，exec() 方法返回一个数组，否则返回null
语法：

	const str = '我们在学习前端，希望学习前端能高薪毕业'
    // 正则表达式使用：
    // 1. 定义规则
    const reg = /前端/
    // 2. 是否匹配
	console.log(reg.exec(str))//返回数组

5. 元字符(特殊字符）

是一些具有特殊含义的字符，可以极大提高了灵活性和强大的匹配功能。
比如，规定用户只能输入英文26个英文字母，普通字符的话 abcdefghijklm……
但是换成元字符写法： [a-z]
正则测试工具: http://tool.oschina.net/regex

5.1 边界符（表示位置，开头和结尾，必须用什么开头，用什么结尾）

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

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

//只允许有一个哈
console.log(/^哈$/.test('哈')) // true  只有这种情况为true 否则全是false
console.log(/^哈$/.test('哈哈')) // false

5.2 量词（表示重复次数）

量词用来 设定某个模式出现的次数

// 量词 * 类似 >=0 次（重复零次或更多次）
//只允许出现哈字，不允许出现任何其他汉字，包括英文和数字
console.log(/^哈*$/.test('')) // true
console.log(/^哈*$/.test('哈哈')) // true
console.log(/^哈*$/.test('二哈很傻')) //  false

//量词 + 类似 >=1 次
console.log(/^哈+$/.test('哈')) // true
console.log(/^哈+$/.test('')) // false
console.log(/^哈+$/.test('二哈很傻')) //  false

 //  量词 ? 类似  0 || 1
console.log(/^哈?$/.test('')) // true
console.log(/^哈?$/.test('哈')) // true
console.log(/^哈?$/.test('哈哈')) // false

// 量词 {n} 写几，就必须出现几次（常用来作为验证码六位来使用）
console.log(/^哈{4}$/.test('哈'))//false
console.log(/^哈{4}$/.test('哈哈哈哈'))//true

 // 量词 {n,}   >=n
console.log(/^哈{4,}$/.test('哈'))//false
console.log(/^哈{4,}$/.test('哈哈'))//false
console.log(/^哈{4,}$/.test('哈哈哈哈'))//true
console.log(/^哈{4,}$/.test('哈哈哈哈哈'))//true

 // 量词 {n,m}  逗号左右两侧千万不能有空格 >=n && <= m(常用来作注册的用户名6~18位)
    console.log(/^哈{4,6}$/.test('哈哈哈'))//false
    console.log(/^哈{4,6}$/.test('哈哈哈哈'))//true
    console.log(/^哈{4,6}$/.test('哈哈哈哈哈'))//true
    console.log(/^哈{4,6}$/.test('哈哈哈哈哈哈'))//true
    console.log(/^哈{4,6}$/.test('哈哈哈哈哈哈哈'))//false

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

5.3 字符类（比如 \d 表示 0~9）

（1）[ ] 匹配字符集合

后面的字符串只要包含 abc 中任意一个字符，都返回 true 。

 // 字符类   [abc]  只选1个
    console.log(/^[abc]$/.test('a'))  // true
    console.log(/^[abc]$/.test('b'))  // true
    console.log(/^[abc]$/.test('c'))  // true
    console.log(/^[abc]$/.test('ab'))  // false
    console.log(/^[abc]{2}$/.test('ab'))  // true

（2）[ ] 里面加上 - 连字符

使用连字符 - 表示一个范围

// 字符类   [a-z]  只选1个
console.log(/^[A-Z]$/.test('p'))  // false
console.log(/^[A-Z]$/.test('P'))  // true
console.log(/^[a-zA-Z0-9]$/.test('P'))  // true