​

JavaScript 高级应用第一弹_前端

Author：Gorit

Date：2021年12月5日

2021年发表博文：26/30

Gorit 带你学全栈 — JavaScript 高级应用（第一弹）

一、数组篇


目标：讲解一下开发中不常见，但是很好用的 API


1.1 展开表达式

展开数组的每一项，返回一个新数组

let arr = [1,2,3];

console.log(...arr); // [1, 2 ,3]

// 用来数组拷贝
let res = [...arr];
res.push(4);

res //  [1,2,3,4]
arr //  [1,2,3]

​​MDN 展开语法​​

1.2 返回一个新数组


除了数值的 for 循环，forEach 循环，还有哪些好用的循环处理方案


1.2.1 map

使用 map，对每一项元素进行特定操作，然后返回操作后的新数组

eg：

let arr = [1, 2, 3];

let res = arr.map(item => item + 1);
res   // [2,3,4]

1.2.2 filter

根据条件筛选出符合条件的元素，并返回一个新数组

eg:

let arr [1,2,3,4,5,6];

// 获取数组中的偶数
let res = arr.filter(item => item % 2 === 0);
res   // [2,4,6]

1.2.3 concat

合并两个或者多个数组, 不改变原数组

concat()
concat(value0)
concat(value0, value1)
concat(value0, value1, ... , valueN)
const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = array1.concat(array2);

console.log(array3);
// expected output: Array ["a", "b", "c", "d", "e", "f"]

实际应用


本地定义一个数，再从其他的地方加载一个数据，两个数据处理后，合并


1.3 索引相关问题


  2. indexOf() || lastIndexOf() （不存在，返回 -1）
  3. find() // 查找具体的元素，并且返回第一个符合条件的元素, 没找到返回 undefined
    ​​const array1 = [5, 12, 8, 130, 44];const found = array1.find(element => element > 10); console.log(found);// expected output: 12​​
  4. findIndex() // 查找第一个符合条件的元素的下标，没找到返回 -1
    ​​const array1 = [5, 12, 8, 130, 44];const isLargeNumber = (element) => element > 13; console.log(array1.findIndex(isLargeNumber));// expected output: 3​​
  5. at() // Node.js 不支持
    ​​let arr = [1,2,3];// 获取最后一个元素 arr.at(-1) 等价于 arr[arr.length - 1];​​

1.4 返回 boolean 值


  2. every() // 测试所有元素是否符合条件
    ​​let arr = [1,2,3,4,5];let isLargerThan = (num) => num > 0;function testEachElement (arr) { return arr.every(isLargerThan);} console.log(testEachElement(arr)); // 所有元素都大于 0，所以为true​​
  3. some() // 测试，只要有元素通过即可
    ​​let arr = [1,2,3,4,5];let isLargerThan1 = (num) => num > 4;function testSomeElement (arr) { return arr.some(isLargerThan1);} console.log(testSomeElement(arr)); // 有一个元素大于 4，所以为 true​​
  5. includes[] // 条件筛选，一般用于 消除多重 if 操作

includes 的值是否都包含于 数组 arr 中



​​let arr = [1,2,3];// 加载网络数据，将拿到的列表数据比对是否存在与预先定义好的数组const {data : res} = await getData("/xxx/xxx");{ "code": 200, "msg": "SUCCESS", "data": { xx: xx, list: [2,3] }}// 循环判断返回的设置是否和前端定义的相等if (res.data.list[0] === arr[1] || res.data.list[1] === arr[2]) { }// 优化if (arr.includes[res.data.list]) { // true}​​

1.5 返回一个最终结果

reduce


这个内置的函数比较特殊，他是通过回调处理每一个值，每次处理都会保存上次处理的结果，继续与下一个元素继续处理


实现对一个数字的连续操作

实现一个累加器

let res = 0;
for (const item of [1,2,3,4,5]) {
  res+=item;
}
console.log(res);

使用 reduce 实现相同的功能

let arr = [1,2,3,4,5];

// 实现一个累加器
const reducer = (preVal, curVal) => preVal + curVal;

