Vue小程序项目知识积累(一)

1.JS中的substring() 方法:

substring() 方法用于提取字符串中介于两个指定下标之间的字符,包括空格键。

substring() 方法返回的子串包括 开始 处的字符,但不包括 结束 处的字符。

string.substring(from, to)

from:必需。一个非负的整数,规定要提取的子串的第一个字符在 string Object 中的位置。

to:可选。一个非负的整数,比要提取的子串的最后一个字符在 string Object 中的位置多 1。如果省略该参数,那么返回的子串会一直到字符串的结尾。

例:

const obj="abc def ghi jkl mno p";

//相当于从第三位开始截取,不包括前,然后到最后加一个回车

console.log("obj.substring(3)+"<br>"");//def ghi jkl mno p 
 

//相当于从第二位开始截取到第八位,不包括前但是包括后,空格不显示出来

console.log("obj.substring(2,8)");//c def

2.JS中的replace() 方法:

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

string.replace(searchvalue,newvalue)

searchvalue:必须。规定子字符串或要替换的模式的 RegExp 对象。请注意,如果该值是一个字符串,则将它作为要检索的直接量文本模式,而不是首先被转换为 RegExp 对象。

newvalue:必需。一个字符串值。规定了替换文本或生成替换文本的函数。

例:

const obj=""Mr Blue has a blue house and a blue car";

//blue替换成red

console.log(obj.replace(/blue/g,"red"));//Mr Blue has a red house and a red car

//忽略大小写的格式

console.log(obj.replace(/blue/gi,"red"));//Mr red has a red house and a red car

3.JS中的正则判断。

RegExp 构造函数用于创建正则表达式对象。

例:尝试创建一个正则表达式对象,该对象匹配由数字组成的字符串。

  1. 正则表达式中的量词 {n} 用于指定前面的元素恰好出现 n 次。在正则表达式中,{n} 前面需要有空格。

  2. 使用 test 方法时,应该将正则表达式和要测试的字符串作为参数传递。在这个例子中,obj 应该是一个字符串。

const num = /* 这里是你要匹配的数字数量 */;
const regex = new RegExp(`\\d{${num}}`, 'g'); // 注意空格
const str = obj.toString(); // 确保 obj 是一个字符串
const result = regex.test(str);

result 将是一个布尔值,表示 obj 是否至少包含一个符合正则表达式 \\d{num} 的子串。

请注意,如果 obj 不是一个字符串,那么在调用 toString() 之前,你需要先检查它的类型,以确保它转换为字符串是安全的。

正则匹配:

1.手机号格式

以1开头的11位数字  :  /^1\d{10}$/

2.邮箱地址

/^((^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)+)|(".+"))@((\[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/

Tip:

这段正则表达式是一个用于验证电子邮件地址的模式,它尝试匹配符合一般电子邮件地址格式的字符串。该模式使用了几个正则表达式的元字符和构造来实现这一点。让我们来分解一下:

  1. ^ - 它断言行的开始。
  2. ((^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)+)|(".+")) - 这是一个非捕获组,它检查电子邮件地址中是否存在两种可能的模式:
    • 第一个模式是 ^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)+,它看起来是在电子邮件地址中查找以 <>()[]\\.,;:\s@" 开头的模式,后面跟着一个或多个不是 <>()[]\\.,;:\s@" 的字符,并以一个点号 . 结束,然后跟着一个或多个不是 <>()[]\\.,;:\s@" 的字符。这是一个非常具体的模式,可能不会匹配所有有效的电子邮件地址。
    • 第二个模式是 (".+"),它看起来是在电子邮件地址的开头有一个双引号 ",后面跟着一个或多个字符。这是电子邮件地址本地部分更常见的模式。
  3. @ - 它断言电子邮件地址中存在 "@" 符号。
  4. (($ 0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3} $)|(([a-zA-Z\-0-9]+\.)+[a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}) - 这是一个非捕获组,它检查电子邮件地址的域名部分是否存在两种可能的模式:
    • 第一个模式是 ($ 0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3} $),它看起来是在方括号中查找一个字面的IP地址。
    • 第二个模式是 (([a-zA-Z\-0-9]+\.)+[a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,},它看起来是一个由字母数字字符和连字符组成的域名,后面跟着一个或多个点号,并以两个或更多的字母字符结束。
  5. $ - 它断言行的结束。

这个正则表达式相当复杂,可能无法涵盖所有根据官方规范(RFC 5322和RFC 6530用于国际化电子邮件地址)有效的电子邮件地址格式。需要注意的是,通过正则表达式验证电子邮件地址在本质上是不完美的,因为根据标准,有效的电子邮件地址格式有很多种。

const email = "example@email.com";
const regex = /^((^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)+)|(".+"))@(($ 0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3} $)|(([a-zA-Z\-0-9]+\.)+[a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,})$/;if (regex.test(email)) {console.log("有效的电子邮件地址");
} else {console.log("无效的电子邮件地址");
}

