目录
前言
开篇语
准备工作
$ 拷贝
浅拷贝和深拷贝
节点拷贝
$ 正则表达式
概念
创建
正则校验
匹配条件
边界符
范围匹配
量词
值类型
字符串正则匹配替换
$ 遍历
结束语
前言
开篇语
本系列博客主要分享JavaScript的进阶语法知识，本期为第三期，主要分享的内容为：jQuery拷贝、正则表达式和遍历。
从进阶部分开始，我们将脱离原生的JS，使用一些包装的第三方库来完成我们的需求。这些JS库需要在文档的开头引入，暂时的引入格式为script标签加src地址。
与基础部分的语法相比，进阶部分的语法会有较大的差别，注意最好不要混用原生方法与第三方库内容，以免出现不必要的麻烦。
准备工作
软件：【参考版本】Visual Studio Code
插件（扩展包）：Open in browser, Live Preview, Live Server, Tencent Cloud AI Code Assistant, htmltagwrap
提示：在不熟练的阶段建议关闭AI助手
第三方JS库：jquery.min.js
提示：请站内搜索下载、引入方式
浏览器版本：Chrome
系统版本： Win10/11/其他非Windows版本
$ 拷贝
浅拷贝和深拷贝
根据变量类型的不同，复制变量通常有两种方式—— 浅拷贝和深拷贝。
就浅拷贝而言，它的形式上类似下面这样——
var a = 'aaa'
var b = a
它只能复制栈内存中的内容，于是在复制时会出现下面两种状况——
- 对于字面量类型的数据，由于它只存储在栈内存中，所以直接复制本身
- 而对于引用类型的数据，栈内存里只存储堆内存中实际存储数据的地址，所以实质上是地址被复制了，两个变量实际上还是在对同一组数据进行操作
如果想要真正复制引用类型的数据，则需要使用深拷贝，即将堆内存中的数据复制一份，存到新的地址中。
$提供的深拷贝方法形式如下——
$.extend(true, targetObj, obj)
可以实现把obj复制一份新的数据，存储到targetObj中。该方法需要使用最高级节点$调用。
节点拷贝
$提供了将元素节点拷贝的方法clone()，又叫节点克隆。该方法直接返回复制之后的新节点。
如果不填参数，则只复制元素节点，不复制该节点绑定的事件。
填写参数true，则新的节点还可以具有原节点绑定事件。
$ 正则表达式
概念
正则表达式是一种用于匹配和操作文本的强大工具，它是由一系列字符和特殊字符组成的模式，用于描述要匹配的文本模式。
正则表达式可以在文本中查找、替换、提取和验证特定的模式。
创建
创建正则表达式有两种方式——使用 RegExp 对象的构造函数创建和通过字面量创建。
调用构造函数创建正则表达式示例——
var reg1 = new RegExp (/xxx/)
var reg2 = RegExp(/xxx/)
使用字面量创建示例——
var reg3 = /xxx/
其中xxx代表正则匹配条件。
正则校验
当我们拿到正则表达式之后，我们就可以对指定的字符串进行正则校验，如果符合正则表达式的条件，则返回true。
正则校验的格式如下——
正则表达式.test('待校验字符串')
注意，正则校验是区分大小写的。
匹配条件
边界符
| 表达式 | 作用 |
|---|---|
| /abc/ | 包含abc的字符串可通过 |
| /^abc/ | 以abc开头的字符串可通过 |
| /abc$/ | 以abc结尾的字符串可通过 |
| /^abc$/ | 只能匹配字符串abc |
范围匹配
[] 表示有一系列字符可供选择，只要匹配[]里的任意一个字符即可。
| 表达式 | 作用 |
|---|---|
| /[abc]/ | 包含a, b, c中的任意字符即可通过 |
| /^[abc]/ | 首字母为a, b, c中的任意字符即可通过 |
| /[a-z]/ | 包含a到z中的任意字符即可通过 |
| /^[a-z]$/ | 包含a到z中的任意字符即可通过，但是只能匹配一个 |
| ^[a-zA-Z0-9]$ | 包含大小写、数字中的任意字符即可通过，但是只能匹配一个 |
量词
量词符用来设定某个模式出现的次数，简单来说就是指定条件重复出现多少次。
| 表达式 | 作用 |
|---|---|
| /^a*$/ | 字符a重复0次或多次 |
| /^a+$/ | 字符a重复1次或多次 |
| /^a?$/ | 字符a重复0次或1次 |
| /^a{num}$/ | 字符a重复num次 |
| /^a{num,}$/ | 字符a重复num次即以上 |
| /^a{start, end}$/ | 字符a重复[start, end]次 |
值类型
我们还可以用值类型来判断字符是否为某一类字符。
| 值类型 | 作用 |
|---|---|
| \d | 判断是否为十进制数字 |
| \D | 判断非数字 |
| \w | 判断是否为十进制数字、大小写字母或下划线 |
| \W | 判断除\w之外的字符 |
| \s | 判断空白字符（空格，tab，换页符等） |
| \S | 判断非空白字符 |
字符串正则匹配替换
replace() 方法用于把字符串中正则匹配通过的字符串替换为目标字符串。
使用方式如下——
原字符串.replace(正则表达式, 替换字符串)
$ 遍历
之前我们知道，对一个元素进行遍历，有三种方式——for-i，for-in，for-of。
比如，我们对一个数组元素arr进行遍历，可以这么做——
for (var i = 0; i < arr.length; i++) { } // i为索引
for (var i in arr) { } // i为索引
for (var item of arr) { } // item为元素
现在，$也提供了一种遍历方法each()，该方法由最高级节点$调用。
采用该方式遍历数组，类似下面的格式——
$.each(arr, function(i, item) { })
其中i为索引，item为元素。
当然，该方式也可以用于遍历对象，类似下面的格式——
$.each(obj, function(key, value) { })
其中key为属性，value为值。
结束语
本期内容到此结束。关于本系列的其他博客，可以查看我的JS进阶专栏。
在全栈领域，博主也只不过是一个普通的萌新而已。本系列的博客主要是记录一下自己学习的一些经历，然后把自己领悟到的一些东西总结一下，分享给大家。
文章全篇的操作过程都是笔者亲自操作完成的，一些定义性的文字加入了笔者自己的很多理解在里面，所以仅供参考。如果有说的不对的地方，还请谅解。
==期待与你在下一期博客中再次相遇==
——临期的【H2O2】