console.log(arr.reduce(reducer));
/**
 * preVal + curVal (curVal) 是从数组下标开始的 （preVal） 是从上一次处理的结果开始的
  第一次执行，由于没有赋初始值，所以就 preVal 从 0 开始
  0 + 1 => 1
  第二次，继续使用第一次的结果
  1 + 2 = 3
  3 + 3 = 6;
  6 + 4 = 10;
  10 + 5 = 15;
**/

console.log(arr.reduce(reducer, 6));
/**
 * 有初始值了
 * 6 + 1 = 7
 * 7 + 2 = 9
 * 9 + 3 = 12
 * 12 + 4 = 16
 * 16 + 5 = 21
**/

1.6 参考资料

​​MDN Array​​

二、JS 正则表达式篇

正则表达式常用来处理 “字符串问题”，很多编程语言基本都支持 正则表达式。

为了保证学习难度，依次提升，我对 MDN 的内容进行了一个重新整理，并且使用了比较清晰的例子讲解

2.1 正则表达式的介绍

​​官方文档​​

2.2 创建正则表达式的两种方式

// 创建一个正则表达式
let re = /ab + c/;      // 方式一：该方式性能更好

let reg = new RegExp("ab + c");     // 方式二：xxx
let res = reg.test("ab + c");

console.log(res); // true


PS: 正则表达式里面空格要慎用，空格也会代表一次匹配


还有那些地方会用到正则表达式呢？


答：正则表达式是用于匹配字符串中字符组合的模式。在 JavaScript中，正则表达式也是对象。这些模式被用于 RegExp 的 exec 和 test 方法, 以及 String 的 match、matchAll、replace、search 和 split 方法。


2.3 简单模式匹配

我们指定什么字符，就会匹配什么字符

let word = /abc/;

// 字符串包含了 'abc' 可以  'ab c' 不可以

2.4 特殊字符匹配

2.4.1 ‘\’ 匹配转义字符


作用：在特殊字符之前的反斜杠表示下一个字符不是特殊字符


转义字符

含义

等价

示例

\d

匹配 0 ~ 9 之间任意数字

[0-9]

/\d/.test("a12 ") => 1

\D

匹配一个非数字字符

[^0-9]

\f

匹配一个换页符 (U+000C)

\n

匹配一个换行符 (U+000A)

\r

匹配一个回车符 (U+000D)

\s

匹配一个空白字符，包括空格、制表符、换页符和换行符. \s不匹配"​​\u180e​​

几乎用不到

\S

匹配一个非空白字符

/S\w*/.test(“foo bar”) => foor

\t

匹配一个水平制表符 (U+0009)

\v

匹配一个垂直制表符 (U+000B)

\w

配一个单字字符（字母、数字或者下划线）。等价于 ​​[A-Za-z0-9_]​​

/\w/.test(“banana”) => ‘b’ /\w/.test("$3.28") => 3

\W

匹配一个非单字字符。等价于 ​​[^A-Za-z0-9_]​​

/\W/.test(“50%”) => %

\n（少用）

在正则表达式中，它返回最后的第n个子捕获匹配的子字符串(捕获的数目以左括号计数)。

\0

匹配 NULL（U+0000）字符， 不要在这后面跟其它小数，因为 ​​\0<digits>​​ 是一个八进制转义序列。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lMyLMp1b-1639491830407)(D:\技术笔记\img\image-20211207234934005.png)]

2.4.2 ‘^’ 从头匹配


作用：匹配输入的开始。如果多行标志被设置为 true，那么也匹配换行符后紧跟的位置。（单独拿出来讲没太大意义）


/**
 * 从 A 开始匹配
 */
let eg = /^A/;

console.log(`an A is not match`.search(eg));       // -1
console.log(`An apple is matched`.search(eg));      // 0

2.4.3 ‘$’ 匹配输入结束


作用： 匹配输入的结束。如果多行标志被设置为 true，那么也匹配换行符前的位置。（同上）


/**
  * 从 t 为结尾匹配
  */
 let eg1 = /t$/;

 console.log("eat is not matched".search(eg1));     // -1
 console.log("matched is eat".search((eg1)));       // 13  最后一个字符串下标

2.4.4 ‘*’ 匹配零个或多个