3.常用的邮箱验证规则

^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$

这个正则表达式的组成部分如下:

  1. ^ - 断言行的开始。
  2. [a-zA-Z0-9._%+-]+ - 匹配本地部分的一个或多个字符,包括字母、数字、点号、下划线、百分号、加号和连字符。
  3. @ - 断言必须存在 "@" 符号。
  4. [a-zA-Z0-9.-]+ - 匹配域名部分的一个或多个字符,包括字母、数字、点号和连字符。
  5. \. - 断言必须存在点号。
  6. [a-zA-Z]{2,} - 匹配顶级域名的两个或更多字母。
  7. $ - 断言行的结束。
const email = "example@email.com";
const regex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;if (regex.test(email)) {console.log("有效的电子邮件地址");
} else {console.log("无效的电子邮件地址");
}

4.手机号码

/^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:8[\d])|(?:9[012356789]))\d{8}$/

这个正则表达式用于验证中国大陆手机号码是否合法。具体的规则如下:

  1. ^:匹配输入字符串的开始位置。
  2. (?::表示一个非捕获型分组。
  3. (?:\+|00)86)?:匹配可选的国家代码部分,可以是 "+86" 或 "0086",也可以为空。
  4. 1:匹配手机号码的第一位,必须是数字 1。
  5. (?::表示一个非捕获型分组。
  6. (?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:8[\d])|(?:9[012356789]):匹配手机号码的第二位到第三位,可以是以下任意一种情况:
    • 以数字 3 开头的任意一位数字。
    • 以数字 4 开头,后面跟 5、6、7、8、9 中的任意一个数字。
    • 以数字 5 开头的任意一位数字,但不包括 4 和 9。
    • 以数字 6 开头,后面跟 5 或 7。
    • 以数字 7 开头,后面跟 0 或 8。
    • 以数字 8 开头的任意一位数字。
    • 以数字 9 开头,后面跟 0、1、2、3、5、6、7、8、9 中的任意一个数字。
  7. ):关闭第二个非捕获型分组。
  8. \d{8}:匹配手机号码的后八位数字。
  9. $:匹配输入字符串的结束位置。

因此,如果输入的字符串符合上述规则,则该正则表达式将返回匹配结果,表示该字符串是一个合法的中国大陆手机号码;否则,将返回非匹配结果,表示该字符串不是一个合法的中国大陆手机号码。

const phoneNumber = "+8613800138000";
const regex = /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:8[\d])|(?:9[012356789]))\d{8}$/;if (regex.test(phoneNumber)) {console.log("有效的手机号码");
} else {console.log("无效的手机号码");
}

5.身份证件号码的验证

/^[1-9]\d{5}(?:18|19|20)\d{2}(?:0[1-9]|10|11|12)(?:0[1-9]|[1-2]\d|30|31)\d{3}[\dXx]$/

正则表达式用于验证中国大陆居民身份证号码的模式。下面是这个正则表达式的组成部分:

  1. ^ - 断言行的开始。
  2. [1-9] - 匹配身份证号码的前一位数字,它不能是 0
  3. \d{5} - 匹配接下来的五位数字,这部分是身份证号码的行政区划代码。
  4. (?:18|19|20) - 这是一个非捕获组,匹配身份证号码的出生年份,可以是 1819 或 20
  5. \d{2} - 匹配接下来的两位数字,这部分是身份证号码的出生月份。
  6. (?:0[1-9]|10|11|12) - 这是一个非捕获组,匹配身份证号码的出生月份,可以是 01 到 12
  7. (?:0[1-9]|[1-2]\d|30|31) - 这是一个非捕获组,匹配身份证号码的出生日期,可以是 01 到 31
  8. \d{3} - 匹配接下来的三位数字,这部分是身份证号码的顺序码。
  9. [\dXx] - 匹配一个数字或大写字母 X,这部分是身份证号码的校验码。
  10. $ - 断言行的结束。
