正则表达式捕获组与全局匹配

在 JavaScript 中，正则表达式提供了强大的字符串匹配和提取功能，特别是通过捕获组和全局匹配，你可以提取字符串中符合特定模式的内容。本文将介绍如何使用这些功能进行有效的字符串处理。

1. 捕获组 (())

捕获组可以帮助你从正则表达式匹配的字符串中提取出某些特定部分。通过在正则表达式中使用圆括号 ()，你可以将某些字符部分单独提取出来，以便进一步处理。

示例1：提取字符串中的匹配部分

let str = 'ajbjjakbdsk1323441';
let reg = /a(([a-z])b)/ig; // i：忽略大小写，g：全局匹配，() 捕获组
let result = reg.exec(str);

while (result) {
  console.log(result[0], result[1]);  // result[0] 是整个匹配项，result[1] 是捕获的部分
  result = reg.exec(str);  // 执行下一次匹配
}

输出：

ajb ajb
ajb ajb

• result[0]：表示匹配的整个字符串。
• result[1]：表示第一个捕获组 (([a-z])b) 中提取的内容，即 ajb。

2. 全局匹配 (g 标志)

g 标志用于进行全局匹配，这意味着正则表达式会匹配输入字符串中的所有符合条件的部分，而不仅仅是第一个。

在上面的示例中，正则表达式使用了 g 标志，因此会返回所有匹配的部分。每次调用 exec() 方法都会返回下一个匹配项，直到没有更多匹配。

3. 匹配特定模式

你可以根据需要编写适当的正则表达式来匹配特定的模式。比如，如果你想提取符合 axc 格式的内容，可以按以下方式编写正则表达式：

let str = "abcaccafcacc";
let reg = /a(([a-z])c)/ig; // 匹配 'axc' 格式，捕获其中的字符
let result = reg.exec(str);

while (result) {
  console.log(result[0], result[1], result[2]);  // 输出完整匹配项和捕获的部分
  result = reg.exec(str);
}

输出：

abc abc a
acc acc c

在这个例子中：

• result[0]：是整个匹配的字符串。
• result[1]：是捕获组中的内容，a 和 c。
• result[2]：是捕获组的第二部分，即 a 和 c。

4. 总结与优化

• 捕获组：使用圆括号 () 包裹你想要提取的部分。你可以提取多个部分，每个部分会以 result[1], result[2], ... 的方式存储。
• 全局匹配：g 标志使得正则表达式在字符串中查找所有符合条件的匹配项。
• 执行多次匹配：通过 exec() 方法可以循环查找多个匹配项，并通过 result 获取详细的捕获内容。

5. 实际应用

这种正则表达式的用法非常适合用于：

• 数据提取：从一段文本中提取符合某个模式的数据，如邮箱、电话号码等。
• 文本分析：对文本进行分析，提取特定的关键词或格式。
• 字符串验证：使用正则表达式验证字符串是否符合某种格式。

掌握这些正则表达式的技巧，你将在字符串处理方面变得更加高效！

JavaScript 解构赋值详解

值是 JavaScript 中一种非常强大的语法，能够轻松地从数组或对象中提取值并将其赋给变量。它使得代码更加简洁，尤其在处理复杂的数据结构时，能显著提高代码的可读性和效率。

数组解构赋值。

解构赋

1️ 基本的数组解构

const num1 = [1, 3, 5, 7];
let [a, b, c, d] = num1;  // 声明同时解构  
console.log(a, b, c, d); // 输出: 1 3 5 7

• 解释：通过数组的顺序解构，将数组中的元素按顺序赋值给变量。

2️ 解构赋值与默认值

const num2 = ['xixi', 'linxi', 'xiaoxixi'];
let e, f, g;
[e, f, g] = num2;  // 赋值给 e, f, g
console.log(e, f, g); // 输出: xixi linxi xiaoxixi

[e, f, g = 'default'] = ['yueye', '5418y']; // 为 g 设置默认值
console.log(e, f, g); // 输出: yueye 5418y default

• 解释：当解构的变量缺少对应的值时，可以通过给变量设置默认值，防止 undefined 值。

###3️⃣ 使用剩余运算符获取多余的值

const num2 = ['xixi', 'linxi', 'xiaoxixi'];
let h, k;
[h, ...k] = num2;
console.log(h, k); // 输出: xixi ['linxi', 'xiaoxixi']

• 解释：使用剩余运算符 ... 将其余的值分配到一个新数组中，常用于提取数组前几个元素。

4️ 交换变量的值

let x = 10;
let y = 20;
console.log(x, y); // 输出: 10 20
[x, y] = [y, x];  // 快速交换两个变量的值
console.log(x, y); // 输出: 20 10

• 解释：通过解构赋值，快速交换两个变量的值，不需要额外的中间变量。

5️ 二维数组解构赋值

const arr3 = [['linxi', '18', 'female'], ['xixi', '17', 'female']];
let [[name, age, gender], obj] = arr3;
console.log(name, age, gender, obj); // 输出: linxi 18 female ['xixi', '17', 'female']

// 循环遍历二维数组
for (let value1 of arr3) {
  console.log(value1);
  for (let value2 of value1) {
    console.log(value2);
  }
}

• 解释：数组中的元素如果还是数组，可以继续用解构赋值提取内部数据。

对象解构赋值

1️ 基本的对象解构

const person = { name: 'linxi', age: 18, gender: 'female' };
let { name, age, gender } = person;
console.log(name, age, gender); // 输出: linxi 18 female

• 解释：直接通过对象的属性名进行解构，自动将属性值赋给同名的变量。

2️ 对象属性名与变量名不一致时的解构

const person1 = { name1: 'lin', age1: 18, gender1: 'female' };
let name1, age1, gender1;
({ name1, age1, gender1 } = person1); // 使用圆括号包裹解构赋值
console.log(name1, age1, gender1); // 输出: lin 18 female

• 解释：当对象的属性名与变量名不一致时，必须使用圆括号包裹解构，否则会报错。

3️ 为解构的属性赋予别名

let { name: a, age: b, gender: c } = person; // 为 name, age, gender 赋予别名
console.log(a, b, c); // 输出: linxi 18 female

• 解释：通过 : 为属性赋予别名，将对象的属性值赋给新的变量名。

---

解构赋值的注意事项

1. 对象解构时，属性名必须匹配：
   如果解构对象时，变量名和对象属性名不一致，会导致 undefined。
2. 解构的顺序要与数组的顺序匹配：
   数组解构时，变量会按顺序获取数组中的元素，顺序不匹配会导致 undefined。
3. 默认值的使用：
   对于 undefined 的值，可以通过默认值来避免报错或返回 undefined。
4. 结合剩余运算符处理不定长数组：
   在解构数组时，使用剩余运算符可以收集其余的元素，灵活应对不定长的数组。

---

总结

解构赋值是 JavaScript 中的一项强大特性，能够通过简洁的语法对数组和对象进行赋值操作。无论是交换变量值、处理多维数组，还是给属性赋予别名，解构赋值都能提供极大的便利。通过合理使用解构赋值，可以使代码更加清晰、简洁，并减少冗余。

一文彻底搞懂 DOM 元素获取：动态集合 vs 静态集合 一、前言 在日常开发中，我们经常需要获取页面中的元素，比如操作列表、监听事件、动态创建节点等。 但很多人容易忽略一个关键区别——有些 DOM