作用：匹配前一个表达式 0 次或多次。等价于 ​​{0,}​​。


let eg1 = /ab*c/;
console.log(eg1.test("ac", eg1.test("abbc")));  // true true

2.4.5 '+'匹配一次或多次


作用：匹配前面一个表达式 1 次或者多次。等价于 ​​{1,}​​。


let eg2 = /ab+c/;

console.log("/ab+c/:" ,eg2.test("ac"), eg2.test("abc"), eg2.test("abbc"));    // false true true

2.4.6 ‘?’ 匹配0次或者1次


作用：匹配前面一个表达式 0 次或者 1 次。等价于 ​​{0,1}​​


let eg3 = /a?bc?/
console.log("/a?bc?: ", eg3.test("abc"), eg3.test("abb"), eg3.test("bcc"));     // true true true

2.4.7 ‘.’ 匹配任意字符，除了换行


作用：（小数点）默认匹配除换行符之外的任何单个字符。


let eg4 = /.n/;
console.log(eg4.test('na , an apple on the tree')); // true （na 不会被匹配，an，on 会被匹配

2.4.8 ‘|’ 两个选项中的一个都可以被匹配


作用： x | y ,匹配‘x’或者‘y’。


/**
  * 两者中有一个命中即可
  */
 let eg2 = /green|yellow/;
 console.log(eg2.exec("green apple is matched"));       // ['green',index: 0,input: 'green apple is matched',groups: undefined]
 console.log(eg2.exec("red apple is not matched"));     // null

2.4.9 '{x}'指定出现的次数


作用：{n}， n 是一个正整数，匹配了前面一个字符刚好出现了 n 次。


/**
  * 指定出现的次数（2次）
  */
 let eg3 = /a{2}/;
 console.log("candy is not matched".search(eg3));     // -1，小于2次，匹配不到
 console.log("caaandy".search(eg3));        // 输出下标 1（匹配最先出现的）

2.5 如何使用正则表达式

​​如何使用正则表达式​​


正则表达式可以被用于 ​​RegExp​​​ 的 ​​exec​​​ 和 ​​test (en-US)​​​ 方法以及 ​​String​​​ 的 ​​match (en-US)​​​、​​replace​​​、​​search (en-US)​​​ 和 ​​split (en-US)​​​ 方法。这些方法在 ​​JavaScript 手册​​中有详细的解释。


2.5.1 正则表达式匹配会用到的方法

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZZt5u2zH-1639491830411)(D:\技术笔记\img\image-20211208235800398.png)]

2.5.2 高级搜索


正则表达式有六个可选参数 (​​flags​​) 允许全局和不分大小写搜索等。这些参数既可以单独使用也能以任意顺序一起使用, 并且被包含在正则表达式实例中。


[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fVGPr7a0-1639491830413)(D:\技术笔记\img\image-20211209000425239.png)]

// 语法
let re = /pattern/flags;

let re = new RegExp("pattern", "flags");

想到一个题目，使用正则表达式，匹配每个单词项

let reg = /\w+/g;

let word = "an apple a day, keep the doctor away";
// 使用正则表达式，匹配每一个单词
console.log(word.match(reg));
// 匹配还会有 day, 【弊端】
console.log(word.split(" "));

2.6 案例


PS：自己写可能比较困难，但是有印象足够了，能够及时回顾过来


2.6.1 校验11位手机号


不去考虑特殊的情况，能满足大部分场景


let reg = /\d{11}/;   // 这是不是最容易想到的，但是真实的手机号码比这个复杂多很多

let reg1 = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;

2.6.2 校验邮箱地址

let reg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;

2.6.3 校验域名


啥事域名？以我的个人网站为例

​​https://www.gorit.cn​​



  2. https / http 为一个网站的域名协议，带 ‘s’ 的是开启了 SSL 的，理解为这个网站是安全的
  3. 后面的 www.gorit.cn 才是我们的域名，gorit.cn是根域名，但是 一般情况来说 www.gorit.cn 和 gorit.cn 都可以访问到我的个人网站。像 blog.gorit.cn 这样的，带前缀的就属于二级域名，依次类推

let reg = /http|https:\/\/[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(/.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+/.?/;