const idNumber = "11010519900101999X";
const regex = /^[1-9]\d{5}(?:18|19|20)\d{2}(?:0[1-9]|10|11|12)(?:0[1-9]|[1-2]\d|30|31)\d{3}[\dXx]$/;if (regex.test(idNumber)) {console.log("有效的身份证号码");
} else {console.log("无效的身份证号码");
}

这是正则表达式中可用的其他一些修饰符:

  • i:不区分大小写的匹配。
  • m:多行模式,影响 ^ 和 $ 的行为。
  • y:粘连模式,影响 ^ 和 $ 的行为,与 m 修饰符类似。
  • u:Unicode 模式,影响一些特殊字符的行为。
  • s:点号 . 匹配包括换行符在内的所有字符。
  • c:单行模式,^ 和 $ 匹配字符串的开始和结束。
  • g:在整个输入字符串中查找匹配,而不是在找到第一个匹配后停止。返回所有匹配项,而不是只返回第一个匹配项。

4.JS中的计时事件函数

1. setInterval() - 间隔指定的毫秒数不停地执行指定的代码。

window.setInterval("javascript function",milliseconds);

window.setInterval() 方法可以不使用 window 前缀,直接使用函数 setInterval()。

第一个参数是函数(function), 第二个参数间隔的毫秒数。

clearInterval() 方法用于停止 setInterval() 方法执行的函数代码。

window.clearInterval(intervalVariable)

window.clearInterval() 方法可以不使用window前缀,直接使用函数clearInterval()。

要使用 clearInterval() 方法, 在创建计时方法时你必须使用全局变量:

myVar=setInterval("javascript function",milliseconds);

然后你可以使用 clearInterval() 方法来停止执行。

例:

<p>页面上显示时钟:</p>
<p id="demo"></p>
<button onclick="myStopFunction()">停止</button><script>
const myVar=setInterval(function(){myTimer()},1000);
function myTimer(){var d=new Date();var t=d.toLocaleTimeString();document.getElementById("demo").innerHTML=t;
}
function myStopFunction(){clearInterval(myVar);//清除函数
}
</script>

2. setTimeout() - 在指定的毫秒数后执行指定代码。

myVar= window.setTimeout("javascript function", milliseconds);

setTimeout() 的第一个参数是含有 JavaScript 语句的字符串。第二个参数指示从当前起多少毫秒后执行第一个参数。

clearTimeout() 方法用于停止执行setTimeout()方法的函数代码。

<p>点击第一个按钮等待3秒后出现"Hello"弹框。</p>
<p>点击第二个按钮来阻止第一个函数运行。(你必须在3秒之前点击它)。</p>
<button onclick="myFunction()">点我</button>
<button onclick="myStopFunction()">停止弹框</button><script>
var myVar;
function myFunction(){myVar=setTimeout(function(){alert("Hello")},3000);
}
function myStopFunction(){clearTimeout(myVar);//清除函数
}
</script>

5.JS中的逻辑运算符

1.data || { }

在 JavaScript 中,data || {} 表示逻辑或运算符。它会返回两个操作数中的一个,如果第一个操作数为真值(truthy),则返回第一个操作数的值;如果第一个操作数为假值(falsy),则返回第二个操作数的值。

具体到 data || {},如果 data 是一个真值(例如非空对象、非空字符串等),则表达式的值为 data;如果 data 是一个假值(null、undefined、空字符串等),则表达式的值为一个空的对象 { }。

这种写法通常用于提供一个默认值,即当 data 为假值时,使用一个备用的默认对象 { }

2.data ??  {  }

这是一个 JavaScript 中的 Nullish Coalescing 运算符,用于判断一个变量是否为 null 或者 undefined,如果是则返回一个默认的值(此处是一个空的对象 {}),否则返回该变量的值。

具体来说,这个运算符表示:如果 data 为 null 或 undefined,则返回空对象 {},否则返回 data 的值。这种写法可以简化一些代码,避免出现类似以下的判断:

if (data === null || data === undefined) {data = {};
}

使用 Nullish Coalescing 运算符可以更加简洁明了,例如:

const newData = data ?? {};

