前端——JavaScript基础学习【part 5】

最新推荐文章于 2024-05-30 13:59:14 发布

帆高#

最新推荐文章于 2024-05-30 13:59:14 发布

阅读量47

点赞数

文章标签： javascript 前端学习

本文链接：https://blog.csdn.net/qq_73958269/article/details/130872883

版权

本地储存

1.本地储存介绍

随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，HTML5规范提出了相关解决方案

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

2.本地储存分类

2.1`localStorage`

作用
可以将数据永久存储在本地(用户的电脑), 除非手动删除，否则关闭页面也会存在
特性
（1）可以多窗口（页面）共享（同一浏览器可以共享）
（2）以键值对的形式存储使用
语法
（1）存储数据
localStorage.setItem(key, value)
（2）获取数据
localStorage.getItem(key)
（3）删除数据
localStorage.removeItem(key)

2.2`sessionStorage`

特性
（1）用法跟localStorage基本相同
（2）区别是：当页面浏览器被关闭时，存储在 sessionStorage 的数据会被清除
语法
（1）存储数据
sessionStorage.setItem(key,value)
（2）获取数据
sessionStorage.getItem(key)
（3）删除数据
sessionStorage.removeItem(key)

3.localStorage 存储复杂数据类型

3.1使用场景

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

3.2用处

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

3.3语法

3.3.1

JSON.stringify(复杂数据类型)

3.3.2

JSON.parse(JSON字符串)

3.4JSON字符串

首先是1个字符串
属性名使用双引号引起来，不能单引号
属性值如果是字符串型也必须双引号

 <script>
    // 本地存储复杂数据类型
    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>

问题
因为本地存储里面取出来的是字符串，不是对象，无法直接使用
解决问题
把取出来的字符串转换为对象
语法：JSON.parse(JSON字符串)

  <script>
    // 本地存储复杂数据类型
    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>

补充函数方法

1.数组map 方法

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

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

注意
（1）map 也称为映射。映射是个术语，指两个元素的集之间元素相互“对应”的关系
（2）
map重点在于有返回值，forEach没有返回值（undefined）

2.数组join方法

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

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

正则表达式

1.定义

正则表达式（英语：Regular Expression，在代码中常简写为regex、regexp或RE）使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式

搜索模式可用于文本搜索和文本替换

正则表达式是由一个字符序列形成的搜索模式
当你在文本中搜索数据时，你可以用搜索模式来描述你要查询的内容
正则表达式可以是一个简单的字符，或一个更复杂的模式
正则表达式可用于所有文本搜索和文本替换的操作
例如：验证表单：用户名表单只能输入英文字母，数字或者下划线，昵称输入框中可以输入中文（匹配）
比如用户名：/^[a-z0-9_-]{3,16}$/
过滤掉网页中的一些敏感词（替换），或者从字符串中获取我们想要的特定部分

2.语法

定义规则
查找

3.定义正则表达式

3.1语法

/正则表达式主体/修饰符(可选)
const patt = /runoob/i

/runoob/i 是一个正则表达式
runoob 是一个正则表达式主体 (用于检索)
i 是一个修饰符 (搜索不区分大小写)

3.2判断是否有符合规则的字符串

3.2.1

test()方法用来查看正则表达式与指定的字符串是否匹配
pattern.test(被检测的字符串)
如果正则表达式与指定的字符串匹配，返回true，否则false

3.2.2

exec()方法在一个指定字符串中执行一个搜索匹配
pattern.exec(被检测的字符串)
如果匹配成功，exec() 方法返回一个数组，否则返回null

4.使用字符串方法

4.1`search()`方法使用正则表达式

search()方法用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回子串的起始位置

var str = "Visit Runoob!"; 
var n = str.search(/Runoob/i);//输出结果：6

search 方法可使用字符串作为参数。字符串参数会转换为正则表达式

var str = "Visit Runoob!"; 
var n = str.search("Runoob");//输出结果：6

4.2`replace()` 方法使用正则表达式

replace() 方法用于在字符串中用一些字符串替换另一些字符串，或替换一个与正则表达式匹配的子串

var str = document.getElementById("demo").innerHTML; 
var txt = str.replace(/microsoft/i,"Runoob");

replace() 方法将接收字符串作为参数

var str = document.getElementById("demo").innerHTML; 
var txt = str.replace("Microsoft","Runoob");

5.正则表达式修饰符

语法
/表达式/修饰符

修饰符	说明
i	执行对大小写不敏感的匹配
g	执行全局匹配
m	执行多行匹配

6.元字符

6.1基础知识

普通字符
大多数的字符仅能够描述它们本身，这些字符称作普通字符，例如所有的字母和数字。也就是说普通字符只能够匹配字符串中与它们相同的字符
元字符（特殊字符）
是一些具有特殊含义的字符，可以极大提高了灵活性和强大的匹配功能
（1）比如，规定用户只能输入英文26个英文字母，普通字符的话 abcdefghijklm……
（2）但是换成元字符写法： [a-z]
分类
（1）边界符（表示位置，开头和结尾，必须用什么开头，用什么结尾）
（2）量词（表示重复次数）
（3）字符类（比如 \d表示 0~9）

6.2边界符

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

边界符	描述
^	表示匹配行首的文本
$	表示匹配行尾的文本

注意：如果 ^ 和 $ 在一起，表示必须是精确匹配（一样）

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

6.3量词

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

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

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

 <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. 注意事项： 逗号两侧千万不要加空格否则会匹配失败

7.范围

表示字符的范围，定义的规则限定在某个范围，比如只能是英文字母，或者数字等等，用表示范围
在这里插入图片描述

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

8.字符类（预定义）

某些常见模式的简写方式，区分字母和数字

字符类	说明
\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]`

9.change 事件

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

10.判断是否有类

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

帆高#

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
前端——JavaScript基础学习【part 5】

正则表达式（英语：Regular Expression，在代码中常简写为regex、regexp或RE）使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式搜索模式可用于文本搜索和文本替换正则表达式是由一个字符序列形成的搜索模式当你在文本中搜索数据时，你可以用搜索模式来描述你要查询的内容正则表达式可以是一个简单的字符，或一个更复杂的模式正则表达式可用于所有文本搜索和文本替换的操作例如：验证表单：用户名表单只能输入英文字母，数字或者下划线，昵称输入框中可以输入中文（匹配）
复制链接

扫一扫