3g免费网站,我不想找之前做网站的续费,廊坊企业网站建设,中国五大网络运营商一、Storage
1.认识Storage
WebStorage主要提供了一种机制#xff0c;可以让浏览器提供一种比cookie更直观的key、value存储方式#xff1a;
localStorage#xff1a;本地存储#xff0c;提供的是一种永久性的存储方法#xff0c;在关闭掉网页重新打开时#xff0c;存…一、Storage
1.认识Storage
WebStorage主要提供了一种机制可以让浏览器提供一种比cookie更直观的key、value存储方式
localStorage本地存储提供的是一种永久性的存储方法在关闭掉网页重新打开时存储的内容依然保留sessionStorage会话存储提供的是本次会话的存储在关闭掉会话时存储的内容会被清除
localStorage.setItem(name, local);
sessionStorage.setItem(name, session);2.localStorage和sessionStorage的区别
我们会发现localStorage和sessionStorage看起来非常的相似。
那么它们有什么区别呢
验证一关闭网页后重新打开localStorage会保留而sessionStorage会被删除验证二在页面内实现跳转localStorage会保留sessionStorage也会保留验证三在页面外实现跳转打开新的网页localStorage会保留sessionStorage不会被保留
3.Storage常见的方法和属性
Storage有如下的属性和方法
属性
Storage.length只读属性
返回一个整数表示存储在Storage对象中的数据项数量
方法
Storage.key()该方法接受一个数值n作为参数返回存储中的第n个key名称
Storage.getItem()该方法接受一个key作为参数并且返回key对应的value
Storage.setItem()该方法接受一个key和value并且将会把key和value添加到存储中。
如果key存储则更新其对应的值
Storage.removeItem()该方法接受一个key作为参数并把该key从存储中删除
Storage.clear()该方法的作用是清空存储中的所有key
const ACCESS_TOKEN tokenconsole.log(localStorage.length)
// 常见的方法:
localStorage.setItem(ACCESS_TOKEN, whytoken)
console.log(localStorage.getItem(ACCESS_TOKEN))// 其他方法
console.log(localStorage.key(0))
console.log(localStorage.key(1))
console.log(localStorage.removeItem(infoTab))
localStorage.clear()4.Storage工具封装
class Cache {constructor(isLocal true) {this.storage isLocal ? localStorage: sessionStorage}setCache(key, value) {if (!value) {throw new Error(value error: value必须有值!)}if (value) {this.storage.setItem(key, JSON.stringify(value))}}getCache(key) {const result this.storage.getItem(key)if (result) {return JSON.parse(result)}}removeCache(key) {this.storage.removeItem(key)}clear() {this.storage.clear()}
}const localCache new Cache()
const sessionCache new Cache(false)!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyscript src./js/cache.js/scriptscriptlocalCache.setCache(sno, 111)// storage本身是不能直接存储对象类型的const userInfo {name: abc,nickname: def,level: 100,imgURL: http://github.com/abc.png}// localStorage.setItem(userInfo, JSON.stringify(userInfo))// console.log(JSON.parse(localStorage.getItem(userInfo)))sessionCache.setCache(userInfo, userInfo)console.log(sessionCache.getCache(userInfo))/script/body
/html二、正则表达式
1.什么是正则表达式
我们先来看一下维基百科对正则表达式的解释
正则表达式英语Regular Expression常简写为regex、regexp或RE又称正则表示式、正则表示法、规则表达式、常规表示法是计算机科学的一个概念正则表达式使用单个字符串来描述、匹配一系列匹配某个句法规则的字符串。许多程序设计语言都支持利用正则表达式进行字符串操作。
简单概况正则表达式是一种字符串匹配利器可以帮助我们搜索、获取、替代字符串
在JavaScript中正则表达式使用RegExp类来创建也有对应的字面量的方式
正则表达式主要由两部分组成模式patterns和修饰符flags
const re1 new RegExp(hello, i)
const re2 /hello/i2.正则表达式的使用方法
有了正则表达式我们要如何使用它呢
JavaScript中的正则表达式被用于 RegExp 的 exec 和 test 方法也包括 String 的 match、matchAll、replace、search 和 split 方法 // 创建正则
const re1 /abc/ig
const message fdabc123 faBC323 dfABC222 A2324aaBc// 1.使用正则对象上的实例方法
// webpack - loader - test: 匹配文件名
// 正则 - 拿到文件 - loader操作
// 1.1.test方法: 检测某一个字符串是否符合正则的规则
// if (re1.test(message)) {
// console.log(message符合规则)
// } else {
// console.log(message不符合规则)
// }// 1.2.exec方法: 使用正则执行一个字符串
// const res1 re1.exec(message)
// console.log(res1)// 2.使用字符串的方法, 传入一个正则表达式
// 2.1. match方法:
// const result2 message.match(re1)
// console.log(result2)// 2.2. matchAll方法
// 注意: matchAll传入的正则修饰符必须加g
// const result3 message.matchAll(re1)
// // console.log(result3.next())
// // console.log(result3.next())
// // console.log(result3.next())
// // console.log(result3.next())
// for (const item of result3) {
// console.log(item)
// }// 2.3. replace/replaceAll方法// 2.4. split方法
// const result4 message.split(re1)
// console.log(result4)// 2.5. search方法
const result5 message.search(re1)
console.log(result5)// 案例: 让用户输入的账号必须是aaaaa以上
// const inputEl document.querySelector(input)
// const tipEl document.querySelector(.tip)// inputEl.oninput function() {
// const value this.value
// if (/^a{5,8}$/.test(value)) {
// tipEl.textContent 输入的内容符合规则要求
// } else {
// tipEl.textContent 输入的内容不符合规则要求, 请重新输入
// }
// }3.修饰符flag的使用
常见的修饰符
flag含义g全部的给我匹配全部的i忽略大小写m多行匹配
需求
获取一个字符串中所有的abc将一个字符串中的所有abc换成大写
let message Hello abc, abc, Abc, AAaBc
const pattern /abc/ig
const results message.match(pattern)
console.log(results)message message.replaceAll(pattern, ABC)
console.log(message)4.规则 – 字符类Character classes
字符类Character classes 是一个特殊的符号匹配特定集中的任何符号。
字符含义\d“d” 来自 “digit”数字从 0 到 9 的字符。\s“s” 来自 “space”空格符号包括空格制表符 \t换行符 \n 和其他少数稀有字符例如 \v\f 和 \r。\w“w” 来自 “word”“单字”字符拉丁字母或数字或下划线 _。.点点 . 是一种特殊字符类它与 “除换行符之外的任何字符” 匹配
反向类Inverse classes
\D 非数字除 \d 以外的任何字符例如字母。\S 非空格符号除 \s 以外的任何字符例如字母。\W 非单字字符除 \w 以外的任何字符例如非拉丁字母或空格。
const message CSS2.5
const pattern /CSS\d(\.\d)?/i
console.log(message.match(pattern))5.规则 – 锚点Anchors
符号 ^ 和符号 $ 在正则表达式中具有特殊的意义它们被称为“锚点”。
符号 ^ 匹配文本开头符号 $ 匹配文本末尾
const message My name is WHY.// 字符串方法
if (message.startsWith(my)) {console.log(以my开头)
}
if (message.endsWith(why)) {console.log(以why结尾)
}// 正则: 锚点
if (/^my/i.test(message)) {console.log(以my开头)
}if (/why\.$/i.test(message)) {console.log(以why结尾)
}const re /^coder$/
const info codaaaer
console.log(re.test(info)) // false词边界Word boundary
词边界 \b 是一种检查就像 ^ 和 $ 一样它会检查字符串中的位置是否是词边界。词边界测试 \b 检查位置的一侧是否匹配 \w而另一侧则不匹配 “\w”
匹配下面字符串中的时间
const message now time 22:45, number is 123.456
const timepattern /\b\d\d:\d\d\b/g
console.log(message.match(timepattern))6.规则 – 转义字符串
如果要把特殊字符作为常规字符来使用需要对其进行转义
只需要在它前面加个反斜杠
常见的需要转义的字符
[] \ ^ $ . | ? * ()
斜杠符号 / 并不是一个特殊符号但是在字面量正则表达式中也需要转义
练习匹配所有以.js或者jsx结尾的文件名
const filenames [abc.js, cba.java, nba.html]
const newNames filenames.filter(item {return /\.jsx?$/.test(item)
})在webpack当中匹配文件名时就是以这样的方式。
// 定义正则: 对.转义
const re /\./ig
const message abc.whyconst results message.match(re)
console.log(results)// 特殊: /
// const re2 /\//// 获取到很多的文件名
// jsx - js文件
const fileNames [abc.html, Home.jsx, index.html, index.js, util.js, format.js]
// 获取所有的js的文件名(webpack)
// x?: x是0个或者1个
const jsfileRe /\.jsx?$/
// 1.for循环做法
// const newFileNames []
// for (const filename of fileNames) {
// if (jsfileRe.test(filename)) {
// newFileNames.push(filename)
// }
// }
// console.log(newFileNames)// 2.filter高阶函数
// const newFileNames fileNames.filter(filename jsfileRe.test(filename))
// console.log(newFileNames)7.集合Sets和范围Ranges
有时候我们只要选择多个匹配字符的其中之一就可以
在方括号 […] 中的几个字符或者字符类意味着“搜索给定的字符中的任意一个”
集合Sets
比如说[eao] 意味着查找在 3 个字符 ‘a’、‘e’ 或者 ‘o’ 中的任意一个
范围Ranges
方括号也可以包含字符范围比如说[a-z] 会匹配从 a 到 z 范围内的字母[0-5] 表示从 0 到 5 的数字[0-9A-F] 表示两个范围它搜索一个字符满足数字 0 到 9 或字母 A 到 F\d —— 和 [0-9] 相同\w —— 和 [a-zA-Z0-9_] 相同
案例匹配手机号码
const phonePattern /^1[356789]\d{9}$/排除范围除了普通的范围匹配还有类似 [^…] 的“排除”范围匹配
// 手机号的规则: 1[3456789]033334444
const phoneStarts [132, 130, 110, 120, 133, 155]
const phoneStartRe /^1[3456789]\d/
const filterPhone phoneStarts.filter(phone phoneStartRe.test(phone))
console.log(filterPhone)const phoneNum 133888855555
const phoneRe /^1[3-9]\d{9}$/
console.log(phoneRe.test(phoneNum))// 了解: 排除范围
// \d - [0-9]
// \D - [^0-9]8.量词Quantifiers
假设我们有一个字符串 7(903)-123-45-67并且想要找到它包含的所有数字。
因为它们的数量是不同的所以我们需要给与数量一个范围用来形容我们所需要的数量的词被称为量词 Quantifiers 。
数量 {n}
确切的位数{5}某个范围的位数{3,5}
缩写
代表一个或多个相当于 {1,}?代表零个或一个相当于 {0,1}。换句话说它使得符号变得可选*代表着零个或多个相当于 {0,}。也就是说这个字符可以多次出现或不出现
案例匹配开始或结束标签
// 1.量词的使用
const re /a{3,5}/ig
const message fdaaa2fdaaaaaasf42532fdaagjkljlaaaafconst results message.match(re)
console.log(results)// 2.常见的符号: /?/*
// : {1,}
// ?: {0,1}
// *: {0,}// 3.案例: 字符串的html元素, 匹配出来里面所有的标签
const htmlElement divspan哈哈哈/spanh2我是标题/h2/div
const tagRe /\/?[a-z][a-z0-9]*/ig
const results2 htmlElement.match(tagRe)
console.log(results2)9.贪婪 Greedy和惰性 lazy模式
如果我们有这样一个需求匹配下面字符串中所有使用《》包裹的内容
const message 我最喜欢的两本书《黄金时代》和《沉默的大多数》
const results message.match(/《.》/g)
console.log(results)默认情况下的匹配规则是查找到匹配的内容后会继续向后查找一直找到最后一个匹配的内容
这种匹配的方式我们称之为贪婪模式Greedy
懒惰模式中的量词与贪婪模式中的是相反的。
只要获取到对应的内容后就不再继续向后匹配我们可以在量词后面再加一个问号 ? 来启用它所以匹配模式变为 *? 或 ?甚至将 ‘?’ 变为 ??
const message 我最喜欢的两本书《黄金时代》和《沉默的大多数》
const results message.match(/《.?》/g)
console.log(results)10.捕获组capturing group
模式的一部分可以用括号括起来 (…)这称为“捕获组capturing group”。
这有两个作用
它允许将匹配的一部分作为结果数组中的单独项它将括号视为一个整体
方法 str.match(regexp)如果 regexp 没有 g 标志将查找第一个匹配并将它作为一个数组返回
在索引 0 处完全匹配。在索引 1 处第一个括号的内容。在索引 2 处第二个括号的内容。…等等…
案例匹配到HTML标签并且获取其中的内容
const str h1title/h1
const result str.match(/(.?)/)
console.log(result[0])
console.log(result[1])命名组
用数字记录组很困难。对于更复杂的模式计算括号很不方便。我们有一个更好的选择给括号起个名字。这是通过在开始括号之后立即放置 ? 来完成的。
const result message.match(/(?codermqhel)lo/i)非捕获组
有时我们需要括号才能正确应用量词但我们不希望它们的内容出现在结果中。可以通过在开头添加 ?: 来排除组。
const result message.match(/(?codermqhel)(lo)/)or是正则表达式中的一个术语实际上是一个简单的“或”。
在正则表达式中它用竖线 | 表示通常会和捕获组一起来使用在其中表示多个值
// 1.将捕获组作为整体
const info dfabcabcfabcdfdabcabcabcljcbacballnbanba;jk;j
const abcRe /(abc|cba|nba){2,}/ig
console.log(info.match(abcRe))11.封装日期格式化函数
function formatDate(timestamp, formatString) {const date new Date(timestamp);const obj {y: date.getFullYear(),M: date.getMonth() 1,d: date.getDate(),h: date.getHours(),m: date.getMinutes(),s: date.getSeconds(),S: date.getMilliseconds()};for (const key in obj) {if (new RegExp((${key})).test(formatString)) {const value (obj[key] ).padStart(2, 0);formatString formatString.replaceAll(RegExp.$1, value);}}return formatString;
}
const nowDate Date.now();
const formatStr formatDate(nowDate, yyyy-MM-dd hh:mm:ss.SSS);
console.log(formatStr);