如果 data 为 null 或 undefined,则 newData 的值为一个空的对象 {};否则,newData 的值为 data 的值。

3.data && date

在 JavaScript 中,data && date 是逻辑与运算符。它会返回两个操作数中的一个,如果第一个操作数为真值(truthy),则返回第二个操作数的值;如果第一个操作数为假值(falsy),则返回第一个操作数的值。

具体到 data && date如果 data 是一个真值(例如非空对象、非空字符串等),则表达式的值为 date;如果 data 是一个假值(null、undefined、空字符串等),则表达式的值为 data。

这种写法通常用于对变量进行条件判断并执行相应的操作。(返回的是假的值)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/15071.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

头歌OpenGauss数据库-F.连接查询与子查询第3关:IN、ANY、ALL嵌套子查询

编程要求 我们为你提供了如下数据表&#xff1a; tb_salary表数据&#xff1a; idpositionsalary1Java80002Java84003Java90004Python65005Python10000 根据提供的数据&#xff0c;在右侧编辑器中补充代码&#xff1a; 查询薪资表中比Java最高工资高的所有员工职位名称和薪资&a…

[Spring Cloud] (9)XSS拦截器

文章目录 简述本文涉及代码已开源Fir Cloud 完整项目防XSS攻击必要性&#xff1a;作用&#xff1a; 整体效果后端增加拦截器开关配置pom中增加jsoup依赖添加JSON处理工具类添加xss拦截工具类防XSS-请求拦截器 前端 简述 本文涉及代码已开源 本文网关gateway&#xff0c;微服务…

微调LLM的理由

原文链接&#xff1a;https://www.freddyboulton.com/blog/when-to-finetune?continueFlag03133d546a002fc4ba73dda1632eeebe 考虑到大语言模型(llama 70b, mixtral, claude...)的能力在不断的增强的情况下&#xff0c;微调是否仍然是值得做的事。 下面是值得微调的一些原因…

医疗大模型和数据集整理

医疗大模型整理 LLM 类型 基座模型 持续预训练/Finetune 评估 ClinicalGPT 论文 BLOOM-7B cMedQA2, cMedQA-KG, MD-EHR, MEDQA-MCMLE, and MedDialog MedDialog MEDQA-MCMLE MD-HER cMedQA2 HuatuoGPT 论文+开源项目 Baichuan-7B Ziya-LLaMA-13B-Pretrain-v1 Distilled Instru…

Visual Studio Code插件

文章目录 工具类AIChinese (Simplified) (简体中文)cmake集Code RunnerGitLens — Git superchargedPath IntellisenseTodo TreeBookmarks &#xff08;书签&#xff09;markdownclangd 美化类Output Colorizer &#xff08;输出窗口彩色&#xff09;Doxygen Documentation Gen…

人工智能和机器学习辅助决策在空战中的未来选择

人工智能(AI)和机器学习在空战决策中的未来选择主要体现在以下几个方面: 自主决策系统:通过训练AI模型,使其具备自主决策能力。这种系统能够根据战场态势的变化,自主做出决策,并实时调整作战计划。例如,AI可以预测敌方空中机动路线,生成全面的近实时空中画面,为指挥官…

安装harbor出现问题: Running 1/1 ✘ Network harbor_harbor Error

安装harbor出现问题&#xff1a; [] Running 1/1 ✘ Network harbor_harbor Error 0.2s failed to create network harbor_harbor: Error response from daemon: Fa…

【无标题】 新人如何快速接手Vue大型产品项目并进行迭代和维护

这里写自定义目录标题 快速接手Vue大型产品项目 快速接手Vue大型产品项目 &#x1f680; 了解项目背景和业务功能 在踏入Vue大型产品项目之前&#xff0c;了解项目的背景和业务功能是至关重要的。这不仅有助于你快速理解项目的整体架构和设计思路&#xff0c;还能让你在后续的…

K8s 搭建 FileBeat+ELK 分布式日志收集系统 以及 KQL 语法介绍

一、K8s FileBeat ELK 介绍 ELK&#xff0c;即Elasticsearch、Logstash和Kibana三个开源软件的组合&#xff0c;是由Elastic公司提供的一套完整的日志管理解决方案。Elasticsearch是一个高度可扩展的开源全文搜索和分析引擎&#xff0c;它允许你快速地、近乎实时地存储、搜索…

力扣654. 最大二叉树

Problem: 654. 最大二叉树 文章目录 题目描述思路复杂度Code 题目描述 思路 对于构造二叉树这类问题一般都是利用先、中、后序遍历&#xff0c;再将原始问题分解得出结果 1.定义递归函数build&#xff0c;每次将一个数组中的最大值作为当前子树的根节点构造二叉树&#xff1b;…

牛客NC391 快乐数【simple 模拟法 Java/Go/PHP】

题目 题目链接&#xff1a; https://www.nowcoder.com/practice/293b9ddd48444fa493dd17da0feb192d 思路 直接模拟即可Java代码 import java.util.*;public class Solution {/*** 代码中的类名、方法名、参数名已经指定&#xff0c;请勿修改&#xff0c;直接返回方法规定的值…

Linux-应用编程学习笔记(二、文件I/O、标准I/O)

一、文件I/O基础 文件 I/O 指的是对文件的输入/输出操作&#xff0c;就是对文件的读写操作。Linux 下一切皆文件。 1.1 文件描述符 在 open函数执行成功的情况下&#xff0c; 会返回一个非负整数&#xff0c; 该返回值就是一个文件描述符&#xff08;file descriptor&#x…

解禁谷歌等浏览器禁止网站使用麦克等媒体设备

1、浏览器地址栏输入chrome://flags/ 微软的chromium内核的edge浏览器&#xff0c;既可以输入&#xff1a;chrome://flags/ &#xff0c;也可以输入edge://flags/ 2、打开后&#xff0c;界面如下 3、输入搜索&#xff0c;unsafe&#xff0c;并启用、输入需要启用的网址

探索Go语言的原子操作秘籍:sync/atomic.Value全解析

引言 ​ 在并发编程的世界里&#xff0c;数据的一致性和线程安全是永恒的话题。Go语言以其独特的并发模型——goroutine和channel&#xff0c;简化了并发编程的复杂性。然而&#xff0c;在某些场景下&#xff0c;我们仍然需要一种机制来保证操作的原子性。这就是sync/atomic.V…

对AI 感兴趣的小伙伴

如图&#xff0c;欢迎来玩儿&#xff01; 欢迎来玩儿

Python异常处理:打造你的代码防弹衣!

Hi&#xff0c;我是阿佑&#xff0c;上文咱们讲到——揭秘Python的魔法&#xff1a;装饰器的超能力大揭秘 ‍♂️✨&#xff0c;阿佑将带领大家通过精准捕获异常、使用with语句和上下文管理器、以及异常链等高级技巧来增强代码的健壮性。就像为代码穿上防弹衣&#xff0c;保护它…

生活小区火灾预警新篇章:泵吸式可燃气体报警器的检定与运用

在现代化的生活小区中&#xff0c;燃气设备广泛应用于居民的日常生活之中&#xff0c;但同时也带来了潜在的火灾风险。 可燃气体报警器作为一种安全监测设备&#xff0c;能够及时检测到燃气泄漏等安全隐患&#xff0c;并在达到预设的阈值时发出警报&#xff0c;提醒居民采取相…

SpringBoot Redis 扩展高级功能

环境&#xff1a;SpringBoot2.7.16 Redis6.2.1 1. Redis消息发布订阅 Spring Data 为 Redis 提供了专用的消息传递集成&#xff0c;其功能和命名与 Spring Framework 中的 JMS 集成类似。Redis 消息传递大致可分为两个功能区域&#xff1a; 信息发布 信息订阅 这是一个通常…

北斗短报文终端 | 什么是北斗短报文功能?如何实现北斗短报文通信?

北斗短报文功能是指通过北斗卫星进行短报文通信的功能。这种功能允许用户在没有移动通信信号覆盖的偏远山区、海洋、沙漠等地带&#xff0c;通过北斗短报文终端发送和接收文本信息&#xff0c;进行基本的数据通信。 北斗短报文功能是指北斗卫星导航系统特有的双向报文通信功能。…

HashMap和HashSet的详解

注意&#xff1a;HashMap和HashSet的常用方法和TreeMap和TreeSet是一样的&#xff0c;不过是他们实现的底层原理是不一样的&#xff0c;HashMap和HashSet的底层原理是哈希表结构&#xff0c;这种结构与搜索树或者红黑树来说效率更高&#xff0c;因此在平时使用是我们通常使用Ha…